Contact Form7とは
WordPressに簡単にお問い合わせやお申し込みなどのフォームを設置することができるプラグインです。
無料で利用でき、プラグインの更新やサポートも頻繁に行われているため、安心して利用することができます。
参考：Contact Form7
Contact Form7は、デフォルトではこのように、フォーム送信後に、短い送信完了メッセージが表示されるだけになっています。
今回は、Contact Form7で、プラグインを使わずにサンクスメッセージを表示させる方法２つをご紹介します！
A．フォームにJavaScriptのコードを記述する方法
1つ目にご紹介するのは、フォームにJavaScriptのコードを記述する方法です。コードを記載することで、送信ボタンを押したときに、別のページを表示させることができます！
固定ページでサンクスページを作成する
サンクスページとして表示させたい内容を固定ページで作成します。
固定ページのURLをコピーしておきます。
※後ほど使用します
Contact Form7の「フォーム」タブを開く
次に、管理画面の
ダッシュボード>お問い合わせ
からContact Form7の編集画面を開きます。
フォームタブの１番下にコードを記述する
フォームタブの１番下にJavaScriptのコードを記述して保存します。
※URLの部分は、先ほどコピーしておいた固定ページのURLが入ります
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'URL';
}, false );
</script>
テスト送信をして確認する
テスト送信をして、確認をおこないます。
送信ボタンを押すと、このように、先ほど固定ページで作成をしたサンクスページが表示されます。
Aの方法のCHECK POINT！
フォームへの簡単な記述で、サンクスページを表示させることができます！
固定ページでサンクスページを作成するので、HTMLやCSSを記述する必要がなく、柔軟なデザインのカスタマイズも可能です！
- 長いメッセージを表示させたい
- デザインにこだわりたい
- HTMLやCSSはあまりわからない
という方にオススメの方法です！
B．送信後に付与されるCSSクラスを利用する方法
2つ目にご紹介するのは、フォーム送信後に付与されるCSSクラスを利用して、送信後にサンクスメッセージを表示させる方法です。
フォームの中に送信後に表示させたい内容と非表示にしたい内容を記述しておくことで、送信後の画面に表示させる内容を指定することができます。
2パターンに分けて解説していきます。
－パターン1－
送信後にフォームを非表示にする
デフォルト状態だと、送信後もフォームがそのまま表示されるので、送信されたかどうかが、わかりにくい状態になっています。
送信後にフォームを非表示にすることで、送信されたということがわかりやすくなります！
フォームを非表示にする仕組み
送信後には、formタグに「sent」というCSSクラスが付与されます。それを利用して、CSSへの記述で、sentのクラスがついているフォームを非表示にしていきます。
フォームの非表示にしたい要素をタグで囲む
今回は、非表示にしたい内容をpタグで囲みました。
pタグで囲まれている内容を非表示にしていきます。
追加CSSに非表示のための記述をする
外観>カスタマイズから、
追加CSSにこちらのコードを記述します。
これで、送信後にpタグで囲まれた部分が非表示になります。
/*送信後にフォームを非表示*/
form.sent p{
display:none;
}テスト送信をして確認する
テスト送信をして、確認をおこないます。
送信ボタンを押すと、このように、pタグで囲まれた部分が非表示になります。
送信後にフォームが非表示になることで、送信されたことがわかりやすくなりました！
－パターン2－
送信後にフォームを非表示にして代わりのメッセージを表示させる
パターン１の応用として、フォームを非表示にして、さらに代わりのサンクスメッセージを表示させる方法をお伝えしていきます。
送信後に表示させたいメッセージをフォーム内に記述していきます！
フォームの非表示にしたい要素をタグで囲む
非表示にしたい内容をpタグで囲みました。
ここまではパターン1と同様です。
フォームに送信後に表示させたい内容を記述する
送信後に画面に表示させたい内容を記述します。
後ほど、CSSに表示・非表示の記述をしていくため、表示させたい内容を、クラスを付けたdivタグなどで囲んでおきます。
※この例の場合だと、
form-message
というクラスを付けています。
追加CSSに非表示と表示の記述をする
外観>カスタマイズから、
追加CSSにこちらのコードを記述します。
これで、送信後に、divタグ（クラス名：form-message）で囲んだ部分の内容が表示されます。
/*送信後にフォームを非表示*/
form.sent p{
display:none;
}
/*送信前はメッセージを非表示*/
form .form-message {
display:none;
}
/*送信後にメッセージを表示*/
form.sent .form-message {
display:block;
}テスト送信をして確認する
テスト送信をして、確認をおこないます。
送信ボタンを押すと、
- pタグで囲まれた部分
→非表示になる - divタグ（クラス名：form-message）で囲まれた部分
→表示される
ということが確認できます！
このように、送信後にフォームを非表示にし、さらにメッセージを表示させることができます！
Bの方法のCHECK POINT！
フォームへの簡単な記述で、サンクスメッセージを表示できます！
別でページを作る必要がなく、フォームの中にメッセージを記述するので、管理がしやすくなります！
- フォームを非表示にするだけにしたい
- 別ページを作らずにメッセージを表示させたい
- 簡単なHTMLやCSSがわかる
という方にオススメの方法です！
弊社ではContact Form7の
様々なカスタマイズ案件に
対応しています
今回ご紹介したサンクスメッセージの表示以外にも、弊社では様々なカスタマイズに対応しています。
ContactForm7を使えば、下記のようなことも可能です。
- プルダウン選択項目から様々な条件分岐をさせるカスタマイズ
（例えばAを選択すれば入力項目が1種類のみ表示され、Bを選択すれば入力項目が4種類表示されるなど） - 数万件もの申し込みデータを、重複を排除した形でExcelで使えるCSV形式でダウンロード
（自治体など大規模な申し込みデータを取り扱う必要のある場面を想定。重複データの排除や使いやすいエクスポート用のデータの作成を行う） - カレンダーから予約日をユーザーが入力、顧客リストを作成・運用する
（1日に5件以内程度の予約が入るようなビジネス形態を想定。月額費用の発生する予約システムのASPサービスを利用したくない場合） - ユーザーが選択入力した内容を、検索可能なデータベースとしてストックさせる
（サイト内検索システムの項目として、そのまま実装可能なデータ収集フォームとしての活用を想定）
Contact Form7でのカスタマイズをお考えの方は、ぜひウェブロードまでご相談くださいませ！
投稿者プロフィール
-
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。
お問合せフォームはこちら
（※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。）
お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。
