お問い合わせフォームの作り方｜HTML・CSS・PHPを初心者向けに解説

お問い合わせフォームの作り方は「入力・処理・返信」の流れを理解することから始まる

お問い合わせフォームを作るときは、いきなりPHPのコードを書き始めるより、まずユーザーが送信するまでの流れを整理すると理解しやすくなります。一般的なお問い合わせフォームでは、ユーザーが名前やメールアドレス、お問い合わせ内容を入力し、その内容をサーバー側で受け取り、問題がなければ管理者へ通知します。さらに必要であれば、問い合わせをしたユーザーへ自動返信メールを送信します。

画面上ではひとつのフォームに見えていても、内部では複数の処理が連携しています。HTMLは入力欄を用意し、CSSはフォームの見た目を整えます。JavaScriptは入力時の補助や画面上の操作を担当し、PHPは送信された情報をサーバー側で確認してメール送信などを行います。役割を分けて考えることで、「どこを変更すれば何が変わるのか」が理解しやすくなります。

初心者がつまずきやすいのは、見た目のフォームを完成させた時点で「ほぼ完成」と感じてしまうことです。しかし実際の制作案件では、送信処理、入力チェック、確認画面、自動返信、管理者通知、エラー処理なども必要になります。お問い合わせフォームは、見た目よりもその後ろで動く仕組みまで含めてひとつの機能と考えることが大切です。

HTMLでお問い合わせフォームの入力項目を作る

お問い合わせフォームの見た目の土台になるのがHTMLです。基本となるのは<form>タグで、その中に<input>、<textarea>、<select>などを配置します。フォームから送信された値は、それぞれの要素に設定したname属性を使ってPHP側で受け取ります。

まずはformタグで送信先と送信方法を指定する

<form>には、入力内容をどこへ送るのかを指定するactionと、どの方法で送るのかを指定するmethodがあります。個人情報やお問い合わせ内容を扱う一般的なフォームでは、URLに入力内容を表示しないPOST方式が基本となります。

たとえばPHPファイルへ送信する最小構成は次のようになります。実際の案件では、ここへ電話番号、会社名、選択項目、プライバシーポリシーへの同意など、必要な項目を追加していきます。

<form action="confirm.php" method="post">
<label for="name">お名前</label>
<input type="text" id="name" name="name" required>

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" required>

<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" required></textarea>

<button type="submit">入力内容を確認する</button>
</form>

name属性はPHPとの受け渡しに使う

フォーム制作では、見た目だけでなくname属性が重要です。たとえばname="email"と設定した入力欄は、PHP側では$_POST['email']として受け取れます。HTML側の名前とPHP側の設定が一致していないと、入力した値が正しく処理されません。

案件途中で項目名を変更したり、新しい入力欄を追加したりするときは、HTMLだけを変更するのではなく、PHP側の項目定義やメール本文も確認する必要があります。フォームは複数ファイルが連動して動くものだと理解しておくと、修正時のトラブルを減らせます。

requiredだけに頼らずサーバー側でも確認する

HTMLにはrequiredやtype="email"など、ブラウザー側で入力を補助する仕組みがあります。これらを使えば未入力や簡単な形式ミスをユーザーへ知らせられるため、フォームの使いやすさを高められます。

ただし、ブラウザー側のチェックだけで安全なフォームになるわけではありません。送信された値はPHP側でも改めて確認する必要があります。HTML側のチェックはユーザーを助けるためのもの、PHP側のチェックは受け取ったデータを安全に扱うためのもの、と役割を分けて考えましょう。

CSSではフォームをサイトのデザインになじませる

お問い合わせフォームは機能するだけでなく、制作したWebサイトの一部として違和感なく見えることも重要です。企業サイトを制作したのに、フォームだけ別サービスのような見た目になってしまうと、サイト全体の完成度を下げてしまいます。CSSでは色だけでなく、入力欄の高さ、余白、文字サイズ、ラベル、ボタン、エラー表示まで含めて整えます。

最初にフォーム全体の基本ルールを決める

案件ごとにCSSを行き当たりばったりで追加すると、フォームだけスタイルが複雑になりやすくなります。まず入力欄の高さ、枠線、角丸、背景色、フォーカス時の表示など、共通するルールを決めておくとカスタマイズしやすくなります。

特に既存サイトへフォームを追加する場合は、サイトですでに使っているフォントサイズ、余白、ブランドカラーなどをフォーム側にも合わせるのが基本です。フォームを単独でデザインするのではなく、サイト全体のデザインシステムの一部として考えると統一感が出ます。

入力しやすさを損なわないデザインを意識する

