Contact Form 7のカスタマイズ

Contact Form 7のインストールとメール設定でContact Form 7を使ったメール送信は可能になりましたが、

・メールアドレスを確認する機能がない

・メールフォームの幅が狭くて、少し書きずらい

等の幾つか改善したい項目が出てきました。

そこで、本ドキュメントでは、Contact Form 7のカスタマイズについて判った事を記載します。

１.フォームタブに書かれている内容を理解する

フォームタブのフォームには下記の様な記述があります。

<p>お名前 (必須)<br /> [text* your-name] </p>

１.<p>お名前 (必須)<br />×××××</p>

上記の赤字部分は通常のHTMLの構文と同じになります。
よって (必須)の所を赤字にしたい場合は下記の記述になります。
<p>お名前<span style=”color: red;”>(必須)</span><br />

 ２.[text* your-name]

上記の青字部分がタグと呼ばれる部分で、表示される時にContact Form 7が HTML 要素に変換します。
タグは①タイプ、②名前、③オプション、④値の4つの要素から構成されます。

①タイプ（例：text*）

タイプにはtext以外にemail、textarea、submit等があります。
またタイプに*を付ける（例：text*）と入力必須となり、入力がないとエラーになります。

②名前（例：your-name）

このタグに付ける任意の名前です。自由に変更が可能です。

③オプション

オプションにはクラス属性（class:名前）とID属性（id:名前）を指定する事ができます。

④値

ボタンの名前とか入力フィールドの初期値を指定します。

２.カスタマイズ事例

１)フォームタブの記述内容の変更

私のサイトでは、このコンタクトフォームを下記の様に変更しています。
Contact Form 7のコンタクトフォームにコピー＆ペーストしてください。

<p>お名前<span style="color: red;">(必須)</span><br />
姓 [text* your-Lname]　名 [text your-Fname]</p>

<p> <br/>メールアドレス<span style="color: red;">(必須)</span><br />
[email* your-email] </p>

<p>確認用メールアドレス<span style="color: red;">(必須)</spa><br />
[email* your-email_spare] </p>

<p><br/>件名<br />
[text your-subject] </p>

<p>メッセージ本文<br />
[textarea your-message class:my-msg] </p>

<p>[submit "送信"]</p>

【解説】

①名前

<p>お名前<span style="color: red;">(必須)</span><br />姓 [text* your-Lname]　名 [text your-Fname]</p>

必須の所は赤字にして、名前は姓と名の変数名を分けました。

②メールアドレス

<p> <br/>メールアドレス<span style="color: red;">(必須)</span><br />[email* your-email] </p>

先頭に<br/>を入れる事により、お名前とメールアドレスの間に空白行を入れています。

③確認用メールアドレス

<p>確認用メールアドレス<span style="color: red;">(必須)</spa><br />[email* your-email_spare] </p>

確認用のメールアドレスを新設しました。

④件名

<p><br/>件名<br />[text your-subject] </p>

先頭に<br/>を入れる事により、メールアドレスと件名の間に空白行を入れています。

⑤メッセージ本文

<p>メッセージ本文<br />[textarea your-message class:my-msg] </p>

textareaにclass:my-msgを追加しました。CSSにこのクラスでスタイルを記述します。

⑥送信

<p>[submit "送信"]</p>

変更していません。

２）CSSの変更

また、このフォームに対応するCSSは下記になります。
これもstyle.cssの最後に追加してください。

/*******************************************************************/
/* cntact form 7 の表示用にCSSを追加 */
/*******************************************************************/
input[name=your-Lname]{width:15%;}
input[name=your-Fname]{width:15%;}
input[name=your-email]{width:60%;}
input[name=your-email_spare]{width:60%;}
input[name=your-subject]{width:90%;}
.my-msg{width:90%;}
input[type=submit]{
 width:80px;font-size:14px;text-align:center;font-weight:bold;color: #666666;
 border-radius:5px;box-shadow:2px 2px #666666;}

どうでしょうか？
大分見栄えが良い画面になったと思いますが上記の変更だけではe-mailアドレスのチェックは行ってくれません。

３.Contact Form 7でメールアドレスの確認を行う

メールアドレスのチェックを行うにはfunctions.phpのカスタマイズが必要になります。

１）functions.phpをカスタマイズする際の注意点

functions.phpはphpの関数ファイルです。
よって今まで修正してきた一般のphpプログラムと違ってダッシュボードやサイトの表示の時に呼び込まれ、色々なphpプログラムからCALLされる性格を持ちます。

①このファイルの構文にミスがあると下記の様な現象が発生します。

・ダッシュボードの画面が表示されない。

・WEBサイトの画面が表示されない。

等の現象が発生します。
このような場合は慌てずfunctions.phpの記述を見直してください。

②子テーマと親テーマのfunctions.phpが使われます。

一般のphpは子テーマにあるphpは、親テーマフォルダの該当ファイルに置き換えて利用されます。

しかしfunctions.phpは子テーマフォルダのfunctions.phpの関数を読んだ後に、親テーマフォルダのfunctions.phpの関数が読まれます。

よってこの両ファイルには同じ関数は記述はできません。

２)具体的な修正例

①子テーマフォルダにfunctions.phpファイルを新規に作成して下さい。

②上記のphpファイルに下記のコマンドをコピー&ペーストしてください。

<?php
/**** Contact Form 7のe-mailアドレスのチェック ****/
add_filter( 'wpcf7_validate_email*', 'my_func', 10, 2 );
function my_func($result, $tag )
{
 $name = $tag['name'];
 if ($name == 'your-email_spare')
 {if($_POST['your-email'] != $_POST['your-email_spare'])
 { $result->invalidate( $tag,'アドレスが異なっています。修正をお願いします。' ); }
 }
 return $result; 
};

【解説】

contact form 7はフィルターフックの機能を用意してくれています。

よって各入力フィールドの値をadd filter関数でフックし内容をチェックをする事ができます。

①add_filter( ‘wpcf7_validate_email*’, ‘my_func’, 10, 2 );

上記がフィルタ関数でemail*の値を’my_func’という関数で受ける事を意味します。

②function my_func($result, $tag )

上記が’my_func’という関数で、$resultは戻り値、$tagは引数になります。

現在フォームにはemail*はyour-emailとyour-email_spareの2か所あるのでこの関数は2回呼ばれます。

③if ($name == ‘your-email_spare’)

上記で$tag[‘name’]がyour-email_spareの時だけ比較して、2つのアドレスが違っていたらエラーメッセージを$resultにセットして返すプログラムになっています。

４.その他のテクニック

上記の事例ではadd_filter( ‘wpcf7_validate_email*’, ‘my_func’, 10, 2 );が2回呼ばれるプログラムになっていますが、これを1回のコールですましたい場合は下記の様な方法があります。

①your-emailのタグをemail* からtext*に変更する。

これを行うとemail*のタグはyour-email_spareの1個のみになるのでadd_filterは1回しかコールされません。

②プログラムを下記の様に変更する。

1回しか呼ばれない為にIF文が1個少なくなります。

<?php
/**** Contact Form 7のe-mailアドレスのチェック ****/
add_filter( 'wpcf7_validate_email*', 'my_func', 10, 2 );
function my_func($result, $tag )
{{if($_POST['your-email'] != $_POST['your-email_spare'])
 {$result->invalidate( $tag,'アドレスが異なっています。修正をお願いします。' ); }
 }return $result; 
};

以上でContact Form 7で確認用e-mailアドレスを付け加える方法は完了です。

＜ドキュメントガイド＞

前のテーマ：Contact Form 7のインストールとメール設定