メールフォームの作り方と抑えるべき基本的なポイントについて解説

フォーム作成

多くの企業サイトにはメールフォームが設置されています。メールフォームを外注せずに自作しようとしている方は多いかもしれません。

この記事では、メールフォームの代表的な作り方について解説します。ユーザーが使いやすいメールフォームを作るうえでのポイントも解説しますので、企業のWebサイト担当の方はぜひ参考にしてください。

そもそもメールフォームとは?概要やメリットをおさらい

まずは、メールフォームの基本的な概要についておさらいしておきましょう。

メールフォームとは、ユーザーがWeb上にテキストを入力し、サイト運営者にメールを送信できる仕組みのことです。企業のオフィシャルホームページに設置されます。

メールフォームの代表的な用途

メールフォームは、Webサイトを訪問したユーザーからのメッセージを受け取る窓口として機能します。

企業のホームページには、一般的に以下のようなメールフォームが設置されます。

  • お問い合わせフォーム
  • 資料請求フォーム
  • イベント申し込みフォーム
  • アンケートフォーム
  • 会員登録フォーム
  • ログインフォーム
  • メルマガ登録フォーム
  • 予約登録フォーム

テキスト入力の必要がない場合は、メールフォームではない他の形式のフォームが採用されることがあります。チェックボックスやラジオボタンなどで回答を選択できる形式が一般的です。

メールフォームを設置するメリット

企業のホームページにメールフォームを設置することにはどういったメリットがあるのでしょうか。主に以下のようなものがあります。

  • ユーザーの問い合わせのハードルを下げられる
  • 自社のメールアドレスを公開せずに対応ができる
  • 問い合わせ対応を自動化できる
  • 外部ツールとの連携によりアクセス解析ができる

ユーザーの問い合わせのハードルを下げられる

第一のメリットとして、ユーザーの問い合わせハードルを下げられる点が挙げられます。企業には電話かメールで問い合わせするのが一般的です。

電話での問い合わせは直接担当者と会話できるメリットがある一方で、会話自体を苦手とするユーザーも少なくありません。また、担当者が不在であれば、再度かけなおしたり、折り返しを待つ必要があります。

メールでの問い合わせは、メールソフトを立ち上げ、メールアドレス、件名、本文といった復数の項目を入力しなければなりません。そのため、ユーザーには手間を強いることになります。こうした手間から、問い合わせをせずにホームページを離脱するユーザーも多くいます。

メールフォームは、メールでの問い合わせを大幅に効率化します。このことから、問い合わせ件数の増加が期待できます。

自社のメールアドレスを公開せずに対応ができる

自社のメールアドレスを公開する必要がない点もメリットのひとつです。メールアドレスをホームページ上で公開すると、botを利用した迷惑メールが大量に届くことがあります。また、不要な営業メールや売り込みメールが多く届くことも考えられます。

メールフォームであれば、こうしたリスクを軽減可能です。そのため、セキュリティ面でも優れているといえます。

問い合わせ対応を自動化できる

問い合わせ対応を自動化できる点も、メールフォームの設置による代表的なメリットです。

メールフォームを設置しておけば、365日24時間問い合わせ窓口として機能します。自社の営業時間中に電話で問い合わせできないユーザーもいるため、いつでも利用できる問い合わせ窓口を設けておくことは大切です。

また問い合わせしてユーザーに対して自動返信ができるため、人が手を使うことなく一次対応を完結できます。大量に問い合わせが来る場合も、効率的に対応可能です。

外部ツールとの連携によりアクセス解析ができる

Google Analyticsに代表される外部ツールとメールフォームを連携することで、アクセス解析が可能になります。分析を実施することで、問い合わせが多いページや、離脱しているポイント、といったWebサイトの改善に役立つ情報を取得できます。

分析結果をもとにサイト内の導線やメールフォームの項目を見直すことで、問い合わせ件数の増加が期待できるでしょう。

メールフォームの作成は外注するべき?自社でも可能?

自社のホームページにメールフォームを設置する場合、専門の事業者に外注すべきなのでしょうか。あるいは、自社で作成してコストを削減することは可能なのでしょうか。

メールフォームは比較的簡単なプログラムで構成されているため、自社でも問題なく作成できます。必ずしもメールフォームの作成を外注する必要はありません。

