Contact form7はWebサイトに問い合わせフォームを設置して、フォームの送信や通知メールの設定が可能なプラグインです。
無料ですべての機能が利用でき、スパムの振り分けや多言語サイト対応など豊富な機能を備えています。
カスタマイズ性も高くデフォルトのレイアウトに不満がある方はコードを追加して希望するデザインに変えられます。
今回はContact form7の初期設定かたよくあるカスタマイズの仕方を解説する記事を作成しました。
自分のサイトにフォームを設置してユーザーとコミュニケーションをとりたい方はぜひ本記事を参考にWordpressを操作してみてください。
Contact form7とは？
Contact Form 7は、WordPressサイトにお問い合わせフォームを簡単に設置できる無料のプラグインです。
プログラミングの知識がなくても、シンプルなフォームを作成・管理できます。主な機能として、以下が挙げられます。
- フォームの作成と編集: テキストフィールド、チェックボックス、ラジオボタン、ドロップダウンメニューなど、多様な入力項目を組み合わせてフォームを構築できます。
- メール設定: フォームから送信された内容を指定のメールアドレスに転送する設定が可能です。管理者とユーザーの双方に自動返信メールを送信できます。
- スパム対策: reCAPTCHAの統合やクイズ機能を利用して、スパムからフォームを保護できます。
- カスタマイズ性: HTMLやCSSを用いて、フォームのデザインやレイアウトを自由に調整できます。
- 多言語対応: 日本語を含む複数の言語に対応しており、公式サイトやFAQも日本語で提供されています。
必要最低限の機能に絞られているため、動作が軽く、サイトのパフォーマンスに与える影響が少ないとされています。
多くのアドオンやプラグインと組み合わせることで、機能を柔軟に拡張できます。これにより、ユーザーのニーズに合わせたカスタマイズが可能です。
初期設定から使用し始めるまでの手順
プラグインの導入からサイトに設置したフォームを使える状態にするまでの手順は次のとおりです。
- 固定ページの作成
- プラグインのインストールと有効化
- フォームの設定
- ショートコードの設置
固定ページの作成
はじめにフォームを設置する問い合わせページとなる固定ページを作成します。
- 管理画面のダッシュボードで「固定ページ」→「新規作成」を選択
- 「タイトル」と「スラッグ」を入力
後ほどショートコードを設置するため、今の段階では本文は空欄でかまいません。
プラグインのインストールと有効化
次にContact form7のプラグインを追加して有効にします。
- 管理画面のダッシュボードで「プラグイン」→「新規追加」をクリック
- 検索バーに「Contact Form 7」と入力
- 「今すぐインストール」をクリック
- インストールが完了したら「有効化」をクリック
上記の手順が完了するとダッシュボードにお問い合わせのメニューが現れます。
インストールしただけでは出てこないため、忘れずに有効化ボタンを押してください。
フォームの設定
次にContact Form 7のメニューにアクセスしてフォームの項目を設定します。
デフォルトの「コンタクトフォーム1」を編集するか「新規作成」で新しく追加しましょう。
デフォルトの設定では氏名・メールアドレス・題名・メッセージ本文の入力フィールドが存在します。上の画像の赤枠で囲ったボタンをクリックすると任意の項目を追加できます。
- テキスト：名前や件名の入力に使用するフィールド
- メールアドレス：メールアドレスの入力に使用するフィールド
- 電話番号：連絡先の電話番号の入力に使用するフィールド
- 数値：年齢や数量の入力に適したフィールド
- テキストエリア：詳細な説明や長い文章の入力に適したフィールド
- ドロップダウン：複数の選択肢をリスト表示して一つ選択させるフィールド
- チェックボックス：複数の選択肢をリスト表示して複数選択させるフィールド
- ラジオボタン：複数の選択肢から一つ選択させるフィールド
- 日付：カレンダー形式で日付を入力するフィールド
- ファイル：指定したファイル形式のデータをアップロードするフィールド
- 承諾：「規約に同意する」のチェックボックスを表示するフィールド
- 隠しフィールド：ユーザーに見せたくない項目（例：計測ID）を設置するフィールド
- クイズ：質問に正しい回答を入力しないと送信できないフィールド
- 送信ボタン：最後に入力したフォームを送信するボタンを作るフィールド
ドロップダウンは項目数に関係なく限られたスペースに収まるため項目の数が多いときに適しています。
一方、数が増えるにつれて横に広がる仕様のラジオボタンは項目数が少ないときにおすすめです。
ファイルは採用サイトで履歴書の提出を求める際に、クイズはいたずら目的の問い合わせをシャットアウトしたいときに役立ちます。
ショートコードの設置
最初に作成した固定ページに以下のショートコードを設置します。
コピーしたショートコードを本文に張り付けて設置完了です。ブロックエディタを使用する場合、ショートコードブロックでコピー＆ペーストする方法も使えます。
最後にプレビュー画面で確認すると次のとおり設置したフォームが表示されています。
カスタマイズの方法
上記で紹介した手順はフォームを設置して公開するだけの最低限のものです。デザインが味気なく機能も少ないため物足りなく感じるでしょう。
フォームの分かりやすさや見やすさはUX（ユーザーエクスペリエンス）に大いに関係します。
問い合わせページの使い勝手を高め、魅力的に仕上げるには自分の手による編集が必要です。
頻繁に使用するカスタマイズの方法は次のとおりです。
- フォームのデザインを変更する
- バリデーションを設定する
- 問い合わせ通知メールを設定する
- 送信メッセージを編集する
- 必須項目に色をつける
- サンクスページを設定する
フォームのデザインを変更する
フォームの幅や余白、色といったデザインを変更するにはCSSを用いたスタイリングが必要になります。
以下のコードをコピペして管理画面の「カスタマイズ」から「追加CSS」をクリックして、下記のコードを設置してください。
2行目〜6行目でフォーム全体のデザインを整え、9行目〜19行目で各項目の入力フィールドを調整しています。
21行目はデフォルトで横並びのラジオボタンを縦並びに変更するコードです。23行目〜31行目は入力中のフォームに背景色を取り入れて目立たせるCSSです。
33行目〜48行目のコードでは送信ボタンの表示幅や色、余白、枠線、ホバー時の背景色の変更を記述しています。
バリデーションを設定する
バリデーションは事前に定義した形式から外れるデータの入力を拒否できる設定のことです。
例えばひらがなやカタカナのみ入力可にする、郵便番号は半角のみ許可するなどの指定が挙げられます。今回は実務でもよく使う必須項目のバリデーションを紹介します。
（必須）のタグがついた項目が空欄だと送信ボタンを押しても正常に動作せず、エラーメッセージが表示されます。
「フォーム」のタブから追加する項目をクリックして出てきたタグジェネレーターで下記のボックスにチェックを入れてください。
設定が完了すると以下のようにタグ内に「※」が登場します。
通知のメールを送る
次はフォームを通じて問い合わせがなされたら通知メールを自分に送る設定の仕方を紹介します。
フォームの編集画面を開いて「メール」タブをクリックして次の画面を出してください。
送信先：通知メールを受け取るメールアドレス。通常は自分のアドレスを設定
送信元：サーバーが送信元として認識するメールアドレス
題名：通知メールの件名。デフォルトは件名に相当する「your-subject」
追加ヘッダー：送信時の宛先を指定。通常は問い合わせを受けたメールアドレス
メッセージ本文：通知メールの本文に表示される内容
通知メールで問い合わせ内容を確認したいときは本文欄に項目ごとのタグを追記してください。例えば氏名は[your-name]、メールアドレスは[your-email」と入力します。
ショートコードをそのまま記載すると正常に動作しないため注意しましょう。
送信メッセージを編集する
ContactForm7では送信が成功したときや失敗したとき、バリデーションが必要なときなど状況に応じたメッセージを表示できます。
表示内容はフォームの編集画面の「メッセージ」タブで変えられます。
変更したい箇所のフォームに直接テキストを書き換えて「保存」ボタンを押すと反映されます。
追加CSSで以下のコードを加えればメッセージや枠線の色を変更できます。
必須項目に色をつける
必須の項目に色付きのラベルを付与して視認性を高めて目立たせるカスタマイズの仕方を紹介します。
以下のとおりフォームの設定にカスタムHTMLを追加してください。
- <label class=”required”>お名前（必須） [text* your-name]</label>
設置時にチェックボックスにチェックを入れるだけでは足りません。自らテキストで「必須」と書き足したうえでlavel属性にクラスを付与してください。
そして追加CSSで下記のコードを追加します。
赤字で必須であることがより際立つデザインに変化しました。
サンクスメールを設定する
問い合わせしたユーザーにサンクスメールを送る設定を紹介します。
- フォーム編集画面の「メール」タブを確認
- 「メール（2）」タブをクリック
- 「メール（2）」のチェックボックスをオンにして有効化
メール2は自分宛てのメールを設定する欄の下部にあるため見落とさないよう注意が必要です。
各項目の内容は次のとおりです。
送信先（To）：ユーザーのメールアドレスを指定
送信元（From）：サーバーで許可を受けたメールアドレス（例：no-reply）
件名（Subject）：サンクスメールの件名（例：お問い合わせありがとうございます）
メッセージ本文：ユーザーに送るメッセージの内容
【記載例】
[your-name] 様
このたびはお問い合わせいただき、誠にありがとうございます。
以下の内容を受け付けました。
お名前: [your-name]
メールアドレス: [your-email]
お問い合わせ内容:
[your-message]
ご返信には数日お時間をいただく場合がございますので、ご了承ください。
〇〇会社
Contact form7のよくあるトラブルと解決策
フォームが完成して動作確認を行ったところ、エラーメッセージが出て正常に動作せずパニック状態に陥る場合があります。
設定もれやミスが原因のケースがほとんどのため落ち着いて間違いがないか確認しましょう。よくあるトラブルの基本的な解決方法は次のとおりです。
フォームが送信できずエラーメッセージが表示される
サンクスメールが相手方に届かないとき、真っ先に疑われるのは送信先・送信元メールアドレスの入力ミスです。
半角で入力すべき箇所を全角にしていたり、余計な空白が紛れ込んでいたりする可能性があります。
またメールを正常に送信するには送信元メールアドレスおよびサイトのドメインが一致しなくてはいけません。
WebサイトのURL：https//gray69.com
メールアドレス：info@syun.com
上記は＠以降のドメイン部分が一致していないため送信が失敗します。またサイトを設置したサーバーと別のサーバーでメールを配信する場合もうまくいきません。
通知メールが届かないときはWP Mail SMTPプラグインでメールアドレスにSMTPプロトコルを適用すると解決する場合があります。
メールの送信元がWordpressになる
サンクスメールの差出人がWordpressになり、メールを受け取った側が何のことか分からず戸惑うケースがみられます。
多くの場合、原因は送信者名や送信者のメールアドレスの設定に不備があります。
メールの送信元やメール（2）の送信元にサイトのURLや管理者のメールアドレスを設定すれば送信元がWordpressになる心配はありません。
フォームが表示されない
フォームが表示されないときはページに挿入するショートコードやIDに間違いがあるパターンがほとんどです。
囲み文字（［］）が半角ではなく全角になっていないか、idの数字は間違っていないかチェックしましょう。
また固定ページのテンプレートにPHPの記載漏れ・ミスがあり表示できないケースも稀に見受けられます。
Contact Form 7を使いこなすために
本記事ではWordpressで問い合わせフォームを作るプラグインContactForm7の基本的な使い方を解説しました。
無料ながらビジネスで必要な機能は十分備わっていて非常に便利なツールです。本記事で紹介した機能だけでも実装できれば、実務に十分使えるレベルまでフォームをカスタマイズできます。
しかしWordpressやプラグインに慣れていない方、デザイナーやコーダーではない方が一から自分で設定しようとしてもうまくいかない可能性があります。
手順に沿って作業したのにエラーが出て先に進めないとお悩みならばぜひ当所にご相談ください。
お客様の要求どおりに求めるデザイン・機能を実装して満足いくフォームを制作します。お問い合わせは次のボタンをクリックしてください。
コメント