問い合わせが増えるメールフォームのデザインとは？作成方法とおすすめツール

問い合わせ用のメールフォームには、ユーザー目線に立ったデザイン性が必要です。

しかし、ユーザー目線に立ったフォーム作りは困難です。自社の都合に合わせた項目を設置し過ぎるとお問い合わせにつながりにくいため、悩んでしまいます。

そこで本記事では、お問い合わせを増やすために必要なメールフォームデザインについて解説します。

入力されやすいメールフォームデザインとは？6つのポイント
問い合わせが増えるメールフォームをデザインするコツ10選
メールフォームのデザインに使える基本のプログラミング方法
面倒なことはおまかせ！メールフォームがデザインできるおすすめツール3選
手間をかけずにユーザー目線のメールフォームをデザインしよう！

入力されやすいメールフォームデザインとは？6つのポイント

メールフォームの項目をユーザーに入力してもらえるデザインのポイントは以下のとおりです。

ポイント①入力項目は必要最低限にする

入力項目が多いフォームは、ユーザーに億劫さや面倒さを与え、離脱を招きます。

必要最低限の項目数（3〜4つ程度）に抑えることで、最後まで入力してもらえる確率が高まります。

ポイント②入力しやすい視認性

文字や入力欄が小さかったりデザインでフォーム内が見にくい場合は、最低限のテキストサイズに合わせるなどの対策が必要です。

ポイント③自動入力機能を使う

住所入力などに自動入力補助機能を実装すれば、手間を感じやすい入力作業を削減できます。

ユーザーの面倒に感じる項目をサポートすることで、最後まで入力をしてもらえる可能性が高まります。

ポイント④エラー表示はわかりやすく

エラー表示がわかりにくいと、エラーの原因がわからず離脱してしまう傾向があります。

入力不備がある箇所を明示するなどの工夫で、離脱を少しでも減らしましょう。
ユーザーが入力した内容を、エラー表示後も残しておけるデザインにすると、再入力の手間を省けるのでおすすめです。

ポイント⑤送信ボタンはハッキリと表示

送信ボタンの色と背景は違う色にする・ボタンは大きく設定するなど、どこに何があるのか、はっきり伝わるフォームデザインであることが重要です。

ボタンはユーザーのフォーム入力を完了させるキッカケです。作成時は、わかりやすく必ず押してもらえるデザインかを意識してください。

ポイント⑥スマホ対応

BtoC・BtoBのどちらでもスマートフォン対応のデザインが必須です。

特にBtoCでは、スマートフォンで情報収集や契約・購入を完結させる場合が多いため、入力しやすく操作性に優れたデザインの実装が欠かせません。

メールフォームでは、ユーザーが入力しやすいと感じられるデザインを徹底的に意識してください。

メールフォームに訪問したユーザーがどこで離脱をして、どこに不自由さを感じているのかを把握できる体制を整えましょう。

問い合わせが増えるメールフォームをデザインするコツ10選

問い合わせが増えるメールフォームデザインのコツ10選は、以下のとおりです。

入力するボックスは最低限に
住所は郵便番号から自動入力
入力しやすいキーボード変換
必須項目は分かりやすく
例文や項目ラベルは入力ラベルの外へ
エラーメッセージはその場で分かるように
送信ボタンはハッキリと
プライバシーポリシーを入れる
サンクスページを設定
スマートフォン対応

それぞれのコツについて、詳しく解説します。

1:入力するボックスは最低限に

入力項目のボックスを最低限におさえると、ユーザーの入力作業を減らせ、最後まで入力をしてもらえる可能性が高まります。

企業側の都合で質問項目を増やし過ぎてしまうケースが多いため、作成時は注意が必要です。
このフォームで入力してもらう必要がある項目か、を確認しながら項目を設置しましょう。

2:住所は郵便番号から自動入力

住所の入力項目には、自動入力のサポート機能の実装をしてください。
郵便番号が入力されたら、該当する都道府県から市町村名までを自動で表示する機能です。

住所の入力を手間に感じるユーザーは多い傾向です。効率的なデザイン・設計を施すことで、お問い合わせフォームの入力者増加を狙えます。

3:入力しやすいキーボード変換

スマートフォンによるフォーム入力では、キーボードを「かな表記」から「英字表記」や「数字表記」など、複数種に切り替える必要があります。

スマートフォンのキーボード変換を意識した入力サポートができると、他競合よりも離脱されにくいメールフォームの作成が可能です。

例えば、スマートフォンでわざわざ小文字や大文字に変更しながら、フォームを入力するのは手間です。煩わしさから離脱される可能性があります。

特に、BtoC事業はスマートフォンからの問い合わせが多いため、注意が必要です。

4:必須項目は分かりやすく

入力必須項目が分かりにくいと、入力漏れが発生してフォーム送信後のエラー表示につながります。

エラー表示は、ユーザーが離脱する原因になりかねません。入力必須項目は分かりやすく表示させる必要があります。
必須項目のエラーを防ぐために、記入例を表示したデザインにするなどの対策がおすすめです。