お問い合わせフォームでは、おしゃれさだけでなく入力のしやすさも重要です。入力欄が小さすぎたり、必須表示がわかりにくかったりすると、ユーザーが途中で迷う原因になります。

最低限、次のポイントは確認しておきましょう。

• 入力欄とラベルの対応がひと目でわかる
• 必須項目と任意項目を区別できる
• スマートフォンでも十分な入力領域を確保する
• フォーカス中の入力欄が視覚的にわかる

フォームはユーザーに情報を入力してもらうインターフェースです。装飾を増やすよりも、「どこに何を入力すればいいのか」がすぐ理解できることを優先すると、実務で使いやすいフォームになります。

特にスマートフォンでは、PCでは問題なかった2カラム配置が窮屈になることがあります。レスポンシブ時には1カラムへ切り替えるなど、フォーム専用のレイアウト調整も確認しておきましょう。

エラー表示も通常状態と同じくらい設計する

フォーム制作では通常状態ばかり確認しがちですが、実際のユーザーは入力ミスをします。入力エラーが起きたときに、どの項目に問題があるのかがすぐわかる設計が必要です。

エラー時には次のような情報をわかりやすく表示すると使いやすくなります。

• どの入力項目でエラーが発生したのか
• 何が間違っているのか
• どのように修正すればよいのか

「入力内容にエラーがあります」だけでは、ユーザー自身が問題箇所を探さなければなりません。エラーになった入力欄付近へ具体的なメッセージを表示することで、修正までの負担を減らせます。

FreelanceFormでは、デザインを案件へ合わせやすい構成を重視しています。フォームの見た目を一から考える時間を減らしたい場合は、お問い合わせフォームの10デザインも参考にしてください。

PHPで入力内容を受け取り、確認してから送信する

HTMLで作った入力フォームだけでは、送信された内容を管理者へメールで届ける処理はできません。そこでサーバー側で動作するPHPを利用します。PHPでは送信された値を受け取り、入力内容を検証し、確認画面へ表示したり、メール送信処理へ渡したりします。

POSTされた値をPHPで受け取る

HTML側でmethod="post"を指定した場合、PHPでは$_POSTを使って値を取得できます。ただし、送信されてきたデータをそのまま信用して利用するのではなく、存在確認や形式チェックを行うことが重要です。

メールアドレスであれば、PHPのfilter_var()を利用して形式を確認できます。画面へ値を再表示するときは、HTMLとして解釈されないようにhtmlspecialchars()などを使って出力を処理します。

<?php
$name = trim($_POST['name'] ?? '');
$email = trim($_POST['email'] ?? '');
$message = trim($_POST['message'] ?? '');

$errors = [];

if ($name === '') {
    $errors[] = 'お名前を入力してください。';
}

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $errors[] = 'メールアドレスを正しく入力してください。';
}

if ($message === '') {
    $errors[] = 'お問い合わせ内容を入力してください。';
}
?>

確認画面では値を安全に表示する

確認画面は、入力された内容をユーザー自身が送信前に確認するための画面です。名前、メールアドレス、お問い合わせ内容などを一覧表示し、問題がなければ送信、間違いがあれば入力画面へ戻れるようにします。

入力値をHTMLへ表示するときは、その値をそのまま出力しないようにします。たとえば<や>などが含まれている場合、HTMLとして解釈される可能性があるため、表示用にエスケープする処理が必要です。

<p>
<?= htmlspecialchars($name, ENT_QUOTES, 'UTF-8') ?>
</p>

メール送信はSMTPを使う方法もある

PHPにはメール送信用の機能がありますが、実際の運用ではサーバー環境やメールサービスの設定によって送信方法が変わります。制作案件では、SMTPを利用して認証付きでメールを送信する構成が使われることもあります。

重要なのは、コードを書けば必ずメールが届くわけではないという点です。送信サーバー、認証情報、送信元アドレス、ドメイン側の設定なども関係します。フォーム制作では「PHPを書くこと」と「メールを正常に届ける環境を整えること」を分けて考える必要があります。

お問い合わせフォームには確認画面や自動返信など周辺機能も必要になる

制作案件で使うお問い合わせフォームでは、「メールが送れた」というだけでは十分ではありません。送信前に入力内容を確認したい、問い合わせをした人へ自動返信したい、管理者へ内容を通知したい、入力ミスがあればわかりやすく知らせたいなど、実際の運用を考えると複数の機能が必要になります。

送信前後のユーザー体験まで設計する

ユーザーがフォームへ入力したあと、いきなり送信完了になる構成も作れますが、企業サイトなどでは確認画面を挟むケースがあります。特に電話番号や住所、長文のお問い合わせなど、入力項目が多い場合は内容を見直せる画面があると安心です。