一方で、最低限のプログラミングを学ばなければならないため、自社にまったくノウハウがない場合は手間と時間がかかります。デザイン面でもこだわりたい場合は、さらにハードルが上がるでしょう。

セキュリティ上の注意点もあります。セキュリティ対策が十分に実施されていないメールフォームの場合、サイバー攻撃の被害にあってしまうかもしれません。専門的な知識がなければ、メールフォームのセキュリティ対策を実施することは困難です。

また、せっかくメールフォームを設置しても使ってもらえないケースがあります。問い合わせ件数を増やすためには、メールフォームを使いやすく設計しなければなりません。

このように、メールフォームの作成には意識しなければならないポイントがいくつかあります。単に作るだけであれば自社だけでも十分に可能ですが、運用面を考えると自社だけでは苦労することも考えられるでしょう。

メールフォームの作り方3選

自社でメールフォームを作る場合の代表的な方法を3つ解説します。

  • HTML・CSS・PHPなどでプログラミングする
  • WordPressのプラグインを利用する
  • フォーム作成ツールを利用する

HTML・CSS・PHPなどでプログラミングする

1つ目が、プログラミングで作成する方法です。一般的にはHTML/CSS、PHPが使用されます。

この方法のメリットとして、細かいカスタマイズが可能な点が挙げられます。レイアウトや装飾、入力形式などを任意に調整可能です。外観も自由に変更できるため、自社のホームページに合ったデザインのメールフォームを作成できます。

ただし、プログラミングに関する知識が必要になるため、希望どおりのメールフォームを作るのは簡単ではありません。ユーザビリティやデザインを意識するほど、作成のハードルが高くなります。また、メールフォームができるまでに時間がかかるため、すぐに導入したい場合は適していません。

WordPressのプラグインを利用する

WordPressでホームページを作成している場合は、専用のプラグインを利用することでメールフォームを導入できます。「Contact Form 7」や「MW WP Form」といったプラグインが代表例です。

コーディングなしで、手軽にメールフォームを導入できる点がメリットのひとつです。管理画面から簡単に設定ができるため、専門的な知識はほとんど必要がありません。また、プラグインによっては受信したデータのCSV出力、バックアップなど便利な機能を利用できます。

一方で、デザインなどをカスタマイズするためには各種言語の知識が必要です。また、セキュリティ対策のためには別途セキュリティ用のプラグインを導入する必要があります。プラグインを増やしすぎるとサイトのパフォーマンスが低下する可能性があるため、慎重に導入しなければなりません。

フォーム作成ツールを利用する

簡単な設定のみでメールフォームを作成できる専用ツールを利用する方法もあります。あらかじめメールフォーム用のテンプレートが用意されているため、作成に時間がかかりません。アクセス解析、情報管理、セキュリティなどの機能も充実しているため、メールフォームの運用面でも優れています。

メールフォームの基本的な構成

メールフォームを作るうえでの基礎的な知識として、メールフォームの構成要素について理解しておきましょう。メールフォームは主に「入力画面」「確認画面」「完了画面」という3つの要素で構成されています。以下では、それぞれの要素について解説します。

入力画面

入力画面は、ユーザーが入力する画面です。チェックボックスで選択肢を選んだり、メールの本文を入力したりすることができます。

主な入力内容

入力画面の主な入力内容として以下のようなものが挙げられます。

  • 氏名
  • 会社名
  • 住所
  • 電話番号
  • メールアドレス
  • 問い合わせの種類
  • 問い合わせ内容

メールフォームの入力をサポートする機能

メールフォームには、ユーザーの入力をサポートする機能を追加できます。以下のような機能が代表例です。

  • ラジオボタン
    項目を複数並べ、1つだけを選択してもらうボタン。
  • チェックボックス
    複数の項目から、複数を選択してもらうボタン。
  • セレクトボックス
    多くのリストのなかから1つだけを選択してもらうボタン。ラジオボタンと似ているが、選択肢が多い場合に使用される。

確認画面

確認画面は、ユーザーが入力した内容を確認するための画面です。メールのテキストや選択した内容に間違いがないか、送信前に確認できます。

完了画面

完了画面は、送信ボタンのクリック後に表示される画面です。問い合わせの受付番号やお礼、今後の手続きなどが表示されます。

メールフォームを作るうえでのポイント

