WordPressでお問合せフォームを作りたいカメ
学び続けるウサギ
WordPressでお問合せフォームを作りたいカメ
「WordPress（ワードプレス）ブログにお問い合わせフォームを作りたい」
「便利なプラグインを使って簡単にお問合せフォームを作りたい」
上記のように思われる方に役立つ記事になります。
今回はWordPress（ワードプレス）のプラグインのContactForm７を使用してお問い合わせフォームを作っていきたいと思います。
目次
Contact Form７でのお問合せフォームの作り方
- プラグインをインストール
- ショートコードをコピー
- ショートコードを貼り付け
- フォームを確認
- ページに表示させる
まずはWordPressのプラグインのContact Form 7をインストールしていきます。
①プラグインをインストール
プラグインのインストール方法についてはWordPressのおすすめプラグイン一覧の記事を参考にしてみてください。
②ショートコードをコピーする
追加されたお問い合わせにカーソルを乗せてコンタクトフォームをクリックします。
コンタクトフォーム1の編集をクリックしてタイトルを編集します(そのままでもOKです)。
私の場合は「お問い合わせ」と変更して保存します。
自分用のWordPressサイトなどでしたらタイトルの名前は分かりやすければなんでも良いです。
クライアントワークなどで後から自分以外の方にフォーム内容を変更してもらいたい時などは、分かりやすい名前に変えておいた方が意思疎通がしやすくて良いですね。
次に青色で表示されているショートコードをコピーします。
コピーできたらメインナビゲーションの固定ページの欄の新規追加をクリックします。
③ショートコードを新規追加した固定ページに貼り付ける
固定ページの新規追加ページにてブログのタイトルは「お問い合わせ」など見てわかるものにして、本文入力欄に先ほどコピーしたショートコードを貼り付けます。
貼り付けたら下書き保存をします。
右側に表示されてる固定ページの枠を選択してURLをクリックし、パーマリンクを「contact」と分かりやすく文字列を英字に変更して公開をクリックします。
公開確認画面で公開をクリックします。
公開できたら固定ページを表示をクリックして確認してみます。
④お問い合せフォームの表示を確認する
無事に固定ページのひとつとしてお問い合わせフォームを作ることができましたね。
宛先はデフォルトでWordPressを設定した時のメールアドレスに届く設定になっています。
Cocoon（コクーン）でのページデザインをすっきりさせる
テーマや目的にもよりますが、上記画像（WordPressテーマ：コクーン使用）のカラフルなCocoonのSNSボタン一覧などが「邪魔かな〜」と思ったのでいらない場合は消します。
「トップシェアボタン」と「ボトムシェアボタン」の固定ページのチェックマークを外して設定します。
①Cocoon設定→SNSシェア→表示ページ→固定ページのチェックマークを外す→変更をまとめて保存
②Cocoon設定→SNSフォロー→表示ページ→固定ページのチェックマークを外す→変更をまとめて保存
下の方にスクロールしていき表示ページの固定ページのチェックを外して、上部か下部にある変更をまとめて保存をクリックします。
同じ手順で「SNSフォロー」の項目も固定ページのチェックも外して変更をまとめて保存をクリックします。
確認してみるとお問い合せフォームがシンプルになりスッキリしましたね。
投稿者名を非表示にする
送信ボタンの右下にある鉛筆マークの投稿者名を消したい場合は、管理画面左側のメニューバーのCocoon設定→「本文」のタブを選んで下の方へスクロールし、投稿情報表示設定 ＞ 投稿関連情報にある、投稿者名の表示のチェックマークを外して変更をまとめて保存をクリックしてあげます。
投稿日や更新日も非表示にすることができます。
お問い合せフォームのページ（固定ページ）自体はできましたが、このままだと固定ページへのリンク自体がホームページにまだなくて表示されていない状態なのでメニューを作りお問い合わせフォームに遷移できるようにします。
⑤メニューを作りホームページにリンクを表示させる
メニューを表示させる位置を決める
メニュー名を作成してメニューを表示させるメニューの位置を選択してメニューを作成をクリックします。
今回はホームページの一番下の方のフッターエリアに表示させたいと思います。
お問い合せフォームの固定ページをメニューに追加する
そして左側のメニュー項目の選択欄から先ほど作った固定ページの「お問い合わせ」にチェックマークを入れてメニューに追加をクリックします（ない場合はすべて表示の項目から表示させます）。
メニュー構造に「固定ページのお問い合わせ」が追加されたのでメニューを保存します。
早速Webページ（ホームページ）を見てみるとフッターエリアにお問い合わせが表示されていますね。
これでお問い合わせのメニュー（リンク）をクリックすると、先ほど作ったお問い合わせの固定ページへ飛ぶことができるようになりました。
以上で設定は終了です。
PC版でフッターの「お問い合わせ」のリンクを中央に寄せたい場合は、Cocoon設定→フッター→フッター表示タイプでメニュー＆クレジットを（中央揃え）を選んであげます。
他にもそれぞれお問い合せフォーム自体に、細かい設定をすることもできるので見ていきたいと思います。
Contact Form7の４つの設定タブ
- フォーム
- メール
- メッセージ
- その他の設定
Contact Form7では、「フォーム」「メール」「メッセージ（送信時などの文言変更）」「その他の設定」の４つのタブがありそれぞれ細かく設定することができますね。
①フォームの設定
お問合せフォームの設定を変更したい場合は<label> </label>の中を変えることで変更できます。
Contact Form７でのルールとして[]（角括弧）で囲われている部分に値が設定されているので、表示を変えたい時は[]の中を見て変えたりすることができます。
上部にある青枠で囲われているそれぞれの項目をクリックすることでそれぞれのテンプレートを編集でき自由に挿入できます。
すでに自分でコーディングしてデザインしている場合は、インプットタグなどの代わりとしてそれぞれ青枠の項目に変えてあげます。
項目名のすぐ右側に*（アスタリスク・上記参考画像で赤丸で囲まれた箇所）を入れると必須項目にすることもできます。
必須項目は入力されていないと送信できずエラー表示がでるようになります。
フォームタグ生成
それぞれのテンプレートの項目タイプから「必須項目」にチェックを入れ名前をyour_emailなどに変えてタグを挿入をクリックし生成することもできます。
デフォルト値にテキストを入力し、下部のチェックボックスにチェックを入れることでプレースホルダーを作成することもできます。
テキストエリアにプレースホルダーを設定
プレースホルダーで最初から例文などがあったほうがぱっと見でわかりやすいですね。
②メールの設定
- メール・・・・・WordPressサイトの管理者（自分）への設定
- メール（２）・・お客様（WordPressサイトへ問い合わせた方）への設定
お問い合わせのメールが送信された時に自分への通知メールとお問い合わせした方へ送られる確認メールを設定できます。
メールを送信→通知（メール）& 確認（メール（２））
メールとメール（２）がありそれぞれサイト管理者（自分）、問い合わせてくれた方（ユーザー / お客様）に向けたメール設定をすることができます。
少しややこしいですが、例えばチケットなどを申し込むと「受付しました。〜〜お待ち下さい。」などと申込と同時にメールが来るのがメール（２）で確認メールです。
なのでメッセージ本文などはそのWebサイトにあった文言に変えると良いですね。
「追加ヘッダー」は返信メールを受けて返信ボタンを押された時にメールアドレスがセットされるものなので削除して空欄でもOKです。
送信先（通知を受けたいメールアドレス）・送信元（タグでお客様が入力してくれた値など）・題名（お問い合わせのメールがありました。などの文言変更OK）などを設定することができます。
メールの設定パネルの上部あたりに、使用できる[]で囲われているメールタグの（ [your-name] や [your-email] など）の項目が表示されているので、本文に挿入しながらカスタマイズしそれぞれ変更できます。
お客様（ユーザー）に向けた自動返信メールの設定
メール設定の画面を下の方にスクロールするとメール（２）のチェックボックスが出てくるので、チェックすることでパネルを展開し設定できるようになります。
送信先（そのままでOK）・送信元・題名・本文（お問い合わせありがとうございます。など）設定できます。
③メッセージの設定
メッセージでは、さまざまな状況で入力されて表示されるメッセージを変更することができます。
「必須の項目を」を追加してみました
平文をメッセージ入力欄の中に入力して保存することで無事に適用されました。
| 状況一覧 | |
|---|---|
| メッセージが正常に送信された | ファイルのアップロードがPHPのエラーにより失敗している |
| メッセージの送信に失敗した | 入力された日付の形式が正しくない |
| 入力内容に不備が見つかった | 日付が最小制約日より小さい |
| 送信がスパムと見なされた | 日付が最大制約日より大きい |
| 承諾が必要な項目が承諾されていない | 入力された数値の形式が正しくない |
| 入力必須の項目が入力されていない | 数値が最小制約値より小さい |
| ユーザー入力が最大許容文字数を超える項目がある | 数値が最大制約値より大きい |
| ユーザー入力が最小許容文字数に満たない項目がある | クイズに対する正しい答えが入力されなかった |
| ファイルのアップロードが何らかの理由により失敗している | 入力されたメールアドレスの形式が正しくない |
| アップロードされたファイルが許可されたファイル形式に適合しない | 入力されたURLの形式が正しくない |
| アップロードされたファイルが大きすぎる | 入力された電話番号の形式が正しくない |
上記表のような状況になった時に、表示されるデフォルトのメッセージを変更することができて便利な機能ですね。
④その他の設定
その他の設定では、カスタマイズのためのコードを追加することができます。
あまり使うことはなさそうですね。
コンタクトフォーム（Contact form7）のデザインを変更したい場合はCSSを記述し、Contact Form7専用のクラス属性などを使ってデザインを変えることができます。
文字色、余白、送信ボタンの大きさなどを簡単に変えることができますね。
コンタクトフォーム全体のデザインを変更
/* コンタクトフォーム(Contact Form７)全体にスタイルを適用 */
.wpcf7 {
}コンタクトフォーム全体の背景色などを変更したい場合は、上記のwpcf7というclass属性値を子テーマのスタイルシートもしくは、外観→カスタマイズ→追加CSSなどにセレクタとして指定し、変更したいプロパティ・プロパティ値をそれぞれ指定してあげます。
.wpcf7 {
background-color: #f7efd7; /* 背景色 */
color: #857a56; /* 文字色 */
border: 5px solid #bdb6a0; /* 枠線の太さ 形状 色 */
padding: 20px; /* 余白調整（上下左右） */
}上述のようにCSSを適用すると下記のようにコンタクトフォーム全体のデザインを変更することができます。
左 :標準→右:スタイル指定
コンタクトフォームのフィールドなどを変更
それぞれコンタクトフォームの中のフィールドなどのみを変更したい場合は、下記のセレクタを使用します。
.wpcf7 input[type="text"], /* テキスト入力フィールド */
.wpcf7 input[type="email"], /* メールアドレス入力フィールド */
.wpcf7 textarea, /* 複数行テキスト入力エリア */
.wpcf7 input[type="submit"] /* ボタン入力フィールド */
{
background-color: #faf8f2; /* 背景色 */
}一つのフィールドだけ変更
一つのフィールドだけ変更したい場合は、id（#〜）もしくはclass（.〜）をフィールドにつけてあげて変更します。
#form_btn {
background-color: #dbc07b; /* 背景色 */
color: #fcf6e6; /* 文字色 */
font-size: 100%; /* 文字の大きさ */
padding: 15px;/* 余白調整 */
}id名などをつけたらあとは上述のように同じくプロパティを指定してCSSを記述してあげます。
送信ボタンを中央寄せにしたい
「ボタンの大きさを調整してから中央にちゃんとボタンが表示されない..orz…」ということがあったので解決方法を記述しておきます。
送信ボタンを<div>で囲んでclass属性などで中央寄せに設定し、ローダー（クリックすると送信時などにぐるぐる回るアイコン）を非表示などにすることで送信ボタンを中央寄せにできます。
ローダー（wpcf7-spinner）
①ローダーを非表示にする場合
/* 送信ボタンを囲んで中央寄せにする */
.center {
text-align: center;
}
/* ローダーを非表示にする */
.wpcf7-spinner{
display:none;
}②ローダーをブロック要素にする場合
/* 送信ボタンを囲んで中央寄せにする */
.center {
text-align: center;
}
/* ローダーをブロック要素にして改行する */
.wpcf7-spinner{
display:block;
}これでボタンを中央寄せにすることができました。
左:before → 右:after
応答メッセージのスタイルを変更
/* 応答メッセージのスタイルを指定 */
.wpcf7-response-output {
}応答メッセージのデザインを変えたい場合は、上記のクラスにスタイルを適用してあげます。
応答メッセージの表示される場所を変更
プレースホルダーの[response]をフォーム内の好きな箇所に設置（複数設置可）することで送信後に表示される応答メッセージの場所を変えることができます。
他にもよくわからなくなったらブラウザでソースを確認しながら試行錯誤すると理解しやすいです。
スパム対策の設定
GoogleサービスのreCAPTCHA(v3)と連携することもできるので、迷惑メール対策のプラグイン（Akismetなど）を入れてない場合は設定してあげましょう。
Googleアカウントを使用して作るのでアカウントをお持ちでない方はグーグルアナリティクスとサーチコンソールの設定方法の記事を参考にしてみてください。
【かんたん】グーグルアナリティクスとサーチコンソールの設定方法【WordPress】
Googleアカウントを登録してからこちらの「reCAPTCHAを設定」にて設定することができます。
reCAPTCHAを設定する手順
- バージョン（v3）を選択
- ドメインの追加でWebサイトであるWordPressのURLを登録
- サイトキー（SITE KEY）とシークレットキー（SECRET KEY）を取得
詳しいやり方はContact Form7でのreCAPTCHA設定方法の記事を参考にしてみてください。
【WordPress】Contact Form7でのreCAPTCHA設定方法
こちらを設定することで簡単にスパムボットを遮断することができるようになりますね。
まとめ：Contact Form７でラクラク・お問い合わせフォーム使おう！
今回はWordPress（ワードプレス）でContact Form7（コンタクトフォーム７）のプラグインを使ってお問合せフォームを作る方法をご紹介してきました。
プログラミング言語を使わなくてもプラグインを使えば簡単にWordPressサイトにてお問合せフォームができるところが便利で良いですね。
少しでも参考になりましたら幸いです。
お問い合わせフォームを作ったら「個人情報の扱い方」や「Googleアドセンスを使う」場合などに明記する為のプライバシーポリシーや、アフィリエイトをする場合は免責事項なども必須なので固定ページを作りましょう。
WordPressに元々ある「プライバシーポリシー」の固定ページを編集したり、設定→プライバシーの設定ページから新しく生成したり、すでに固定ページに作ったものがあればその固定ページを選択して変更することもできます。
プライバシー設定
設定→プライバシーのポリシーガイドからテキストテンプレートをコピーして編集することもできます。
参考 【雛形（ひな形）あり】プライバシーポリシーと免責事項の作り方エックスサーバー
上記のエックスサーバーのサイト記事がわかりやすいので参考にしてみてください。
