html お 問い合わせ フォーム

HTML お問い合わせフォームの作成方法

要約

このガイドでは、HTMLを使用して効果的なお問い合わせフォームを作成する方法について説明します。簡単なステップに従って、ユーザーが情報を送信できるフォームの構築が可能です。

問い合わせフォームは、ウェブサイト訪問者と企業をつなぐ重要な架け橋です。しかし、HTMLやCSSの知識が必要となるため、作成を面倒に感じる方もいるかもしれません。

この記事では、HTMLの知識がなくてもコピペで簡単に実装できる、シンプルでおしゃれな問い合わせフォームの作り方をご紹介します。さらに、デザイン性の高いフォームをノーコードで作成できるサービス「formrun」についても解説します。

1. シンプルな問い合わせフォームのHTML

まずは、基本となるシンプルな問い合わせフォームのHTMLコードを見ていきましょう。HTMLの基本構造を理解することで、カスタマイズもしやすくなります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>お問い合わせフォーム</title>
</head>
<body>
  <h1>お問い合わせ</h1>
  <form action="#" method="post">
    <label for="name">お名前：</label><br>
    <input type="text" id="name" name="name" required><br><br>

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

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

    <input type="submit" value="送信">
  </form>
</body>
</html>

コード解説

  • <form>タグ：フォームの開始と終了を示します。

    • action属性：フォーム送信先のURLを指定します。

    • method属性：データの送信方法を指定します（"post"または"get"）。

  • <label>タグ：入力欄のラベルを表示します。

    • for属性：対応する入力欄のid属性と一致させます。

  • <input>タグ：テキスト入力欄、メールアドレス入力欄などを設置します。

    • type属性：入力欄の種類を指定します。

    • id属性：入力欄に一意のIDを付与します。

    • name属性：データ送信時に使用する名前を指定します。

    • required属性：入力必須項目にします。

  • <textarea>タグ：複数行のテキスト入力欄を設置します。

    • rows属性：表示する行数を指定します。

  • <input type="submit">タグ：送信ボタンを設置します。

2. おしゃれな問い合わせフォームのHTMLとCSS

シンプルなフォームに加えて、CSSでスタイルを適用した、よりおしゃれな問い合わせフォームの例を3つご紹介します。

