WEBサイト制作をしていると必ずと言っていいほど必要になるのが「お問い合わせフォーム」の設置。「僕のサイトにちょっとカッコイイコンタクトフォームをサクッと付けてほしいんだけど」と我が旦那様に頼まれて色々探してみた結果、最近流行りのフラットデザインのクールなコンタクトフォームがほんの5分でサクッと作れちゃう無料のWEBサービスを見つけたのでご紹介しようと思います^^ やりかたも非常に簡単なのでぜひ使ってみてください。

Better Contact Form

sponsored link

Better Contact Formの概要

公式サイト: http://bettercontactform.com/

一般的な問い合わせフォームの言語、必要な入力項目、配色とレイアウトの設定、問い合わせメールの送信先をオンラインで設定し、取得したコードをサイトのHTMLに貼りつけるだけで問い合わせフォームが設置できます。PHPの知識とか全然いらないです。スパム対策済みレスポンシブデザイン対応というありがたい機能もしっかりついていますよ。以下に具体的な使い方を図解します。

※上のリンクからサイトにアクセスすると雰囲気がよりリアルに分かると思います。

 

問い合わせフォームの作成と設置

サイトにアクセスすると以下のようなページが表示されますのでCreate Your Contact Formボタンをクリックします。

Better Contact Form公式サイト

 

 

以下のように問い合わせフォームを作成するページが表示されるので、自分のサイトのニーズに合わせて設定していってください。全部設定できたらSave Formをクリックします。

 

Better Contact Form設定

※言語は日本語も選択できますが、「おメールアドレス」みたいな感じで今のところ翻訳がちょっと面白いことになっている(?)ので英語のままの方がいいんじゃないかな?と思います^^; ウチの旦那のサイトはロシア語なんで問題ありませんでした(笑)

 

設定を保存するとHTMLに貼りつけるためのコードが表示されます。

Copy Codeボタンをクリックしてコピーし、自分のサイトのHTMLの一番最後(</body>の手前)に貼りつけます。このコンタクトフォームを表示させたいページのHTML全てに貼りつけてください。フッター用の共通HTMLがある場合はそこに貼りつけると一か所で済みそうですね^^

「後で編集したいかも」と思う場合は、アカウントを作成すると設定が保存されるので便利です。

Better Contact Formコード

 

というわけで、簡単に設置できるお洒落なコンタクトフォームBetter Contact Formのご紹介でした。