ワードプレスのプラグイン「Contact Form 7」のあれこれカスタマイズ
Contact Form 7の色々な機能を使った際のメモ書きです。
見たい項目にすぐ移動→
Contact Form 7 で「サンクスページ」を出す方法
Contact Form 7の本家本元の開発者さんでは、「サンクスページなんて不要」とおっしゃっておられます。
まぁ、でも現場にいると、あった方が何かと便利です。
ということで、「Contact Form 7 で「サンクスページ」を出す方法」ですが、
本家本元さんに書いてある通り、
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>
という感じで、遷移させたいページへ誘導するコードを書くと良いです。
「フォーム」を設置しないページに記述しても無駄なんで場所は、Contact Form 7 の「フォーム」欄の冒頭か最後ですかね?
そうすれば、設置するページには必ず記載されるようになります。
「サンクスページ」の役割
ちなみに、「サンクスページ」の役割ですが、メール送信しても注意事項とか読まない人がいます。
確実に見てもらうためには、サンクスページに記載するのがいいかなーと思います。
あとは、別商品薦めたいときとかですね。
購入直後が一番購入意欲が盛り上がってるときなので、そこで「もう1品購入」してもらえるといいかなー?です。
LINEやSNSへのフォローの誘導とか、結構やれることは多いかなって思います。
フォームの送信後、回転する矢印のアイコンは現れるのですが、それっきりで何も起きない。
「Contact Form 7」のあるあるトラブルです。
フィルターや、アクションを独自で追加してなければ、他のプラグインとの競合が起こってる可能性高いです。
でもvalidationを自分でカスタマイズしていたりすると、PHPのエラーで処理が止まっている可能性あります。
その時は、自分で追加したコードを一つ一つ確認するしかないですね。
「メッセージの送信に失敗しました。後でまたお試しください。」に、独自のメッセージを追加したい
入力内容に不備があった場合に、「メッセージの送信に失敗しました。後でまたお試しください。」出るメッセージは、固定の内容なら「Contact Form 7」のメッセージ欄で修正できます。
「Contact Form 7」はエラーメッセージ出してもフォームの入力部分に戻ってくれないので、ユーザーは何が起こったのか判らない場合があります。
フォームの上に戻ってくれるとエラー内容が表示されてるのですが、びっくりして、そこで閉じちゃう人もたまにいます。
そういう方のために、「メッセージの送信に失敗しました。後でまたお試しください。」のメッセージにエラー内容を表示させる方法です。
フィルター wpcf7_display_message を使う
エラーメッセージのカスタマイズには、フィルターが用意されてます。
function wpcf7_form_response_output_extend($output){
$request_error = 'この変数にエラーをセットする';
return $output."\n".$request_error ;
}
add_filter( 'wpcf7_display_message', 'wpcf7_form_response_output_extend', 10, 2 );
という感じでフィルターを追加すろと、エラーメッセージが
この変数にエラーをセットする
という感じで表示されるようになります。
form 要素に id や class 属性を追加
input関係の項目には、「id:foo」や「class:bar」でclassやid属性を付けられます。
ただ、FORMタグの属性にidやclassを付けたい時があります。
その場合は、[contact-form-7]のショートコードに html_id と html_class の属性を追加することで form に任意の id と class を追加できます。
例:
[contact-form-7 id="1234" title="Contact form 1" html_id="contact-form-1234" html_class="form contact-form"]
日付項目(カレンダー形式)の要素に最短日と最長日を付けるには?
「日付項目」の選択範囲を決めることができます。
書き方はこんな感じです。
例:
[date* your-date min:2013-01-01 max:2013-12-31 step:7 class:required "2013-04-01"]
初期値を翌日、最短日を翌日、最長日を60日後にしたい、ということだと。
[date* your-date min:tomorrow max:+60days step:7 class:required "tomorrow"]
という感じで指定できます。
日本語以外のお問い合わせをエラーにする方法。海外からスパム投稿を防ぐ
解決】Contact Form 7(コンタクトフォーム)で、日本語以外のお問い合わせをエラーにする方法。海外からスパム投稿を防ぐ。