Contact Form 7（コンタクトフォーム7）カスタマイズのまとめ

Contact Form 7を使うメリット

• 全ての機能を無料で利用できる
• カスタマイズがしやすい
• カスタマイズやバグ解消について参考記事が多い
• フォーラムがわかりやすく参考になる
• 関連する機能拡張プラグインがある

Contact Form 7の導入フロー

ここでは、WordPressでのWebサイト制作をベースに話を進めます。

Contact Form 7をインストールする

Contact Form 7を有効化する

Contact Form 7の登録内容を決める

Contact Form 7の自動返信を設定する

Contact Form 7のデザインを整える

【Contact Form 7】CSSでデザイン カスタマイズ（コピペOK・レスポンシブ対応）

https://tsutchii.com/cf7-design-customize

reCAPTCHAでセキュリティ設定

reCAPTCHAのAPIキー取得

Contact Form 7に実装

追従アイコンの非表示と、文言の追記

参考ページ
【2022年最新】Contact Form 7の使い方・カスタマイズ方法まとめ

https://tsutchii.com/cf7-design-customize

拡張プラグイン（Contact Form 7 add confirm）で入力確認ページを作る

プラグインContact Form 7 add confirmの追加

バグの修正

223行目から226行目辺りの２箇所
「event.detail.id」とあるので、これを「event.detail.unitTag」と修正

document.addEventListener( 'wpcf7submit', function( event ) {
	switch ( event.detail.status ) {
		case 'wpcf7c_confirmed':
		wpcf7c_step1(event.detail.unitTag);
		break;
		case 'mail_sent':
		wpcf7c_step2(event.detail.unitTag);
		break;


158行目あたりに追加
	//確認画面から戻った後の表示改善
			parent.find(".wpcf7c-btn-confirm").on("click",function(){
				responseOutput.css("display","");
			});

Contact Form 7 v5.4にアップデートして確認画面へ遷移しなくなった Contact Form 7 add confirm の修正方法【v5.5.1検証済み】 | インフォコネクト株式会社参考ページ

https://tsutchii.com/cf7-design-customize