お問い合わせフォームはHTML・CSSだけで作れる？メール送信まで解説

HTML・CSSだけでもお問い合わせフォームの見た目までは作れる

お問い合わせフォームの入力画面は、HTMLの<form>タグを中心に作ります。名前なら<input type="text">、メールアドレスなら<input type="email">、問い合わせ内容なら<textarea>というように、入力してもらう内容に合わせて要素を組み合わせます。ここまでは通常のWebページ制作と同じHTMLの知識で対応できます。

CSSを使えば、入力欄のサイズや背景色、枠線、角丸、ラベルの配置、送信ボタンなども自由にデザインできます。サイト本体で使用しているフォントやブランドカラーに合わせれば、外部サービスを貼り付けたような見た目ではなく、そのWebサイト専用のお問い合わせフォームとして仕上げられます。

ただし、この段階では「入力できる画面」が完成しただけです。フォームへ入力して送信ボタンを押した情報を、誰が受け取って、どのようにメールへ変換し、どこへ送るのかという処理は別に用意する必要があります。お問い合わせフォームでは、画面を作る工程と送信処理を作る工程を分けて考えることが基本です。

お問い合わせフォームのHTMLではformタグとname属性が重要になる

HTMLでお問い合わせフォームを作るとき、特に重要なのが<form>タグです。フォームの中に入力欄を並べるだけでなく、入力されたデータをどこへ送るか、どの方法で送信するかを指定します。見た目だけならCSSで自由に変更できますが、データの受け渡しではHTML側の設定がPHPなどの処理とつながっています。

formタグで送信先を指定する

たとえば、入力された内容をconfirm.phpへ送る場合は、action属性に送信先を指定します。method="post"を設定すると、入力値をPOSTデータとしてサーバー側へ渡せます。

最小限の構造であれば、次のようなHTMLになります。

<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へ値を渡すための名前になる

入力欄にはidだけでなく、name属性も設定します。たとえばname="email"とした入力欄は、PHP側で$_POST['email']として取得できます。

つまりHTML側で入力項目を追加したときは、PHP側でも同じ項目を受け取れるように変更が必要になる場合があります。見た目だけを追加しても、送信処理まで自動的に追加されるわけではありません。

HTMLの入力チェックはユーザーを助ける機能として使う

HTMLにはrequired、type="email"、maxlengthなど、入力を補助する属性があります。これらを設定すると、未入力や簡単な形式ミスをブラウザー側でユーザーへ知らせることができます。

ただし、ブラウザー側のチェックだけに依存することはできません。実際に送信されたデータについては、PHPなどサーバー側でも改めて確認します。HTML側は入力しやすくするため、サーバー側は受け取った値を正しく処理するため、と役割を分けることが重要です。

CSSはフォームをサイトのデザインに合わせるために使う

CSSはメール送信そのものには関係しませんが、Web制作案件では非常に重要です。お問い合わせフォームだけデザインが異なると、サイト全体の統一感が失われてしまいます。入力欄、ラベル、必須表示、エラー表示、確認ボタン、送信ボタンまで含めてサイトのUIとして設計する必要があります。

フォーム専用のデザインを複雑にしすぎない

フォームをおしゃれに見せようとしてCSSを大量に追加すると、案件ごとのカスタマイズが難しくなることがあります。背景色、枠線、余白、フォントサイズ、入力欄の高さなど、主要な部分を理解しやすい構造にしておく方が再利用しやすくなります。

特にフリーランスWebデザイナーが複数案件でフォームを使う場合は、毎回ゼロからCSSを書くより、ベースとなるデザインを案件のサイトへ合わせて調整できる形にしておくと効率的です。

お問い合わせフォームで確認したいデザインポイント

フォームは見栄えだけでなく、ユーザーが迷わず入力できることが重要です。特にスマートフォンでは入力欄の幅や余白が不足すると操作しづらくなるため、レスポンシブ表示まで確認します。

最低限、次のような部分をチェックしておきましょう。

• ラベルと入力欄の関係がわかりやすい
• 必須項目と任意項目を区別できる
• 入力欄とボタンに十分な高さがある
• エラー箇所が視覚的に確認できる
• スマートフォンでも1画面に収まりやすい

Webサイトのデザインが完成したあとにフォームを追加する場合は、既存サイトのCSSルールに合わせてフォームを調整すると自然になじみます。お問い合わせフォーム単体で考えるのではなく、ページ全体のUIとして設計します。

すでにフォームデザインの土台があると、案件ごとの調整量を減らせます。FreelanceFormでは10種類のお問い合わせフォームデザインを用意し、HTML・CSSでカスタマイズできる構成にしています。

フォーカスやエラー時の見た目もCSSで設計する

通常状態だけではなく、入力中やエラー発生時の状態もフォームデザインの一部です。ユーザーが現在どの入力欄を操作しているか分かるように、:focusなどを使って視覚的な変化を付けることができます。

