【準備編】クライアントと進めるお問い合わせフォーム制作

ol-user

このページでは、WordPressプラグイン「Contact Form 7」を使用してお問い合わせフォームを設置する際の、クライアントとのやり取りの進め方を紹介します。

やりとりの中で確認すべき項目や、スムーズに進めるための流れを解説します。

実際の設置手順については、別記事「問い合わせページの作り方」をご参照ください。

あわせて読みたい
【準備編】クライアントと進めるお問い合わせフォーム制作
【準備編】クライアントと進めるお問い合わせフォーム制作

目標:クライアントと共有すべき内容を整理し、テストまで含めたフォーム制作の流れを把握する

1. 最初に確認しておくべきこと

こちらは実際にContact Form 7を利用したお問い合わせページの一例です。

この記事を読みながら、クライアントワークを前提とした制作方法を学んでいきましょう!


制作前に、クライアントと下記の内容を共有・確認します。

  • フォームの目的
  • 入力項目
  • 送信先
  • 自動返信
  • 注意事項・同意項目

フォーム項目は目的に合わせて最小限にすることで、ユーザーが送信しやすくなります。

「とりあえず全部入れてください」ではなく、実際の運用フローをヒアリングしながら絞り込むことが大切です

フォームの目的

このフォームを何のために設置するのかを明確にします

例:一般的な問い合わせ、見積もり依頼、資料請求、採用エントリーなど。

目的によって入力項目や文面、送信先などが変わるため、最初に方向性を揃えることが重要です。

ちなみに、Contact Form 7はサイト上にいくつでも作成できるので、目的に合わせて複数設置してもいいですね!

入力項目

ユーザーにどの情報を入力してもらう必要があるかを整理します

次に、ユーザーにどの情報を入力してもらう必要があるかを整理します。

例:名前、メールアドレス、電話番号、お問い合わせ内容など。

URLやラジオボタンなども設定できます。詳しくはこちらのページで解説しています。

あわせて読みたい
【準備編】クライアントと進めるお問い合わせフォーム制作
【準備編】クライアントと進めるお問い合わせフォーム制作

入力項目が多すぎると離脱につながるため、目的に必要な項目だけに絞るのがポイントです

送信先

フォームから送信された内容をどのメールアドレスで受け取るかを決定します

「メール」タブから設定します

複数の担当者に通知を送りたい場合は、複数宛先設定も可能です。

また、担当変更などの運用を想定し、後から変更しやすい体制を整えておくと安心です。

自動返信

ユーザーに送信完了メールを自動で送るかどうかを確認します

自動返信メールを設定しておくと、ユーザーに「送信できた」という安心感を与えられます。

自動返信を設定するためには「メール(2)」の項目をクリックして設定します

この設定についても「具体的なお問い合わせフォームの作り方(Contact Form 7編)」でも解説しています

あわせて読みたい
【準備編】クライアントと進めるお問い合わせフォーム制作
【準備編】クライアントと進めるお問い合わせフォーム制作

注意事項

個人情報の取り扱いに関する同意チェックや注意事項の表示を検討します

企業や店舗のサイトでは、プライバシーポリシーを設置し、送信前に同意チェックを入れておくことが一般的です

「個人情報保護方針に同意して送信」などの文言を設けることで、企業としての信頼性が高まります。

プライバシーポリシーの同意が必要となるケースやチェックボックスの扱いについては、以下の記事が参考になります。

あわせて読みたい
プライバシーポリシーの同意チェックボックス、問い合わせフォームに必須?
プライバシーポリシーの同意チェックボックス、問い合わせフォームに必須?

2. フォーム構成を提案する

クライアントからヒアリングした内容をもとに、仮のフォーム構成を提案します。

どの項目を設けるか、どの順番で配置するかなど、ユーザーが入力しやすい流れを意識して設計します。

提案に役立つお問い合わせフォームの一例

例:予約リクエストフォーム(飲食店・クリニックなど)

希望メニュー・希望日などを入力できる項目が必要です。

例:商品お問い合わせフォーム(自社商品・ECサイトなど)

商品名・注文番号を入力する項目を構築しましょう。

例:採用お問い合わせフォーム(アルバイト採用など)

希望職種・志望動機を入力する項目を設置します。

提案時の伝え方例

電話番号の項目ですが、問い合わせ内容によっては、電話での折り返しが必要になる場合があります。一般的な質問フォームでは任意でも問題ありませんが、見積もりや日程調整が発生する場合は必須項目にしておくと安心です。」

