Contact Form7とは

WordPressに簡単にお問い合わせやお申し込みなどのフォームを設置することができるプラグインです。
無料で利用でき、プラグインの更新やサポートも頻繁に行われているため、安心して利用することができます。

参考：Contact Form7

Contact Form7は、デフォルトではこのように、フォーム送信後に、短い送信完了メッセージが表示されるだけになっています。
今回は、Contact Form7で、プラグインを使わずにサンクスメッセージを表示させる方法２つをご紹介します！

A．フォームにJavaScriptのコードを記述する方法

1つ目にご紹介するのは、フォームにJavaScriptのコードを記述する方法です。コードを記載することで、送信ボタンを押したときに、別のページを表示させることができます！

固定ページでサンクスページを作成する

サンクスページとして表示させたい内容を固定ページで作成します。
固定ページのURLをコピーしておきます。
※後ほど使用します

STEP
1

Contact Form7の「フォーム」タブを開く

次に、管理画面の
ダッシュボード>お問い合わせ
からContact Form7の編集画面を開きます。

STEP
2

フォームタブの１番下にコードを記述する

フォームタブの１番下にJavaScriptのコードを記述して保存します。
※URLの部分は、先ほどコピーしておいた固定ページのURLが入ります

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'URL';
}, false );
</script>
STEP
3

テスト送信をして確認する

テスト送信をして、確認をおこないます。
送信ボタンを押すと、このように、先ほど固定ページで作成をしたサンクスページが表示されます。

STEP
4

Aの方法のCHECK POINT！

フォームへの簡単な記述で、サンクスページを表示させることができます！
固定ページでサンクスページを作成するので、HTMLやCSSを記述する必要がなく、柔軟なデザインのカスタマイズも可能です！

  • 長いメッセージを表示させたい
  • デザインにこだわりたい
  • HTMLやCSSはあまりわからない

という方にオススメの方法です！

B．送信後に付与されるCSSクラスを利用する方法

2つ目にご紹介するのは、フォーム送信後に付与されるCSSクラスを利用して、送信後にサンクスメッセージを表示させる方法です。
フォームの中に送信後に表示させたい内容と非表示にしたい内容を記述しておくことで、送信後の画面に表示させる内容を指定することができます。
2パターンに分けて解説していきます。

－パターン1－
送信後にフォームを非表示にする

デフォルト状態だと、送信後もフォームがそのまま表示されるので、送信されたかどうかが、わかりにくい状態になっています。
送信後にフォームを非表示にすることで、送信されたということがわかりやすくなります！

フォームを非表示にする仕組み

送信後には、formタグに「sent」というCSSクラスが付与されます。それを利用して、CSSへの記述で、sentのクラスがついているフォームを非表示にしていきます。

フォームの非表示にしたい要素をタグで囲む

今回は、非表示にしたい内容をpタグで囲みました。
pタグで囲まれている内容を非表示にしていきます。


STEP
1

追加CSSに非表示のための記述をする

外観>カスタマイズから、
追加CSSにこちらのコードを記述します。
これで、送信後にpタグで囲まれた部分が非表示になります。

/*送信後にフォームを非表示*/
form.sent p{
display:none;
}
STEP
2

テスト送信をして確認する

テスト送信をして、確認をおこないます。
送信ボタンを押すと、このように、pタグで囲まれた部分が非表示になります。

STEP
3

送信後にフォームが非表示になることで、送信されたことがわかりやすくなりました！

－パターン2－
送信後にフォームを非表示にして代わりのメッセージを表示させる

パターン１の応用として、フォームを非表示にして、さらに代わりのサンクスメッセージを表示させる方法をお伝えしていきます。
送信後に表示させたいメッセージをフォーム内に記述していきます！

フォームの非表示にしたい要素をタグで囲む

非表示にしたい内容をpタグで囲みました。
ここまではパターン1と同様です。

STEP
1

フォームに送信後に表示させたい内容を記述する

送信後に画面に表示させたい内容を記述します。
後ほど、CSSに表示・非表示の記述をしていくため、表示させたい内容を、クラスを付けたdivタグなどで囲んでおきます。

※この例の場合だと、
form-message
というクラスを付けています。

STEP
2

追加CSSに非表示と表示の記述をする

外観>カスタマイズから、
追加CSSにこちらのコードを記述します。
これで、送信後に、divタグ（クラス名：form-message）で囲んだ部分の内容が表示されます。

/*送信後にフォームを非表示*/
form.sent p{
display:none;
}

/*送信前はメッセージを非表示*/
form .form-message {
	display:none;
}

/*送信後にメッセージを表示*/
form.sent .form-message {
	display:block;
}
STEP
3

テスト送信をして確認する

テスト送信をして、確認をおこないます。
送信ボタンを押すと、

  • pタグで囲まれた部分
    →非表示になる
  • divタグ（クラス名：form-message）で囲まれた部分
    →表示される

ということが確認できます！

STEP
4

このように、送信後にフォームを非表示にし、さらにメッセージを表示させることができます！

Bの方法のCHECK POINT！

フォームへの簡単な記述で、サンクスメッセージを表示できます！
別でページを作る必要がなく、フォームの中にメッセージを記述するので、管理がしやすくなります！

  • フォームを非表示にするだけにしたい
  • 別ページを作らずにメッセージを表示させたい
  • 簡単なHTMLやCSSがわかる

という方にオススメの方法です！

弊社ではContact Form7の



様々なカスタマイズ案件に
対応しています

今回ご紹介したサンクスメッセージの表示以外にも、弊社では様々なカスタマイズに対応しています。
ContactForm7を使えば、下記のようなことも可能です。

  • プルダウン選択項目から様々な条件分岐をさせるカスタマイズ
    （例えばAを選択すれば入力項目が1種類のみ表示され、Bを選択すれば入力項目が4種類表示されるなど）
  • 数万件もの申し込みデータを、重複を排除した形でExcelで使えるCSV形式でダウンロード
    （自治体など大規模な申し込みデータを取り扱う必要のある場面を想定。重複データの排除や使いやすいエクスポート用のデータの作成を行う）
  • カレンダーから予約日をユーザーが入力、顧客リストを作成・運用する
    （1日に5件以内程度の予約が入るようなビジネス形態を想定。月額費用の発生する予約システムのASPサービスを利用したくない場合）
  • ユーザーが選択入力した内容を、検索可能なデータベースとしてストックさせる
    （サイト内検索システムの項目として、そのまま実装可能なデータ収集フォームとしての活用を想定）

Contact Form7でのカスタマイズをお考えの方は、ぜひウェブロードまでご相談くださいませ！

投稿者プロフィール

Mayu
Mayu
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

お問合せフォームはこちら

弊社サービスをご検討いただきありがとうございます。
相見積もりや社内検討用など、概算お見積りのPDFが必要な場合はこちらでご入力・出力できます。

概算お見積書 PDF出力

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須弊社を何で知りましたか

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか？

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか？(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか？(複数選択可)

    SSL(https://～)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか？(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)

    こちらの関連記事も読まれています

    PDF変換＆メール送信システムの構築 弊社の働き方をご紹介します＜メルマガサンプル＞ Contact Form7で郵便番号から住所を自動入力！【YubinBango】
    カテゴリー
    WordPress講座
    前の記事
    WordPress保守管理時のセキュリティ確認事項16項目
    2023年3月28日
    次の記事
    ChatGPTを活用したHPの原稿作成方法
    2023年3月30日