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）です。