【Contact Form 7】お問い合わせフォームを簡単実装する実務の話。

contact_form_7

コーポレートサイトを作るときに必ず求められるのが「お問い合わせフォーム」ですが、フロントエンドの人がPHPでプログラムを組むのはとても大変なこと。簡易的なメールフォームなら、Wordpressの「Contact Form 7」でサクッと簡単実装しちゃいましょう。

この記事でつくるメールフォーム

例があるとわかりやすいと思うので、今回は次のようなシンプルなメールフォームをつくってみます!

完成イメージ

HTMLコード

情的HTMLをWordpressで表示できるようにする

まずはhtmlファイルをphpファイルに変換します。いわゆるワードプレス化ですね。とは言え、Contact Form 7でお問い合わせフォームを設置することだけが目的ならそんなに厳密にやらなくても大丈夫。サイトがきちんと表示される所までやればOKです!初めての方は下記の記事が参考になるかも。

関連記事

HTMLで作成された既存のウェブサイトをオリジナルのテーマ(テンプレート)にする手順。専門的な難しい用語は使わず、できるだけシンプルにわかりやすく説明した記事です。デザイナーやコーダーの方々が初めてWordpress構築の依頼を受けたとき[…]

Contact Form 7をダウンロード

ダッシュボードの「プラグイン」から「新規追加」→「Contact Form 7」で検索してダウンロード、有効化をします。すると、ダッシュボードに「お問い合わせ」というメニューが追加されるので開いてみましょう。デフォルトで「コンタクトフォーム1」というものができていると思いますが、このデフォルトのコンタクトフォーム1は使わないので削除してOK◎。

contact_form_7

フォームのテンプレートをつくる

メニューからパーツを選んでフォームタグを生成する

つくりたいフォームに合わせてパーツを選び、名前やデフォルト値、任意のクラス名などを入れて「タグを挿入」をクリックします。プレーンテキストなら「テキスト」のボタンを、電話番号なら「電話番号」のボタンを選んでパーツを生成します。見たままに操作すれば良いので簡単ですよね!

フォームタグ生成画面の解説

▼プレーンテキストのinputをつくる画面。各項目の説明は下の表を参照してください。テキスト以外のフォームタグをつくるときも大体同じなので割愛しますね〜。ちなみに、送信ボタンのタグを生成するときは、「ラベル」という項目に送信ボタンのテキスト(例:送信)を入力します。

生成されるフォームタグの解説

項目タイプ
チェックを入れると必須項目になり、”required”のコードが出力されるようになります。
名前
text-***など、自動的に出てくるのでそのまま使ってOK。ただし他のパーツと被らないように。
デフォルト値
「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、placeholderの値として反映されます。
Akismet
スパム対策のプラグインAkismetと連携するときにチェックを入れます。
ID属性
項目に任意のID名を追加できます。
class属性
項目に任意のclass名を追加できます。例では”input”というクラス名をつけています。

各項目を入力して「タグを挿入」すると、下の画像▼のようなフォームタグが出来上がります。ちなみに、一度つくると編集できないので変更したい時はつくり直してくださいね!

サンプルで生成したフォームタグ

サンプルのメールフォームでは、下の画像のように6つのフォームタグを生成しました。ここで作成した「text-***」や「email-***」という名前は、次のメール設定でメールタグとして使うので必ず別々の番号や名前で登録するようにしてくださいね!

HTMLとフォームタグを組み合わせる

フォームタグが完成したら、それぞれのタグをHTMLに組み込んでいきます。私はいつもSublime Textで編集してからワードプレスの方にコピペするようにしてます。その方がバックアップもとれて安心。下の画像のようにコードを貼り付けて、最後に「保存」をしたら見た目は完成です!

フォームテンプレート作成画面

HTMLにフォームタグを組み込んだコード

サンプルフォームのCSS

メールの設定をする

お問い合わせフォームからのメールの送信先や内容、自動返信メールの設定をします。ここのメール設定画面では、下の画像のように[ フォームタグの名前 ]という形でメールタグを使用すると、フォームに入力された値をメール内容などに反映することができます。

メールタグ解説

お問い合わせメール送信先(管理者宛)の設定

「送信先」はお問い合わせを受け付ける「管理者」のメールアドレス。送信元はサイト名・お問い合わせ用のメールアドレスなどで設定。ここのアドレスは、ワードプレスを設置しているサイトのドメインと同じものを入力しないとエラーが出ますが、エラーが出ている状態でも問題なく送信できます。題名やメッセージ本文はお好きなように変更してくださいね〜。

メール設定画面

自動返信メールの設定

お問い合わせをしてくれた人へ、お問い合わせ内容の確認として送る自動返信メールを設定したい時は、「メール(2)」という部分を使います。こちらも内容はお好きなように変更できます。ここで注意したいのは、送信先に設定するメールタグ[email-***]は、フォームテンプレート作成時に入力必須項目(*)にしていないと「不正なメールボックス構文が使用されています。」というエラーが出ます。メールアドレスは必ず入力されていないと自動返信メールの送信先がわからないので、当たり前といえば当たり前ですね。。

メール設定画面

お問い合わせフォームを表示する

「お問い合わせ」の固定ページをつくってショートコードをコピペするだけなのでとっても簡単です。

固定ページ新規追加画面

ショートコードは、フォーム一覧画面▼やフォーム編集画面の上部に表示されています。

contact_form_7

トップページに表示したい場合など

LPのようなペライチのサイトでコンタクトフォームをつかう場合は、home.phpやfront-page.phpなどに直接書き込んだ方が早いですね。フォームを表示したい場所に下のように記述すればOKです!

はい、これで完成!あとはテスト送信して問題なく送れるか、表示されてるかをチェックしましょう~。文字化けしてしまうときは、その箇所をダブルクオテーション” “で囲むと直ったりしますよ!

WordPressで企業ホームページやメディアサイトを作成するとき、お問い合わせフォームの存在は欠かせません。WordP…

コピペで簡単!その他のテンプレート

チェックボックスやラジオボタン、セレクトなどをCSSでカスタマイズをしたい方へ、いくつかテンプレートを作ってみたので次の記事でコードを参考にしてみてください!

関連記事

Contact Form 7(コンタクトフォーム7)でお問い合わせページを作るとき、もっと簡単に、オシャレにカスタマイズできるようにテンプレートを作ってみました。お問い合わせフォームのカスタマイズって、慣れていないと結構時間がかかって面倒[…]

Contact Form 7 お問い合わせフォームカスタマイズ用テンプレート集
関連記事

このページについて 当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[3]のデモページ[…]

コンタクトフォーム7 お問い合わせフォームテンプレート デモページ