WordPress プラグインで常に人気上位にランクインしている【Contact Form 7】
こちらのプラグインはお問い合わせフォームを簡単に作れるプラグインです。
簡単に作れると言ってもデフォルトの【Contact Form 7】のお問い合わせフォームデザインのままだと少しさみしいフォームになってしまいます。
サイトに合わせて、【Contact Form 7】のお問い合わせフォームも作りこんでみましょう！
【Contact Form 7】の使い方〜カスタマイズ方法をご紹介いたします。
あわせてCSSのデザインカスタマイズ方法も掲載していますので、ご利用ください！
最短10分で全ステップを完了出来ます。
初めは少し難しいかもしれませんが、手順に沿って行えば簡単に本格的な問い合わせフォームを作ることができます。
では、順番に行ってみましょう。
フォーム完成後は以下のようなデザインになります。
左がPC表示、右がスマホ表示です。
スマホでは縦並びに変わるレスポンシブデザインになっております。
【Contact Form 7】セットアップメニュー
- 【Contact Form 7】をインストール
1.-1【Contact Form 7】を新規インストール
1.-2【Contact Form 7】を今すぐインストール
1.-3【Contact Form 7】を有効化 - 【Contact Form 7】の設定
2.-1【Contact Form 7】の新規追加とCSS（スタイルシートのコード例）
2.-2【Contact Form 7】の管理者用メール設定
2.-3【Contact Form 7】のユーザー用メール設定
2.-4【Contact Form 7】のメッセージ設定 - 【Contact Form 7】サンクスページの作成
3.-1【Contact Form 7】DOMイベントでサンクスページを作成
3.-2【Contact Form 7】サンクスページにリダイレクト - 【Contact Form 7】固定ページに設置、動作確認
4.-1【Contact Form 7】固定ページにフォームを設置
4.-2【Contact Form 7】表示、動作の確認
1.【Contact Form 7】をインストール
1.-1【Contact Form 7】を新規インストール
まずは、【Contact Form 7】をインストールしましょう。
管理画面の左側にあるメニューから「プラグイン」をクリックし、『新規追加』をクリック。
1.-2【Contact Form 7】を今すぐインストール
『新規追加』ページの右上にある検索ボックスで【Contact Form 7】を検索します。
「今すぐインストール」をクリック。
1.-3【Contact Form 7】を有効化
インストールが終了したら、「有効化」させます。
これで、Contact Form 7を使用する準備は完了です。
2.【Contact Form 7】の設定
2.-1【Contact Form 7】の新規追加とCSS（スタイルシートのコード例）
『お問い合わせ』＞『新規追加』をクリックします。
もしくは、『プラグイン』＞『Contact Form 7』＞設定
タイトルは、ユーザー画面に出ませんので、管理しやすい名前を任意で決めてください。
フォームタブに新規追加時には、デフォルトの内容が記載されています。
こちらを消して、以下のコードをコピーして使ってください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<dl class="contact7"> <dt>お名前<span class="must">必須</span></dt> <dd>[text* your-name placeholder"例：山田 太郎"]</dd> <dt>メールアドレス<span class="must">必須</span></dt> <dd>[email* your-email placeholder"例：abcd@example.jp"]</dd> <dt>お電話番号<span class="optional">任意</span></dt> <dd>[tel your-tel placeholder"例：090-1234-5678"]</dd> <dt>ご住所<span class="optional">任意</span></dt> <dd>[text your-address placeholder"例：愛知県名古屋市中区"]</dd> <dt>お問い合わせ内容<span class="must">必須</span></dt> <dd>[textarea* your-message]</dd> </dl> [acceptance accept-this] 個人情報の取扱いについて、同意の上送信します。 <p class="btn_contact7">[submit "この内容で送信する"]</p> |
続いてstyle.cssまたは任意のCSSファイルに、下記CSSを追加して完成です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
/* Contact Form7 */ .contact7 { max-width: 100%; box-sizing: border-box; } .contact7 dd { margin: 0 0 30px 0; background-color: } .contact7 dt { font-weight: normal; } /* 必須マーク */ .contact7 .must { background: #FF1A00; } /* 任意マーク */ .contact7 .optional { background: #999; } .contact7 .must, .contact7 .optional { color: #FFF; border-radius: 3px; font-size: 10px; margin-left: 10px; padding: 5px 10px; letter-spacing: 2px; } .btn_contact7 { text-align: center; } .btn_contact7 input { width: 70%; background-color: #005513; color: #FFF; font-size: 1.1em; font-weight: bold; letter-spacing: 0.2em; border: 1px solid #005513; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .btn_contact7 input:hover { background-color: #FFF; color: #005513; } @media screen and (min-width: 768px) { .contact7 dt { float: left; clear: left; width: 35%; padding: 5px 10px 5px 0; } .contact7 dd { margin-left: 35%; } .btn_contact7 input { width: 70%; background-color: #005513; color: #FFF; font-size: 1.1em; font-weight: bold; letter-spacing: 0.2em; border: 1px solid #005513; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .btn_contact7 input:hover { background-color: #FFF; color: #005513; } } |
2.-2【Contact Form 7】の管理者用メール設定
フォームタブの隣のメールタブをクリック
メールテンプレートを編集していきましょう。
問い合わせフォームからの内容を管理者に自動送信されます。
管理者に届くメール、簡単な設定方法の例
・送信先： 管理者（自分用）アドレスを記載
・送信元： [your-name]
・題名： サイト名 [your-subject]
・追加ヘッダー： Reply-To: [your-email]
・本文メッセージ： 差出人: [your-name]
題名: [your-subject]
メッセージ本文:
[your-message]
このメールは サイト名問い合わせフォーム (問い合わせフォームのURL) のお問い合わせフォームから送信されました
2.-3【Contact Form 7】のユーザー用メール設定
メールタブ展開中の一番最下部
メール(2)を使用のボタンをクリックすると展開し
新たなメールテンプレートを記載できます。
問い合わせフォームを使ったユーザーに自動送信されます。
お問い合わせフォーム使用ユーザーに届くメール、簡単な設定方法の例
・送信先： [your-email]
・送信元： [your-name]
・題名： サイト名 お問い合わせありがとうございます。
・追加ヘッダー： Reply-To: [your-email]
・本文メッセージ： 題名:[your-subject]
メッセージ本文:[your-message]
--
お問合せ内容に関しましては、本お問い合わせの内容にのみ使用いたします。
このメールは サイト名 (サイトURL) のお問い合わせフォームから送信されました
お返事は、出来る限り迅速にご対応いたします、3営業日を過ぎても何かしらの返信がない場合は、申し訳ございませんが手数ですが、00-0000-0000お電話におかけください。
2.-4【Contact Form 7】のメッセージ設定
【Contact Form7】のメッセージは、自動返信機能のような役割を持っております。
初期メッセージが設定されているので、そのままでもよいですが、
メッセージ変更も簡単にできますので、こだわりたい方は任意のメッセージに変更しましょう！
メッセージの変更例を一部ご紹介いたします。
・メッセージが正常に送信された
≪お問い合わせありがとうございます。内容をご確認させていただきまして、担当者よりご連絡いたしますので、しばらくお待ちください。≫
・入力内容に不備が見つかった
≪入力内容に問題があります。内容をご確認の上、再度お試しください。≫
・入力必須の項目が入力されていない
≪必須項目に記入もれがあります。≫
・ファイルのアップロードが何らかの理由により失敗している
≪アップロード時にエラーが発生いたしました。お手数おかけしますが、再度アップロードをお試しください。≫
3.【Contact Form 7】サンクスページの作成
3.-1【Contact Form 7】DOMイベントでサンクスページを作成
お問い合わせページで、『この内容で送信する』を押しても送信されたかどうか分かりにくく、送信されたか不安になり何度も送信しなおしてしまうという事がありました。
それを未然に防ぐためにも、そしてお問い合わせくださる方にご迷惑がかからないよう、
送信完了ページ（サンクスページ）を作成し、送信完了後にそのページを表示する設定をしたいと思います。
まず、固定ページにサンクスページを作成します。
『固定ページ』＞『新規追加』をクリックします。
サンクスページ（送信完了ページ）の例文です。
お問い合わせありがとうございました。
この度はお問い合わせメールをお送りいただきありがとうございます。
後ほど、担当者よりご連絡をさせていただきます。
今しばらくお待ちくださいますようよろしくお願い申し上げます。
なお、しばらくたっても返信、返答がない場合は、
お客様によりご入力いただいたメールアドレスに誤りがある場合がございます。
その際は、お手数ですが再度送信いただくか、
お電話（ 000-0000-0000 ）にてご連絡いただけますと幸いです。
3.-2【Contact Form 7】サンクスページにリダイレクト
サンクスページへのリダイレクトは、【Contact Form7】のDOMイベントを使って、JavaScriptを実行することで行います。
テーマファイルのヘッダー(header.php)に以下のコードを設置してください。
設置場所は＜/head＞タグの手前です。もしくはフッター（footer.php）でも！
※コード内URLのhttps://example.com/contact-thanks/を作成したサンクスページのURLに変更してください。
|
1 2 3 4 5 6 7 |
<script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'https://example.com/contact-thanks/'; }, false ); </script> |
4.【Contact Form 7】固定ページに設置、動作確認
4.-1【Contact Form 7】固定ページにフォームを設置
全ての設定が完了したらコンタクトフォームの編集ページ上部にあるショートコードをコピーしましょう。
あとは、お問い合わせページとして使用する固定ページにコードを貼り付けるだけ！
4.-2【Contact Form 7】表示、動作の確認
あとは「公開」をクリックして表示と動作の確認をしてみましょう。
下記のように表示されていれば完成です。（画像左がPC表示、画像右がスマホ表示）
最後に念のため、実際に自分で問い合わせしてみて正常に動作しているかを確認しよう。
先ほど作成したサンクスページに遷移したらOK！
【Contact Form7】プラグインを使うと、簡単にお問い合わせフォームを設置できます。
他にもオプションや別プラグインとの併用でのフォームの作成などもできますので、次回ご紹介したいと思います。
【Contact Form7】プラグインには、その他、インテグレーションメニューがあります。
googleが提供しているreCAPTCHAを設置できるのですが、そちらの記事は、後日アップいたします。
