WordPressプラグイン「Contact From7」を機能豊富にカスタマイズする方法

今回はお問い合わせフォーム作成プラグイン「Contact From7」を高機能にカスタマイズする方法を紹介します。

コードも載せるので参考程度にどうぞ。

Contact From7はあらかじめインストールして有効化おきましょう。

 

Contact From7の設定

ダッシュボードに「お問い合わせ」という項目が増えているはずなので、新規追加をクリックします。

最初に表示される画面ではすでにある程度コードが書いてありますが、それは全部消してください。

そうしたら以下のコードをコピペします。

<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"lifecontroller@kagesai.net"]</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>を削除してください。

「*」が付いている項目は必須項目になります。任意入力でいい場合は「*」を消してください。

また、[quiz]は回答形式のタグとなっています。質問に答えられないとお問い合わせができないようになり、スパムを軽減することができます。必要な人は追加しておくといいでしょう。

 

郵便番号から住所を自動入力する方法

zipaddr-jpというプラグインを入れると郵便番号から自動で住所を入力することができるようになります。

その場合は上記のコードを一部変更する必要があります。

以下のように修正してください。

郵便番号

[text* your-postalcode class:p-postal-code placeholder"123-4567"]

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

 

都道府県

[text* your-prefectures class:p-region placeholder"◯◯県"]

[text* pref id:pref placeholder"◯◯県"]

 

ご住所

[text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"]

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

 

zipaddr専用のコードに置き換えていきます。

サイトによっては重宝する機能なので、ぜひ導入してみてください。

 

メール設定

メールタブをクリックしてメールに関する設定をしていきます。

まずは、お問い合わせがあったことを自分に知らせるメールを設定しましょう。

  • 送信先:自分のメールアドレスを入力
  • 送信元:自分のメールアドレスを入力
  • 題名:お問い合わせがありました
  • 追加ヘッダー:変更なし
  • メッセージ本文:お問い合わせを知らせるメッセージを入力。ショートコードを組み合わせて使うこともできる。

 

題名は任意で変更してください。

メッセージ本文でよく使われるショートコードは以下のようなものがあります。

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

 

次に、お問い合わせがあった時に相手にメールを送る設定をします。l

画面を下にスクロールし、メール(2)にチェックを入れます。

入力する項目は以下の通り。

  • 送信先:[your-email]
  • 送信元:自分のメールアドレス
  • 題名:お問い合わせありがとうございました
  • 追加ヘッダー:変更なし
  • メッセージ本文:お問い合わせをしたことを確認するメッセージを入力。ショートコードを組み合わせて使うこともできる。

 

送信先を[your-email]としておくと自動で相手のメールアドレスにメールが送られるようになります。

メールの設定はこんな感じでいいでしょう。

 

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

メッセージタブをクリックし、お問い合わせフォーム入力後に表示されるメッセージを設定します。

特にこだわりがなければデフォルトのままでも大丈夫です。

変更したい場合は自分で任意のメッセージを入力しておきましょう。

また、お問い合わせ後に自動でお問い合わせ完了ページ(サンクスページ)に移動する場合はこちらは設定する必要はありません。

 

CSSを編集

次にCSSを編集していきます。

CSSを各場所はテーマのスタイルシートで大丈夫です。

ダッシュボード→外観→テーマエディターと進んでstyle.cssをクリックします。

そうしたら以下のコードをまるっとコピペしましょう。

/*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:15px;
 width:350px;
 background:#ffaa56;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#ffaa56;
 border:2px solid #ffaa56;
}

 

CSSは自分の好きなように編集して構いません。

 

お問い合わせページを作成

いよいよページを作成します。

ダッシュボード→お問い合わせ→コンタクトフォーム→先ほど作成したお問い合わせフォームにと進み、表示されているショートコードをコピーしてください。

続いて固定ページを新規作成し、コピーしてきたショートコードをそのまま貼り付けます。タイトルは「お問い合わせ」とかでいいでしょう。

これだけでページは作成できます。

試しにお問い合わせフォームを入力して送信してみましょう。自分にメールが届けば問題ないでしょう。

 

Contact From7を使用するページにだけ変更を加える

ネットでContact From7は重いという声がたまにあります。

というわけでフォームを使用するページだけに読み込ませるようにします。

以下のコードをfunctions.phpにコピペします。

//コンタクトフォーム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' );

 

セキュリティ対策

invisible recaptcha for wordpressというプラグインを使ってセキュリティを高めましょう。

プラグインをインストールするだけです。超簡単。

 

サンクスページを作成

お問い合わせフォームだけならサンクスページを作成する必要はないのですが、ホームページによってはサンクスページを用意したい場合もあると思うので、一応作成の仕方を紹介します。

 

固定ページを作成

もう一度固定ページを新規作成しします。タイトルは「お問い合わせありがとうございます」とかでいいと思います。

メッセージはなんでもいいと思います。確認メールを送ったことなどを知らせるといいでしょう。

今回は例として以下のように記述します。(htmlコードのままです。テキストモードで貼り付けましょう。)

<p>折り返し自動返信メール(確認メール)を送ってあります。</p> <p>もし、届かないようでしたら、【<strong>メールアドレスの間違い</strong>】または【<strong>迷惑メールフォルダ</strong>】に入ってしまっている可能性がありますので、ご確認ください。</p>

また、この固定ページは1カラムにしておくと見栄えがいいでしょう。固定ページの属性を選択する場所が記事編集画面の下か右にあるので探してください。

 

また、サンクスページはできればnoindexを設定しておくといいと思います。

使用しているテーマによってはnoindexを指定できるので、その場合はチェックを入れておくといいでしょう。

 

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

お問い合わせページとサンクスページを連動させます。

まずはサンクスページのURLをコピーしてください。

次にお問い合わせページの先頭に以下のコードをテキストモードで貼り付けてください。

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

 

サンクスページのURLの部分に先ほどコピーしてきたURLを貼り付けましょう。

最後にテストでお問い合わせを送信してサンクスページに飛んだら成功です。

 

まとめ

Contact From7を機能豊富にするカスタマイズを紹介しました。

Contact From7は簡単にお問い合わせページが作れるし、機能やカスタマイズも豊富にできるので、気軽にお問い合わせフォームを設置したい人はぜひ試してみてください。