問い合わせ件数を増やすためには、以下のようなポイントを意識してメールフォームを作る必要があります。

ユーザーにとって使いやすいメールフォームにする

メールフォームが使いにくい場合、設置しても問い合わせ件数の増加は期待できません。実際に使ってもらうメールフォームを目指すうえで、以下のようなポイントを意識しましょう。

入力項目を少なくする

入力項目を少なくすることは重要なポイントです。入力項目が多すぎると、ユーザーの負担につながります。

フォーム全体が長くなることも好ましくありません。目安として、全体が1画面に収まる長さが理想です。

また、「必須」などと記載し、必要な項目と任意で入力できる項目を分けましょう。任意項目はなるべく少なくして、フォーム全体をコンパクトにしてください。

エラー箇所・理由を明確に伝える

ユーザーに入力不備を伝える画面では、エラーの場所と内容を明確に伝えてください。

エラーのメッセージが分かりづらい場合、ユーザーはどのように修正すればいいのかわかりません。修正しても繰り返しエラーが表示される場合、メール送信にいたらず離脱してしまうことが考えられます。エラー箇所のそばに赤字でわかりやすく記載するといった配慮が必要です。

プライバシーポリシーを明示する

ユーザーが安心して個人情報を入力できるように、プライバシーポリシーを明記しましょう。プライバシーポリシーとは、個人情報保護に関する方針をまとめたものです。個人情報の取扱い方針や、保護するうえでの配慮についてまとめてあります。ユーザーに個人情報をクリーンに扱っていることをアピールするため、プライバシーポリシーをメールフォームで明示することは重要です。

各要素をわかりやすく配置する

テキストボックスやセレクトボックス、チェックボックスといった各要素をわかりやすく配置しましょう。見づらい配置になっている場合、ユーザーが入力内容や入力場所を間違ってしまう可能性があります。

入力ボックス同士を適度に離す、項目タイトルの欄と入力ボックスを色分けするなど、わかりやすくするための配慮が必要です。

ターゲットに合わせた言語で記載する

ターゲットに合わせた言語でメールフォームを作成しましょう。デザイン上、「title」「mail」といった営業表記は見た目が良く感じる場合がありますが、日本人のユーザーにとってはわかりづらくなってしまいます。ターゲットが日本人の場合は、日本語で記載してください。海外ユーザーに対しては、別途英語のメールフォームを用意しましょう。

スマホで使いやすいメールフォームにする

メールフォームをスマホで使いやすいように設計することも重要です。現在はスマホの普及率が高く、多くのユーザーがスマホでメールフォームにアクセスします。スマホでのユーザビリティを意識することで、問い合わせ件数の増加につながるでしょう。

スマホでの使いやすいメールフォームにするためのポイントを紹介します。

  • 入力項目を縦並びに配置する
  • 入力内容に応じて文字種類を自動で切り替える
  • 電話番号・郵便番号・姓名を分割しない
  • タップしやすいサイズ・間隔で各要素を配置する

入力項目を縦並びに配置する

スマホで表示されることを意識して、入力項目は基本的に縦並びに配置しましょう。横並びだと、スマホでは非常に見にくく、入力もしづらくなってしまいます。縦並びであれば、スクロールしていくことで見やすくなります。チェックボックスやラジオボタンの項目も同様に縦並びで配置しましょう。

入力内容に応じて文字種類を自動で切り替える

項目ごとの文字種類が自動で切り替わるように設定しておくと、スマホでのユーザビリティが高まります。例として、電話番号は半角数字、メールアドレスの場合は半角英数字など、自種類が自動で切り替わるように設定しておきましょう。スマホの場合、パソコンのようにすぐ文字種類の切り替えができないため、フォーム側で指定すると親切です。

電話番号・郵便番号・姓名を分割しない

電話番号・郵便番号の「-」で入力ボックスを分割したり、「姓」と「名」の入力ボックスを分割したりせず、ひとつのボックスで入力できるようにしておきましょう。スマホではタップする回数が増えるため、これらの項目を分割するとユーザーのストレスにつながります。分割が必要な場合は、取得後のデータを成形しましょう。

タップしやすいサイズ・間隔で各要素を配置する