また、送信後には完了画面を表示し、「正常に受付できたのか」「次に何をすればいいのか」を明確に伝えます。お問い合わせフォームは入力画面だけではなく、入力開始から送信完了までをひとつの導線として設計することが重要です。

実務であると便利な機能を整理する

案件によって必要な機能は変わりますが、一般的なWebサイトのお問い合わせフォームでは次のような機能を検討します。

すべてを毎回ゼロから実装する必要はありませんが、クライアントから要望されたときに「何が必要なのか」を判断できるようにしておくと対応しやすくなります。

• 確認画面と送信完了画面
• 問い合わせ者への自動返信メール
• 管理者へのお問い合わせ通知
• 必須・形式・文字数などの入力チェック
• ファイル添付や入力補助

こうした機能は、それぞれ独立しているように見えて実際には連動しています。入力項目を追加すれば、確認画面、管理者通知、自動返信メールなども合わせて変更する必要がある場合があります。

FreelanceFormで用意している主な処理については、PHPお問い合わせフォームの機能一覧で確認できます。

管理者側の運用も考えておく

フォームを作るときは送信するユーザーだけでなく、受信するクライアント側の使いやすさも確認しましょう。メールの件名だけで問い合わせ内容を判断できるか、問い合わせ者へ返信しやすいか、どのサイトから届いた問い合わせなのかわかるか、といった点も実務では重要です。

管理者通知メールの内容がわかりにくいと、フォーム自体は正常でも運用時に手間が増えます。誰が受信するのか、どのアドレスへ送るのか、問い合わせ後にどのような対応をするのかまで確認して設計すると、クライアントにとって使いやすいフォームになります。

• 通知先となるメールアドレス
• 管理者通知メールの件名と本文
• 問い合わせ者へ返信するときの返信先
• 自動返信メールの案内内容

フォームはWebサイトの公開後も継続して使われます。制作時だけ動けばよいのではなく、公開後の問い合わせ対応まで想像して設定しておくことが大切です。

特にクライアント案件では、公開前に実際の受信先アドレスへテスト送信し、管理者通知と自動返信の両方が届くことを確認しておきましょう。

公開するお問い合わせフォームではセキュリティと動作確認も欠かせない

お問い合わせフォームは、Webサイトの中でも外部から情報が送信される場所です。そのため、見た目やメール送信だけではなく、入力値の検証、不正な送信への対策、ファイル添付を許可する場合の制限なども考える必要があります。特にインターネットへ公開するフォームでは、ブラウザー側の入力チェックだけを信用せず、サーバー側でもデータを確認します。

ユーザーから届くデータをそのまま信用しない

フォームから受け取った値は、必ずPHP側で確認してから利用します。HTMLにrequiredを設定していても、通常のブラウザー操作以外の方法で直接リクエストを送ることは可能だからです。

最低限、次のようなチェックを用途に応じて検討します。

• 必須項目が入力されているか
• メールアドレスなどが想定した形式か
• 文字数が極端に長くないか
• 想定していない値が送信されていないか

入力チェックはユーザーの入力ミスを防ぐだけでなく、フォーム側が想定していないデータを処理しないためにも必要です。

特にメールヘッダーやファイル名などへユーザー入力を利用する場合は、通常の本文以上に慎重な取り扱いが必要になります。

スパム送信への対策も考える

公開したフォームには、人間だけでなく自動化されたプログラムから送信されることがあります。問い合わせが増えていなくても、大量の迷惑送信によって管理者のメールボックスが埋まる可能性があります。

サイトの規模や用途に応じて、次のような対策を組み合わせます。

• 短時間での連続送信を制限する
• CSRF対策用のトークンを利用する
• 入力値をサーバー側で検証する
• 必要に応じてボット対策を追加する

すべてのサイトに同じ対策が必要とは限りません。公開範囲、問い合わせ数、入力内容の重要度などを考えながら設計します。

また、対策を増やしすぎることで一般ユーザーが送信しにくくならないよう、使いやすさとのバランスも必要です。

公開前には実際の環境で送信テストを行う

ローカル環境でフォーム画面が表示できても、本番サーバーでメール送信まで正常に動くとは限りません。PHPの実行環境やSMTP接続、サーバー側の設定などによって挙動が変わるためです。

公開前には、少なくとも次の項目を確認しましょう。

• 入力から確認・完了まで正常に進める
• 管理者通知メールが受信できる
• 自動返信メールがユーザーへ届く
• 入力エラー時の表示が正しい
• PCとスマートフォンの両方で操作できる

