ワードプレスの大人気国産プラグイン「Contact Form 7」をカスタマイズする方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日は日本製の大人気プラグイン「Contact Form 7」を企業サイトで使う際の設定設定やカスタム手順を解説させていただきます。基本的にコピペで実装できる内容なのでぜひご参考くださいませ。

ワードプレスの大人気国産プラグイン「Contact Form 7」をカスタマイズする方法

まずはインストールする前の状態からご紹介いたします。

インストールが完了すると以下のメニューが追加されます。

メニューの「お問い合わせ < コンタクトフォーム」を押すと作成済みのフォームが表示されます。

コンタクトフォームをクリックして詳細を確認していきましょう。

各フォームはすでに設定されているので変更する必要はありません。

1. 自動返信(サンクス)メールを設定する方法

フォームの右にあるメールと書かれたタブを開くと自動返信メールを設定できます。

自動返信メールは2パターンを登録可能です。1つ目を管理者宛、2つ目をフォーム利用者宛に設定することが多いです。もし2つ目の自動返信メールを有効にする場合はチェックマークを有効にしましょう。

メール本文の設定は以前に別記事でまとめているのでぜひご参照くださいませ。文面もコピペ可能です。

ワードプレスで管理者と申込者へ自動返信メールを送信できるお問い合わせフォームを設置する方法

2. エラーメッセージの表示文言を変更する方法

Contact Form 7はとても柔軟に作られていますのでエラーメッセージも変更可能です。

入力内容の不備メッセージは以下が標準状態です。

設定を変更してみましょう。

変更を保存すると表示されるメッセージが変わります。

💻受講料無料でプログラミング習得

⇒ 完全無料のプログラミングスクール - 手に職をつけて安定的に働きたい人へ -

文言の変更はカンタンなので必要に応じてお好みの文章へ調整してください。

3. その他の設定でデモモードにする方法

Contact Form 7ではフォームの動作検証で「デモモード」が使えます。デモモードでは「実際のメール送信」がスキップされて完了メッセージを表示してくれます。テストを行う際に便利な機能です。

デモモードにするには以下の記述を足せばOKです。

以下念のためコピペ用で残しておきます。

demo_mode:on

4. 送信完了時にサンクスページへ転送する方法

Contact Form 7では初期の頃、上記の「その他の設定」にon_sent_ok:やon_submit:を使ってサンクスページ転送を行なっていました。しかし、ワードプレスの進化に伴い推奨されない書き方として削除されました。

つまり、on_sent_ok:といった書き方が動かなくなっています。しかし、コンバージョン測定ではサクスページへ転送させなければならないため代用方法として別の手段が残されています。

コンバージョン測定で使える別の記述方法は以下で解説していますのでご参照くださいませ。

Contact Form 7で設置したお問い合わせフォームの送信完了時にプラグインを使わずサンクスページ(/thanks)へ転送させる方法

5. 設置したフォームに確認画面を挟む方法

Contact Form 7には「確認画面」がありません。理由は海外では確認画面なしがスタンダードだからです。

とはいえ日本国内で使うのであれば「確認画面」を挟みたいシチュエーションがありますよね。状況によってはクライアントから確認画面を挟みたいのですがとご相談を受けることもあるはずです。

確認画面を設定する方法はカンタンです。以前に別記事でまとめているので以下からご参照ください。

WordPressにワンタッチでお問い合わせフォームを導入できるContact Form 7に確認画面を導入する方法

6. 設置したフォームの項目内に透かし文字を設定する方法

お問い合わせフォームの使いやすさを向上するためには「透かし文字の設定」が必須です。

透かし文字は「Placeholder(プレイスホルダー)」と呼ばれています。Contact Form 7ではオプション扱いでちょっとした設定で透かし文字を追加できます。方法は以下記事をご参考くださいませ。

Contact Form 7で設置したお問い合わせフォーム内へidやclassやPlaceholderを挿入する記述方法

7. 設置したフォームにカンタンなスパム対策を設定する方法

Contact Form 7を設置したウェブサイトが人気サイトになってくるとスパム業者に狙われます。

また運営期間が長くなればなるほど自動ツールを使ったスパムメールが届きやすくなります。対策するもっとも手軽な方法として画像認証を導入する方法があります。以下手順をご参照ください。

Contact Form 7で設置したフォームへ海外からの不正申込みが増えた時に導入するべきプラグイン「Really Simple CAPTCHA」

まとめ

本日は「Contact Form 7」の基本カスタマイズ方法をご紹介させていただきました。

Contact Form 7は世界中で500万以上もダウンロードされている大人気プラグインなのでしっかりとカスタマイズをしなければひと目で「Contact Form 7」だとバレてしまいます。見た目のカスタマイズ方法は上記でお伝えした通りですが「エラーメッセージのデザインを変えるのも1つの方法」です。

デザインの変更が行える無料プラグインがあるのでぜひ併せてチェックくださいませ。

Contact Form 7の標準出力メッセージ(デザイン)を変更する専用プラグイン「Contact Form 7 CSS Message」

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください