お問い合わせフォームの作り方を徹底解説！HTML/PHP/ノーコードで簡単作成

Webサイトにお問い合わせフォームを設置したいけど、HTMLやPHPの知識がないから難しそう……と諦めていませんか。

お問い合わせフォームは、Webサイトの訪問者とコミュニケーションを取るための重要なツールです。顧客からの問い合わせ対応だけではなく、貴重なフィードバックを集めることもできるため、サービス改善にも役立てられます。

本記事では、お問い合わせフォームの作り方を紹介します。HTMLやPHPを使った方法やノーコードで作成する方法など、お問い合わせフォーム作成に必要な知識を網羅的に紹介しているので、お問い合わせフォームの作成を考えている方はぜひ参考にしてください。

弊社サンソウシステムズでは月額1万円から利用できる「さっとFAQ」というチャットボットを提供しています。エクセルから会話データを簡単に作成できるため、プログラミングスキルも一切必要ありません。

30日間の無料トライアルもありますので、ぜひこの機会に導入を検討してみてください。

月額1万円から始められるチャットボット「さっとFAQ」

導入企業500社突破しました！ノーコードでチャットボットのフローの作成が可能、ITスキルは必要ありません。
サービスへの問い合わせが多く、毎日対応に追われている担当者の方はぜひ導入を検討してみてください。30日間の無料お試しもできるので、まずは資料ダウンロードをお願いします。

さっとFAQの資料を無料ダウンロード

お問い合わせフォームとは

お問い合わせフォームとは、Webサイトの訪問者が企業や個人に対して、問い合わせを送信するためのオンラインツールです。テキストボックスやラジオボタン、チェックボックスなどの入力欄を用意し、氏名やメールアドレス、問い合わせ内容などの情報を収集します。送信ボタンをクリックすると、入力された情報が指定されたメールアドレス宛に送信される仕組みです。

従来は電話やFAX、メールといった方法で問い合わせをおこなうことが一般的でしたが、お問い合わせフォームの普及により、いつでもどこからでも簡単に問い合わせができるようになりました。

24時間365日対応可能なため、顧客満足度の向上に大きく貢献しています。 ユーザーにとって利便性の高いツールであると同時に、企業にとっても貴重な顧客データ収集の手段とされています。

お問い合わせフォームは、その機能やデザイン、実装方法によってさまざまな種類が存在します。シンプルなフォームから、画像アップロード機能や複数ファイル送信機能を持つ高度なフォームまで、Webサイトの目的やターゲット層に合わせて適切なものを選択することが重要です。

お問い合わせフォームを設置するメリット

Webサイトにお問い合わせフォームを設置することは、ビジネスの成功に大きく貢献します。単なる問い合わせ受付ツールにとどまらず、顧客とのエンゲージメントを高め、ビジネスの成長を促進する強力な手段となるからです。

具体的なメリットを見ていきましょう。

いつでも問い合わせできる

お問い合わせフォームを設置するとユーザーは24時間365日、いつでも気軽に問い合わせができます。営業時間外でも問い合わせを受け付けられるため、機会損失を防ぎながら顧客満足度を向上することが可能です。

特に、顧客対応に時間的制約のある企業にとっては、24時間365日問い合わせを受けれることは大きなメリットとなります。ユーザーはメールソフトを立ち上げたり、メールアドレスをコピー＆ペーストする手間を省けるので、問い合わせのハードルを下げることができます。

必要な情報を入手できる

お問い合わせフォームは、ユーザーから必要な情報を効率的に収集するために効果的です。氏名やメールアドレス、電話番号といった基本情報に加え、問い合わせ内容に関する詳細な情報や要望、フィードバックなどをフォームに設定すれば、顧客ニーズを正確に把握できます。

お問い合わせフォームで集めた情報は顧客対応の向上やサービス改善、マーケティング戦略の策定などに役立ちます。 さらに、潜在顧客からの問い合わせを効率的に収集できるため、リード獲得にもつなげることが可能です。

顧客情報を管理できる

お問い合わせフォームから得られた顧客情報を、CRM（顧客関係管理）システムと連携させれば情報の一元管理ができます。すると、顧客への対応履歴の確認や顧客セグメンテーション、パーソナライズされたコミュニケーションの実現などが可能です。

また、会員専用サイトや従業員専用サイトに設置することで、問い合わせの対象者を絞り込むこともできます。適切な顧客情報管理は、顧客満足度向上だけでなく、営業効率の向上にも大きく貢献します。

