- 「Contact Form 7」で基本的な問い合わせフォームを作りたい！
- よくわからないからコピペしたい！
- スパム対策もしっかり行いたい！
Webサイトを立ち上げて閲覧数が増えてくると、意外と問い合わせも増えます。
- このページの、これについて詳しく教えてほしい
- このページの、ここがわからない
- 個別にサポート（コンサル）してくれないか？
- 雑誌などの特集で使わせてくれないか？
あなたのWebサイトが専門的であればあるほど、問い合わせは増えます。他に聞ける人がいないので、みんな困っているわけです。
読者からの問い合わせは、要望や希望、困りごとがほとんど。つまり、あなたにとって満たすべき「需要」を教えてくれる大事な情報源です。
Webサイトを作ったら、お問い合わせフォームを必ず設置しましょう。
今回は、Contact Form 7 をカスタマイズして、スパム対策も含めた問い合わせフォームの作り方を徹底解説します！
Contact Form7の基本的な使い方は、「【初級編】WordPressでお問い合わせフォームをつくる！Contact Form7の使い方を画像付きで解説」で解説しています。これから始めて使う方は、先にそちらをご覧ください。
お問い合わせフォームに必要な情報
Contact Form 7 のカスタマイズを行う前に、お問い合わせフォームに必要な情報を確認しましょう。
今回の記事では、以下の情報を入力してもらうことを想定して、カスタマイズ方法を解説していきます。
- お名前（必須）
- メールアドレス（必須）
- 電話番号（任意）
- URL（任意）
- 問い合わせ内容の選択（必須）
- 問い合わせ内容の詳細（必須）
上記の6項目でカスタマイズ方法を解説しますが、不要な項目は削除してもOKです。
ユーザー目線で考えれば、入力する項目が多いと煩わしくなります。あなたも経験したことがあるでしょう。
結果、ユーザーが途中で離脱してしまい、お問い合わせ内容が送信されなくなる可能性があります。
大切なことは、あなたにとって必要な情報だけをお問い合わせフォームで入力してもらうということです。
Contact Form 7 でお問い合わせフォームを作る方法
これから、以下の内容を進めていきます。画像をたくさん使ってContact Form 7 のカスタマイズ・使い方を解説していきますので、一緒に進めていきましょう！
- Contact Form 7 で、新規追加からフォームを追加する
- フォームのテンプレートをコピーし、あなたの問い合わせフォームの入力欄に貼り付ける
- 必要に応じて、項目を削除する
- Contact Form 7 の内部設定（メールの送信に関するの設定など）を行う
- CSSをコピーし、あなたのWordPressの「追加CSS」欄に貼る
- 「固定ページ」で問い合わせページを作成する
- 公開画面を確認し、カスタマイズが想定通りできているか、送信できるかどうかを確認する
手順1. Contact Form 7 で、新規追加からフォームを追加する
Contact Form 7 プラグインがインストール済みであることを前提に解説します。
メニューの「お問い合わせ」をクリックし、画面上部の「新規追加」をクリックします。
新しいお問い合わせフォームを作るための編集画面が表示されます。
タイトルはわかりやすいように「お問い合わせ」などのようにしてください。
フォームの入力欄は、コピペしますので全て消します。
手順2. フォームのテンプレートをコピーし、あなたの問い合わせフォームの入力欄に貼り付ける
まず、以下のテンプレートをコピーしましょう。
弊社にご興味・関心をお寄せいただきありがとうございます。お問い合わせは、以下の問い合わせフォームよりお願いいたします。
※ご入力いただきました内容の確認メールをお送りします。
※弊社からの連絡は通常メールにて行いますので、弊社ドメイン（@example.com）からのメールを受け取れるよう、事前に設定をお願いいたします。
<strong>1.お名前</strong><span class="required">必須</span>
[text* your-name akismet:author placeholder"例：佐藤 次郎"]</p>
<strong>2.メールアドレス</strong><span class="required">必須</span>
[email* your-email akismet:author_email placeholder"例：sample@example.com"] </p>
<strong>3.電話番号</strong><span class="option">任意</span>
[tel your-tel placeholder"例：090-1234-5678"] </p>
<strong>4.URL</strong><span class="option">任意</span>
[url your-url akismet:author_url placeholder"例：https:/example.com"] </p>
<strong>5.お問い合わせ内容の選択</strong><span class="required">必須</span>
[radio your-choices use_label_element"掲載内容について" "取材" "そのほか"]</p>
<strong>6.お問い合わせ内容の詳細</strong><span class="required">必須</span> [textarea* your-message x8 placeholder "例：掲載内容について、お聞きしたいことがあります。"] </p> ※確認画面は表示されませんので、内容を確認し送信してください。 ※送信に数秒かかる場合があります。画面が切り替わるまでお待ちください。 [submit "内容を確認して送信"]
コピーできたら、あなたのWordPressの問い合わせフォームの入力欄に貼り付けて、いったん保存します。
貼り付けは、キーボードの「Ctrl」を押しながら「V」ですね。
貼り付けたテンプレートの解説
「 Contact Form 7 」のフォームタグ
テンプレートではフォームタグを使っています。このフォームタグは、タイプ、名前、オプション、値の4つの要素に分けることができます。
例えば「テキスト入力フォーム」で「名前」を入力するフォームを作る場合、
- タイプ（必須項目）：出力するフォームのタイプを指定します。アスタリスク（*）は必須項目を示しています。
- 名前（必須項目）：自分で決められるフォームの名前です。スペースは使えませんが、自由に設定できます。
- オプション（任意項目）：上記のサンプルでは「akismet:author」「placeholder”例：佐藤一郎”」の２つのオプションを指定しています。
※ akismet については、後ほど解説します。
冒頭部分
弊社にご興味・関心をお寄せいただきありがとうございます。お問い合わせは、以下の問い合わせフォームよりお願いいたします。 ※ご入力いただきました内容の確認メールをお送りします。 ※弊社からの連絡は通常メールにて行いますので、弊社ドメイン（@example.com）からのメールを受け取れるよう、事前に設定をお願いいたします。
個人の方からの問い合わせは、いまだに携帯電話のアドレスから送られてくることが多いです。携帯電話のアドレスは、登録されたドメイン以外を受け付けない設定になっている場合があるため、「弊社ドメイン（@example.com）からのメールを受け取れるよう、事前に設定をお願いいたします。」のように設定を促しましょう。
Contact Form 7 の フォームタグ「タイプ」要素について
Contact Form 7 は、基本のフォームが「テキスト、テキストエリア、メールアドレス、URL、電話番号、数値、日付など」13種類あります。
例えば、メールアドレスのフォームに平仮名を入力したり、電話番号に数字以外の文字を入力するとエラーが表示されます。
必要な情報をきちんと入力してもらえるように、対応した「タイプ」を使いましょう。
Contact Form 7 の フォームタグ「名前」要素について
問い合わせフォームは、6つのタイプを使用しています。会員登録フォームなどを作ると、もっと数が増えます。
送信されるメールの設定でも使いますので、「your-name」「your-url」「your-tel」など、１つ１つにきちんと名前を付けて区別しましょう。
Contact Form 7 の フォームタグ「オプション」要素の【 akismet 】について
「Akismet」は、スパムフィルタリングサービスの名前です。簡単に言えば、スパムを取り除いてくれるありがたいサービスです。
Akismet プラグインが有効化されていれば、Contact Form 7 でもその機能を使うことができます。
Akismet プラグイン や、無料のAPIキーの取得については、「WordPressのスパム対策ならまずこれ！プラグイン「Akismet Anti-Spam」の設定方法を解説！」で解説しています。
Contact Form 7 のオプションとして使える Akismet は、「名前」「メールアドレス」「URL」の3種類です。
- 名前 ： [ text your-name akismet:author ]
- メール ： [ email your-email akismet:author_email ]
- URL ： [ url your-url akismet:author_url ]
Akismet が設定されたフォームは、フォーム送信時に Akismet にデータを送信し、スパムかどうかを確認します。スパムの場合、「メッセージの送信に失敗しました」のように表示され、メール送信は行われません。
名前、メール、URLの3項目には必ず設定しましょう。
手順3. 必要に応じて、項目を削除する
今回準備したサンプルには、6つのフォームが含まれています。
もし、あなたが必要としない項目が含まれていれば、削除してください。
各項目のあたまに番号を振っている場合、その番号も修正してくださいね。
手順4. Contact Form 7 の内部設定（メールの送信に関するの設定など）を行う
この項目は重要なので、しっかり確認して設定しましょう。
フォームを入力した方への確認メールを設定する
「Contact Form 7 の フォームタグ「名前」要素について」で、１つ１つに名前を付けましたが、ここで使うことになります。
「メールタブ」をクリックすると、「メール」の設定画面が表示されます。以下のように設定していきます。
- 送信先
メールアドレスに該当するメールタグをコピペします。この記事の例では、[your-email]です。 - 送信元
問い合わせした人へメールが送信されますが、その送信元アドレスを設定します。「表示名<実際のアドレス>」のように入力します。
※WordPressと同じドメインである必要があります。 - 題名
問い合わせした人へのメールのタイトル（題名）です。 - 追加ヘッダー
例えば、「送信元」とは違うメールアドレスに返信して欲しい時は「Reply-To:test@example.com」のように入力します。
※WordPressと違うドメインでも問題ありません。
- メッセージ本文
[your-name]さま お問い合わせいただきありがとうございます。 以下の内容で送信されました。 —–お問い合わせ内容—– お名前（必須）:[your-name]さま メールアドレス（必須）：[your-email] 電話番号（任意）：[your-tel] URL（任意）：[your-url] お問い合わせ内容の選択（必須）：[your-choices] お問い合わせ内容の詳細（必須）：[your-message] —– 内容を確認し、３営業日以内に担当者より折り返し連絡いたします。 ※このメールは自動送信です。 - ファイル添付
例えば、資料請求フォームを作って自動的に資料を送りたい時は、ここにファイルを添付しておきます。問い合わせフォームでは使用しません。
最後に、忘れずに保存ボタンを押してください！
あなた宛てのメールを設定する
あなたにも通知が行くよう、あなた宛てのメールをセットします。
まず、「メール（２）を使用」にチェックを入れてください。
- 送信先
あなたのメールアドレスを入力します。 - 送信元
あなたのメールアドレスを入力します。※WordPressと同じドメインである必要があります。 - 題名
あなたへのメールのタイトル（題名）です。 - 追加ヘッダー
問い合わせした方に返信できるよう「 Reply-To: [your-email] 」を必ず入力します。例えば、対応履歴を誰かに共有したい場合は、「CC:test@example.com」のように入力します。（BCCでもOK） - メッセージ本文
以下のように問い合わせがあり、自動返信しています。 ３営業日以内の対応が必要です。 —– [your-name]さま お問い合わせいただきありがとうございます。 以下の内容で送信されました。 —–お問い合わせ内容—– お名前（必須）:[your-name]さま メールアドレス（必須）：[your-email] 電話番号（任意）：[your-tel] URL（任意）：[your-url] お問い合わせ内容の選択（必須）：[your-choices] お問い合わせ内容の詳細（必須）：[your-message] —– 内容を確認し、３営業日以内に担当者より折り返し連絡いたします。 ※このメールは自動送信です。
やはり最後に、忘れずに保存ボタンを押してください！
送信テストは最後に行います。
手順5. CSSをコピーし、あなたのWordPressの「追加CSS」欄に貼る
今回の例では、入力フォームの「必須」「任意」という言葉にデザインを入れています。
このデザイン（CSS）を登録しましょう。
WordPressのメニュー > 外観 > カスタマイズ をクリックします。
数秒かかって、左側のようなメニューが表示されますので、「追加CSS」をクリックします。
CSSの入力欄が表示されますので、以下のCSSをコピペし、上部の「公開」ボタンをクリックします。
コピペ用CSSはこちらです。
.required, .option {
font-weight: bold;
color: #fff;
border-radius: 30px;
margin: 0 5px;
font-size: 80%;
padding: 1px 10px;
}
.required {
background: #FFB74D;
}
.option {
background: #00a5f7;
}
手順6. 「固定ページ」で問い合わせページを作成する
まず、作成したお問い合わせフォームの「ショートコード」をコピーしましょう。
WordPressのメニュー > お問い合わせ > コンタクトフォーム の順にクリックし、先ほど作成したお問い合わせフォームのショートコードをコピーします。
次に、お問い合わせフォームを表示するページを作成しましょう。
WordPressのメニュー > 固定ページ > 新規追加 をクリックし、以下のように作成します。
※すでにお問い合わせページが作成されている場合は、ページ一覧で「編集」をクリックします。
- 左側メニューの固定ページ ＞ 新規追加をクリックします。
- タイトルは「お問い合わせ」などにしてください。
- タイトル入力後、マウスで別の場所をクリックするとパーマリンクが表示されますので、「contact」などとしてください。
- さきほどコピーしたショートコードを、本文に貼り付けてください。
- 最後に公開（更新）をクリックします。
これでお問い合わせページは完成です。
手順7. 公開画面を確認し、カスタマイズが想定通りできているか、送信できるかどうかを確認する
公開画面の確認
お問い合わせページを作成したら「プレビュー（以下の画像では「変更をプレビュー」）」をクリックすると、別のタブで公開画面を表示することができます。
以下のように、「必須」や「任意」にデザインが入っていれば、CSSの設定は問題ありません。
2-7-2. 送信テスト
次に、フォームに入力し、テスト送信してみましょう。
- 全ての項目を入力し、送信できるか。
- 必須項目を入力して、任意項目を入力しない状態で送信できるか。
- 全てを入力せずに「内容を確認して送信」ボタンをクリックし、必須項目のみエラーが出るか。
※「お問い合わせ内容の選択」は仕様上、選択していなくてもエラーがでません。 - メールアドレスやURL、電話番号に、他の情報を入力してエラーがでるか。
- 問い合わせした人に送信される自動返信メールは届いているか。誤字脱字、間違いがないか。
- あなたに送信されるメールは届いているか。誤字脱字、間違いがないか。
何度かテストし、問題がないかどうか確認しましょう。
まとめ
問題なく設定できたでしょうか？
Webサイトは、基本的にあなたから読者に対して一方的に情報を伝えるだけなのですが、お問い合わせフォームを設置することによって双方向のやり取りができるようになります。
あなたにとって満たすべき「需要」を教えてくれる大事な情報源ですので、しっかり準備して公開しましょう。
なお「問い合わせしたのに返信がない」ことは、読者の満足度を大幅に下げる結果になります。「問い合わせがあったら必ず返信する」というルールは、何が何でも守るようにしましょうね！
今回紹介したデザイン以外のデザインも「【コピペOK】Contact Form7のデザイン！プロ級のフォームが5分で作れる」で紹介しています。あわせてご確認ください。