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"］

という感じで指定できます。