問い合わせフォームの作り方、5つの方法と入力されやすくする7つの工夫

問い合わせフォームの作り方は5通り、選ぶ基準は今のサイトの作り

問い合わせフォームは、入力欄を並べた画面と、入力された内容をメールなどで受け取る仕組みの2つでできています。画面だけなら見よう見まねで作れますが、受け取る仕組みまで自分で組むと、迷惑メールやセキュリティの対策も自分で考えることになります。そのため、小さなホームページでは、仕組みごと用意されている道具を使うのが一般的です。

迷ったら「あとで直す人が触れる方法」を選ぶ

制作の現場で見ていると、フォームは作ったあとに直す機会が意外と多い部分です。項目を減らしたい、通知の宛先を変えたい、選択肢に新しいメニューを足したい、といった直しが出てきます。そのときに、管理画面からすぐ直せるかどうかで、手間が大きく変わります。

作成サービスやWordPressを使っているなら、同じ管理画面で直せるその機能を使うのが基本です。ホームページ全体をどう作るかがまだ決まっていない場合は、先にホームページの作り方で全体の進め方を確かめてから、フォームの方法を選ぶと迷いにくくなります。

ホームページに問い合わせフォームを設置する前に決めること

道具を開く前に、紙かメモに次のことを書き出しておきます。ここが決まっていないと、作りながら項目を足したり消したりすることになり、結局入力しにくいフォームになりがちです。

聞く項目は返事に要るものだけにする

項目を決めるときは「この項目がないと返事ができないか」で考えます。名前、返信先のメールアドレス、問い合わせの内容の3つがあれば、多くの場合は返事ができます。住所や会社名、電話番号は、業種や問い合わせの種類によって本当に要るときだけ足します。

• まず置く項目: お名前、メールアドレス、お問い合わせ内容
• 必要なら足す項目: 電話番号(電話で返してほしい人向けに任意で)、問い合わせの種類(選択肢で)
• 最初の問い合わせでは聞かなくてよいことが多い項目: 住所、生年月日、詳しい予算

フォームを置く場所と入口

フォームはお問い合わせ専用のページに置き、メニューとページの下の方から行けるようにするのが基本です。サービスや料金のページを読み終えた人が、そのまま進めるように入口を置いておきます。ページ全体の並べ方はホームページの構成の決め方で説明しています。

Googleフォームを使った問い合わせフォームの作り方

Googleアカウントがあれば、Googleフォームで問い合わせフォームを作れます。HTMLで作ったサイトでも、作ったフォームをページに埋め込めるので、メールを送るプログラムを自分で用意する必要がありません。届いた回答は、フォームの画面やスプレッドシートで一覧にできます(出典: Google ドキュメント エディタ ヘルプ「Google フォームの使い方」)。

1. Googleフォームを開き、新しいフォームを作る
2. 質問を足し、記述式や段落などの形式を選ぶ。返事に要る項目は「必須」をオンにする
3. 回答の画面のメニューから、新しい回答をメールで受け取る設定をする
4. 右上の「送信」を押し、埋め込み用の HTML(< > の印)を選んでコピーする
5. お問い合わせのページの HTML に貼り付け、公開してから送信を試す

埋め込みの方法は、Googleのヘルプ「フォームを送信する」で案内されています(出典: Google ドキュメント エディタ ヘルプ「フォームを送信する」)。画面の名前やボタンの位置は変わることがあるので、作業するときはヘルプの最新の説明で確かめてください。

WordPressと作成サービスでの問い合わせフォームの作り方

WordPressや作成サービスで作ったサイトなら、その中の機能で作るのが手間の少ない方法です。デザインがサイトにそろい、管理画面からあとで直せます。

WordPressではフォームのプラグインを使う

WordPressでは、フォームを作るプラグイン(機能を足す追加の部品)を入れて作ります。よく使われるものの一つが Contact Form 7 で、入れるとお名前、メールアドレス、題名、メッセージの入ったフォームがはじめから用意されます。作ったフォームのショートコード(呼び出し用の短い記号)を、お問い合わせのページに貼ると表示されます(出典: Contact Form 7 公式サイト)。

• プラグインを入れたら、まず「メール」の設定で、通知の宛先が自分のアドレスになっているかを見る
• サーバーによっては、フォームから送ったメールが届かない、迷惑メールに入ることがある。その場合は、メール送信の設定(SMTP)を整えるプラグインを使う
• プラグインとWordPress本体の更新を止めたままにしない。古いままのフォームは狙われやすい

WordPressでサイトを作る手順や、保守の負担についてはWordPressでのホームページの作り方にまとめています。

作成サービスではフォームの部品を置く

Wix、ペライチ、STUDIO、ジンドゥーなどの作成サービスには、ページにフォームの部品を置く機能があります。部品を置いて項目を選び、通知の宛先を設定すれば使えるようになるものがほとんどです。ただし、使える項目の数、通知メールの設定、自動返信の有無は、サービスやプランによって違います。作る前に、使っているサービスの公式ヘルプと料金ページで確かめてください。

サービスごとの無料でできる範囲は、Wixでホームページを作るときの無料の範囲とデメリット、ペライチとは何かと料金、STUDIOとジンドゥーの違いで説明しています。