2-1. シンプル×英語表記の問い合わせフォーム

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <style>
    body {
      font-family: sans-serif;
    }
    form {
      width: 500px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input[type="text"],
    input[type="email"],
    textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }
    input[type="submit"] {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>Contact Us</h2>
  <form action="#" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <input type="submit" value="Send">
  </form>
</body>
</html>

2-2. 黒地がおしゃれな問い合わせフォーム

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>お問い合わせ</title>
  <style>
    body {
      background-color: #333;
      color: #fff;
      font-family: sans-serif;
    }
    form {
      width: 500px;
      margin: 0 auto;
      padding: 20px;
      background-color: #444;
      border-radius: 5px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      color: #ddd;
    }
    input[type="text"],
    input[type="email"],
    textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #555;
      background-color: #222;
      color: #fff;
      border-radius: 3px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }
    input[type="submit"] {
      background-color: #008CBA;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>お問い合わせ</h2>
  <form action="#" 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" rows="5" required></textarea>

    <input type="submit" value="送信">
  </form>
</body>
</html>

2-3. 視覚効果がおしゃれな問い合わせフォーム

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>お問い合わせ</title>
  <style>
    body {
      font-family: sans-serif;
    }
    form {
      width: 500px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input[type="text"],
    input[type="email"],
    textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-sizing: border-box;
      margin-bottom: 10px;
      transition: background-color 0.3s ease;
    }
    input[type="text"]:focus,
    input[type="email"]:focus,
    textarea:focus {
      background-color: #f5f5f5;
    }
    input[type="submit"] {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>お問い合わせ</h2>
  <form action="#" 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" rows="5" required></textarea>

    <input type="submit" value="送信">
  </form>
</body>
</html>

3. 問い合わせフォームに必要な要素

問い合わせフォームは、いくつかのHTML要素を組み合わせて作成します。主な要素は以下の通りです。

  • テキストエリア: 複数行のテキストを入力できるエリア。問い合わせ内容など、長文を入力する場合に使用します。

  • テキストフィールド: 1行のテキストを入力できるフィールド。氏名やメールアドレスなど、短文を入力する場合に使用します。

  • チェックボックス: 複数の項目から選択できるチェックボックス。質問に対して複数の回答を選択できるようにする場合に使用します。

  • ラジオボタン: 複数の項目から1つだけ選択できるボタン。質問に対して1つの回答だけを選択できるようにする場合に使用します。

  • セレクトボックス: ドロップダウンリストから1つの項目を選択できるボックス。都道府県や商品の種類など、複数の選択肢から1つを選ばせる場合に使用します。

  • 送信ボタン: 入力した内容を送信するためのボタン。フォームに入力された情報をサーバーに送信します。

4. HTMLで問い合わせフォームを作るために必要なタグ

HTMLで問い合わせフォームを作成するには、特定のタグを使用する必要があります。

  • <form>タグ: フォームの開始と終了を示すタグ。action属性で送信先のURLを、method属性で送信方法を指定します。

  • <input>タグ: テキストフィールド、チェックボックス、ラジオボタンなど、様々な種類の入力フィールドを作成するタグ。type属性で入力フィールドの種類を指定します。

  • <label>タグ: 入力フィールドにラベルを付けるタグ。for属性に入力フィールドのid属性と同じ値を指定することで、ラベルと入力フィールドを関連付けます。

  • <textarea>タグ: テキストエリアを作成するタグ。rows属性とcols属性で行数と列数を指定します。

  • <select>タグ: セレクトボックスを作成するタグ。

  • <option>タグ: セレクトボックスの選択肢を作成するタグ。

  • <button>タグ: ボタンを作成するタグ。type属性をsubmitにすることで、送信ボタンとして機能します。

5. HTMLで問い合わせフォームを作成する手順

具体的なHTMLでの問い合わせフォーム作成手順は以下の通りです。

  1. 全体レイアウトを決める: フォームのサイズ、配置などを決めます。

  2. 見出しを作る: フォームの見出しを作成します。

  3. フォームを設置する: <form>タグを使ってフォームの範囲を指定します。

  4. 入力フィールドを作成する: 必要な入力フィールドを<input>タグ、<textarea>タグ、<select>タグなどを使って作成します。

  5. 送信ボタンを設置する: <button>タグを使って送信ボタンを作成します。

6. HTMLで問い合わせフォームを作成するサンプルコード

以下は、氏名、メールアドレス、問い合わせ内容を入力できる簡単な問い合わせフォームのサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせフォーム</title>
</head>
<body>
  <h1>お問い合わせ</h1>
  <form action="#" method="post">
    <label for="name">氏名：</label><br>
    <input type="text" id="name" name="name" required><br><br>

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

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

    <button type="submit">送信</button>
  </form>
</body>
</html>

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

ウェブサイトに問い合わせフォームを設置することには、ユーザーと企業の双方にとって多くのメリットがあります。

  • ユーザー側のメリット:

    • 24時間いつでも問い合わせることができる。

    • 電話やメールよりも簡単に問い合わせることができる。

    • 問い合わせ内容が相手に確実に伝わる。

  • 企業側のメリット:

    • 顧客とのコミュニケーションを円滑化できる。

    • 顧客のニーズや要望を把握できる。

    • 業務を効率化できる。

    • 迷惑メール対策になる。

8. 問い合わせフォーム作成時の注意点

ユーザーにとって使いやすい問い合わせフォームを作成するために、以下の点に注意しましょう。

  • 入力項目は必要最低限にする: 入力項目が多すぎると、ユーザーは入力する気をなくしてしまいます。

  • 入力例を表示する: 入力例を表示することで、ユーザーが迷わずに入力できるようにしましょう。

  • エラーメッセージを表示する: 入力内容に誤りがあった場合、わかりやすいエラーメッセージを表示しましょう。

  • 入力確認画面を設ける: 入力内容を確認してから送信できるように、入力確認画面を設けることをおすすめします。

9. まとめ

この記事では、HTMLを使った問い合わせフォームの作成方法について解説しました。HTMLの基本的な知識があれば、誰でも簡単に問い合わせフォームを作成できます。

詳しいテクニックや実装例については、以下の参考文献を参照してください：

よくある質問

Q1: お問い合わせフォームを設置するためにどのような技術が必要ですか？

A1: 基本的なHTMLの知識と、サーバーサイドプログラミング（PHPなど）が必要です。

Q2: フォームからのデータはどのように管理できますか？

A2: フォーム送信後、バックエンドでデータを保存するデータベース（MySQL等）や、サービス（Google Sheetsなど）を利用することが一般的です。

Q3: フォームのデザインを向上させるためのヒントはありますか？

A3: シンプルなレイアウト、明確なラベル、ユーザーが容易に入力できるようなデザインを心がけましょう。また、モバイルフレンドリーなデザインも重要です。