Contact Form 7をプロ級フォームにカスタマイズする方法

→ サイトを見てみる

この記事では【Contact Form 7】の使い方〜カスタマイズ(コピペ可)まで丁寧に解説しています。

スパム対策プラグイン「Akismet」と連携させたコードを使用しているので、まずはそちらを設定しておくとスムーズになります。

現在「Akismet」は不要なプラグインです。フォームのスパム対策は以下のプラグインを推奨しているので、後ほど解説します。

Invisible reCaptcha for WordPressの設定【セキュリティ対策】

フォーム完成後は以下のようなデザインになります。

PC表示

スマホ表示

スマホでは縦並びに変わるレスポンシブデザインです。

Contact Form 7をインストール

Contact Form 7の設定

お問い合わせフォームのカスタマイズコード

こんな画面↓　↓に切り替わるので、フォームに入力されているテキストを全部削除。

そこに、以下のコードを貼り付ける。

CF7フォーム
copyする

<table class="inquiry">
<tr>
<th>
<span class="haveto">必須</span><span>お名前</span>
</th>
<td>
[text* your-name class:textsp placeholder"影影 男男"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>メールアドレス</span>
</th>
<td>[email* your-email class:mailsp placeholder"[email protected]"]</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>電話番号</span>
</th>
<td>
[tel your-tel class:tel placeholder"090-1111-2222"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>ドロップダウンメニュー</span>
</th>
<td>
[select* dpmenu include_blank class:drop "サンプル1" "サンプル2" "サンプル3"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>チェックボックス横並び【１つを選択】</span>
</th>
<td>
[checkbox checkbox-1 exclusive use_label_element default:1 class:check1 "サンプル4" "サンプル5" "サンプル6"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>チェックボックス横並び【複数を選択】</span>
</th>
<td>
[checkbox* checkbox-2 use_label_element default:1 class:check2 "サンプル7" "サンプル8" "サンプル9"]</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>チェックボックス縦並び【１つを選択】</span>
</th>
<td>
[checkbox checkbox-3 exclusive use_label_element default:1 class:verticallist class:check3 "サンプル10" "サンプル11" "サンプル12"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>チェックボックス縦並び【複数を選択】</span>
</th>
<td>
[checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 "サンプル13" "サンプル14" "サンプル15"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>ラジオボタン横並び</span>
</th>
<td>
[radio radio-1 use_label_element default:1 class:radio1 "サンプル16""サンプル17""サンプル18"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>ラジオボタン縦並び</span>
</th>
<td>
[radio radio-2 use_label_element default:1 class:verticallist class:radio2 "サンプル19""サンプル20""サンプル21"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>数値のスピン形式</span>
</th>
<td>
[number number-1 min:10 max:100 placeholder class:number1 "数値の値は指定できる"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>日付</span>
</th>
<td>
[date* date-960 placeholder class:datesp ]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>中級者向け回答形式のタグ</span>
</th>
<td>
[quiz quiz-1 class:qyizsp "質問：2019年に発表された新元号は？|令和"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>郵便番号</span>
</th>
<td>
[text* your-postalcode class:p-postal-code placeholder"123-4567"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>都道府県</span>
</th>
<td>
[text* your-prefectures class:p-region placeholder"◯◯県"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>ご住所</span>
</th>
<td>
[text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>お問い合わせ内容</span>
</th>
<td>
[textarea* your-message class:content placeholder "１行以上のテキスト入力欄"]
</td>
</tr>
</table>
[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。
[submit id:formbtn "上記の内容で送信する"]

｢必須｣を消したい場合は、上記の<span class="haveto">必須</span>部分を削除。

｢任意｣も同様に<span class="any">任意</span>部分を削除してください。

またデザインだけでなく｢必須｣と｢任意｣は、ショートコードの最初の文字列の最後に* アスタリスクを付けるか否かで、設定できます。

その他の不要なコード(項目)は<tr>〜</tr>部分を削除してください。

回答形式のタグ＝[quiz]は、質問に答えられないと送信できないため、botによるスパムを防ぎ、セキュリティを向上できます。(後ほどセキュリティプラグインを紹介しますが、プラグインを増やしたくない人はこの方法でもいいですね。)

また少し高度な使い方をすると、採用フォームやターゲット属性を絞りたい時に、特定の人しか答えられないような質問をし、スクリーニングをかけることもできます。

あとは「日本語部分」を好きな言葉に変更すればオリジナルフォームの原型ができます。(この後CSSで調整します。)

郵便番号から住所を自動入力したい

2018年10月8日：追記

読者の方から以下のような質問をいただいたので備忘録として、回答を載せておきます。

コンタクトフォーム７読者からの質問

contact form7カスタマイズの記事を拝見させていただき、デザインも良く取り入れさせてもらっております。

郵便番号の方に自動住所入力を入れたいと思いまして、zipaddr-jpプラグインをインストールしコードをコンタクトフォームテキストのyour-postalcode の後の部分に挿入してみましたが、囲んでいるデザインが変わってしまい上手くいきません。

挿入する場所が悪いのでしょうか？それともフォームのソースコード自体を変えないと駄目なのでしょうか？宜しければご教授下さい。

郵便番号テキストフォーム

[text* your-postalcode class:p-postal-code placeholder”123-4567″] zipaddr-jpプラグインで取得した自動住所入力コード[text* zip id:zip]

私はzipaddr-jp」というプラグインをこの問い合わせで知ったのですが、これは便利。

インストールして専用コードに置き換えるだけで郵便番号を入力すると番地以外自動入力されます。

郵便番号自動入力

zipaddr-jpはこちら

先ほどのコードを以下のように変更してください。

郵便番号・変更前
[text* your-postalcode class:p-postal-code placeholder"123-4567"]

↓

郵便番号・変更後
copyする

[text* your-postalcode zip id:zip placeholder"123-4567"]

都道府県・変更前
[text* your-prefectures class:p-region placeholder"◯◯県"]

↓

都道府県・変更後
copyする

[text* your-prefectures pref id:pref placeholder"◯◯県"]

ご住所・変更前
[text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"]

↓

ご住所・変更後
copyする

[text* your-address city id:city addr id:addr placeholder "○○市○○1-2-3 ○○マンション 101号室"]

「青字」部分を削除して「赤字」のプラグイン専用コードに置き換えています。

採用フォームなどで重宝すると思うので、よかったら活用してください。

今回の「フォーム用コード」は「Tableタグ」を使っています。もう少しデザインをカスタマイズしたい方は、こちらを参考にして下さい。

HTMLテーブルをCSSでオシャレにデザインする為の講座

お問い合わせフォームのメール設定

まずは、お問い合わせがあった際、自分に送られてくるメール設定をしましょう。

設定が完了したら、次は問い合わせをくれた相手に送る自動返信メール設定をします。※不要な方は飛ばしてください。

メール設定画面で下にスクロール【メール(２)を使用】にチェックをいれると、設定項目が表示されます。

これでメール設定は終了です。

お問い合わせメッセージ設定

続いて、お問い合わせフォームで表示されるメッセージを設定します。ここはデフォルトのままでも問題ないですが、変更する場合は以下の画像を参考にして下さい。(サンクスページを作るなら設定不要)

ここまで設定が終わったら「保存ボタン」を忘れずに。

Contact Form 7のCSSコード

続いてCSSを子テーマのstyle.cssにコピペします。

子テーマの使い方はこちら

Cyberduckの使い方WordPressの子テーマを分かりやすく解説

style.css
copyする

/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:block!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
}
.inquiry tr:first-child th{
 border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}}
/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#f7f7f7;
 border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#ffaa56;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#ffaa56;
}

Contact Form 7お問い合わせページの作成

ここまで来たら、あとはコピペするだけでお問い合わせページが完成します。

続いて

【管理画面】

↓

【固定ページ】

↓

【新規作成】

先ほどコピペしたショートコードをエディタ(ビジュアルでもテキストでもOK)に貼り付け、タイトル入力後に公開。

最後に、お問い合わせフォームから自分宛にメールを送りテストしてみましょう。

メールが届けば設定完了です。

Contact Form 7の読み込みを使用するページだけに変更

ContactForm7は重い、遅いという声が時折ネットに出ています。それならば、フォームを使用するページだけに読み込ませましょう。

以下のコードを「functions.php」に追記してください。

functions.php編集

functions.php
copyする

//コンタクトフォーム７読み込み制限 
function wpcf7_file_load() {
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
if( is_page( 'otoiawase' ) ){
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
}
}
add_action( 'template_redirect', 'wpcf7_file_load' );

これでコンタクトフォーム７を使用しているページだけ読み込まれます。

ContactForm7のセキュリティを高める

ReCAPTCHAマーク

Google推奨の上記セキュリティをプラグインで導入します。

これによりスパムとおさらばできます。

Invisible reCaptcha for WordPressの設定【セキュリティ対策】

Contact Form 7のDOMイベントでサンクスページを作成する

問い合わせフォームだけなら上記の設定だけで十分なんですが、ビジネスとしてサイトを活用している方はサンクスページの設定も知っておくと便利です。

固定ページにサンクスページを作る

【管理画面】

↓

【固定ページ】

↓

【新規作成】

例えば、こんな感じのページを作成します。

これは問い合わせに対する簡易的なサンクスページですが、やり方を覚えておけば「クロスセル」などで別商品を勧めるページを作成することもできますね。

上記サンプルは以下コードを使用しています。

HTML
copyする

<div class="thanksPage"><img class="wp-image-22" src="画像URL" alt="画像の名前" width="150" height="150" /></div>
<p>折り返し自動返信メール(確認メール)を送ってあります。</p>
<p>もし、届かないようでしたら、【<strong>メールアドレスの間違い</strong>】または【<strong>迷惑メールフォルダ</strong>】に入ってしまっている可能性がありますので、ご確認ください。</p>

style.css
copyする

.thanksPage img{
 float:left;
}

widthの値で画像サイズを調整できます。

この時、お使いのテーマに固定ページを「１カラム」に変更することが出来れば見た目が良くなります。

実際の表示

サンクスページは「noindex」設定にする

サンクスページは、読者やお客さんのためになるページですがSEO的にはよろしくないページです。(内容がないページなので)

こういった場合は、このページを検索エンジンに検知されないようにする必要があります。

やり方については、以下の記事を参考にしてください。

WordPressでnoindexとnofollow設定をする２つの方法

「noindex設定」をしたら、XMLマップからも除外してあげると検索エンジンに対して親切です。

Google XML Sitemaps設定とサーチコンソールの登録はセットで行う

サイトマップからサンクスページを除外する

「PS Auto Sitemap」というプラグインでサイトマップを作成している方は、サンクスページをサイトマップから除外しましょう。(除外しないとサイトマップから見れるのでサプライズ感がなくなります。)

その場合はこちらの記事を参考にして下さい

PS Auto Sitemapの設定と使い方【HTMLサイトマッププラグイン】

問い合わせページにサンクスページコードを埋め込む

先ほど作成したサンクスページのURLをコピーしてください。

問い合わせフォーム(サンクスページを表示させたいページ)に移動し、テキストエディタの先頭に以下のコードを追加。

テキストエディタ
copyする

<script>
document.addEventListener( 'wpcf7mailsent',function( event ){
 location = 'サンクスページのURL';
}, false );
</script>

サンクスページURL部分は、送信後に表示したいURLを貼り付けてください。後は、テスト送信して貼り付けたページが表示されればフォームの完成です。

Contact Form 7のQ＆A

当記事のコメント欄ではこれまで様々な質問をいただきました。
もちろんすべてのお力になれたわけではありませんが、解決できたことをこちらにまとめておこうと思います。

生年月日の入力欄を”カレンダー形式”ではなく”ドロップダウンメニュー形式”に変更したい。

回答はこちら

CSSが効きません。（デザインが変更されない）

キャッシュを削除してみて下さい。（ショートカットキー）

• Internet Explorer(インターネット・エクスプローラー)・FireFox(ファイアフォックス)・Google Chrome(グーグルクローム)
• Windows＝Ctrl + F5
• Safari(サファリ)
• Windows＝Ctrl + R

• Internet Explorer(インターネット・エクスプローラー)・Safari(サファリ)・Google Chrome(グーグルクローム)
• Mac＝Command + R
• FireFox(ファイアフォックス)
• Mac＝Command + Shift + R

自動返信メールに入力内容が反映されない。

以下の赤枠で囲ってある部分をメールに貼り付けて下さい。

またこちらのショートコード生成は以下の「赤字」部分で行なっているので好きなものに変更できます。

フォームタグ
copyする

[select* dpmenu include_blank class:drop "サンプル1" "サンプル2" "サンプル3"]

上記はドロップダウンメニューのサンプルです。

当サイトのコードを貼り付けたら、「閲覧できません (Forbidden access)」が表示された。

お使いのレンタルサーバーに「WAF設定」という項目があるはずなので、そちらを一度「OFF」にして下さい。

ラジオボタンやチェックボックスは最初から一つ選択されていますが、それをなしにできますか？

ラジオやチェックの初期値を外すには以下の「default:1」部分を削除してください。

フォームタグ
copyする

[checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 "サンプル13" "サンプル14" "サンプル15"]

ただし、ラジオボタンに関しては初期値を設定することが推奨されているので、外すのであれば「チェックボックス」のが良いと思います。

入力欄フォームの幅を調整したい。

①調整したい入力欄の上で右クリック
↓
②「検証」をクリック
↓
③そうすると「input〜」みたいなコード（赤枠部分）がズラーっと出てきます。
この中の「width:◯◯」で幅を指定して下さい。
なので、赤枠内を全部コピーして「style.css」に貼り付け「width」の値を変更する、もしくは調整したいコードだけを抜き出してもOKです。

「必須」とテキストが横並びになりません。

フォームタグに<br>タグが含まれていないかを確認して下さい。

プレースホルダーのテキストカラーを調整したい。

以下をstyle.cssに追記して「赤字」の箇所をお好きなカラーに変更して下さいませ〜。

style.css
copyする

input::placeholder {
color: #ccc;
}

「お問い合わせ内容」のテキストだけ下側に配置されて見栄えが悪い。

以下のコードを追記してみて下さい。

style.css
copyする

table.inquiry span {
vertical-align: middle;
}

TCD系テーマだと表示が崩れる。

TCD系テーマは、テーマにオリジナルのCSSが適用されていますので、以下を追記してみてください。

style.css
copyする

/* 外側の枠線と背景を消す */
.wpcf7 {
    background: none;
    border: none;
    margin: 0;
}
/* フォーム外側の余白を消す */
.wpcf7 form {
    margin: 0;
}

Contact Form 7【まとめ】

以上「Contact Form 7」の解説でした。

たくさん質問いただくうちになかなかの大作になってしまいましたね。

このプラグインは奥が深いので、まだまだできることがたくさんあります。もっと探求したい方は色々ググってみて下さいませ〜。
コピペですぐ使える・ブログデザイン用カスタマイズコードまとめWordPressのおすすめプラグイン・新旧19個を紹介

→ サイトを見てみる