【コピペで使える】お問い合わせフォームのテンプレートとカスタマイズ方法

お問い合わせフォームは顧客との重要なコミュニケーション手段のため、最後まで入力してもらえるようなユーザーが使いやすいデザインを心がけなければなりません。
本記事では、カスタマイズのしやすい基本構造のテンプレートからデザイン迷った方に向けてそのままコピペして使えるテンプレートをご紹介します。

はじめてフォームを作成する方でもこれを読めば、自分でお問い合わせフォームを作成できるようになります。最後にHTML不要で作成するサービスも紹介しますので、ぜひ参考にしてください。

▼ フロントエンド開発だけでフォームが使える！formrunの活用がおすすめ
formrunでフォームを作成すると、開発が面倒な回答データの管理やメール送信などの豊富なバックエンド機能とセキュリティ対策の開発が不要になるため時間とコストを削減することができます。フォームも豊富なテンプレートから用途に応じたものを選び、テキストを入力するだけで簡単に作成することができます。ぜひご活用ください。

formrunについて詳しく見る

お問い合わせフォームの基本的な構造
HTML/CSSのカスタマイズ方法
おしゃれなお問い合わせフォームのテンプレート例
申し込み率を上げる！バリデーション機能の設定方法
スマホ対応のレスポンシブデザインの設定方法
HTMLをアップロードする際の注意点
【上級編】お問い合わせフォームの最適化
お問い合わせフォームの最適化はformrunがおすすめ
まとめ

お問い合わせフォームの基本的な構造

お問い合わせフォームは、ユーザーからの質問やフィードバックを受け取るための重要な手段です。基本的なお問い合わせフォームは、以下の要素で構成されます。

フォームタグ：フォームの開始と終了を示すタグです。<form>タグで囲みます。
入力フィールド：ユーザーが情報を入力するためのフィールドです。例えば、名前、メールアドレス、メッセージなどの入力フィールドがあります。
送信ボタン：ユーザーが入力した情報を送信するためのボタンです。

基本的なテンプレート（HTML）

こちらのHTMLをもとにデザインや必要な機能の設定していきましょう。

<form action="/submit_form" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">メッセージ:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="送信">
</form>

HTML/CSSのカスタマイズ方法

次に、フォームのデザインをカスタマイズして、より魅力的なものにする方法紹介します。

基本的なCSSの追加

CSSを使用して、フォームの見た目を改善します。以下のコードを参考にHTMLファイルの<head>タグ内に追加してください。お好みのカラーコードやフォントに変更することで、サイトに合ったデザインに修正することができます。

各スタイル設定の詳細はコメントで説明しています。

<style>
body {
font-family: Arial, sans-serif; /* 全体のフォントを設定 */
background-color: #f2f2f2; /* 背景色を設定 */
padding: 20px; /* ページ全体のパディングを設定 */
}
form {
background-color: #fff; /* フォームの背景色を設定 */
padding: 20px; /* フォームの内側の余白を設定 */
border-radius: 5px; /* 角を丸める */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影を追加して立体感を出す */
}
label {
display: block; /* ラベルをブロック表示にすることで、次の要素と分ける */
margin-top: 10px; /* 上に余白を追加 */
}
input[type="text"], input[type="email"], textarea {
width: 100%; /* 入力フィールドの幅を100%に設定 */
padding: 10px; /* 入力フィールドの内側の余白を設定 */
margin: 5px 0; /* 入力フィールドの上下に余白を設定 */
border: 1px solid #ccc; /* 入力フィールドの枠線を設定 */
border-radius: 5px; /* 入力フィールドの角を丸める */
}
input[type="submit"] {
background-color: #4CAF50; /* 送信ボタンの背景色を設定 */
color: white; /* 送信ボタンの文字色を設定 */
padding: 10px 20px; /* 送信ボタンの内側の余白を設定 */
border: none; /* 送信ボタンの枠線をなしに設定 */
border-radius: 5px; /* 送信ボタンの角を丸める */
cursor: pointer; /* カーソルをポインターに設定 */
}
</style>

