
WordPressのサイトにお問い合わせフォームを作る際に、多くの方が使っている「Contactform7」
このプラグインを利用する事で、簡単に問い合わせフォームを作る事が出来ます。
(少しコードの様なものを書かなければいけないため、苦手意識を持つ方もいらっしゃるかもしれませんが…)
そこで、今回は「Contactform7のインストールから設定まで」をご紹介いたします。
また、ウチのコーポレートサイトで使っている問い合わせフォームのHTMLとCSSも掲載しておきますので、よければ参考にしてください。
(そのままコピペで利用してもらっても大丈夫です。)
目次
プラグイン:Contact form 7の使い方
プラグイン:Contact form 7のインストール&有効化
管理画面にログインし、[プラグイン]-[新規追加]をクリック

検索窓に「contact form 7」と入力

「contact form 7」を「今すぐインストール」⇛「有効化」を実施

プラグイン:Contact form 7での問い合わせフォーム作成
左メニュー[お問い合わせ]-[新規追加]をクリック

[タイトル]と[フォーム]を入力の上、保存
緑の枠の画像がサイトで表示した時の画面です。

メニューより追加したい項目をクリック

項目を入力し、[タグを挿入]をクリック



表示イメージ

フォームの追加が完了したら、[保存]の上で、[ショートコードをコピー]

フォームを追加するページに先程コピーしたショートコードを貼り付ける

問い合わせがあった際のメール転送の設定
[メール]のタブをクリック

必要な項目を入力

- 送信先:
問い合わせがあった際のメール送信先 - 送信元:
メール送信元ですが、自分から自分に送る形になるので、適当なメールアドレスを設定してください。 - 題名:メール題名
- 追加ヘッダー:
CcやBccを追加する時に利用します。(今回は無しで大丈夫です。) - メッセージ本文:
入力項目の番号と紐付いていますので、フォームにあわせて追加してください。
お客様にも自動返信する場合には
[メール (2) を使用]にチェックを入れ、同様にメール転送設定を行ってください。
問い合わせフォーム設定における注意事項
お問い合わせフォームの作成や、フォームの変更を行った際には、
- お問い合わせが動作するか?
- 入力された項目がきちんとメールに反映しているか?
を必ず送信のテストを行いましょう。
設定ミスをしていると、大きな機会損失になってしまいます。
まとめ
今回は、Contact form 7を利用したお問い合わせフォームの設定方法に関して、ご紹介させて頂きました。
お問い合わせなどのフォームに関しては、改善による効果が非常に高くなります。
そのため、項目を追加・削除などを行いながら、PDCAを回してください。
お問い合わせフォームなどの改善の事をEFO(Entry Form Optimization, 入力フォーム最適化)と言います。
参考:ウチのコーポレートサイトで利用しているHTML+CSS
ウチのコーポレートサイトで利用しているHTML+CSSを掲載させて頂きますので、参考にしてください。
そのままコピペで利用してもらっても大丈夫です。
※テーマの環境などによっては、同様の表示にならない場合もあります。ご了承ください。
問い合わせフォーム画像

HTML
<table class="table-res-form">
<tr>
<th>会社名・事務所名<span class="requied">必須</span></th>
<td>[text* text-761]</td>
</tr>
<tr>
<th>担当者名<span class="requied">必須</span></th>
<td>[text* your-name] </td>
</tr>
<tr>
<th>メールアドレス<span class="requied">必須</span>
</th>
<td>[email* your-email] </td>
</tr>
<tr>
<th>電話番号<span class="requied">必須</span>
</th>
<td>[tel* tel-190]</td>
</tr>
<tr>
<th>相談内容<span class="requied">必須</span></th>
<td>[checkbox* checkbox-304 "「お客様の声」動画制作" "メールマガジンでの動画配信サポート" "Webサイト制作・修正" "コンサルティング" "運用・保守サポート" "その他"]</td>
</tr>
<tr>
<th>相談内容詳細<span class="requied">必須</span></th>
<td>[textarea your-message x4]</td>
</tr>
</table>
<div class="contact-submit">
[submit "送信する"]
</div>
CSS
.table-res-form { width: 80%; margin:0 auto; margin-top:50px; border:none; } .table-res-form th, td { border: none!important; padding: 1.5em; text-align: center; background-color:#fff; } .table-res-form th { width: 30%; text-align: right; } .table-res-form .requied { font-size: 0.3em; color: #FFF; display: inline-block; margin:0 0 0 1em; padding: 0.1em 0.3em 0.1em; background: red; } .table-res-form input[type="text"], input[type="email"], input[type="tel"],textarea { padding: 0.5em; width: 100%; } input[type="text"]:focus,input[type="tel"]:focus,textarea:focus, input[type="email"]:focus { outline: solid 2px #007130!important; } /*送信ボタン*/ .contact-submit{ text-align:center; margin-top:10px; } .contact-submit input[type="submit"] { border: 1px #007130 solid; padding: 1em 4em; background: #007130; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5); font-weight: bold; margin:0 auto; } /*送信ボタン・マウスオーバー時*/ .contact-submit input[type="submit"]:hover { background: #fff; box-shadow: none; color:#007130!important; } /*問い合わせフォーム-リストを縦並び*/ .wpcf7-list-item { text-align: left; margin-top:10px; display: block!important; } /*ここからspの指定*/ @media only screen and (max-width: 480px) { .contact-page-text{ width: 100%; margin:0 auto; } .table-res-form { width: 100%; margin:0 auto; } /*thとtdをブロック化して幅100%にして、縦積み*/ .table-res-form th, td { width: 100%; display: block; padding: 1.0em; } /*th(項目名)欄の不要な余白削除・テキスト左寄せ*/ .table-res-form th { padding-bottom: 0; text-align: left; } /*不要な最終行の左のthを非表示にする*/ .table-res-form .empty { display: none; } }
投稿者プロフィール

こんにちは。㈱シンラウンド代表の中島 達(@NakajimaSatoru)です。