5:例文や項目ラベルは入力ラベルの外へ

入力サポートの役割がある入力例文などは、可能な限り入力ラベルの外に設置しましょう。

入力欄に記載されていると、情報を入力した際、入力ラベル内の例文が見えません。
どのように入力例を確認できず、入力した情報を削除して、例文を確認。改めて内容を入力する手間につながります。

余計な工程を踏ませないように、例文は常に見える位置に設置してください。

6:エラーメッセージはその場で分かるように

エラーメッセージの出現は、ユーザーにとって大きなストレスです。
ストレスを減らすために、エラーの発生場所と修正の仕方を明示するデザインが必要です。

フォーム送信後にエラーが発生する仕組みの場合は、エラーが発生している項目以外の入力情報を残しておく設定にしておくと、再入力の手間を最低限に抑えられます。

離脱率をおさえる施策として役立ちます。

7:送信ボタンはハッキリと

送信ボタンは誰が見ても明確に、「送信ボタンである」と認識できるデザインにしてください。

送信ボタンが分かりづらいフォームは、質の高い入力項目を作成していても成果が出にくい傾向です。
最後まで入力してくれたユーザーをコンバージョンさせられないのは、大きな損失です。

色や大きさを工夫して、送信ボタンと一目でわかるデザインにしましょう。

8:プライバシーポリシーを入れる

プライバシーポリシーは、ユーザーに対して安心してフォーム送信できるように必要な要素です。

プライバシーポリシーがないと、個人情報の扱いについて不安を覚えるユーザーもいます。
不安が原因で離脱するユーザーを減らせるよう、プライバシーポリシーの設置してください。

9:サンクスページを設定

サンクスページを設定すると、ユーザーに対してフォーム送信が完了した旨を伝えられます。

サンクスページがないと、フォーム送信ができているか分かりにくく不安に思うユーザーがいます。
ユーザーファーストなページを目指すために設置しておくべきページです。

サンクスページを計測ページとしてコンバージョンタグを設定しておけば、フォームを送信したユーザー数の把握ができます。

10:スマートフォン対応

BtoCとBtoBの両方で、スマートフォンからメールを送るユーザー向けの対応が必要です。

BtoCの方がスマホ活用される印書がありますが、BtoB事業でも担当者がスマートフォンでフォームに訪問する可能性があります。

スマートフォン対応はBtoCとBtoBどちらも必須であると認識しておきましょう。

メールフォームのデザインに使える基本のプログラミング方法

メールフォームを作る手順は、HTMLでメールフォームを作成してCSSで装飾するデザインです。

以下では、それぞれのプログラミングの方法について解説します。

HTMLで作成

HTMLでメールフォームを作成するサンプルコードは以下のとおりです。
※氏名・住所・メールアドレスを取得する場合

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプルメールフォーム</title>
  </head>
  <body>
    <h1>お問い合わせフォーム</h1>
    <form action="submit_form.php" method="post">
      <label for="name">氏名：</label>
      <input type="text" id="name" name="name" required><br>
      <label for="address">住所：</label>
      <input type="text" id="address" name="address" required><br>
      <label for="email">メールアドレス：</label>
      <input type="email" id="email" name="email" required><br>
      <input type="submit" value="入力情報を送信する">
    </form>
  </body>
</html>

formタグを使用してメールフォームを作成しています。

以下、各コードタグの解説です。

form action：フォームデータの送信先URLを指定
method：データ送信時のHTTPメソッドを指定
（post：新しいリソース情報を送信・get：リソース情報を取得）
label for：項目名を指定
required：必須項目を指定
input type：フォーム項目で入力された要素を作成
input type=”submit”：送信ボタンを作成

サンクスページのHTMLコードは以下のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>お問い合わせありがとうございました</title>
  </head>
  <body>
    <h1>お問い合わせありがとうございました</h1>
    <p>お問い合わせ内容を受け付けました。追ってご連絡いたします。</p>
  </body>
</html>

上記のサンプルコードを自社用に編集して、メールフォームを作成してみましょう。

CSSでの装飾する

メールフォームをCSSでデザイン装飾する際のサンプルコードを解説します。

CSSで記述する内容は、以下の4つです。

必須項目は赤字で表記
エラー表示は赤字で表記
テキストサイズを20ptで揃える
送信ボタンの背景色は青色、テキストの色は白色で指定

以上の内容を踏まえたCSSのサンプルコードは以下のとおりです。
※CSSファイルに記述する形式で記載しています。

/* 必須項目を赤字で表示 */
input:required {
  color: red;
}

/* エラー表示を赤字で表示 */
input:invalid {
  color: red;
}

/* テキストサイズを20ptで揃える */
input[type="text"], input[type="email"] {
  font-size: 20pt;
}

/* 送信ボタンの背景色を青色、テキストの色を白色で指定 */
input[type="submit"] {
  background-color: blue;
  color: white;
}

HTMLの内容と紐づけるために、HTMLには必ず「 <link rel=“stylesheet” href=“style.css”>」を<title>タグ直下に記述してください。