【Contact Form7】お問合せフォームの作り方【WordPress】

上記のように思われる方に役立つ記事になります。

今回はWordPress（ワードプレス）のプラグインのContactForm７を使用してお問い合わせフォームを作っていきたいと思います。

Contact Form７でのお問合せフォームの作り方

まずはWordPressのプラグインのContact Form 7をインストールしていきます。

メニューバーのプラグイン → 新規追加で Contact form７をインストールし有効化します。

プラグインのインストール方法はWordPressのおすすめプラグイン一覧の記事を参考にしてみてください。

インストールして有効化できたら左側のメニューバーにお問い合わせという項目が追加されてますね。

お問い合わせにカーソルを乗せてコンタクトフォームをクリックします。

コンタクトフォーム1の編集をクリックしてタイトルを編集します。

タイトルを「お問い合わせ」などと変更して保存します。

次に青色で表示されているショートコードをコピーします。

コピーできたらメニューバーの固定ページの欄の新規追加をクリックします。

新規追加ページにてブログのタイトルは「お問い合わせ」など見てわかるものにして、本文入力欄に先ほどコピーしたショートコードを貼り付けます。

貼り付けたら下書き保存をします。

右側に表示されてる固定ページの枠を選択してURLをクリックし、パーマリンクを「contact」と分かりやすく文字列を英字に変更して公開をクリックします。

公開確認画面で公開をクリックします。

公開できたら固定ページを表示をクリックして確認してみます。

お問い合わせフォームを作ることができました。

宛先はWordPressを設定した時のメールアドレスに届く設定になっています。

テーマにもよりますが、上記画像のカラフルなCocoonのSNSボタン一覧などが「邪魔かな〜」と思ったのでいらない場合は消します。

トップシェアボタンとボトムシェアボタンの固定ページのチェックマークを外して設定します。

左側のメニューバーのCocoon設定を選択し「SNSシェア」の項目をクリックします。

下の方にスクロールしていき表示ページの固定ページのチェックを外して上部か下部にある変更をまとめて保存をクリックします。

同じ手順で「SNSフォロー」の項目も固定ページのチェックも外して変更をまとめて保存をクリックします。

確認してみるとお問い合せフォームがシンプルになりスッキリしましたね。

お問い合せフォームのページ自体はできましたが、このままだと固定ページ自体がページに表示されないのでメニューを作ります。

メニューバーの外観からメニューを選択します。

メニュー名を作成してメニューを表示したい位置を選択してメニューを作成をクリックします。

今回は下の方のフッターエリアに表示させたいと思います。

そして左側の「お問い合わせ」にチェックマークを入れてメニューに追加をクリックします（ない場合は全て表示の項目から表示させます）。

メニュー構造に固定ページのお問い合わせ追加されたのでメニューを保存します。

早速Webページを見てみるとフッターエリアにお問い合わせが表示されています。

クリックするとお問い合わせページに飛ぶことができるようになりました。

以上で設定は終了です。

他にもそれぞれお問合せフォームの細かい設定をすることもできるのでみていきたいと思います。

Contact Form7の４つの設定タブ

Contact Form7では、「フォーム」「メール」「メッセージ（送信時などの文言変更）」「その他の設定」の４つのタブがありそれぞれ細かく設定することができますね。

フォームの設定

お問合せフォームの設定を変更したい場合は<label> </label>の中を変えることで変更できます。

Contact Form７でのルールとして[]（角括弧）で囲われている部分に値が設定されているので、表示を変えたい時は[]の中を見て変えたりすることができます。

項目名のすぐ右側に*（アスタリスク・上記参考画像で赤丸で囲まれた箇所）を入れると必須項目にすることもできます。

必須項目は入力されていないと送信できずエラー表示がでるようになります。

メールの設定

メールとメール（２）がありそれぞれ管理者、ユーザーに向けたメール設定をすることができます。

「追加ヘッダー」は返信メールを受けて返信ボタンを押された時にメールアドレスがセットされるものなので削除して空欄でもOKです。

管理者に向けたメール設定

題名などを直接入力したり、表示を変えたい時は[]の中を見て変えたりすることができます。

本文にメールフォーム設定の[]を追加してあげます。

メール（２）

ユーザーに向けた自動返信メールの設定

メール設定の画面を下の方にスクロールするとメール（２）のチェックボックスが出てくるので、チェックすることで展開し設定することができるようになります。

題名を「お問い合わせありがとうございます」というふうに変えることも可能です。

デザインを変えたい場合

フォーム内の[]タグを残しHTML・CSSで変えることができます。

余白、送信ボタンの大きさやエラーメッセージなどの配色も変えることができますね。

Webサイトの背景色と表示される文字の色がかぶると見にくいときなどは色を変えて上げたほうが良いです。

スパム対策の設定

GoogleサービスのreCAPTCHA(v3)と連携することもできるので迷惑メール対策のプラグインを入れてない場合は設定してあげましょう。

Googleアカウントを登録してからこちらのreCAPTCHAを設定で設定できます。

Googleアカウントの作り方はこちらの記事を参考にしてみてください。

詳しいやり方はこちらの記事を参考にしてみてください。

こちらを設定することで簡単にスパムボットを遮断することができるようになりますね。

まとめ：Contact Form７でラクラク・お問い合わせフォーム使おう！

今回はWordPress（ワードプレス）でContact Form7（コンタクトフォーム７）のプラグインを使ってお問合せフォームを作る方法をご紹介してきました。

プログラミング言語を使わなくてもプラグインを使えば簡単にお問合せフォームができるところが便利で良いですね。

少しでも参考になれば幸いです。