【コピペOK】HTMLでお問い合わせフォームを作成する全手順7選

はじめに

この記事を読めば、HTMLを使ったお問い合わせフォームの作成ができるようになります。

初心者でも理解しやすいように、基本から順を追って解説します。

ウェブサイトに訪れる人々が直接あなたに連絡を取るためのフォーム作成は、ウェブサイトの機能性とユーザーエクスペリエンスを高めるために欠かせないスキルです。

この記事を通して、そのスキルを身につけましょう。

●HTMLの基本とお問い合わせフォームの重要性

HTML（HyperText Markup Language）は、ウェブページを作成するための標準的なマークアップ言語です。

HTMLを使用することで、テキスト、リンク、画像、フォームなど、ウェブサイトの構成要素をブラウザに指示できます。

この言語の理解は、ウェブデザインの基礎として非常に重要です。

○HTMLとは何か？

HTMLは、ウェブページを構築するための基本的なコードです。

タグと呼ばれる特定のコードを使用し、テキストや画像をページ上に配置します。

例えば、「<p>」タグは段落を表し、「<a>」タグはリンクを作成します。

これらのタグを組み合わせることで、ユーザーにとって見やすいウェブサイトを構築できます。

○なぜお問い合わせフォームが重要なのか

ウェブサイトにお問い合わせフォームを設置することは、訪問者とのコミュニケーションを促進します。

フォームは、訪問者が質問やコメントを簡単に送信できる手段です。

また、ビジネスにとっては、リード生成や顧客サービスの向上のための重要なツールです。

適切なフォームを設置することで、訪問者の体験を向上させ、ウェブサイトの効果を高めることができます。

●HTMLでお問い合わせフォームを作る基本的な構造

お問い合わせフォームをHTMLで作成するには、いくつかの基本的な要素を理解する必要があります。

フォームは、ユーザーが情報を入力し、それをサーバーに送信できるようにするためのHTMLタグの集まりです。

通常、これにはテキストボックス、ラジオボタン、チェックボックス、送信ボタンなどが含まれます。

HTMLでは、「<form>」タグを使用してフォームの開始と終了を明示し、「<input>」や「<textarea>」などのタグを使って具体的な入力フィールドを設定します。

○フォームの基本的なHTMLタグ

フォームを作成するには、まず「<form>」タグでフォームの範囲を定義します。

この中に、ユーザーがデータを入力するための「<input>」タグや「<textarea>」タグを配置します。

「<input>」タグにはさまざまなtype属性があり、例えばtype=”text”は一行のテキストボックスを、type=”submit”は送信ボタンを表します。

「<label>」タグを使用して、各入力フィールドに説明を加えることができます。

○サンプルコード1：シンプルな連絡フォーム

ここでは、基本的な連絡用フォームのサンプルコードを紹介します。

このコードは、名前とメッセージを入力するためのテキストボックスと、これらを送信するためのボタンを含んでいます。

<form action="submit_form.php" method="post">
  <label for="name">名前：</label>
  <input type="text" id="name" name="name"><br>
  <label for="message">メッセージ：</label>
  <textarea id="message" name="message"></textarea><br>
  <input type="submit" value="送信">
</form>

この例では、「<form>」タグでフォーム全体を定義しています。

action属性には、フォームのデータが送信されるサーバーのスクリプトのURLを指定し、method属性でデータの送信方法（この例ではPOSTメソッド）を定義しています。

名前の入力は「<input type=”text”>」を用い、メッセージの入力には「<textarea>」を使用しています。

最後に、「<input type=”submit”>」でデータを送信するボタンを配置しています。

●フォームのカスタマイズ方法

HTMLで作成したお問い合わせフォームは、様々な方法でカスタマイズすることが可能です。

見た目のデザイン変更から、機能の追加、レスポンシブ対応まで、幅広いカスタマイズが実現できます。

ここでは、具体的なカスタマイズ方法とそのサンプルコードを紹介します。

○サンプルコード2：デザインを変更する

フォームの見た目を変更する一番簡単な方法は、CSSを使うことです。

下記のサンプルでは、フォームの入力フィールドと送信ボタンにスタイルを適用しています。

<style>
  form {
    background-color: #f2f2f2;
    padding: 20px;
  }
  input[type="text"], textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }
  input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
  }
  input[type="submit"]:hover {
    background-color: #45a049;
  }
