HOME  /WordPress(初級)
 /Contact Form 7のカスタマイズ
2020年03月27日

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のインストールとメール設定

以上でこのドキュメントの説明は完了です。

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

「wordpress」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

WordPressをインストールするとディフォルトではサイトURLはドメイン名/WordPressフォルダになります。これをドメイン名だけにする為にSynologyの仮想ホスト機能を使います。本ドキュメントはこの使い方を解説しています。

WordPressの動作環境を変更すると、DBをダイレクトに変更しなければならないケースがあります。このドキュメントはphpMyAdminのエクスポートとインポートを使って修正した事例を紹介しています。

ここではSynoligyサーバを「Hyper Backup」アプリケーションで、Googleドライブにバックアップ/リストアする方法を解説しています。

Synologyを複数台持っている場合は、Synology間でバックアップを相互に持たせる事ができます。ここではその方法を解説しています。

SynologyのMariaDBから、mysqldumpを使ってDBを定期的にダンプする方法と、それを利用してWordPressを過去の時点に戻す方法を解説しています。

フロントページやカテゴリページを使って最終的なメニュ構成を作成する方法を紹介しています。

固定ページに必要なのは、読者からの問い合わせを受けるメールフォームです。これを実現する為に『Contact Form 7』のインストールと設定、更にメールを送るためのSMTPとして、『WP-Mail-SMTP』のインストールと設定事例を紹介しています。

カテゴリページの表示を抜粋表示に変更してもこのカテゴリーの何処にどの様なドキュメントがあるか?は良く分かりません。そこで解説ページを固定ページに書き、カテゴリページの表示の時に、この固定ページを表示させる方法を解説しています。

このドキュメントは投稿ページと固定ページの違いや固定ページのプログラム構造を説明し、この固定ページを広幅表示に変更するための具体的カスタマイズ方法を紹介し更に固定ページのタイトルを非表示にする方法も解説しています。

Twenty twelve 投稿ページには各種の一覧ページがありこの表示方法に全文表示と抜粋表示があります。その中で検索ページは抜粋表示ですがそれ以外は総て全文表示になっています。このドキュメントは一覧表示の物は総て抜粋表示にする方法が記載されています。

ヘッダーはWEBサイトの顔になりますがTwenty Twelveのヘッダーは貧弱です。ヘッダーはタイトル、説明及びメニューから構成されており、このドキュメントはこれらをカスタマイズする方法が記載されています。

このドキュメントはウィジェットエリアの考え方とCSSを編集して少し見栄えの良いウィジェットエリアする方法を解説しています。

一般のテキストボックスを使ってPHP/HTMLソースを記述するとhttp画面で正しく表示されない問題が発生します。
このドキュメントはTinyMCE Advancedに整形済みテキスト(preformatted text)を使ったボックスを作成する方法を紹介しています。

このドキュメントはsingle.phpとcontent.phpをカスタマイズし、投稿ページの<前の記事><次の記事>のリンクを削除。メタ情報はカテゴリと投稿日を削除し編集のみとし、最後に記事タイトルの前に更新日をいれ、記事タイトルを装飾した事例です。

Twenty Twelve のフッターには『Proudly powered by WordPress』という文字が出力されます。これを通常サイトの様に『Copyright表現』に変更する方法を記載しています。

本ドキュメントではBreadcrumb NavXTのインストールからそれを表示させる為のheader.php及びCSSの編集方法と表示されたパンくずリストをビジュアルアイコンを使ってよりビジュアルにする方法を説明しています。

アイコンも文字を使ったWEBサイトをよく目にしますが、WPのビジュアルエディタで使えるプラグインが『WordPress Visual Icon Fonts』です。このドキュメントには、インストールの仕方と簡単な使い方を紹介しています。

このドキュメントはTinyMCEのビジュアルエディタとhttp画面を一致させる設定や、見出しや段落等のテキストエリア要素の設定、テキストボックスの新設方法、及び表がビジュアルエディタで利用できる設定等TinyMCEの使いこなす為のテクニックを紹介しています。

このドキュメントはCSSのカスタマイズ編です。内容はTwenty Twelveの画面構成解説、子テーマの作り方、CSSを編集する際の注意点、具体的なCSSカスタマイズ事例。事例はスマートデバイスにも対応させる為に%指定をしています。

本投稿はTwenty Twelveの投稿のカテゴリ設定や文書の作成について事例と注意点を記載しています。

WordPressをインストールする時に、ログインユーザ名を指定しますが、デフォルトのままではブログの表示名も上記ログインユーザ名が使われます。これを変更する方法を解説しています。

WordPressをインストールして、WPのテーマを『Twenty Twelve』決めた次に悩んだのは、ダッシュボードにある『設定』をどの様に設定したら良いか?です。本ドキュメントではこのWEBサイトの設定をどの様にしたのか?を解説しています。

本サイトのWordPressのテーマは、Twenty Twelveで構築しました。本ドキュメントでは何故、このテーマを選択したのか?の背景と設定方法を解説しています。

WordPressのCSSファイルやPHPファイルを編集する為には『UTF-8 の BOM なし』のテキストエディタが必要になります。本稿ではこのサイトで使っているEmEditor Free版の利用事例を紹介しています。

SynologyのWordpressパッケージをインストールする方法を解説しています。

画像を取り込むツールとしてOnePerss Image Elevator、サムネールの再構築にRegenerate Thumbnailsを利用しています。このドキュメントは画像に関するツールと管理方法について解説しています。

SynologyのNASに日本語版WordPressをインストールするやり方を解説しています。複数のWordPressも同一手法で稼動させることができます。