Contact Form7の確認画面で「送信してよいですか？」を表示する：メモ

お世話になっているWordPressのContact Form7に確認画面を表示させるJavaScriptのコードがあります。便利なものを更に便利に、ということでしょうか。

今回はこの確認画面で送信ボタン付近に「この内容で送信してよいですか？」的な文言を表示させる必要がありまして、毎度ながら無理矢理なんとか出したのでメモとして。

…いい加減スマートな方法でやりたいものですが。

Contact Form7とその確認画面

Contact Form7は有名なプラグインですので説明は省きます。詳細は公式サイトでご覧くださいませ。

そして、このContact Form7に確認画面を付けるjQueryのコードを配布されているのが、WordPressのタグなどを調べる際によく目にするであろう「WordPress私的マニュアル」さんです。下記のページに詳細があります。

• Contact Form 7に確認フェーズを – jQueryで疑似確認ページ

「この内容で送信してよいですか？」的な文言を表示させる

さて本題です。

「この内容で送信してよいですか？」的な文言とは、「確認」ボタンを押した後の画面で、ユーザーに最終的な確認をとる、という役割を期待しています。そのため、送信ボタン付近に表示させたいと考えました。

具体的にどうしたかといえば、以下の通りです。上記の「WordPress私的マニュアル」さんのところで配布されている「jquery.wpcf7.confirm.js」の一部を書き換えます。

var SUBMIT_NAME = '送信';
var CONFIRM_NAME = '確認';
var MODIFY_NAME = '修正';
var SELECT_EMPTY_LABEL = '---';
var SELECT_EMPTY_VALUE = '---';
var MODIFY_BUTTON_ID = 'wpcf7-modify';
var ALERT_MESSAGE_CLASS = 'wpcf7-not-valid-tip';
var EMPTY_MESSAGE = '必須項目に記入もれがあります。';
var INVALIDE_EMAIL_MESSAGE = 'メールアドレスの形式が正しくないようです。';
var DISABLE_SELECT_COLOR = 'color:#000000';

コードの上部にある上記の部分に下記を加えます。

var SUBMIT_NAME = '送信';
var SUBMIT_NOTES = '上記の内容で送信してよろしいですか？';
var CONFIRM_NAME = '確認';
var MODIFY_NAME = '修正';
var SELECT_EMPTY_LABEL = '---';
var SELECT_EMPTY_VALUE = '---';
var MODIFY_BUTTON_ID = 'wpcf7-modify';
var ALERT_MESSAGE_CLASS = 'wpcf7-not-valid-tip';
var EMPTY_MESSAGE = '必須項目に記入もれがあります。';
var INVALIDE_EMAIL_MESSAGE = 'メールアドレスの形式が正しくないようです。';
var DISABLE_SELECT_COLOR = 'color:#000000';

続いて、70行目あたりにある以下の部分を探します。「SUBMIT_NAME」で検索すると楽です。

$('.wpcf7-submit').val( SUBMIT_NAME ).before( '<input type="button" name="'+MODIFY_BUTTON_ID+'" id="'+MODIFY_BUTTON_ID+'" value="'+MODIFY_NAME+'" />' );

上記の部分の下に下記のように加えます。

$('.wpcf7-submit').val( SUBMIT_NAME ).before( '<input type="button" name="'+MODIFY_BUTTON_ID+'" id="'+MODIFY_BUTTON_ID+'" value="'+MODIFY_NAME+'" />' );
$('.wpcf7-submit').val( SUBMIT_NAME ).before( '<span class="send-notes">'+SUBMIT_NOTES+'</span>' );

以上です。ちなみに、

<span class="send-notes">

みたいにしていますが、これは表示された文言の表示位置を動かすために付けているので、表示するだけならいりません。

やっていること

見たら一目瞭然ですが、非常に単純です。変数に任意の文字列を入れ込んで、ボタンを出す部分で「before」で出力させているだけです。
「SUBMIT_NOTES」という名称も他と重複さえしなければ何でもかまいません。

単純なだけあって仕組みを阻害するものではない、ことを願っています。動作確認はしてますのでこの確認画面が動くのであればまず問題はないかと。

結び

こういうのはあまり得意ではないので、たまたま思いつきがうまくいったという感じです。
他の方の参考になるのかはわかりませんが、自分的には一歩前進です。たぶん。