SWELLで特化サイト作ってみた

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

Contact Form 7カスタマイズ

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

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

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

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

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

コンタクトフォーム7サンプルフォーム

PC表示

スマートフォンフォームサンプル

スマホ表示

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

2020年3月30日:追記

当記事に寄せられた質問がかなり増えてきたので、記事下に「Q&A」を作りました。

もしかしたら何かの役に立つかもしれません。

Contact Form 7をインストール

クリックorタップで画像拡大

コンタクトフォーム7インストール方法

管理画面

プラグイン

新規追加」をクリック

検索窓に「Contact Form 7」と入力」

今すぐインストール」をクリック

ボタンが「有効化」に切り替わったらクリック

Contact Form 7の設定

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>チェックボックス横並び【1つを選択】</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>チェックボックス縦並び【1つを選択】</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 "1行以上のテキスト入力欄"] </td> </tr> </table> [acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。 [submit id:formbtn "上記の内容で送信する"]

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

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

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

コンタクトフォーム7必須の設定

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

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

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

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

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

2018年10月8日:追記

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

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

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

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号室"]

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

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

2020年4月・追記

コメント蘭にて、上記の変更後のコードに自動返信メール等で使うショートコードが抜けているとご助言をいただきました。

現在は修正済みですので、迷われていた方は申し訳ありませんでした。

またこうしたコメントは非常にありがたく管理人も助かっておりますので、何かあれば遠慮なくおっしゃってくださいませ〜。

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

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

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

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

※クリックorタップで画像拡大

コンタクトフォーム7メール設定

送信先:自分のメールアドレス

送信元:自分のメールアドレス

題名:任意のものを入力

追加ヘッダー:変更しない

メッセージ本文:任意の文と※ショートコードを入力

補足

※よく使われるショートコード

  • [your-name]ー相手の名前
  • [your-email]ー相手のメールアドレス
  • [your-message]ー問い合わせ内容

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

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

※クリックorタップで画像拡大

コンタクトフォーム7メール2設定

送信先:[your-email]

送信元:サイト名や自分の名前<自分のメールアドレス>

題名:任意のものを入力

追加ヘッダー:変更しない

メッセージ本文:画像参照

補足

送信先を[your-email]にすると、問い合わせ時に頂いたメールアドレスに自動返信メールを送ってくれます。

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

スポンサーリンク




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

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

Contact Form 7設定

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

補足

上記画像の「その他の設定」は設定不要。

Contact Form 7のCSSコード

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

WordPressスタイルシート

手順
  1. 外観の中にある「テーマの編集」をクリック
  2. コード貼り付け
  3. ファイルを更新をクリック

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

WordPress子テーマ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; }
補足

送信ボタンカラーはbackground=背景カラーと緑字部分でお好きなカラーに変更してください。

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

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

コンタクトフォーム7コンタクトフォーム

Contact Form 7設定

管理画面

お問い合わせ

コンタクトフォーム

先ほど設定したお問い合わせフォーム

ショートコードをコピー

続いて

WordPress固定ページ新規作成

管理画面

固定ページ

新規作成

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

お問い合わせページ作成

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

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

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

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

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

functions.php編集

functions.php編集

functions.php
copyする
//コンタクトフォーム7読み込み制限 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' );

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

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

ReCAPTCHAマーク

ReCAPTCHAマーク

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

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

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

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

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

注意

以前はon_sent_ok やon_submitを使用してサンクスページを作成していましたが、現在この方法は非推奨とされており、2017年度内に廃止されました。

ネット上にあるサンクスページの作成は古いものもあるので注意。

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

WordPress固定ページ新規作成

管理画面

固定ページ

新規作成

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

サンクスページサンプル

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

クロスセルとは?

ある申し込み(購入や登録など)に対し、類似するまたはセット購入するとお得な商品などを勧めること。

例:テーブルの申し込み→そのテーブルに合う椅子を勧めるなど。

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

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の値で画像サイズを調整できます。

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

WordPress設定

実際の表示

サンクスページサンプル2

補足

ページ公開後、送信ボタンを押すとこのページに切り替わります。

サンクスページに「noindex」設定を忘れずに↓

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

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

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

補足

noindexとは……検索結果に表示させないようにするもの。

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

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

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

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

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

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

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

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

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

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

注意

プレビューのURLではなく正規のURLをコピーする。

WordPress固定ページ表示

WordPressURLコピー

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

サンクスページ サンプル

テキストエディタ
copyする
<script> document.addEventListener( 'wpcf7mailsent',function( event ){ location = 'サンクスページのURL'; }, false ); </script>

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

2019年:5月追記

以前読者の方より、サンクスページが上手く動作しないとコメントをいただきました。その時は原因不明だったのですが、別の方よりコメ解決方法を提示したコメントをいただけました。

同じく上手く動作しない方は、以下の方法を試してみてください。

こちらの「Contact Form 7の読み込みを使用するページだけに変更」のコードを削除し、コンタクトフォームの編集のフォーム内の一番上のところにスクリプトコードを記述したらうまくいきました。

Contact Form 7のQ&A

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

質問

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

回答

コンタクトフォーム7ドロップダウンメニュー
回答はこちら

質問

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
質問

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

回答

以下の赤枠で囲ってある部分をメールに貼り付けて下さい。
contactフォーム7返信メール設定
またこちらのショートコード生成は以下の「赤字」部分で行なっているので好きなものに変更できます。

フォームタグ
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のサンプルコード
①調整したい入力欄の上で右クリック

②「検証」をクリック

③そうすると「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」の解説でした。

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

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

コスパ最高の電動スタンディングデスクを本気でレビューしてみたぜ!!
記事を読んでみる