Home
WordPress
Contact Form 7の基本設定

Contact Form 7の基本設定

公開日
2022.04.16
更新日
2024.01.02
Contact Form 7の基本設定

どうも!かけちまるです!

WordPressでのお問い合わせフォーム設置で定番のプラグインである「Contact Form 7」の基本設定について解説します。

\

この記事では、

  • ・フォームの設置
  • ・フォーム項目のカスタマイズ
  • ・ユーザーへの自動返信メールの設定
  • ・完了画面の設定

がわかります。

フォームの設置

まずは、お問い合わせフォームをサイトに設置するところからいきましょう。

次のような流れでフォームを設置していきます。

  • ①プラグインのインストール
  • ②フォームを新規作成
  • ③固定ページを用意
  • ④固定ページにショートコードを貼り付け
  • ⑤完了
1

プラグインのインストール

ダッシュボードの左メニュー > プラグイン > 新規追加に進みます。
検索窓に「Contact Form 7」と入力し、インストールします。
インストールが完了したら有効化しておいてください。

プラグインのインストール

左メニューに「お問い合わせ」項目が出たら順調です。

2

フォームを新規作成

左メニューのお問い合わせに進み、新規追加から新しいフォームを追加します。
名前は任意で設定してください。
そしたら、保存してください。

フォームを新規作成

個人的には元からあるコンタクトフォーム1はデフォルト値を残すため新規作成した方が良いと思います。

3

固定ページを用意

お問い合わせフォームを設置する固定ページを用意します。
左メニューの固定ページ > 新規作成に進みます。
タイトルとパーマリンクを任意の値にし、公開してください。

固定ページを用意
4

固定ページにショートコードを貼り付け

左メニューのお問い合わせに進み、②で作成したフォームのショートコードを③で作成した固定ページに貼り付けます。

固定ページにショートコードを貼り付け
4

完了

これで、サイトにお問い合わせフォームを設置することができました。
ローカル環境でなければ、送信テストをするとWordPressに設定してあるメールアドレス宛にメールが届くと思います。

完了

フォーム項目のカスタマイズ

デフォルトだとフォームの項目が少ないと感じるかもしれません。
そんな時はフォーム項目を追加できます。

このセクションでは、フォーム項目の追加方法の解説をします。
その後に、各項目の細かい設定方法を解説します。

フォーム項目は次のような流れで追加していきます。

  • ①項目を追加したいフォームを表示
  • ②追加したい項目を選択し各種設定
  • ③完了
1

項目を追加したいフォームを表示

左メニューのお問い合わせ > コンタクトフォームに進みます。
次に、項目を追加したいフォームに進みます。

項目を追加したいフォームを表示
2

追加したい項目を選択し各種設定

まず、フォームタブが選択されていることを確認してください。
エディターの上にタグが並んでいるので追加したい項目のタグをクリックするとモーダルが立ち上がります。
モーダルで各種設定をし、タグを挿入をすると次のようなコードが生成されタグが追加されると思います。
※labelタグなどは各自で整えてください。

  • [text* company id:form_company class:form_company placeholder “○○株式会社”]

追加されたのを確認したら保存します。

追加したい項目を選択し各種設定
3

完了

これで項目を追加できました。
サイトを確認すると項目が増えていることが確認できるかと思います。

完了

ここからは項目の設定について解説します。
この記事では、主要な項目の追加方法のみを解説します。

テキスト

単一行入力のテキスト項目を追加できます。

実装サンプル

    • [text* your_name class:input_name placeholder “山田 太郎”]

    設定画面

    テキスト設定画面

    チェックボックス

    複数選択が可能なチェックボックスを追加できます。

    実装サンプル

      チェックボックス

      • [checkbox* know use_label_element “検索” “広告” “SNS” “その他”]

      設定画面

      チェックボックス設定画面

      ラジオボタン

      1つのみ選択可能なラジオボタンを追加できます。

      実装サンプル

        ラジオボタン

        • [radio sex use_label_element default:1 “男性” “女性” “その他”]

        設定画面

        ラジオボタン設定画面

        ドロップダウンメニュー

        複数の項目から選択できるメニューを追加できます。

        実装サンプル

          ドロップダウンメニュー

          • [select prefectures include_blank “北海道” “青森県” “岩手県” “宮城県”]

          設定画面

          ドロップダウンメニュー設定画面

          承諾確認

          利用規約やプライバシーポリシーに同意してもらうためのチェックボックス

          実装サンプル

            • [acceptance acceptance-223] プライバシーポリシーに同意 [/acceptance]

            設定画面

            承諾確認設定画面

            ユーザーへの自動返信メールの設定

            Contact Form 7ではデフォルトでユーザーへの自動返信メールは設定されていません。

            設定方法は、

            左メニューのお問い合わせ > コンタクトフォームに進みます。
            メールタブに進み、下のほうにメール(2)を使用というチェックボックスがあるのでチェックを入れます。
            そうすると、自動返信メール用の設定が使用できるようになります。
            最後に保存します。

            ユーザーへの自動返信メールの設定

            完了画面の設定

            完了画面が必要な人は実装してください。
            Contact Form 7では、デフォルトで完了画面が用意されていません。

            なので、方法としてはフォームが送信されたらJavaScriptで完了画面へ遷移するように設定します。

            完了画面の設定手順は次の通りです。

            • ①完了画面用の固定ページを作成
            • ②お問い合わせ用の固定ページを編集
            • ③完了
            1

            完了画面用の固定ページを作成

            まず完了画面を作成しましょう。
            左メニューの固定ページ > 新規作成に進みます。
            タイトル、ページの内容、パーマリンクを任意の値に設定してます。
            できたら公開です。

            完了画面用の固定ページを作成
            2

            お問い合わせ用の固定ページを編集

            お問い合わせ用の固定ページに、送信したら完了ページに遷移する処理をJavaScriptで書いていきます。

            お問い合わせ用の固定ページに移動し、次のコードをカスタムHTMLで追加してください。
            完了ページのURLはご自身のものに変更してください。

            JavaScript
            コピー
            <script> document.addEventListener('wpcf7mailsent', function(){ location = '完了ページのURL'; }); </script>

            追加できたら更新してください。

            お問い合わせ用の固定ページを編集
            3

            完了

            完了ページに遷移されるかお問い合わせフォームを送信してみましょう。

            送信するときに「ありがとうございます。メッセージは送信されました。が出るのが嫌なときはCSSで非表示にするか、フォーム設定のメッセージタブで文言を変更しましょう。

            完了

            Contact Form 7関連の記事

            おわり

            かけちまる
            かけちまる
            Webエンジニアをしています。
            HTML/CSS/JavaScript/jQuery/PHPができます。
            WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

            関連記事

            【GSAP】registerEffectでアニメーションをテンプレート化する方法

            【GSAP】registerEffectでアニメーションをテンプレート化する方法

            for文内でsetTimeoutを使うときの変数のスコープとクロージャ

            for文内でsetTimeoutを使うときの変数のスコープとクロージャ

            記事の目次にカレント表示機能を導入する😤

            記事の目次にカレント表示機能を導入する😤

            【CSSのみ】背景のグラデーションを変化させるアニメーション

            【CSSのみ】背景のグラデーションを変化させるアニメーション

            Contact Form7の入力エラー表示をCSSのみでカスタマイズ

            Contact Form7の入力エラー表示をCSSのみでカスタマイズ

            【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

            【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする