HOME  /WordPress(初級)
 /Contact Form 7のカスタマイズ
2018年01月16日

Contact Form 7のカスタマイズ

このドキュメントは2016年の初期サイトの時に作成したドキュメントです。

WordPressが全然わからない状態から、とりあえず動く状態まで持っていったやり方を記述しています。

ある程度判っている方は応用編を参照してください。

現在サイトはこの応用編の技術で作成されています。

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

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

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

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

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

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

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

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

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

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

 2.[text* your-name]

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

①タイプ(例:text*)

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

②名前(例:your-name)

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

③オプション

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

④値

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

2.カスタマイズ事例

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

私のサイトでは、このコンタクトフォームを下記の様に変更しています。
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>

変更していません。

2)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アドレスのチェックは行ってくれません。

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

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

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

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

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

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

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

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

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

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

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

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

2)具体的な修正例

①子テーマフォルダに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回呼ばれます。

  1回目のコール 2回目のコール
$tag[‘type’] email* email*
$tag[‘name’] your-email your-email_spare
$_POST[’your-email’] your-emailに入力したデータ your-emailに入力したデータ
$_POST[’your-email_spare’] your-email_spareに入力したデータ your-email_spareに入力したデータ

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

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

4.その他のテクニック

上記の事例では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のインストールとメール設定