おしゃれなお問い合わせフォームのテンプレート例

フィームのデザインは、企業の第一印象に大きく影響します。そのため、ユーザーが快適に入力できるデザインを意識することが大切です。

ここでは、デザインにこだわったフォームのテンプレートを紹介します。

例1：シンプルで直感的なテンプレート

See the Pen contact form by Tim (@TimQuincey) on CodePen.

形状が真四角なフォームは無機質な印象を与えがちです。
真四角の角を丸くすることで優しい雰囲気のお問い合わせフォームができあがります。

例2：必須項目が明確化されたテンプレート

See the Pen お問い合わせFormコピペ by Yuya (@yuyaphotograph) on CodePen.

入力必須項目のアイコンにあえて緑を使った事例です。

必須項目は、ほとんどのお問い合わせフォームでは赤や黄色といった警告色を使っています。警告色はユーザーに焦燥感を与えてしまいかねません。

色彩心理学で「癒し」や「安心」といった意味合いがある緑をあえて利用することで焦燥感に駆られることなく、入力完了まで誘導できます。

他にもデザイン性の高いフォームのテンプレートは、以下の記事でご紹介しています。合わせてご覧ください。
>> 問い合わせフォームのデザイン9選！コピペで使えるhtmlとCSSを紹介

申し込み率を上げる！バリデーション機能の設定方法

バリデーション機能を追加することで、ユーザーが正しい情報を入力しやすくなります。
顧客管理をしやすくするために設定を行うことをオススメします。

バリデーション機能には以下のような種類があります。

主なバリデーション機能

必須フィールド：入力が必須であることを確認します。
メールアドレス形式：メールアドレスの形式が正しいかどうかを確認します。
文字数制限：入力されたテキストの長さを制限します。

これらのバリデーション機能の基本的なJavaScriptの例を掲載します。

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせフォーム</title>
<style>
/* ここにCSSスタイルを追加 */
</style>
<script>
function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let message = document.getElementById("message").value;

// 必須フィールドのバリデーション
if (name === "" || email === "" || message === "") {
alert("すべてのフィールドを入力してください。");
return false;
}

// メールアドレス形式のバリデーション
let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
alert("正しいメールアドレスを入力してください。");
return false;
}

// メッセージの文字数制限バリデーション
if (message.length > 500) {
alert("メッセージは500文字以内で入力してください。");
return false;
}

return true;
}
</script>
</head>
<body>
<form action="/submit_form" method="post" onsubmit="return validateForm()">
<h2>お問い合わせフォーム</h2>
<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="4" required></textarea>
<input type="submit" value="送信">
</form>
</body>
</html>

簡単にバリデーション機能を設定したい場合、EFOツールがおすすめです。
おすすめのEFOツールについては、以下の記事でご紹介しています。合わせてご覧ください。
>> EFOとは？入力フォーム最適化の重要性や効果的な施策、おすすめツールを詳しく解説

スマホ対応のレスポンシブデザインの設定方法

現代では、多くのユーザーがスマートフォンからアクセスします。モバイル対応のレスポンシブデザインを設定することで、お問い合わせフォームがスマートフォンやタブレットなどの異なるデバイスで適切に表示されるようにします。

メディアクエリによるレスポンシブ設定

メディアクエリを使用して、特定のデバイスサイズに応じたスタイルを設定します。
以下の例では、幅600px以下のデバイスに対するスタイルを定義しています。

メディアクエリによるレスポンシブデザインのCSSは、HTMLファイルの<head>タグ内にある<style>タグの中に追加します。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お問い合わせフォーム</title>
    <style>
          /* ここにCSSスタイルを追加 */
       }
        /* メディアクエリでスマホ対応のスタイルを設定 */
        @media (max-width: 600px) {
            form {
                padding: 15px;
                width: 90%;
            }
            input[type="text"], input[type="email"], textarea {
                padding: 8px;
            }
            input[type="submit"] {
                padding: 10px;
            }
        }
    </style>
    <script>
             /* ここにバリデーション設定を追加 */
    </script>