お問い合わせフォームの作り方

ここからは、お問い合わせフォームの作り方を紹介します。作りやすい方法や試したい方法を選択し、実際にお問い合わせフォームを設置してみてください。

【初心者向け】HTMLで作るお問い合わせフォーム

最初に、HTMLで作る方法を紹介します。お問い合わせフォームを初めて作る方でも挑戦しやすいため、ぜひチャレンジしてください。

HTMLの基本構造を理解

まず、HTMLの基本構造を理解しましょう。

お問い合わせフォームは<form>タグを使用し、その中に入力欄や送信ボタンなどの要素を配置します。基本的な構造は以下のとおりです。

<form action=”送信先のURL” method=”post”>
<!– フォーム要素 –>
<input type=”submit” value=”送信”>
</form>

なお、上記の詳細は以下の表をご覧ください。

フォーム要素を配置

フォーム要素について、より詳細な情報を提供します。

なお、name属性は、サーバーサイドでデータを受け取る際に必須です。placeholder属性は、ユーザーフレンドリーな入力補助として役立ちます。

その他の属性は、入力内容の検証やフォームデザインのカスタマイズに利用することが可能です。 required属性は必須項目を指定し、pattern属性は正規表現を使って入力値を検証できます。

CSSでフォームのスタイリング

HTMLで作成したフォームは、CSSを使用してスタイリングできます。CSSを使用することで、フォームのデザインを自由にカスタマイズすることが可能です。例えば、下記のように記述するとフォームの見た目を変更できます。

form {
width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
}

input[type=”text”],
input[type=”email”],
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
}

