Matsu Code 
・Contact Form 7の使い方は？
こんな疑問にお答えします。
Contact Form 7はお問い合わせフォームを簡単に作成できるWordPressプラグインの一つ。
シンプルで使いやすいのが特徴です。
覚えれば簡単に使いこなせます！
ということで、この記事では「Contact Form 7の使い方」について解説していきます！
・Contact Form 7とは？
・Contact Form 7の使い方
・Contact Form 7の設定方法
目次
【WordPress】Contact Form 7とは？【お問い合わせフォーム】
Contact Form 7とは、お問い合わせフォームを簡単に作成できるプラグイン。
簡単に下記をすることができます。
- カスタムフォームを簡単に作成可能。
- フォームに様々な項目を追加できる。
- フォームの項目の配置を変更できる。
- フォームのデザインをカスタマイズできる。
フォーム項目の設定がシンプルで使いやすいのが特徴です。
【WordPress】Contact Form 7の使い方【お問い合わせフォーム】
Contact Form 7の使い方はこちらの手順。
- インストールして有効化
- 管理画面の「Contact Form 7」項目をクリック
順に見ていきましょう。
まずContact Form 7プラグインをインストールして有効化しましょう。
Contact Form 7と検索すればでてきますよ。
有効化すると管理画面の設定に「お問い合わせ」の項目がでてきます。
あとはここから新規追加して、フォームを作成・設置していく感じですね。
【WordPress】Contact Form 7のフォーム作成・設置方法【お問い合わせフォーム】
というわけでここからは、Contact Form 7を使ったフォームの作成と設置についてみていきます。
手順としてはこちら。
- 新規追加
- フォームの設定
- メールの設定
- メッセージの設定
- フォームを設置
順に見ていきましょう。
まず新たにフォームを追加していきます。
やり方としては「新規追加」ボタンをクリック。
ちなみにデフォルトで「コンタクトフォーム１」が作成されてるよ
そしてタイトル部分に「お問い合わせ」など、わかりやすい名前をつけましょう。
フォーム部分にはデフォルトでコードが用意されています。
そしたらフォームエリアに、お問い合わせ部分のコードをコピペしていきます。
今回は例として下記のコードを使いますね。
<div class="contact-box">
<table class="contact-table">
<tr class="contact-table__box">
<th><span class="require">必須</span>氏名</th>
<td><input type="text" name="your-name" class="contact-table__area" placeholder="山田 太郎"></td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>電話番号</th>
<td><input type="tel" name="your-tel" class="contact-table__area" placeholder="000-0000-0000"></td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>メールアドレス</th>
<td><input type="email" name="your-email" class="contact-table__area" placeholder="example@gmail.com"></td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>お問い合わせ内容</th>
<td><textarea name="your-content" class="contact-table__area"></textarea></td>
</tr>
</table>
<div class="contact-form__submit">
<input class="wpcf7-form-control has-spinner wpcf7-submit" type="submit" value="送信">
</div>
</div>この部分は案件ごとのデザインに合わせてHTMLコーディングをしていきましょう。
コードを本文入力エリアにコピペしていきます↓
先ほどのコードを「Contact Form 7」のフォーム用に修正していきます。
やり方は簡単。
- フォームの項目を選択
- フォームタグ生成にて設定
- 「タグを挿入」をクリック
まず項目を選択します。
例として「テキスト」を選択しました。この部分はinputタグによって、電話番号だったりメールだったり選択しましょう。
そしたら下記画面がでてきます。
項目タイプ、名前（name値）、デフォルト値、id、class名の値を設定できますので入力していきます。
設定できたら「タグを挿入」をクリック。
そしたら下記のようにコードが変わります↓
で、実際に全て修正して完成したコードがこちらになります。
<div class="contact-box">
<table class="contact-table">
<tr class="contact-table__box">
<th><span class="require">必須</span>氏名</th>
<td>[text* your-name class:contact-table__area placeholder "山田 太郎"]</td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>電話番号</th>
<td>[tel* your-tel class:contact-table__area placeholder "000-0000-0000"]</td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>メールアドレス</th>
<td>[email* your-email class:contact-table__area placeholder "example@gmail.com"]</td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>お問い合わせ内容</th>
<td>[textarea* your-content class:contact-table__content]</td>
</tr>
</table>
<div class="contact-form__submit">
[submit "送信"]
</div>
</div>これでフォーム部分の設定は完成です。「保存ボタン」をクリックしておきましょう。
続いてメールの設定をしていきます。
自動返信メールと管理者宛てに届くメールのことですね。
| 送信先 | 管理者宛に届くメールアドレス デフォルトは「設定」⇒「一般」に記述してあるアドレス |
| 送信元 | 送信元となるメールアドレス |
| 題名 | 件名 |
| 追加ヘッダー | 返信先のメールアドレス（デフォルトだとyour-email） |
| メッセージ本文 | 管理者宛に届くメールの本文 |
| ファイル添付 | ファイル添付がある場合このに設定 |
基本的に[]みたいなカッコを使って記述する感じ。もちろん普通に文章を書いてもOK。
本文はname値を使い[your-name]のように出力します。
使用しているname値に合わせて記述してきます。
下記のお問い合わせがありました。
お問い合わせ内容
---------------------------------------------
【氏名】
[your-name] 様
【電話番号】
[your-tel]
【メールアドレス】
[your-email]
【お問い合わせ内容】
[your-content]
---------------------------------------------
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました自動返信メールの設定部分なくない？と思いますが、
管理者宛て設定の一番下メール（２）のチェック部分をクリックすればでてきます！
| 送信先 | 自動返信の送信先メールアドレス メール項目に記述したyour-nameが入る |
| 送信元 | 送信元となるメールアドレス |
| 題名 | 件名 |
| 追加ヘッダー | 返信先のメールアドレス（デフォルトだとyour-email） |
| メッセージ本文 | 自動返信のメール本文 |
| ファイル添付 | ファイル添付がある場合このに設定 |
基本的に[]みたいなカッコを使って記述する感じ。もちろん普通に文章を書いてもOK。
本文はname値を使い[your-name]のように出力します。
使用しているname値に合わせて記述してきます。
お問い合わせありがとうございます。
折り返しご連絡させていただきますが、数日お時間を頂く場合がございます。
以下の内容でメールを受け付けました。
お問い合わせ内容
---------------------------------------------
【氏名】
[your-name] 様
【電話番号】
[your-tel]
【メールアドレス】
[your-email]
【お問い合わせ内容】
[your-content]
---------------------------------------------
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました続いてメッセージの設定です。
エラーが出たりなどの時にでるメッセージですね。
基本このままでよいかと。
案件によって指定された文章があるときは、ここを修正しましょう。
あとは作成したフォームの、ショートコードを記述すればOK。
下記部分ですね。
この部分をphpのテンプレートコードにて下記のように記述します。
<?php echo do_shortcode('[～～～]'); ?>
（WordPressのオリジナルテーマ制作案件の場合となります）
【WordPress】Contact Form 7の使い方【あとは送受信確認】
フォームの設置ができたら、あとは送受信確認をするのみです！
- バリデーションルールが機能してるか
- 自動返信メールは届いているか
- 管理者宛てメールは届いているか
- 他ブラウザでもうまくいくか（safari,firefox,edgeなど）
上記らの確認をしていきましょう。
ちなみにサンクス（完了）ページも作成したい場合は、下記記事を参考に↓
【解説】Contact Form 7でサンクスページを作る方法 また実はデフォルトのままだと、pタグやbrタグが自動挿入されてしまいます。
削除方法が知りたい人は下記をどうぞ↓
【Contact Form 7】自動挿入するpタグ・brタグの削除方法【解決】 【WordPress】Contact Form 7の使い方【お問い合わせフォーム】：まとめ
- 新規追加
- フォームの設定
- メールの設定
- メッセージの設定
- フォームを設置
シンプルなお問い合わせフォームを簡単に作成できるのでおすすめだよ！