HTMLで作ったサイトなら外部の仕組みを借りる

HTMLで作ったサイトにフォームを付けるときは、前の章のGoogleフォームか、フォーム作成サービスを使うのが手間の少ない方法です。HTMLとサーバーのプログラムで一から作ることもできますが、入力された内容をそのままメールに使うと、第三者に迷惑メールの送信に悪用されることがあります。IPA(情報処理推進機構)の「安全なウェブサイトの作り方」でも、メールヘッダ・インジェクションとして対策が説明されています(出典: IPA「安全なウェブサイトの作り方」)。HTMLでサイトを作る全体の流れはHTMLでのホームページの作り方で説明しています。

入力されやすい問い合わせフォームの作り方、7つの工夫

フォームまで来た人は、問い合わせをしようと思っている人です。そこで手間取らせないことが、送ってもらえるかを分けます。どの道具で作っても使える工夫を7つにまとめました。

項目名と入力欄の結びつけ

W3C(Webの標準を決める団体)のアクセシビリティの解説でも、入力欄にはそれぞれ項目名(ラベル)を付け、入力欄と結びつけることが基本とされています。入力欄の中の薄い文字(プレースホルダー)は、ラベルの代わりにしないよう案内されています(出典: W3C Web Accessibility Initiative「Forms Tutorial」)。作成サービスやプラグインでは、項目名の表示をオンにしておけば、多くの場合この形になります。

「問い合わせの種類」は選択肢にする

何を書けばよいか迷う人のために、「見積もりの相談」「予約について」「その他」のような選択肢を1つ置くと、書き出しやすくなります。受け取る側も、急ぎのものから返事をしやすくなります。選択肢は多くても5つ前後にとどめ、最後に「その他」を入れておきます。

フォームを整えても問い合わせが少ないときは、フォームより前のページに原因があることもあります。見直す順番はホームページで集客できない原因で説明しています。

送信後のメールと、迷惑な送信、個人情報への備え

フォームは、画面ができたら終わりではありません。送った人と受け取る人の両方に、きちんとメールが届くこと、悪用されないこと、預かった情報を正しく扱うことまでがフォームの仕事です。

通知メールと自動返信メールを設定する

• 通知メール: 問い合わせが来たことを受け取る側に知らせるメール。普段見ているアドレスに届くようにする
• 自動返信メール: 送った人に「受け付けました」と返すメール。返信の目安と、届かないときの連絡先を書いておく
• 自動返信の文面には、入力された内容の控えを付けておくと、送った人があとで見返せる

自動返信メールが迷惑メールのフォルダに入ると、送った人は「届いていないのでは」と不安になります。送信元のアドレスを自分のドメインのものにするなど、サービスやプラグインの説明に沿って送信の設定を整えておきます。

迷惑な送信への対策

公開したフォームには、機械による営業や迷惑な書き込みが届くことがあります。対策としてよく使われるのが、Googleの reCAPTCHA(人とプログラムによる送信を見分ける仕組み)です(出典: Google for Developers「reCAPTCHA」)。WordPressのフォームのプラグインや作成サービスの多くは、設定画面からこうした対策をオンにできます。

個人情報の利用目的とSSL

フォームで名前やメールアドレスを預かることは、個人情報を取得することに当たります。個人情報保護委員会のガイドラインでは、本人が入力するウェブの画面などから直接取得するときは、あらかじめ利用目的をはっきり示すこととされています(出典: 個人情報保護委員会「個人情報の保護に関する法律についてのガイドライン(通則編)」)。フォームのすぐ近くに「いただいた情報はお問い合わせへの回答のためにだけ使います」のように書き、プライバシーポリシーのページへのリンクを置きます。

問い合わせフォームの設置後に送信テストで確かめること

フォームを公開したら、自分で送ってみるまでは「動いている」とは言えません。制作の現場でも、公開の直前に通知の宛先の打ち間違いや、自動返信が届かないことが見つかるのはよくあることです。次の項目を、パソコンとスマホの両方で確かめます。

公開したあとも、ときどき送ってみる

フォームは、メールの設定の変更やプラグインの更新、サーバーの移転などをきっかけに、気づかないうちに届かなくなることがあります。問い合わせがしばらく来ないと感じたら、まず自分で1件送ってみてください。月に1回など、確かめる日を決めておくと安心です。

問い合わせフォームを自分で作るか、頼むかの目安

作成サービスやWordPressの機能を使えば、問い合わせフォームは自分で作れます。一方で、次のような場合は、作る人に頼んだ方が早く済むことが多いです。

フォームだけでなく、ホームページ全体を自分で作るか頼むかで迷っている場合は、ホームページを自分で作るのは難しいかで判断の基準を、頼んだときの費用の考え方はホームページ制作の費用相場で説明しています。

まとめると、問い合わせフォームは、今のサイトの作りに合った方法で作り、項目を絞り、送ったあとの流れと送信テストまで整えれば形になります。uparia の月額プラン(制作費0円・月額2,980円から・最低契約期間12か月)は、いちばん小さいライトからスマホ対応とお問い合わせフォーム、SSLを含めてお作りします。最初から自分のものにしたい方には、お問い合わせフォームを含む買い切りのスタートプラン(3万円〜)もあります。プランの中身は格安のホームページ制作で紹介しています。