input[type=”submit”] {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

さまざまなデバイスに対応

レスポンシブデザインを意識して、さまざまなデバイス（パソコンやスマートフォン、タブレットなど）に対応したフォームを作成しましょう。以下のメディアクエリを使用すれば、デバイスの画面サイズに応じてフォームのデザインを変更できます。

@media (max-width: 768px) {
form {
width: 90%;
}
}

【データ送信機能の実装】PHPで作るお問い合わせフォーム

次に、データ送信機能を実装したお問い合わせフォームを作成しましょう。

PHPの基本を理解

PHPは、サーバーサイドで動作するスクリプト言語です。Webサイトの機能を拡張するために使用され、HTMLだけでは実現できない動的なコンテンツ生成を可能にします。

具体的には、次のようなことができます。

HTMLはWebサイトの見た目（構造と内容）を記述する言語ですが、PHPはサーバー側で処理をおこない、HTMLを動的に生成したり、データを送受信したりする役割を担います。そのため、Webサイトにインタラクティブな機能を追加したい場合、PHPは非常に強力なツールです。

データの受け渡しとバリデーション

PHPでデータを受け取るには、$_POSTという特別な変数を使います。$_POSTとは、フォームから送信されたデータがすべて格納されている配列のことです。

例えば、フォームに「名前」と「メールアドレス」の入力欄があり、ユーザーがそれぞれ「太郎」と「taro@example.com」を入力して送信した場合、$_POST[‘名前’]には「太郎」、$_POST[‘メールアドレス’]には「taro@example.com」が格納されます。

しかし、ユーザーが入力したデータが必ずしも正しいとは限りません。メールアドレスの形式が間違っていたり、必須項目が空欄だったりと不正なデータが入力された場合はエラーが発生するほか、セキュリティ上の問題にもつながります。

そのような場合に重要なのが、入力されたデータのバリデーション（検証）です。バリデーションではデータの形式や内容をチェックし、不正なデータであればエラーメッセージを表示したり、データの処理を中止したりします。

具体的には、メールアドレスのバリデーションではfilter_var()関数を使って、正しいメールアドレスの形式かどうかをチェックできます。必須項目のバリデーションでは、入力欄が空欄かどうかをチェックすることが可能です。

バリデーションをおこなえば、より安全で信頼性の高いお問い合わせフォームを構築できます。

メール送信機能の実装

PHPのmail()関数は、メールを送信するための組み込み関数です。mail()関数の基本的な構文は以下のとおりです。

bool mail ( string $to , string $subject , string $message [, array $headers ] )

例:

$to = ‘recipient@example.com’;
$subject = ‘お問い合わせありがとうございます’;
$message = ‘このメールはテストメールです。’;
$headers = ‘From: sender@example.com’ . “\r\n” .
‘Reply-To: sender@example.com’ . “\r\n” .
‘X-Mailer: PHP/’ . phpversion();

mail($to, $subject, $message, $headers);

セキュリティ対策の重要性

お問い合わせフォームは、悪意のある攻撃から守るための対策が重要です。

例えば、SQLインジェクションやクロスサイトスクリプティング（XSS）といった攻撃によって入力されたデータが悪用されると、Webサイトのデータが改ざんされたり、ユーザーの個人情報が漏洩したりする危険性があります。

上記の攻撃を防ぐためには、ユーザーが入力したデータを適切に処理する必要があります。具体的には、以下のような処理によって安全性を高めることが可能です。

• サニタイジング（無害化処理）：有害なコードを取り除く処理
• バリデーション（入力検証）：正しい形式のデータかを確認する処理

さらに、お問い合わせフォームから送信されたメールについても、ヘッダーインジェクションを防ぐ対策が必要です。

ヘッダーインジェクションとは、Webアプリケーションのセキュリティ脆弱性を突いて、HTTPリクエストヘッダーを不正に操作する攻撃手法のことです。メールヘッダーに不正な情報が書き込まれることで、メール送信者を偽装したり、迷惑メールとして扱われたりする可能性があります。

つまり、安全なお問い合わせフォームを作るためには、ユーザー入力の処理とメール送信の両面でセキュリティ対策をしっかりおこなう必要があります。

【Googleフォーム活用】ノーコードで作るお問い合わせフォーム

次に、Googleフォームを活用したお問い合わせフォームの作り方を紹介します。基本操作からカスタマイズ方法まで見ていきましょう。

Googleフォームの基本操作

Googleフォームでは、さまざまな種類の質問を追加できます。例えば、以下のような種類があります。

• 選択肢から選ぶ形式の質問
• 自由にテキストを入力する形式の質問
• 日付を選択する形式の質問
• チェックボックス形式の質問

各質問には必須項目の設定や、回答の検証（例：数値のみ入力可能など）をおこなうことも可能です。フォーム作成後、プレビューで確認しながら必要に応じて修正できます。

作成したフォームはメールアドレスやURLで共有できるほか、スプレッドシートで回答結果を集計・分析することも可能です。

フォームのカスタマイズ

Googleフォームは、以下のようなカスタマイズをおこなえます。

上記の機能を組み合わせて使用することで、目的に合わせたフォームを作成できます。

回答データの管理方法

Googleフォームの回答データは、回答が送信されるたびにGoogleスプレッドシートへ自動記録されます。スプレッドシートでは回答データの閲覧や編集、並べ替え、フィルタリング、集計などをおこなえます。

さらに、スプレッドシートのデータはCSVファイルやExcelファイルといったさまざまなファイル形式でダウンロードすることも可能です。 リアルタイムでの反映により、回答状況を常に把握することができる上、データ分析にも役立ちます。

また、スプレッドシートの共有設定を変更すれば、データへのアクセス権限を調整することも可能です。

【WordPressで簡単作成】お問い合わせフォームのおすすめプラグイン

次に、WordPressのプラグインを使ったお問い合わせフォームの作り方を紹介します。

Contact Form 7

Contact Form 7は、WordPressで人気の高いお問い合わせフォームプラグインの一つです。シンプルで使いやすいインターフェースを備えており、初心者でも簡単にフォームを作成できます。

WPForms Lite

WPForms Liteは、無料版でも十分な機能を備えたお問い合わせフォームプラグインです。ドラッグ＆ドロップで簡単にフォームを作成できる上、さまざまな項目を追加できます。有料版では、さらに高度な機能を利用できます。

Ninja Forms

Ninja Formsは、高度な機能を備えたお問い合わせフォームプラグインです。条件分岐やファイルアップロードなどの機能があり、複雑なフォームにも対応できます。無料版と有料版があり、機能によって選択できます。

Gravity Forms

Gravity Formsは、高機能で柔軟性が高いお問い合わせフォームプラグインです。さまざまな種類の項目を追加でき、複雑なロジックにも対応できます。ただし、有料プラグインである点に注意しましょう。

Elementor Pro（フォームウィジェット）

Elementor Proは、WordPressのページビルダープラグインです。Pro版にはフォームウィジェットが含まれており、直感的にフォームを作成できます。また、デザインのカスタマイズを容易におこなえる点が特徴です。

お問い合わせフォームのデザイン改善で離脱率を劇的に減らす方法

お問い合わせフォームの離脱率は、顧客獲得率を大きく左右する重要な要素です。せっかくサイトに訪れてくれたお客様を逃さないためにも、フォームのデザイン改善は必須です。

ここからは、お問い合わせフォームの離脱率を減らす紹介を解説します。

ユーザービリティを向上させるデザインを目指す

お問い合わせフォームの離脱率を下げるためには、ユーザービリティの向上を目指しましょう。ユーザーにとって使いやすく、ストレスを感じさせないデザインが重要です。具体的には、以下の点を意識することが大切です。

上記の改善をおこなうとユーザーはストレスなくフォームに入力でき、離脱率の減少につながります。

入力項目を最小限にする

ユーザーは、必要以上の情報入力を嫌います。そのため、お問い合わせフォームでは、本当に必要な情報のみを収集するように入力項目を絞り込むことが大切です。不要な項目を削除すると入力にかかる時間を短縮し、離脱率を減らすことができます。

上記の表を参考に、本当に必要な項目のみを厳選しましょう。項目を減らせばユーザーの負担を軽減しながら、コンバージョン率の向上が期待できます。

エラーメッセージをわかりやすく表示する

入力ミスがあった場合は、ユーザーにわかりやすいエラーメッセージを表示します。曖昧なメッセージではユーザーを混乱させ、離脱につながる可能性があります。具体的なエラー内容を示し、修正方法をわかりやすく案内してください。

例：メールアドレスの形式が不正です。「例：test@example.com」のように入力してください。

CTAボタンを効果的に配置する

送信ボタン（CTAボタン）は、ユーザーが最終的に押すボタンです。視認性を高め、ユーザーが迷わずに押せるように配置しましょう。ボタンの色やサイズ、テキストも重要です。明確で行動を促す言葉を使用し、ユーザーの行動を促しましょう。

例：「お問い合わせを送信する」「今すぐ送信」など

上記のデザイン改善をおこなうとユーザーエクスペリエンスを向上させ、お問い合わせフォームの離脱率を劇的に減らすことができます。継続的な改善と分析を通して、最適なフォームデザインを目指しましょう。

お問い合わせフォームにおけるA/Bテストの重要性

お問い合わせフォームは、Webサイトのコンバージョン率向上に大きく影響する重要な要素です。しかし、適切なデザインや配置でなければ、せっかくの問い合わせ機会を逃してしまう可能性があります。

そのような場合に有効なのがA/Bテストです。A/Bテストを実施すれば効果的なお問い合わせフォームを構築でき、コンバージョン率の改善につながります。

A/Bテストの基本

A/Bテストとは、Webサイト上の要素（今回はお問い合わせフォーム）を2種類以上用意し、それぞれに訪問者をランダムに振り分けて、どのバージョンがより良い成果をもたらすかを検証する手法です。

例えば、ボタンの色やテキスト、フォームの配置、入力項目などを変えた複数のバリエーションを作成して比較することで、最適なデザインを見つけることができます。

上記は、ほんの一例です。

A/Bテストでは仮説に基づいて検証したい要素を複数設定し、それぞれの組み合わせをテストすることで、より精度の高い結果を得ることができます。

お問い合わせフォームでA/Bテストをおこなうポイント

お問い合わせフォームのA/Bテストでは、以下の点に注意しましょう。

テスト結果の分析と改善

A/Bテストの結果を分析し、改善策を検討することが重要です。単に数値を見るだけでなく、なぜその結果になったのかを分析してユーザーの行動を理解することが重要です。

例えば、送信率が低い場合は「入力項目が多すぎる」「ボタンが目立たない」「エラーメッセージがわかりにくい」など、さまざまな要因が挙げられます。分析結果に基づいてフォームのデザインやコピー、配置などを修正し、さらにA/Bテストを繰り返すと最適化を図ります。

お問い合わせフォームの最適化、EFO（Entry Form Optimization）とも呼ばれ、ユーザビリティやコンバージョン率を高めるための重要施策です。A/Bテストを効果的に活用することで、問い合わせ数を増やしながらビジネスの成果につなげられます。

問い合わせの分析手法とは？Excel・ツールの活用や集計・分類方法を解説

お問い合わせフォームを作る際の注意点

ユーザーにとって使いやすいお問い合わせフォームを作るためにはデザインだけでなく、機能性やアクセシビリティにも配慮することが重要です。ここからは、お問い合わせフォームを作る際の具体的な注意点を紹介します。

入力ミスを減らす工夫をする

ユーザーが入力ミスを犯しやすい項目については、入力支援機能を導入するとミスを減らせます。例えば、郵便番号を入力すると住所を自動で入力できる機能や、日付入力欄にはカレンダー機能などを活用しましょう。

また、入力形式を適切に設定することも重要です。電話番号であればハイフン（-）を入れるようにガイドラインを表示したり、メールアドレス入力欄には自動的に「@」記号を表示したりするなど、ユーザーフレンドリーな設計を心がけてください。

必須・任意項目を明確にする

必須項目と任意項目を明確に区別すれば、ユーザーは入力が必要な項目を理解しやすいです。必須項目には「*」などの記号を付けたり、太字で表示したりするなど、視覚的にわかりやすく表示しましょう。 曖昧な表記はユーザーの混乱を招き、離脱率の上昇につながります。

全角・半角に対応する

氏名や住所など、全角と半角のどちらで入力しても問題なく動作するように設計しましょう。全角・半角の入力に対応していない場合、ユーザーが入力ミスをしてしまう可能性があり、問い合わせ完了率の低下につながります。入力欄に適切なバリデーションを設定し、全角・半角どちらの入力にも対応できるようにするのがおすすめです。

入力項目の確認ページを設ける

お問い合わせ内容の送信前に、入力内容を確認できるページを設置しましょう。確認ページを設置するとユーザーは入力ミスに気づきやすくなり、修正することができます。すると、入力ミスによる問い合わせのやり直しや、担当者側の修正作業の手間を省くことができる上、ユーザーに安心感を与えられます。

確認ページには、入力されたすべての項目をわかりやすく表示し、容易に修正できるように設計することが重要です。確認ボタンと修正ボタンを明確に配置すれば、ユーザーの操作性を向上できます。

お問い合わせフォーム作成に関するよくある質問

最後に、お問い合わせフォーム作成に関するよくある質問を紹介します。お問い合わせフォームを作る前に確認し、より良いフォームを設計してください。

スパム対策

お問い合わせフォームは便利なツールですが、スパム送信のターゲットになりやすい点に注意が必要です。スパム対策は、フォームの利用効率を維持するために不可欠な対策といえます。

効果的なスパム対策として、以下の方法が挙げられます。

上記の対策を複数組み合わせることで、より効果的なスパム対策を実現できます。状況に応じて最適な対策を選択し、定期的に見直しをおこなうことが重要です。

作成したフォームをテストする方法

お問い合わせフォームを作成したら、必ずテストをおこない、正しく動作することを確認しましょう。テスト項目は以下のとおりです。

確認テストは、実際にフォームを利用するユーザーの視点でおこなうことが重要です。複数のブラウザやデバイスでテストをおこない、問題がないことを確認しましょう。

モバイルフレンドリーなフォームを作る方法

現代は、多くのユーザーがスマートフォンでWebサイトにアクセスしています。モバイルフレンドリーなフォームは、ユーザー体験を向上させ、問い合わせ率の向上につながります。

モバイルフレンドリーなフォームを作るためのポイントは以下のとおりです。

モバイルフレンドリーなフォームは、ユーザーにとって使いやすく快適な体験を提供します。モバイルユーザーの利便性を高めることで、問い合わせ率の向上につなげましょう。

お問い合わせフォームを作成して成果につなげよう

お問い合わせフォームを作成する目的は、Webサイトへのアクセス増加や顧客獲得、サービス改善といったビジネス上の成果を上げることです。

そのため、作成したお問い合わせフォームが本当に効果を発揮しているかを定期的に確認し、改善を続けることが重要です。

また、Googleアナリティクスなどのツールを活用して、お問い合わせフォームの利用状況を分析することも大切です。「どのページからフォームにアクセスしているのか」「どのくらいの割合で送信されているのか」といったデータに基づいて、改善策を検討していくことで、より効果的なお問い合わせフォームを実現できます。

お問い合わせフォームは、Webサイトの成功に大きく貢献する重要なツールです。今回紹介した知識を活かし、効果的なお問い合わせフォームを作成し、ビジネスの成果につなげていきましょう。

弊社サンソウシステムズでは月額1万円から利用できる「さっとFAQ」というチャットボットを提供しています。エクセルから会話データを簡単に作成できるため、プログラミングスキルも一切必要ありません。

30日間の無料トライアルもありますので、ぜひこの機会に導入を検討してみてください。