HTMLでお問い合わせフォームを作る方法｜コード例・CSS・PHPの基本
<この記事でわかること>
- お問い合わせフォームの基本となるHTML構造は、formタグで送信先を定義し、inputやtextarea、selectタグで目的に合った入力欄を作り、labelタグで操作性を高めることで構築できる。
- type、name、placeholder、required、autocompleteなどのHTML属性を適切に設定することで、ユーザーの入力ミスを防ぎ、フォームの精度と利便性を向上させられる。
- CSSのFlexboxやGridを用いたレイアウト調整、スマホ向けのレスポンシブ対応、フォーカス時（:focus）の視覚効果を活用することで、ユーザーがストレスなく入力できるデザインに整えられる。
- HTMLとCSSで作成できるのはフォームの「見た目」のみであり、実際にメールを送信したりデータを保存したりするには、PHPなどのサーバ側での処理が必須となる。
- 自作フォームの運用で壁となるスパム対策やデータ一元管理、離脱率改善といった課題は、顧客データベースと自動連携できるCRMシステム「Synergy!」を導入することで効率的に解決できる。
自社サイトに合わせたオリジナルのお問い合わせフォームを設置したいと考えたとき、まずはHTMLとCSSを使って自分で作ってみようと考える方は多いでしょう。フォームは一見複雑に見えますが、基本的なタグの役割と配置のルールさえ覚えれば、初心者でも作ることができます。
本記事では、HTMLを用いたフォームの基本構造から、入力ミスを減らすための便利な属性設定、そしてCSSを使ってスマートフォンでも見やすく整えるデザインのコツまで、コードの考え方を交えながらわかりやすく解説します。
<目次>
HTMLで作るお問い合わせフォームの基本構造
お問い合わせフォームを自作する際は、まずHTMLで見た目の構造を正しく作ることが求められます。複数のタグが役割を分担しているため、それぞれの関係性を理解しておきましょう。
formタグ：フォームの範囲と送信先を定義する
formタグは、どこからどこまでがフォームなのかを区切り、送信先を指定する入口の役割を持ちます。action属性には送信先のURLを、method属性にはpostやgetを指定しましょう。
HTML単体では入力内容を送信できないため、必ずサーバ側での処理が必要になります。ファイルの送信が含まれる場合はenctype属性も関わってくるため、用途に合わせて設計を進めてください。
labelタグ：アクセシビリティと操作性を向上させる
labelタグは、入力欄と説明文を結びつけ、操作性を向上させるために使います。for属性とinputタグのid属性を一致させると、文字をクリックしただけで入力欄にフォーカスが当たり、スマートフォンでも操作しやすくなります。
placeholder属性だけに頼ると入力中に説明が消えてしまうため、基本的にはlabelタグを配置する設計が推奨されます。
inputタグ：一行テキスト・メールアドレス・電話番号
inputタグは一行入力が中心で、type属性を変えることで用途を分けることができます。名前にはtext、メールアドレスにはemail、電話番号にはtelを指定すると、スマートフォンのキーボードが最適化されて入力ミスを防げます。
必須項目にしたい場合はrequired属性を追加するなど、目的に合わせて設定を追加していきましょう。
textareaタグ：複数行の問い合わせ内容を入力する
問い合わせ本文のような長文の入力にはtextareaタグを使用します。送信データのキーとなるname属性の命名を適切に行い、サーバ側での受け取りをスムーズにしましょう。
rows属性やcols属性で大きさを指定できますが、実運用ではCSSを用いてスマートフォンでも入力しやすい幅に調整するのが一般的です。
select・optionタグ：プルダウン選択肢を作る
問い合わせ種別など、あらかじめ選択肢が決まっている項目にはselectタグとoptionタグの組み合わせが適しています。自由入力よりも表記の揺れを防ぐことができ、集計作業も容易になります。
未選択を防ぐために、初期状態の選択肢にdisabled属性やselected属性を指定し、required属性と組み合わせる設計も頻繁に活用されます。
送信ボタンはbuttonタグで作成します。予期せぬ誤送信を防ぐため、必ずtype=”submit”を明示しておきましょう。ボタンの文言は単なる送信ではなく、「内容を送信する」などクリック後の動作がイメージしやすい言葉にするとユーザーの不安を軽減できます。
まずは確実にデータを送れる構造を作り、その後にCSSでデザインを整えていきます。
【応用編】属性を使いこなしてフォームの精度を高める
フォームはタグを並べるだけでも形になりますが、実務では「入力ミスを減らす」「迷わず入力できる」「送信エラーを防ぐ」といった精度が求められます。その役割を担うのが、各タグに設定する属性です。
ここでは、属性を活用してフォームの精度を高める方法を解説します。
type属性：適切な入力モードを指定する（email, tel, number）
type属性は「この入力欄には何を入れてほしいか」をブラウザに伝えるための設定で、入力のしやすさに直結します。たとえばemailやtelを指定すると、スマートフォンではメール用・電話用のキーボードが表示されやすくなり、入力の手間やミスを減らせます。
一方でnumberは数値の入力に向いていますが、電話番号のように先頭の0が必要だったり、ハイフンを含めて入力したいケースには適しません。用途に合わないtypeを選ぶと、かえって入力しづらくなるため注意しましょう。
name属性：サーバに渡すデータの「名前」を決める
name属性は、送信時にサーバへ渡すデータの識別名です。たとえばPHPでは、$_POST[“email”] のように name を指定して値を取得します。そのため、nameの付け方が曖昧だと、受け取り処理や後からの修正が難しくなります。
フォームを作る際は、画面に表示する項目名と、内部で使うnameは別のものだと考えると整理しやすくなります。
途中でnameを変更すると、サーバ側の処理や通知メールの設定にも影響が出ます。後々の運用や外部ツール連携を見据えて、最初に命名ルールを決めておくことが重要です。
placeholder属性：入力例を表示してユーザーをガイドする
placeholder属性を使うと、入力欄の中に例文を表示できます。入力形式をあらかじめ示すことで、ユーザーが迷わず入力しやすくなります。たとえば会社名なら「例）株式会社◯◯」、電話番号なら「例）03-1234-5678」のように、期待する形式を具体的に示すと効果的です。
注意すべきなのが、入力を始めるとplaceholderの文字は消えてしまう点です。そのため、説明をすべてplaceholderに頼るのは適切ではありません。基本はlabelを設置し、placeholderは補足として使う設計がわかりやすいです。
required属性：HTMLだけで必須項目を設定する
required属性を付けると、未入力のまま送信しようとしたときにブラウザが警告を表示します。その場で不足している項目がわかるため、入力漏れによる再送信を防ぎやすくなります。
ただし、ブラウザの種類や送信方法によっては、期待どおりに動作しない場合があります。また、悪意のある送信はHTMLの制約を回避できるため、サーバ側での必須チェックは必ず必要です。
autocomplete属性：入力補完を有効にして離脱率を下げる
autocomplete属性は、ブラウザの自動入力機能を補助する設定です。氏名やメールアドレスなど、繰り返し入力される項目では入力の手間を減らせます。name、email、telなどを適切に指定すると、ブラウザが保存している情報を候補として表示できるため、特にスマートフォンでは入力負担の軽減につながります。
一方で、ワンタイム情報や共有端末で扱う項目では、autocomplete=”off” を検討する必要があります。項目の性質に応じて使い分けることが大切です。
【デザイン編】CSSでお問い合わせフォームを見やすく整える
HTMLでフォームの基本構造を作ったら、次に整えるべきなのがCSSによる見やすさと操作性です。フォームは「表示できること」だけでなく、「迷わず入力できること」が重要です。
フォーム全体のレイアウト（Flexbox ／ CSS Gridの活用）
フォームの読みやすさは、ラベルと入力欄の並び方で大きく変わります。基本は縦に1列で並べる構成がわかりやすく、実装も安定します。
一方で、PC表示では「ラベルを左、入力欄を右」に配置する2カラムレイアウトを採用したい場面もあります。この場合、Flexboxを使えばラベルと入力欄を横並びにしやすく、ボタンの配置調整にも向いています。
複数項目を行と列で整理したい場合はCSS Gridが便利です。ただし、最初から複雑な構造にすると修正が難しくなります。まずは縦並びを基本とし、必要に応じてPC表示のみ2カラムに切り替える設計にすると、管理しやすくなります。
入力フィールドとボタンのスタイリング
入力欄の見た目では、装飾よりも操作しやすさを優先します。読みやすい文字サイズ、十分な余白、指で押しやすい高さを確保することが重要です。
inputやtextareaに適切なpaddingを設定すると、窮屈さがなくなり、入力ミスも減ります。特にスマートフォンでは、タップしやすい高さを意識することが大切です。
送信ボタンは、色や影よりも状態のわかりやすさを重視します。ホバー時の変化や、無効状態の違いがはっきりしていると、安心して操作できます。
フォームのレスポンシブ対応（スマホ最適化の重要性）
スマホでは入力欄の幅を100％にし、ラベルは上に配置すると視線移動が少なくなります。2カラムレイアウトは画面が狭いと窮屈になるため、ブレイクポイントで縦並びに切り替える設計が一般的です。
フォントサイズが小さすぎると、入力時に自動拡大が発生し、レイアウトが崩れることがあります。見た目だけで判断せず、実際の端末で操作感を確認しながら調整することが重要です。
フォーカス時（:focus）の視覚効果でユーザビリティを高める
フォームでは、現在どの項目を入力しているかが一目でわかることが大切です。:focusで枠線や影を表示すると、入力位置が明確になり、見落としを防ぎやすくなります。
デザイン上の理由でoutlineを消す場合は、必ず代わりのフォーカス表現を用意します。視認性が下がると、キーボード操作時の使いにくさにつながります。
:focus-visibleを活用すれば、キーボード操作時のみ強調表示することも可能です。見た目を整えることと、使いやすさを維持することの両立を意識して設計しましょう。
お問い合わせフォームの自作が難しいなら「Synergy!」
フォームは見た目を作るだけならHTMLとCSSで対応できます。しかし実際の運用では、送信処理やスパム対策、離脱分析、顧客データ管理まで含めて設計・保守する必要があります。
公開直後は問題がなくても、運用が始まると「迷惑送信が増える」「どこで離脱しているかわからない」「問い合わせ情報の管理が煩雑になる」といった課題が表面化しやすくなります。
こうした負担を自社で抱え続けるのが難しい場合は、フォーム作成から顧客データ管理までを一体で扱えるツールを検討するのも1つの選択肢です。ここでは、「Synergy!」を活用して運用負担を軽減する考え方を整理します。
reCAPTCHAや制限設定でスパム対策まで実装できる
自作フォームで最も悩みやすいのがスパム対策です。単純な必須チェックだけでは、botによる自動送信や悪意のある投稿を十分に防げない場合があります。
「Synergy!」ではGoogleのreCAPTCHA v3に対応しており、ユーザーに追加の操作を求めることなく、不正アクセスの検知と対策を組み込みやすい設計になっています。
さらに、アクセス元の制限や設定の組み合わせにより、公開後の状況に応じて対策を調整できます。フォームは公開すると必ず外部からのアクセスを受けるため、最初からセキュリティを前提に設計できる点は大きなメリットです。
入力支援と分析でフォームの離脱を改善できる
フォームは「送信できる状態」になってからが本番です。どの項目でエラーが発生しているのか、どのページで離脱が起きているのかを把握しなければ、改善は進みません。
自作の場合、ログ設計や計測の仕組みを自分で整える必要があります。一方で「Synergy!」にはフォーム解析レポート機能があり、アクセス数や離脱率、エラー傾向などを確認できます。ABテストを活用しながら、設問やデザインを比較検証することも可能です。
フォームは小さなストレスの積み重ねで離脱が起きます。数字をもとに改善できる環境を用意しておくことで、継続的な最適化が行いやすくなります。
「Synergy!」で作成「簡単、安心、すぐ使える」Webフォーム
「Synergy!（シナジー）」で作成できるWebフォームと、そのメリットについてご紹介。その他にも用途例やサポート体制、ご利用いただいている企業様の声などをご紹介！
顧客データベースに自動連携しメール施策まで展開できる
自作フォームでは、通知メールを確認してから手動でスプレッドシートやCRMへ転記するケースも多く、対応漏れや登録ミスが起きやすくなります。
「Synergy!」ではフォームと顧客データベースが連携しているため、送信された情報を自動で管理できます。サンキューメールや通知メールも設定できるため、初動対応の標準化にもつながります。
フォーム単体ではなく、「顧客情報を管理し、施策につなげる入口」として設計するのであれば、管理機能まで含めた仕組みを選ぶことが重要です。
参考記事：CRM・顧客管理システム「Synergy!（シナジー）」のデータベース機能
お問い合わせフォームの作り方に関するよくある質問
お問い合わせフォームは、見た目の作成だけでなく、送信処理やセキュリティ対策、運用管理まで含めて考える必要があります。そのため、「HTMLだけでできること」と「サーバ側の処理が必要なこと」の違いがわからず、途中で手が止まってしまうケースも少なくありません。
ここでは、フォーム作成でよくある疑問とつまずきやすいポイントを整理して解説します。
初心者でもHTML／CSSだけでフォームは作れますか？
入力欄や送信ボタンなど、画面上に表示されるフォーム自体はHTMLとCSSだけで作成できます。ラベルや入力欄、テキストエリア、プルダウンを配置し、CSSでレイアウトや余白を整えれば、見た目としては完成します。
しかし、入力された内容をメールで送信したり、データベースに保存したりする処理はHTML／CSSだけでは実現できません。送信先としてPHPなどのサーバ側処理を用意し、受け取ったデータをどのように扱うかまで設計して初めて、実際に運用できるフォームになります。
送信ボタンを押してもメールが届かない原因は何ですか？
原因は大きく分けて、「送信処理の設定ミス」と「メールの到達問題」の2つがあります。
送信処理の設定ミスとしては、formタグのactionが正しく設定されていない、methodの指定が適切でない、サーバ側の受け取りキーが一致していないといったケースが代表的です。
一方、送信自体は成功しているものの、迷惑メールとして隔離されている、送信元ドメインの設定が不十分で到達率が下がっている、Fromの設定が適切でなく弾かれている、といった原因もあります。
Googleフォームと自作フォーム、どちらが良いですか？
目的に応じて選ぶのが最もわかりやすい判断基準です。短期間で簡単にフォームを作成し、すぐに検証を始めたい場合はGoogleフォームが適しています。設定が簡単で、運用コストも抑えられます。
自作は自由度が高い反面、送信処理の実装、スパム対策、改善のための計測設計、データ管理まで対応する必要があります。長期運用を前提とする場合は、「管理と改善まで無理なく回せるか」という視点で選ぶことが重要です。自作の負担が大きいと感じる場合は、「Synergy!」のようなツールを活用する方法も現実的です。
まとめ
HTMLとCSSを使えば、自社のデザインに合わせた自由な見た目のお問い合わせフォームを作成できます。しかし、フォームは作って終わりではありません。PHPなどを用いたサーバ側の送信処理や、reCAPTCHAをはじめとするスパム対策、さらには個人情報を守るためのセキュリティ対策を自前で実装・保守し続ける必要があります。
当社の「Synergy!」を利用すれば、高度なプログラミング知識がなくても、安全で入力しやすいお問い合わせフォームを素早く公開できます。フォームから送信された内容は自動で顧客データベースに格納されるため、メール通知を見落として対応が遅れたり、顧客情報がスプレッドシートに散在したりするリスクを防げます。
「Synergy!」を提供するシナジーマーケティングは、システムの提供にとどまらず、離脱を防ぐフォーム設計から、獲得したリードを育成するマーケティング施策までをトータルで支援しています。「フォームの自作に行き詰まっている」「問い合わせ対応の漏れをなくし、効率化したい」とお考えの方は、ぜひお気軽にご相談ください。
CRMシステム「Synergy!」の特長が機能別でわかる資料です！
「Synergy!」の具体的な製品機能については、ぜひ以下のフォームから資料をダウンロードしてご確認ください。
関連情報
※記載されている内容は掲載当時のものであり、一部現状とは内容が異なる場合があります。ご了承ください。