また、入力内容に問題がある場合は、単に枠線の色を変えるだけでなく、何を修正すればよいのか文章でも伝えることが大切です。色だけに依存せず、メッセージと組み合わせて表示すると分かりやすくなります。

メール送信にはPHPなどサーバー側の処理が必要になる

HTMLとCSSでお問い合わせフォームの画面を作っても、それだけでは管理者へメールを送れません。入力された情報を受け取り、内容を確認し、メール本文を作成して送信する処理は、PHPなどサーバー側で動くプログラムが担当します。

たとえばHTMLからPOSTされた値は、PHPでは$_POSTを使って取得できます。そこで名前やメールアドレスが入力されているか、メールアドレスの形式が正しいか、想定以上に長い文字列が送信されていないかなどを確認します。

つまりお問い合わせフォームでは、「入力画面を作るHTML・CSS」と「送信された情報を扱うPHP」が連携して初めて実用的なフォームになります。HTMLだけを書ければ完成する機能ではありませんが、それぞれの役割を理解すれば必要な作業を整理しやすくなります。

JavaScriptを使ってもブラウザーだけで安全なメール送信が完結するわけではない

HTML・CSSにJavaScriptを加えれば、お問い合わせフォームの操作性を高めることができます。たとえば入力エラーの表示、文字数カウンター、テキストエリアの自動伸長、選択内容によって表示項目を切り替えるといった処理はJavaScriptが得意です。

JavaScriptは入力を助ける処理と相性がいい

ユーザーが入力している途中でエラーを知らせたり、残り文字数を表示したりすれば、送信ボタンを押す前に入力ミスへ気づきやすくなります。また、問い合わせ種別によって必要な入力欄を切り替えるようなUIも作れます。

こうした処理はフォームの使いやすさを高めますが、JavaScriptによる入力チェックだけでデータの安全性を保証することはできません。サーバーへ送信された値についてはPHP側でも確認します。

ブラウザーにSMTPの認証情報を置いてはいけない

「JavaScriptから直接Gmailへ送ればPHPはいらないのでは？」と考えることもできますが、ブラウザーへSMTPのユーザー名やパスワードなどの秘密情報を埋め込むことは避ける必要があります。

ブラウザー上のJavaScriptはユーザーから確認できるため、秘密にすべき認証情報を安全に保持する場所ではありません。メール送信を行う場合は、サーバー側の処理や適切な外部サービスを経由します。

JavaScriptでできることとサーバー側で行うことを分ける

お問い合わせフォームでは、ブラウザー側で行う処理とサーバー側で行う処理を分けて考えると理解しやすくなります。

代表的な役割は次の通りです。

• HTML：入力項目とフォーム構造を作る
• CSS：フォームの見た目を整える
• JavaScript：入力中の操作や表示を補助する
• PHP：送信データを受け取り検証する
• SMTP：メールを送信する経路として利用する

すべてを一つの言語で処理しようとするより、それぞれが得意な役割を担当させる方が構成を理解しやすくなります。

FreelanceFormで用意している確認画面、自動返信、管理者通知、入力チェックなどについてはお問い合わせフォームの機能一覧で確認できます。

PHPからメールを送る場合はSMTPなど送信環境の設定も必要になる

PHPで送信処理を書けば、それだけで必ずメールが届くわけではありません。実際にメールを送信するには、利用するサーバーやメールサービスに合わせた送信環境が必要です。特にGmailなどを使う場合は、SMTPによる認証やGoogleアカウント側の設定が必要になることがあります。

PHPはメール内容を作り、送信処理へ渡す

PHP側では、フォームから受け取った名前、メールアドレス、お問い合わせ内容などを使って管理者通知メールや自動返信メールの本文を作成できます。送信先、件名、本文などを組み立てたあと、メール送信処理へ渡します。

制作案件では、問い合わせ者への自動返信と管理者への通知を別々に送るケースも多くあります。誰に何を送るのかを整理しておくと設定しやすくなります。

SMTPはメールを送信するための仕組み

SMTPはメールを送信するために使われる仕組みです。PHPからSMTPサーバーへ接続し、認証を行ってメールを送信する構成があります。ライブラリとしてPHPMailerなどを利用する方法もあります。

SMTPを利用する場合は、一般的に次のような情報を設定します。

• SMTPサーバー名
• SMTPポート番号
• 送信に使用するユーザー情報
• 暗号化方式
• 送信元メールアドレス

必要な設定値は利用するメールサービスによって異なります。制作時にはクライアントが使用するメール環境を確認してから設定します。

また、認証情報をGitHubなどの公開場所へアップロードしたり、ブラウザーから閲覧できるJavaScriptへ直接記述したりしないよう注意します。

メールが届くかは本番環境で確認する

フォームのコードに問題がなくても、サーバー設定や送信先のメール環境によってメールが届かないケースがあります。そのため、実際に使用するサーバーへ設置したあとに送信テストを行うことが重要です。