</head>
<body>
    <form action="/submit_form" method="post" onsubmit="return validateForm()">
        <h2>お問い合わせフォーム</h2>
        <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="4" required></textarea>
        <input type="submit" value="送信">
    </form>
</body>
</html>

HTMLをアップロードする際の注意点

初めてHTMLをアップロードする方のために、注意点を紹介します。
初心者の方でもこれらのポイントを押さえることで、安全かつ効率的にウェブサイトを運営することができます。

1. ファイル名と拡張子

ファイル名は半角英数字とハイフン（-）やアンダースコア（_）のみを使用し、スペースや特殊文字は避けましょう。ファイルの拡張子が.htmlであることを確認してください。

2. 文字エンコーディング

HTMLファイルの文字エンコーディングはUTF-8を使用することが推奨されます。これにより、多くの文字セットが正しく表示されます。

HTMLファイルの<head>セクションに以下のメタタグを含めてください。

<meta charset="UTF-8">

3. サーバーへの接続情報

サーバーへの接続には、必ずセキュアなFTP（SFTP）やFTPSを使用してください。これにより、データの転送が暗号化され、セキュリティが向上します。ホスティングサービスから提供されたFTPアカウント情報（ホスト名、ユーザー名、パスワード、ポート番号）を使用して接続します。

4. ディレクトリの場所

HTMLファイルはサーバーの公開ディレクトリ（例: public_html、www）にアップロードしてください。これにより、ウェブブラウザからアクセス可能になります。

ディレクトリの階層構造を把握し、必要なファイルを正しい場所に配置することが重要です。

5. ファイルの権限設定

アップロードしたファイルの権限を確認し、適切に設定します。一般的には、HTMLファイルの権限は644（所有者が読み書き、その他は読み取りのみ）に設定します。FTPクライアントを使用してファイルの権限を設定できます。

6. バックアップの作成

HTMLファイルやその他の関連ファイルを編集する前に、必ずバックアップを取っておきましょう。これにより、万が一のトラブル時にも元の状態に戻すことができます。

ホスティングサービスが提供するバックアップ機能を利用することも有効です。

7. SSL/TLSの設定

ウェブサイトがHTTPSで提供されていることを確認してください。SSL/TLS証明書をインストールし、ウェブサイトの通信を暗号化することで、データの安全性を確保できます。

ホスティングサービスが無料のSSL証明書を提供している場合、それを利用するのも良いでしょう。

8. テストとデバッグ

本番環境にアップロードする前に、ローカル環境やテスト環境でファイルの動作を確認してください。これにより、不具合を事前に発見し、修正することができます。

また、ウェブブラウザのデベロッパーツールを使用して、HTML、CSS、JavaScriptのエラーや警告をチェックしましょう。

9. 一貫性のある命名規則

ファイル名、フォルダ名、クラス名、ID名などは、一貫した命名規則に従うようにしましょう。これにより、コードの可読性と保守性が向上します。

10. ドキュメントの整合性

HTML文書の整合性を確認するために、W3Cのバリデーションツールを使用して、文法エラーや警告をチェックしましょう。これにより、クロスブラウザ互換性が向上し、ウェブページの表示や動作が安定します。

以上の注意点を守ることで、HTMLファイルのアップロードがスムーズに行え、セキュリティやパフォーマンスも向上します。

▼ とにかく早く簡単にフォームを作成したいならformrunがおすすめ
formrunは、専門的な知識なしにビジュアル豊かなフォームを作成できるツールです。豊富なテンプレートから用途に応じたものを選び、テキストを入力するだけで簡単にフォームを編集・設置できます。無料でも利用できるのでまずは試しにフォームを作成してみてください。

formrunについて詳しく見る