スマホでの入力に合わせて、入力項目のサイズや間隔を調整しましょう。ピンポイントでクリックできるパソコンと異なり指でタップするスマホの場合、項目が小さかったり、間隔が狭かったりすると誤操作につながります。チェックボックスやラジオボタンを大きめにする、各要素の間隔を適度に空けるなど、スマホでも入力しやすいように配慮してください。

メールフォームを作るうえで重要なセキュリティ対策

メールフォームを作るうえで意識しなければならないことのひとつがセキュリティ対策です。メールフォームを狙うサイバー攻撃や発生し得るセキュリティリスク、具体的なセキュリティ対策について解説します。

メールフォームの脆弱性を狙うサイバー攻撃

メールフォームは以下のようなサイバー攻撃の対象になるケースがあります。

SQLインジェクション

データベースの言語であるSQLをメールフォーム経由で注入し、データベースを不正に操作するサイバー攻撃です。情報の漏えいや改ざんにつながります。

クロスサイトスクリプティング

フォームにリンクを設置し、ユーザーを悪意のあるスクリプトを含んだページに誘導するサイバー攻撃です。メールフォームにアクセスしたユーザーが被害にあってしまう可能性があります。

迷惑メール・スパムメール

botを利用して、迷惑メールが大量に届くケースがあります。悪意のあるURLを記載したメールを送る攻撃も一般的です。

メールフォームのセキュリティリスク

メールフォームにサイバー攻撃を受けると、以下のようなセキュリティリスクが起こり得ます。

不正アクセス

メールフォームのデータベースに不正にアクセスされるケースがあります。これにより、秘匿すべき情報を盗み見られてしまう可能性があります。

情報漏洩・情報改ざん

データベースに格納している情報を外部に持ち出されたり、改ざんされたりするリスクがあります。メールフォームのデータベースには多くの顧客情報が格納されているため、漏洩、改ざんが起きると企業の信用問題につながります。

データ消失

データベースに格納している情報が消失しているケースがあります。人為的なミスやサーバーのトラブルが主な原因です。

メールフォームに必要なセキュリティ対策

メールフォームには一般的に以下のようなセキュリティ対策が実施されます。

データのSSL化

SSL化とは、通信データを暗号化する技術のひとつです。第三者による盗聴や改ざんを防ぐため、メールフォームで取得した情報はデータベースに格納する前に暗号化することが求められます。

アクセス制限

フォーム作成サービスやWordPressを利用している場合は、管理画面のアクセスを制限することが大切です。編集可能なユーザーと閲覧のみ可能なユーザーを分けるなど、権限を適切に管理しましょう。

キャプチャ認証

キャプチャ認証を導入することで、botによる迷惑メールの被害を防止できます。キャプチャ認証とは、メールフォームからの送信時に画像に描かれた文字や数字の入力を求める認証方式です。botには画像の判別ができないため、迷惑メールを防ぐことにつながります。

必須項目の設置

メールフォームに必須項目を設けることも有効なスパムメール対策です。必須項目があると、botが簡単にメールフォームを利用できなくなります。

WAFの導入

WAFは「Web Application Firewall」の略であり、メールフォームをはじめとしたWebアプリケーションをサイバー攻撃から守るためのセキュリティ対策です。外部からの攻撃を検知し、メールフォームの脆弱性を無害化します。

IDS/IPSの利用

IDS/IPSは、ネットワーク上の不正を検知・防止するシステムです。メールフォームの脆弱性をついた攻撃や、負荷をかける攻撃を防止するのに役立ちます。

データのバックアップ

万が一の消失に備え、メールフォームで取得したデータは定期的にバックアップをとっておきましょう。フォーム作成サービスを利用する場合は、バックアップに対応しているか調べておくことも大切です。

メールフォームを作成してみよう

メールフォーム作成を外注せずに内製化することは十分に可能です。ただし、セキュリティ面など、気を付けなければならないことも少なくありません。また、ユーザビリティが低いフォームだと、設置しても利用してもらえないことがあります。

フォーム作成に特化したツールであれば、デザイン性にすぐれるテンプレートや必要な機能がパッケージされているほか、セキュリティ面についても考えられているため便利です。

formrunは誰でも簡単にスタイリッシュなメールフォームを作成可能なフォーム作成ツールです。24時間365日のサーバー監視、SSL化などセキュリティ対策も充実しています。自社のホームページにメールフォームを設置したい場合は、ぜひご利用をご検討ください。

https://form.run/