公開前には管理者通知と自動返信の両方を確認し、必要であれば複数のメールアドレスを使って受信状況を確認します。FreelanceFormの導入環境についてはお問い合わせフォームの導入方法でも案内しています。

静的HTMLサイトでも外部サービスを使えばお問い合わせフォームを設置できる

PHPが使えない静的ホスティングでも、外部のフォームサービスを利用すればお問い合わせ受付を実現できる場合があります。HTMLで作ったフォームから外部サービスのエンドポイントへデータを送信し、メール通知やデータ保存などをサービス側へ任せる方法です。

この方法なら、自分でPHPの送信処理やSMTP設定を構築しなくてもフォームを用意できます。一方で、利用するサービスによって月額料金、送信件数、保存期間、デザインの自由度、外部サービスへの依存など条件が異なります。

そのため、「HTML・CSSだけで作りたい」という場合でも、実際には何らかの送信先が必要です。PHPを自分のサーバーで動かすのか、フォームサービスへ任せるのかを選択することになります。どちらが正しいというより、案件の予算やサーバー環境、必要な機能に合わせて選びます。

提言：HTML・CSSが書けるなら、次は「送信の仕組み」を理解すればいい

駆け出しWebデザイナーにとって、お問い合わせフォームが難しく見える理由の一つは、突然PHP、SMTP、セキュリティなど知らない言葉が増えることです。しかし、PHPエンジニアにならなければフォーム案件を受けられないわけではありません。

まず理解したいのは、HTMLが入力画面を作り、CSSが見た目を整え、JavaScriptが操作を補助し、PHPが送信されたデータを処理するという役割分担です。その構造さえ理解できれば、すべてを一から書く方法だけでなく、既存のフォームを案件に合わせてカスタマイズする方法も選べます。

FreelanceFormは、HTML・CSSを学んだWebデザイナーが、PHPの送信処理を毎回ゼロから作らなくても案件へフォームを組み込めるように設計したテンプレートです。「フォームも対応できます」という選択肢を増やしたい方は、FreelanceFormの特徴・強みも参考にしてください。

お問い合わせフォームのHTML・CSSとメール送信に関するよくある質問

HTMLだけでお問い合わせ内容をメール送信できますか？

HTMLだけでは、入力内容を受け取って管理者へメールとして送信する処理はできません。HTMLは入力欄を作り、送信先を指定するところまでを担当します。

実際にメールを送るには、PHPなどのサーバー側処理や外部フォームサービスが必要です。どの方法を使うかは、利用するサーバー環境や案件の仕様によって選びます。

CSSがなくてもお問い合わせフォームは動きますか？

CSSがなくても、HTMLと送信処理が正しく用意されていればフォームそのものは動作できます。CSSは主にレイアウトや見た目を整えるために使用します。

ただし、実際のWebサイトでは入力しやすさやサイト全体との統一感も重要です。クライアント案件で利用するなら、スマートフォン表示やエラー表示まで含めてCSSを整える方がよいでしょう。

JavaScriptだけでお問い合わせメールを送れますか？

ブラウザー上のJavaScriptだけでSMTP認証情報を安全に保持して直接メール送信する構成は適切ではありません。秘密にすべき認証情報がユーザーから見える可能性があるためです。

JavaScriptから外部APIへデータを送る方法はありますが、その場合もメール送信自体はAPIやサーバー側の仕組みが担当しています。JavaScriptは主に入力補助や画面上の処理として利用します。

静的サイトでもお問い合わせフォームを設置できますか？

設置できます。ただし、HTMLファイルだけでメール送信処理まで完結するわけではありません。外部フォームサービスを利用するか、PHPなどが動く別のサーバーへ送信処理を用意する必要があります。

PHPを使ったフォームを同じサイト内で動かしたい場合は、PHPが利用できるサーバー環境が必要です。契約しているサーバーの仕様を確認しましょう。

HTML・CSSしかわからなくてもPHPフォームを導入できますか？

PHPを一から開発する場合は一定の学習が必要ですが、完成したフォームや導入ドキュメントを利用する方法もあります。重要なのは、どのファイルが何を担当しているかを理解することです。

入力項目やデザインをHTML・CSSで調整し、送信先など必要な設定だけを変更できる構成なら、PHPをゼロから書く場合より導入のハードルを下げられます。

まとめ：HTML・CSSの先にメール送信の仕組みがある

お問い合わせフォームは、HTMLで入力欄を作り、CSSでデザインを整えるところまでは通常のWeb制作と同じです。しかし、入力されたデータを受け取り、内容を検証し、管理者やユーザーへメールを送信するにはPHPなどのサーバー側処理や外部サービスが必要になります。

大切なのは「HTML・CSSだけでは無理」と諦めることではなく、その先にどんな仕組みが必要なのかを理解することです。HTML、CSS、JavaScript、PHP、SMTPの役割を分けて考えれば、フォーム制作は整理しやすくなります。ゼロから自作する方法と、完成したテンプレートを活用する方法を使い分けながら、自分のWeb制作で対応できる範囲を広げていきましょう。