採用フォームの場合、応募者の経歴がわかる資料を事前に確認できると、その後のやり取りがスムーズになります。履歴書や職務経歴書の内容を貼り付けてもらうためのテキストエリアを設けることも可能ですが、添付ファイル機能はトラブルが起こりやすいため、外部ストレージの共有リンクを入力してもらう形式にするのがおすすめです。

このように、理由を添えた提案をすることでクライアントからの信頼感が生まれます。

3. フォーム設計〜実装

Contact Form 7で新しいフォームを作成し、クライアントと打ち合わせた項目を反映させます。

「Contact Form 7」をインストール&有効化すると、ダッシュボードの一覧に「お問い合わせ」という項目が出てきます。

ダッシュボードからコンタクトフォーム画面に遷移する手順

「コンタクトフォームを追加」をクリックすると、お問い合わせページが新規作成されます。

コンタクトフォームの初期設定画面

必要に応じて入力欄を追加・調整し、正しくメールが届くよう送信先や差出人を確認しましょう。


設定が完了したらショートコードをコピーして、設定したい箇所に貼り付けます。

完成したフォームのショートコードをコピーする場面
固定ページにショートコードをペーストした場面

さらに具体的な入力項目や送信先の設定方法は「お問い合わせページの作り方」を参照してください

あわせて読みたい
【準備編】クライアントと進めるお問い合わせフォーム制作
【準備編】クライアントと進めるお問い合わせフォーム制作

4. テスト送信を行う

制作後は、必ずテスト送信を行います

制作側でテスト送信を行い、メールが正常に届くか確認します。

送信後の画面

その後、実際に受信できるかをクライアントにも確認してもらいます。

制作者側で行うチェック

  • テスト送信し、指定のメールアドレスに届くかを確認する
  • 自動返信メールの文面・差出人名が適切か確認する
  • 送信後の完了メッセージの文言を確認する

フォームが正しく動作しているか確認しましょう

クライアントに依頼するチェック

  • メールが届いているか(迷惑メールフォルダ含む)
  • 自動返信メールの内容に問題がないか
  • 入力項目に抜け漏れや不具合がないか

届いたメールの題名を変えたい、など細かい調整が入るかもしれません

5. クライアント確認と最終調整

制作が完了したら、まずテスト結果を共有し、文面や入力項目についてクライアントに最終確認を依頼します。

修正点があれば反映し、再度テスト送信を行って動作を確認します。

すべての項目と送受信が問題なく機能していることを確認できたら、公開・納品を行います。

最後に、以下の点も伝えておきましょう

納品時に伝えておくと良いこと
  • メールアドレスを変更した場合は、Contact Form 7内の宛先設定も更新が必要です。
  • スパム対策(reCAPTCHAなど)を今後追加する場合は、別途対応が必要になります。
  • お問い合わせフォームからのメールが届かない場合は、SMTPの設定を確認してください。

スパム対策については「reCAPTCHAの設定」をご覧ください。

あわせて読みたい
【補足・セキュリティ編】お問い合わせフォームにreCAPTCHA(v3)を設定する方法
【補足・セキュリティ編】お問い合わせフォームにreCAPTCHA(v3)を設定する方法

メールが届かない場合についての対処法については「SMTPの設定手順」も参考にしてください。

あわせて読みたい(外部リンク)
Contact Form 7からのメールが届かない3つの原因と対処法を解説!6STEPでプラグインを簡単設定
Contact Form 7からのメールが届かない3つの原因と対処法を解説!6STEPでプラグインを簡単設定

フォームを修正・再作成した際は、テスト送信を行い、クライアントの受信確認まで完了してから公開しましょう。

まとめ

お問い合わせフォーム制作では、クライアントとの事前確認とテスト送信がスムーズな納品の鍵となります。

フォームの目的を明確にし、入力項目や送信先などを事前に共有しておくことで、修正やトラブルを防ぎやすくなります。

また、Contact Form 7の設定自体はシンプルですが、実際にフォームがどのように使われるかを意識しながら提案・構築することが大切です。

ユーザーにも使いやすく、クライアントにも運用しやすいフォームを目指して制作を進めましょう!

クライアントとの事前確認が終了したら、いよいよフォームを実装していきます。

あわせて読みたい
【準備編】クライアントと進めるお問い合わせフォーム制作
【準備編】クライアントと進めるお問い合わせフォーム制作

困ったら相談してみよう!

  • 相談先→
記事URLをコピーしました