WordPressプラグイン「Confirm Plus Contact Form 7」

WordPressでWebサイト制作をされている方は、問い合わせフォームに「Contact Form 7」プラグインを利用されている方も多いのではないでしょうか。随分以前から提供されているプラグインですし、アップデートも頻繁に行われているため、信頼できるプラグインであることがその理由の1つかと思います。
ですが、「Contact Form 7」プラグインには、「送信前確認画面」を表示することができないため、案件によっては、別のプラグインを選択せざる負えないことが今までに何度かありました(※個人的には「送信前確認画面」の重要性はそこまで感じておらず、送信ボタンの直前に「送信前の入力内容確認」などのチェックボックスを設けておき、返信メール内に「確認しました」と表示されるようにしておけば問題ないと思いますが、クライアントさんからの要望は重要ですよね)。
そこで今回の記事は、「Contact Form 7」に送信前確認画面を表示することができる「Confirm Plus Contact Form 7」についてご紹介します。

Index

― 目次 ―

「Confirm Plus Contact Form 7」について
「Confirm Plus Contact Form 7」の使用手順
ボタン上のテキストを変更するには？
JavaScriptの挙動を一部改修
送信前確認画面の表示イメージ

「Confirm Plus Contact Form 7」について

「Confirm Plus Contact Form 7」は、「Contact Form 7」に送信前確認画面を表示させるためのプラグインです。
以前は、「Contact Form 7 add confirm」という同じように送信前確認画面を表示させるプラグインがありましたが、現在は、プラグインが更新されていないこともあり、最新版の「Contact Form 7」では動作しなくなりました。
ですから、「Contact Form 7」で送信前確認画面を表示させたい場合に有効なプラグインです。

[参考]
「Contact Form 7 Multi-Step Forms」というプラグインもありますが、以下の点で実装するには課題が多いため、今回は「Confirm Plus Contact Form 7」をご紹介します(※個人的には、実運用するには課題が多く難しいと思いました…)。

●「Contact Form 7 Multi-Step Forms」の課題

自動送信メールにファイル添付ができない
※プラグインサイトには「ファイルアップロードを使用する必要がある場合は、最後のステップに配置するようにしてください」と制限事項があることが明記されています
メール送信量が4KBまで
※有料版は5MB
フォーム送信した後、入力画面に入力内容が残る
※送信完了画面の遷移の箇所に”last_step”のタグを挿入することで回避可能
確認画面から修正をするボタンを押した際、空の青枠が表示される
※CSSで回避可能

「Confirm Plus Contact Form 7」の使用手順

「Confirm Plus Contact Form 7」で送信前確認画面を表示させるには、「Contact Form 7」の使用方法に沿った記述をしていれば、比較的簡単に実装できます。使用手順と共に「よく陥りがちな注意点」を含め紹介していきます。
まずは、「Confirm Plus Contact Form 7」プラグインをインストールし有効化してください。
次は、「Contact Form 7」のフォーム編集画面に移動し、下記参考ソースを基に記述していきます。

// テキストの場合
<label>テキスト <span class="required_icon avoid-confirm">必須</span>
[text* your-text placeholder "例) 〇〇〇〇〇"]</label>

// テキストエリアの場合
<label>テキストエリア <span class="required_icon">必須</span>
[textarea* your-textarea placeholder "〇〇〇〇〇"]</label>

// チェックボックスの場合
<fieldset>
<legend>チェックボックス <span class="required_icon">必須</span></legend>
[checkbox* your-checkbox-type use_label_element "A" "B" "C"]
</fieldset>

// ラジオボタンの場合
<fieldset>
<legend>ラジオボタン <span class="required_icon">必須</span></legend>
[radio your-radio use_label_element "a" "b"]
</fieldset>

// セレクトメニューの場合
<fieldset>
<legend><label for="selectmenu">セレクトメニュー <span class="required_icon">必須</span></label></legend>
[select* selectmenu include_blank "1" "2" "3"]
</fieldset>

// テキストの場合

<label>テキスト 必須

[text* your-text placeholder "例) 〇〇〇〇〇"]</label>

// テキストエリアの場合

<label>テキストエリア 必須

[textarea* your-textarea placeholder "〇〇〇〇〇"]</label>

// チェックボックスの場合

<legend>チェックボックス 必須</legend>

[checkbox* your-checkbox-type use_label_element "A" "B" "C"]

</fieldset>

// ラジオボタンの場合

<legend>ラジオボタン 必須</legend>

[radio your-radio use_label_element "a" "b"]

</fieldset>

// セレクトメニューの場合

<legend><label for="selectmenu">セレクトメニュー 必須</label></legend>