</style>

<form action="submit_form.php" method="post">
  <!-- フォームの内容は省略 -->
</form>

このコードでは、フォーム全体の背景色、入力フィールドの幅とパディング、ボタンの色などを指定しています。

CSSを変更するだけで、フォームの見た目は大きく変わります。

○サンプルコード3：フォームのバリデーション

フォームには、ユーザーが適切な情報を入力するためのバリデーション（検証）機能を追加することが重要です。

HTML5では、簡単にバリデーションを追加できます。

<form action="submit_form.php" method="post">
  <label for="name">名前（必須）：</label>
  <input type="text" id="name" name="name" required><br>
  <label for="email">メールアドレス（必須）：</label>
  <input type="email" id="email" name="email" required><br>
  <!-- その他のフォームの内容は省略 -->
  <input type="submit" value="送信">
</form>

この例では、名前とメールアドレスの入力フィールドに「required」属性を追加し、これらが必須であることを指定しています。

また、メールアドレスには「type=”email”」を指定することで、メールアドレス形式でなければエラーが表示されるようにしています。

○サンプルコード4：ドロップダウンメニューの追加

ドロップダウンメニューは、フォームにおいてユーザーに選択肢を提供する便利な方法です。

下記のコードは、ドロップダウンメニューをフォームに追加した例です。

<form action="submit_form.php" method="post">
  <label for="category">問い合わせカテゴリ：</label>
  <select id="category" name="category">
    <option value="general">一般</option>
    <option value="product">製品について</option>
    <option value="support">サポート</option>
  </select><br>
  <!-- その他のフォームの内容は省略 -->
  <input type="submit" value="送信">
</form>

この例では、問い合わせのカテゴリを選択するためのドロップダウンメニューを提供しています。

このように「<select>」タグを使うことで、ユーザーに複数の選択肢から選んでもらうことができます。

○サンプルコード5：レスポンシブデザインの適用

レスポンシブデザインは、デバイスの画面サイズに合わせてウェブページが適切に表示されるようにする重要な要素です。

下記のサンプルでは、メディアクエリを使用して、画面のサイズに応じてフォームのスタイルを変更しています。

<style>
  form {
    background-color: #f2f2f2;
    padding: 20px;
  }
  /* メディアクエリでレスポンシブ対応 */
  @media screen and (max-width: 600px) {
    input[type="text"], textarea {
      width: 100%;
    }
  }
</style>

<form action="submit_form.php" method="post">
  <!-- フォームの内容は省略 -->
</form>

このコードでは、画面幅が600ピクセル以下になると、テキストボックスとテキストエリアの幅を100%に設定しています。

これにより、スマートフォンなどの小さな画面でもフォームが適切に表示されるようになります。

●よくあるエラーと対処法

HTMLで作成したお問い合わせフォームを使用する際には、いくつかの一般的なエラーに直面することがあります。

これらのエラーに適切に対処することで、ユーザー体験を向上させ、問題のあるフォームの送信を防ぐことができます。

○フォームが送信されない時の対処法

フォームが正常に送信されない場合、最初に確認すべきは、フォームタグの「action」属性と「method」属性です。

これらが正しく設定されていないと、フォームのデータは正しい場所へ送信されません。

また、サーバー側での処理スクリプト（PHPやPythonなど）が正しく動作しているかどうかも確認する必要があります。

サーバー側のスクリプトに誤りがあると、フォームデータは適切に処理されず、結果として送信が失敗します。

○入力データのエラーハンドリング

ユーザーからの入力データの検証とエラーハンドリングは、フォームのセキュリティと使いやすさを確保するために重要です。

サーバー側のスクリプトを使用して、すべての入力が適切であることを確認し、問題がある場合はユーザーに適切なフィードバックを提供することが重要です。

例えば、PHPを使用してフォームデータの検証を行う方法をみてみましょう。

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];

  // 名前の検証
  if (empty($name)) {
    echo "名前が入力されていません。";
  }

  // メールアドレスの検証
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo "無効なメールアドレスです。";
  }

  // メッセージの検証
  if (empty($message)) {
    echo "メッセージが入力されていません。";
  }

  // ここにデータベースへの保存処理などを記述
}
?>

このPHPコードでは、フォームから送信されたデータがPOSTメソッドであることを確認した後、各入力フィールドのデータを変数に格納しています。

