Webフォーム作成の記事
ARTICLEメールフォームの作り方まとめ。プログラミングとサービス利用
メールフォームを作るには、専門的な知識が必要なプログラミングと、誰でも簡単に作れるフォーム作成サービスを使う方法があります。それぞれの特徴や作り方を解説していますので、どちらが自社に向いているか知り、メールフォーム作成の参考にしましょう。
メールフォームの基本
メールフォームの仕組みや構成など、基本的な知識について解説します。
フォームの仕組み
メールフォームは、ホームページなどに表示されているメッセージを送るためのツールです。メールフォームの指定箇所に、メッセージを入力したり、回答を選択したりして、送信ボタンをクリックします。
すると、入力した情報がインターネットのネットワークを通してサーバーに送られるのです。こうしてサーバーに届いた情報が、メールの形式に整えられて、指定のメールBOXへ届きます。
この情報は、プログラム次第で様々な利用の仕方が可能です。メールのレイアウトを使いやすく変更することはもちろん、注文メールの合計金額を計算したり、情報をデータベースに直接出力したりできます。
フォームの構成
メールフォームは通常、下記の3つの画面で構成されています。
- 入力フォーム
- 確認画面
- 完了画面
入力フォームは、チェックボックスで選択肢を選んだり、メッセージを入力したりする画面です。入力項目が多過ぎると、ユーザーが途中で入力をやめてしまうこともあります。そのため、できるだけシンプルで必要最低限の項目に抑えるのがいいでしょう。
確認画面は、入力した内容を確認するための画面です。送信前に入力内容を確認してもらうことで、間違いの訂正や、キャンセルができます。
完了画面は、送信ボタンのクリック後に表示される画面です。受付番号・今後の手続き・お礼のメッセージなどを表示します。関連商品のリンクを貼るなど、工夫次第で営業に活用することも可能です。
メールフォームとは？という基本から知りたい方は、「メールフォームとは何か。基礎知識から作り方までのまとめ」をご一読ください。
メールフォーム設置のメリット
メールフォームには、気軽な問い合わせ・間違いの自動チェック・自動返信ができる、といったメリットがあります。それぞれのメリットについて解説します。
気軽に問い合わせできる
メールフォームを利用すると、ユーザーから気軽に問い合わせしてもらえます。なぜなら、問い合わせに必要な手間を最小限に抑えられるからです。
メーラーを立ち上げずにメッセージを送れるので、メール作成の手間が省けます。また、チェックボックスで選択肢を選ぶだけで回答できるので、メッセージ入力の手間も省けるのです。
メールフォームの内容を工夫することで、問い合わせへのハードルをぐっと下げることもできます。より気軽に問い合わせしてもらうには、項目を最小限にする・選択肢による項目を冒頭に持ってくる、といった工夫をしましょう。
間違いを自動でチェック可能
メールフォームを利用すると、入力間違いの削減が可能です。例えば、住所のオートフィル機能がついているメールフォームなら、郵便番号を入力するだけで、住所が途中まで入力されます。そのため、住所の入力ミスが格段に減るのです。
入力ミスを指摘するメールフォームなら、正しく入力するまで送信できません。間違えやすい大文字・小文字の違いなども、機械的に指摘してくれるので、確実に入力してもらえます。
また、メールフォームは最後に確認画面を表示できます。送信前にユーザーに確認してもらうことで、入力間違いを訂正してもらうことが可能です。
自動返信ができる
自動返信ができるのもメールフォームのメリットです。通常のメールで返信する場合、担当者がいないと迅速な対応ができません。タイミングによっては、何日間も放置状態になってしまうこともあります。
自動返信ができれば、担当者がいなくても、メッセージを受け取ったことや今後の流れのアナウンスができるのです。スムーズな一次対応ができ、見込み客を逃しません。
メールフォームのメリットについては、「メールフォームは設置した方が良い？メリットや作成方法のまとめ」をご一読ください。
メールフォーム作成の基本ポイント
ユーザーに便利なメールフォーム作成のためには、面倒なことをできるだけ省きましょう。そのために意識すべきポイントを具体的に解説します。
項目数
まず意識すべきポイントは、項目数をできるだけ少なくすることです。必要最低限の項目に絞っておくことで、最後まで入力し送信してもらいやすくなります。
必要最低限の項目の種類は、サービスによって違うので、最適なものを選びましょう。例えば、下記があります。
- 希望するサービス
- 氏名（会社名）
- メールアドレス
- お問い合わせ内容
今後の営業を考え、電話番号や住所の入力も入れたいと考えるかもしれません。その場合、入力は任意にしておくのがベターです。必須項目を多く作り過ぎると、ユーザーが面倒に感じてしまう原因になります。
入力例
メールフォームには入力例も記載しておきましょう。入力例がない場合、ユーザーが入力の仕方で迷ってしまう可能性があります。すると、面倒になってしまい、入力してもらえなくなってしまうのです。
入力例があれば、迷わずに入力できます。回答へのハードルが下がるので、ユーザーの利便性が高まり、送信してもらいやすくなるのです。
問い合わせの種類
メールフォームの冒頭に、『お問い合わせの種類』という項目を作るのもポイントです。選択式の項目として作っておきましょう。
冒頭を選択式の項目にすることで、ユーザーに最後まで入力してもらいやすくなります。なぜなら、途中まで入力してしまうと、心理的な働きによって回答を途中でやめるのがもったいなく感じるからです。
また、それぞれのユーザーに適切な対応ができる、というのもメリットです。相談したいだけのか、利用を考えているのか、ユーザーの状態によって対応の仕方は変わります。それが最初に分かるので、適切な優先順位をつけることができ、成約率を高めることにつながるのです。
ユーザーの希望
ユーザーの手間を省く工夫として、『ご希望のサービス内容』という選択式の項目を作っておくのもいいでしょう。主なサービスを選択肢にしておけば、相談内容の入力を省略できます。
税理士のホームページに設置するメールフォームであれば、下記のような選択肢が考えられます。
- 税務顧問契約について
- 節税対策について
- 経営計画について
- よく分からない・迷っている
- その他
選択肢の内容は、提供しているサービスなどによって、適切なものに変えましょう。どんなサービスでも共通して入れるべき選択肢として『よく分からない・迷っている』『その他』は必ず設けます。
メールフォームの構成や作成方法については、「メールフォームの作り方テンプレート。基本構成や作り方の雛形まとめ」をご一読ください。
プログラミングでの作り方
メールフォームは知識さえあればプログラミングで作ることが可能です。プログラミングでメールフォームを作る方法について解説します。
HTMLでのフォーム作成
メールフォームを作るときには、HTMLというウェブページ作成のための言語を使います。下記の<form>タグを使用し、タグ内に各属性を配置して、メールフォームを作成するのです。
<form action="" method="">
//メールフォームの内容
</form>
action属性は、メールフォーム送信後のデータをどこに送信するか指定する役割を持っています。method属性は、メールフォームの送信方法を指定するタグです。送信方法は主に、個人情報を扱うときに使うpostとそれ以外で使うgetがあります。
『メールフォームの内容』には、下記の属性を配置します。
- label：メールフォームのラベルを設定
- input：入力フォームを生成
- button：送信ボタンなどボタンを生成
これで、基本のメールフォームが作成可能です。
PHPで確認画面や完了画面を
確認画面や完了画面は、PHPというWeb開発で使われる言語を使って作成します。HTMLで作成したメールフォームの入力後に遷移する確認画面と、送信ボタンをクリックした後の完了画面です。
名前・メールアドレス・問い合わせ内容を送信するメールフォームの場合、確認画面は下記のソースで作成できます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
<body>
<h2>問い合わせ内容</h2>
<form action="mailto.php" method="post">
<table border="1">
<tr>
<td>名前</td>
<td><?php echo $_POST["name"]; ?></td>
</tr>
<tr>
<td>メールアドレス</td>
<td><?php echo $_POST["mail"]; ?></td>
</tr>
<tr>
<td>問い合わせ内容</td>
<td><?php echo $_POST["inquiry"]; ?></td>
</tr>
</table>
<input type="submit" value="送信" />
</form>
</body>
</html>
また、完了画面のソースは下記の通りです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
<body>
<h2>メール送信完了</h2>
<p class="message">
お問い合わせありがとうございます。1営業日以内にご返信させていただきます。<br>
自動返信メールをお送りしておりますのでご確認ください。<br>
1時間たっても届かない場合はお手数ですがこちらからご連絡ください。
</p>
</body>
</html>
CGIでのメーラー起動も知っておこう
メールフォームはCGIとして動作しますので、CGIが動くサーバーを用意しておかなければいけません。CGIとはWebページの内容を動的に変化させる仕組みです。また同時に、サーバーにはsendmailをインストールしておきます。必要な環境はこれだけです。
メールフォームに入力された情報を、そのままメールに変換して送信するメールフォームCGIは、Perlなどの言語さえ知っていれば作るのは難しくありません。
ただし、プログラミング言語を知らない場合には、難易度は高くなります。そのため、フリーソフトやシェアウェアとして提供されているメールフォームCGIを利用するのも1つの方法です。
プログラムを書いてフォームを作成したい方は、「フォーム作成におけるPHPでの作成例とは。基礎知識からはじめよう」をご一読ください。
知っておきたいポイント
メールフォームを作るときに知っておくべき、HTML5のform要素強化・CSSによる装飾について解説します。
HTML5ではform要素が強化
メールフォームの作成では、<form>タグを使用します。HTML5では、<form>タグが強化されました。その結果、以前はJavaScriptで行っていた入力データの書式チェックなどが、HTML5のみでできるようになったのです。
また、input・textarea・selectなどの各要素を組み合わせることができます。組み合わせ方によって、メールフォームの入力形態を様々に変化させられるのです。
CSSでの装飾
メールフォームはユーザーが使いやすいようにCSSで装飾しましょう。HTMLのみで作る基本的なメールフォームでは、見にくく使いにくい部分があるからです。CSSを使うと、例えば下記の装飾ができます。
- 入力エリアを広げる
- フォーカスしたときの入力欄の色変更
- フォーカスしたときの入力欄の幅変更
- 送信ボタンを押しやすく大きくする
こうした装飾をすることで、ユーザーの操作のしやすさが向上します。結果、スムーズに入力してもらえるメールフォームができるのです。
HTMLについて知りたい方は、「フォーム作成で必要なHTMLの知識とは。基本や作成例を紹介」をご一読ください。
フォーム作成サービスの利用
HTMLやPHP・CSSといった言語を知らない場合、フォーム作成サービスを使ったメールフォームの作成が便利です。
フォーム作成サービスとは
フォーム作成サービスは、初心者でも素早く簡単にメールフォームを作れるサービスです。クラウドで利用するサービスなので、手軽に利用できるという魅力があります。Web言語に精通したプログラマーに外注しなくても、自社内で簡単にメールフォームの作成が可能です。
また、ホームページへの設置も手軽にできます。メールフォームのデータが保存されているサーバーのリンクを設置するだけです。
メールフォームの作成に時間がかからないので、必要なときに状況に合わせたメールフォームを作って設置できます。
フォーム作成サービスの機能
フォーム作成サービスを使うと、充実の機能で使いやすいメールフォームを簡単に作れます。メールフォームで使える主な機能は下記の通りです。
- マルチデバイスへの対応
- リアルタイム通知
- カスタマイズ
- レポート作成やデータのエクスポート
- 自動返信メール
- 他のサービスとの連携
レポート作成やデータのエクスポート・他のサービスとの連携機能を使いこなすことで、単にアンケートを集めるだけでなく、メールフォームで集まった情報を活用しやすくなります。
また、ユーザーに便利になる機能も満載です。例えば、マルチデバイスに対応していることで、パソコンでもスマホでも見やすく表示できます。
フォーム作成サービスのメリット
フォーム作成サービスを使ってメールフォームを作るメリットには、下記があります。
- 手間がかからない
- ユーザーの環境に限らず表示できる
- 工夫次第で様々な使い方が可能
フォーム作成サービスを使うと、ドラッグ＆ドロップでメールフォームが作れます。そのため、HTMLやCSSといったWeb言語を習得する手間がいらないのです。誰でも直感的な操作でメールフォームを作れます。
マルチデバイスに対応できるので、ユーザーの使用環境に限らず、正しく見やすくメールフォームを表示できるのもメリットの1つです。
工夫次第で様々な使い方ができるのもメリットといえます。セミナー申込や社内アンケート・申請フォーム・簡易日報など、社内外を問わず、便利なフォームを作成できるのです。
メールフォームサービスについては、「メールフォームサービスとは？特徴や機能の違いなどを紹介」をご一読ください。
Googleフォームでの作り方
Googleフォームは代表的なフォーム作成サービスです。Googleフォームの使い方について解説します。
Googleフォームとは
Googleフォームは、Googleドライブ上で使用する無料ツールです。Googleアカウントがあれば、誰でも利用できます。メールフォームを作るのに、専門知識は必要ありません。テンプレートがありますので、デザインも簡単に設定できます。
他にも、メールフォーム内に画像や動画を追加したり、質問をスキップする設定をしたり、自由自在にメールフォームが作れるのです。
作ったメールフォームは、ホームページに埋め込んだり、メールにリンクを貼りつけて送信したりできます。メールフォームで集めた回答は簡単にグラフに出力できるので、情報を瞬時に整理して活用可能です。
フォームの作り方
Googleフォームを使ったメールフォームの作り方を解説します。
| メールフォームの作り方の手順 | 詳細 |
|---|---|
| 1．Googleフォームを開く | Googleドライブにアクセス、新規→その他→Googleフォーム、の順でクリックすると、作成画面が表示されます。 |
| 2．タイトルと説明文を入力する | ・無題のフォーム：メールフォーム全体のタイトル ・フォームの説明：メールフォームについての説明文 |
| 3．質問の入力 | 質問欄に質問を入力。『＋ボタン』で質問欄を追加できます。 |
| 4．デザインを選択する | カラーパレットから色を選択すると、シンプルなカラーテーマを選べます。写真テンプレートを適用する場合には、写真アイコンをクリックしましょう。 |
| 5．全体の確認 | 『プレビュー』をクリックして、誤字脱字がないか・不要な項目はないかなど、全体を見直します。 |
| 6．メールフォームの設置 | 作成したメールフォームは、ホームページへ埋め込んだり、メールにリンクを貼ったりして設置します。 |
メールフォームの作成例
Googleフォームを使うと、メールフォームを自由自在に作れます。例えば、下記の表にある回答の仕方を選ぶことで、より使いやすいメールフォームにできるのです。
| 回答方法 | 向いている質問項目 |
|---|---|
| ラジオボタン | 1つの選択肢を選んで回答する質問 |
| プルダウンメニュー | 1つの選択肢を選ぶ質問のうち、選択肢が多い場合 |
| チェックボックス | 複数回答をするための回答方法 |
| 均等メモリ | 度合いをはかるときに使用する |
| 選択式（グリッド） | はい・いいえ・どちらでもない、のように、段階で評価するときに使う |
| 記述式 | 短い文章での回答方法 |
| 段落 | 長い文章で回答するときの方法 |
| 日付＆時刻 | 予約フォームとして使うときに便利 |
また、回答のスプレッドシートを利用すると、メールフォームが送信されたときの通知や自動返信メールを設定できます。
Google フォームについては、「フォーム作成はGoogleフォームが便利。メリットや使い方まとめ」をご一読ください。
まとめ
メールフォームを作るには、HTMLなどの言語を使ったプログラミングと、フォーム作成サービスを使う方法があります。プログラミングには専門知識が必要です。もっと手軽にメールフォームを作るなら、フォーム作成サービスが向いています。
フォーム作成サービスの機能を使いこなすことで、用途に合わせた様々なフォームを作れるのです。Googleフォームなど無料で使えるツールもあります。自社での利用にぴったりの方法でメールフォームを作りましょう。
また、簡単にフォーム作成をしていきたい方には、弊社のマルチデバイス対応のフォームが簡単操作で作成できる Webフォーム作成サービス「SPIRAL®」もおすすめです。問い合わせ・資料請求は無料ですので、まずはお気軽にお問い合わせください。