[select* selectmenu include_blank "1" "2" "3"]

</fieldset>

[補足]
2～3行目が「テキスト」の場合。
項目名の「テキスト」から「フォーム入力エリアの最後」までを「labelタグ」で囲みます。
「required_icon」＝必須項目アイコン用のクラス(※CSSで作成してください)、「avoid-confirm」＝「送信前確認画面で表示させたくない文字列」などに使用する「Confirm Plus Contact Form 7」プラグインで用意されているクラスです(※この場合、送信前確認画面で必須の文字列が表示されなくなります)。
「placeholder “例) 〇〇〇〇〇”」＝入力前に「入力例などを予め表示させておくプレースホルダー」です。

6～7行目が「テキストエリア」の場合。
項目名の「テキストエリア」から「フォーム入力エリアの最後」までを「labelタグ」で囲みます。

10～13行目が「チェックボックス」の場合。
項目名の「チェックボックス」から「フォーム選択エリアの最後」までを「fieldsetタグ」で囲みます。
そして、項目名の「チェックボックス」を「legendタグ」で囲みます。

16～19行目が「ラジオボタン」の場合。
項目名の「ラジオボタン」から「フォーム選択エリアの最後」までを「fieldsetタグ」で囲みます。
そして、項目名の「ラジオボタン」を「legendタグ」で囲みます。
1点注意が必要なのが、ラジオボタンの場合「Contact Form 7」で必須項目にする際に使用する「*(アスタリスク)」を「radio*」というように付けないようにしましょう。
これは「ラジオボタンはもともと選択必須の項目に使用するためのもの」だからです(※*(アスタリスク)を付けるとラジオボタンが表示されませんので注意です)。

22～25行目が「セレクトメニュー」の場合。
項目名の「セレクトメニュー」から「フォーム選択エリアの最後」までを「fieldsetタグ」で囲みます。
そして、項目名の「セレクトメニュー」を「legendタグ」で囲みます(※ここまでは、チェックボックス・ラジオボタンと同じです)。
さらに、項目名の「セレクトメニュー」を「labelタグ」で囲み、「for属性」を追記します。
「for属性」は、フォーム入力名(ここでは「selectmenu」)と同じにします(※セレクトメニューの場合、チェックボックスやラジオボタンの場合と異なり、「labelタグ」と「for属性」が必要なので注意してください)。

[参考]
12行目と18行目の「use_label_element」についてはContact Form 7：入力フィールドにラベルを付けられますか？をご参照ください。
24行目の「include_blank」についてはContact Form 7：チェックボックス、ラジオボタン、メニューをご参照ください。

ボタン上のテキストを変更するには？

送信前完了画面で使用されるボタン上のテキストは、デフォルトの「Confirm Plus Contact Form 7」では「確認」「修正」「この内容で送信する」となっています。このテキストを修正するには「Poedit」を利用します。
ですが、Poeditで翻訳ファイルの「.poファイル(翻訳ファイル作成用のファイル)」を編集し、コンパイルして「.moファイル(翻訳ファイルの本体)」を作成した後、WordPressの以下ディレクトリにアップロードしてもテキスト内容は変わりません。
/wp-content/languages/plugins/
※↑プラグインの翻訳ファイルが格納されているディレクトリ
WordPressの以前のバージョンでは、テキスト内容が変更され反映されていましたが、現在のバージョンでは反映されません(※WordPressのバージョン4.6以降からは、translate.wordpress.orgによる翻訳が優先されるためです)。

そこで、functions.phpを利用して、オリジナルの翻訳ファイルを読み込むようにします。
オリジナルの翻訳ファイルは、指定したディレクトリにアップロードするため、プラグインのアップデートで翻訳ファイルが上書きされることもありません。functions.phpに以下を記述します。

// Confirm Plus Contact Form 7プラグインでオリジナル翻訳ファイルを読み込む
function replace_textdomain_cpcf7() {
  // プラグイン名
  $domain = 'confirm-plus-contact-form-7';
  // 翻訳ファイル名：get_locale()=ja → confirm-plus-contact-form-7-ja.mo
  $mofile = $domain . '-' . get_locale() . '.mo';
  // オリジナル翻訳ファイルの格納場所
  $custom_mofile = get_template_directory() . '/languages/' . $mofile;
  // 元の翻訳ファイルの格納場所
  $original_mofile = WP_CONTENT_DIR . '/languages/plugins/' . $mofile;
  // 読み込み済みの翻訳ファイルを一旦解除
  unload_textdomain($domain);
  // オリジナル翻訳ファイル → 元の翻訳ファイルの順で読み込み直す
  load_textdomain($domain, $custom_mofile);
  load_textdomain($domain, $original_mofile);
}
add_action('after_setup_theme', 'replace_textdomain_cpcf7');