その後、これらのデータに対して検証を行い、問題があれば適切なエラーメッセージを表示しています。

これにより、ユーザーがフォームを適切に記入しているかを確認し、問題がある場合はそれを指摘することができます。

●お問い合わせフォームの応用例

お問い合わせフォームは、単に情報を受け取るだけでなく、様々な応用が可能です。

自動返信メールの送信や、受け取ったデータをデータベースに保存するなど、フォームを利用した応用例を紹介します。

○サンプルコード6：自動返信メール機能の追加

お問い合わせがあった際に、自動的に返信メールを送信する機能を追加することで、ユーザーに対して迅速に対応していることを表すことができます。

下記のPHPスクリプトは、フォームからのデータを受け取り、ユーザーに自動返信メールを送信する一例です。

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $user_email = $_POST['email'];
  $subject = "お問い合わせありがとうございます";
  $message = "お問い合わせいただき、ありがとうございます。\n早急にご連絡いたしますので、しばらくお待ちください。";
  $headers = "From: webmaster@example.com";

  mail($user_email, $subject, $message, $headers);
}
?>

このスクリプトでは、フォームから送信されたメールアドレス（$user_email）に対して、「$subject」で設定された件名と、「$message」で設定されたメッセージ内容のメールを送信します。

これにより、ユーザーはフォームを送信したことの確認と、後続の対応を待つことができます。

○サンプルコード7：データベースとの連携

フォームからのデータをデータベースに保存することで、情報の管理や分析が容易になります。

下記のPHPスクリプトは、フォームデータをMySQLデータベースに保存する方法を表しています。

<?php
$db_host = "localhost";
$db_user = "username";
$db_pass = "password";
$db_name = "database_name";

$conn = new mysqli($db_host, $db_user, $db_pass, $db_name);

if ($conn->connect_error) {
  die("接続失敗: " . $conn->connect_error);
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];

  $sql = "INSERT INTO contacts (name, email, message) VALUES ('$name', '$email', '$message')";

  if ($conn->query($sql) === TRUE) {
    echo "新しいレコードが作成されました";
  } else {
    echo "エラー: " . $sql . "<br>" . $conn->error;
  }

  $conn->close();
}
?>

このスクリプトでは、最初にデータベースへの接続を確立し、フォームからのデータを「INSERT」クエリを使ってデータベースに挿入しています。

これにより、受け取ったお問い合わせ情報を効率的に管理し、必要に応じて後で参照することが可能になります。

●エンジニアなら知っておくべきHTMLの豆知識

HTMLはウェブ開発の基盤であり、その深い理解はウェブサイトやアプリケーションの質を向上させます。

ここでは、特にエンジニアが知っておくべきHTMLの豆知識として、SEOに影響を与える書き方とHTML5の新機能に焦点を当てます。

○豆知識1：SEOに影響するHTMLの書き方

ウェブページの検索エンジン最適化（SEO）においてHTMLの書き方は非常に重要です。

検索エンジンは、コンテンツの構造や意味を理解するためにHTMLマークアップを使用します。

例えば、見出しタグ（<h1>、<h2>など）を適切に使用することで、ページの重要な部分を強調し、検索エンジンがページのトピックをより理解しやすくなります。

また、<meta>タグを使用してページの説明やキーワードを指定することも、検索エンジンによるページの評価に影響します。

○豆知識2：HTML5の新機能とその利用方法

HTML5は、以前のHTMLバージョンと比べて多くの新能を導入しています。

例えば、「<video>」や「<audio>」タグを使用することで、外部プラグインなしで直接ビデオやオーディオを埋め込むことが可能です。

また、「<canvas>」タグにより、JavaScriptを用いてグラフィックを描画できるようになりました。

これらの新しい要素を活用することで、よりリッチでインタラクティブなウェブ体験を提供することが可能になります。

まとめ

この記事では、HTMLを使ったお問い合わせフォームの作成から応用までを詳しく解説しました。

基本的な構造からデザインのカスタマイズ、自動返信メール機能の追加やデータベースとの連携方法に至るまで、初心者から上級者までが活用できる情報を紹介しました。

エンジニアとしてこれらの知識を身につけることで、より機能的でユーザーフレンドリーなウェブサイトを構築することが可能になります。