制作担当者のメールアドレスだけでなく、可能であれば実際にクライアントが利用する受信先でもテストします。公開直後の問い合わせを取りこぼさないためにも重要な工程です。

サーバー準備から送信設定までの流れを確認したい場合は、FreelanceFormの導入方法も参考にしてください。

お問い合わせフォームは自作とテンプレートを使い分ける

HTML・CSS・PHPを学ぶために、自分でお問い合わせフォームを一度作ってみることには大きな意味があります。入力された値がどのようにPHPへ渡り、どのタイミングで確認し、どのようにメールへ変換されるのかを理解すると、既存フォームをカスタマイズするときにも役立ちます。

一方で、クライアント案件のたびに確認画面、自動返信、管理者通知、入力チェック、メール送信などを毎回ゼロから作る必要があるとは限りません。すでに仕組みを理解しているのであれば、動作する土台を利用し、サイトごとのデザインや入力項目に制作時間を使う方法もあります。

特にWebデザイナーの場合、本来の役割はPHPの同じ送信処理を何度も書き直すことではなく、クライアントの目的に合ったWebサイトを完成させることです。自作する部分と既存の仕組みを利用する部分を切り分けることで、制作スピードと品質の両方を保ちやすくなります。

提言：Webデザイナーはお問い合わせフォームを毎回ゼロから作らなくていい

お問い合わせフォームの仕組みを理解することと、すべての案件でゼロからコードを書くことは別の話です。HTMLのフォーム構造、POSTによるデータ送信、PHP側の入力チェック、確認画面、メール送信という基本を理解していれば、既存のコードを案件に合わせて調整するという選択肢も持てます。

特に駆け出しのWebデザイナーにとって重要なのは、「PHPを完璧に書けること」そのものではなく、クライアントから「お問い合わせフォームもお願いします」と言われたときに、必要な環境や仕様を判断し、適切な方法でサイトへ組み込めることです。

FreelanceFormは、そのための土台として作られた買い切り型のお問い合わせフォームテンプレートです。HTML・CSSを入口に、PHPの送信処理を一から組み立てず制作案件へ導入できます。詳しくはFreelanceFormの特徴・強みをご覧ください。

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

HTMLとCSSだけでお問い合わせフォームは作れますか？

入力欄の表示やデザインまではHTMLとCSSで作れます。ただし、入力されたお問い合わせ内容をサーバーで処理し、管理者へメール送信する場合は、PHPなどのサーバー側プログラムや外部のフォームサービスが必要です。

お問い合わせフォームを作るのにPHPは必須ですか？

PHPそのものが必須というわけではありません。Node.jsなど別のサーバーサイド技術や外部フォームサービスを利用する方法もあります。ただし、PHPが利用できる一般的なレンタルサーバーへ設置するフォームでは、PHPが選択されることがあります。

お問い合わせフォームに確認画面は必要ですか？

必ず必要というわけではありません。入力項目が少ないフォームでは確認画面を設けず直接送信する構成もあります。一方、住所や長文、複数の選択項目などがある場合は、送信前に内容を確認できることでユーザーが入力ミスに気づきやすくなります。

お問い合わせフォームからGmailへメールを送れますか？

SMTPなど適切なメール送信環境を設定すれば、Gmailを利用した送信構成を作ることは可能です。ただしGoogleアカウント側の設定やサーバー側の通信環境も関係します。コードだけでなく、メール送信環境まで含めて設定する必要があります。

初心者でもクライアント案件にお問い合わせフォームを設置できますか？

HTML・CSSの基本を理解し、PHPが動作するサーバー環境やメール送信設定を確認できれば対応できます。最初からすべてのPHP処理を自作する方法だけでなく、動作するテンプレートや導入ガイドを利用し、案件に合わせてカスタマイズする方法もあります。

まとめ：仕組みを理解すれば、フォーム制作は怖くない

お問い合わせフォームは、HTMLで入力欄を作り、CSSでサイトになじむデザインへ整え、必要に応じてJavaScriptで入力を補助し、PHPで入力チェックやメール送信などを処理します。さらに実務では、確認画面、自動返信、管理者通知、エラー処理、セキュリティ、公開前テストまで含めて考える必要があります。

大切なのは、すべてのコードを暗記することではなく、それぞれのファイルが何を担当しているのかを理解することです。仕組みを一度理解すれば、ゼロから自作する場合も、テンプレートを案件に合わせてカスタマイズする場合も判断しやすくなります。フォーム制作を「できない仕事」にせず、自分のWeb制作の選択肢として持っておきましょう。