// Confirm Plus Contact Form 7プラグインでオリジナル翻訳ファイルを読み込む

function replace_textdomain_cpcf7() {

// プラグイン名

$domain = 'confirm-plus-contact-form-7';

// 翻訳ファイル名：get_locale()=ja → confirm-plus-contact-form-7-ja.mo

$mofile = $domain . '-' . get_locale() . '.mo';

// オリジナル翻訳ファイルの格納場所

$custom_mofile = get_template_directory() . '/languages/' . $mofile;

// 元の翻訳ファイルの格納場所

$original_mofile = WP_CONTENT_DIR . '/languages/plugins/' . $mofile;

// 読み込み済みの翻訳ファイルを一旦解除

unload_textdomain($domain);

// オリジナル翻訳ファイル → 元の翻訳ファイルの順で読み込み直す

load_textdomain($domain, $custom_mofile);

load_textdomain($domain, $original_mofile);

}

add_action('after_setup_theme', 'replace_textdomain_cpcf7');

[補足]
4行目は「プラグイン名」。
こちらには、languages → pluginsディレクトリに入っている「Confirm Plus Contact Form 7」の言語ファイル名を入れます(※「confirm-plus-contact-form-7-ja.mo」の「-ja.mo」を除いたファイル名を記述)。

6行目は「翻訳ファイル名」。
「get_locale()」で「ja」を取得します(日本の場合)。これで翻訳ファイル名は「confirm-plus-contact-form-7-ja.mo」となります。

8行目で「オリジナル翻訳ファイル」の格納場所を指定します。
テンプレートディレクトリの中にlanguagesフォルダを作成し、そこにオリジナルの翻訳ファイルを格納しています。

10行目は「元の翻訳ファイル」の格納場所です。

12行目は、先程説明した「WordPressのバージョン4.6以降からは、translate.wordpress.orgによる翻訳が優先される」といった箇所に関わってきます。そのため、読み込み済みの翻訳ファイルを解除し、「オリジナル翻訳ファイル」 → 「元の翻訳ファイル」の順で読み込み直します。
こうすることで、オリジナル翻訳ファイルが優先されますので、プラグインに使用されている翻訳ファイルをオリジナルのものに変更することができます。また、プラグインのアップデートによる翻訳ファイルの上書きも防ぐことができます。

JavaScriptの挙動を一部改修

「Confirm Plus Contact Form 7」プラグインで確認画面を出す際、「確認画面のトップまでスクロールして表示」されるようになっています。また、「確認画面の高さがブラウザの高さより低い場合、上下中央に表示」されるようになっています。
個人的には、「ページの上部までスクロールして表示」させたいので、JavaScriptを一部改修しました(※確認画面の上部に注釈を掲載しているため、そこも見て欲しいためです)。
「Confirm Plus Contact Form 7」プラグインの以下のファイルを改修しました。
confirm-plus-contact-form-7 → assets → js → scripts.js

// 確認画面トップまでスクロール
var position = $(this).offset().top;

//var popupHeight = $( '#wpcf7cpcnf' ) . height();
var popupHeight = $( '#header' ) . height();
var windowHeight = document.documentElement . clientHeight;

var topOffset = 50;
if ( popupHeight < windowHeight ) {
// 確認ポップアップの高さがブラウザ高さより小さければ上下中央表示
//topOffset = Math . round( ( windowHeight - popupHeight ) / 2 );
topOffset = Math . round( ( windowHeight - popupHeight ) / 1 );
}

// 確認画面トップまでスクロール

var position = $(this).offset().top;

//var popupHeight = $( '#wpcf7cpcnf' ) . height();

var popupHeight = $( '#header' ) . height();

var windowHeight = document.documentElement . clientHeight;

var topOffset = 50;

if ( popupHeight < windowHeight ) {

// 確認ポップアップの高さがブラウザ高さより小さければ上下中央表示

//topOffset = Math . round( ( windowHeight - popupHeight ) / 2 );

topOffset = Math . round( ( windowHeight - popupHeight ) / 1 );

}

[補足]
5行目を改修します(※4行目が元の記述)。
IDを「#header」と変更して、ページ上部までスクロールして表示されるようにしました。

12行目を改修します(※11行目が元の記述)。
ページの上下中央表示ではなく、ページ上部表示としました。
プラグインをアップデートすると元に戻ってしまいますので、特に改修する必要がなければそのままでもよいと思います。