Webフォーム作成の記事
ARTICLEメールフォームの作り方テンプレート。基本構成や作り方の雛形まとめ
メールフォームはユーザーとの窓口です。使いやすいメールフォームを設置することが、企業への信頼感につながる要素の1つと言っても良いでしょう。この記事では効果的なメールフォームの作り方や、テンプレートについて解説していきます。
目次
メールフォームの基本的な構成やテンプレート
まずは、メールフォームを設置する場合に、どのような画面構成が必要なのかを見ていきましょう。一般的なメールフォームは、『入力フォーム』『確認ページ』『完了ページ』の3段階が基本構成となっています。
どのような役割を持っているのか、それぞれ見ていきましょう。
入力フォーム
入力フォームは、ホームページを訪問したユーザーがそのまま見る画面です。問い合わせやサービス登録のための個人情報などの入力を、そこから行うことになります。
入力フォームにも、選択形式やチェックボックス、または項目に入力必須の属性がついたものなど様々です。
デザインにもこだわって、など訪問者が使いやすいフォームを目指しましょう。
確認ページ
確認ページはその名の通り、入力した内容が正しいかどうかを確認するためのページです。
入力ページからいきなり送信されると、入力ミスに気づかずそのまま送信してしまうケースが増えてしまい、受信者にとっても送信者にとっても手間になります。
そこで、送信前に確認を挟むことで、送信者が間違えに気づきやすくなるのです。買い物などのフォームであれば、確認画面からおすすめの商品ページにつなげたりと営業的なケアもできます。
完了ページ
完了ページは、フォームでの送信が完了したことを通知するための画面です。送信のお礼や、今後の手続きの流れなどを表示して、フォームの次のステップへ送信者を誘導する役割を持たせることもできます。
また、他のサービスや商品画面へリンクさせて、PRを行うことも可能です。
セミナーのアンケート項目サンプル。最低限設けておきたい質問とは
押さえておきたいポイント
フォームを作成する際に、デザイン・機能面で押さえておきたいポイントについて解説します。利用者にとって使いやすいフォームにして、利用率をあげましょう。
最適化
メールフォームは、アンケートとは違って、主な用途はサービスに対する疑問や意見、個人情報の入力です。できれば最低限の手間で済ませたいと思っている人が大半ではないでしょうか。項目数が多いとユーザーが離脱する可能性もあります。
そのため、メールフォームを作成する側としても、質問項目は最低限に、そして選択式の回答方法などを多用して、『利用者側の手間が最低限になるフォーム』を作成しましょう。
質問文についてもわかりやすく短い文章の方が喜ばれます。
希望の明確化
問い合わせフォームでは、訪問者に対して何について問い合わせて欲しいか明確にした方が良いでしょう。
例えば「○○というサービスについてさらに知りたい方はこちらのフォームからお願いします」などと前文で記載されていれば、送信者から対応外の質問が寄せられるケースは減少することが見込めます。
項目の1つ目で、何についての問い合わせなのかを選択肢にして、そこから選んでもらうという方法も有効です。
スマホ対応
スマートフォンの普及率は若い世代を中心にどんどん上昇しています。PCを持たずに携帯端末だけを持っているというユーザー層も、Webサイトを訪れる人の中に一定数いるでしょう。
PC用のメールフォームをスマートフォンで表示すると画面がかなり見にくく、プッシュもしにくいため、問い合わせ途中で諦めてしまう人が多くなってしまいます。
そのため、メールフォームを作るならスマートフォンへの対応を考慮したデザインの方が利用率があがるでしょう。
レスポンシブデザインのポイント
レスポンシブデザインとは、どんな画面のサイズで閲覧しても見やすく、使いやすくすることをコンセプトとしたデザインの手法です。
PC画面の大きな画面でもスマホの小さい画面でも、どちらからでも使いやすいデザインのポイントを見ていきましょう。
横幅
横幅は狭い方が望ましいでしょう。左右の余白を大きくとることで、狭い画面にも対応しやすくなります。
入力フォームの項目は縦に並べるケースが多いため、その場合に縦スライドのみの操作にさせることでユーザビリティを向上させることができるでしょう。
このデザインは横幅が狭まってもレイアウトを変化させる必要がなく、行程もシンプルで楽なのが特徴です。上記で説明したように、フォーム画面はなるべくシンプルな方が良いという点にもつながります。
カラム
カラムとは、簡単に言えば列のことです。例えばブログなどでは、プロフィールやカレンダーが並んだ縦列と本文の縦列で2行の場合は2カラムとなります。
スマートフォンなどの小さな画面では、2カラムでの表示は見づらく、操作性も良くありません。
そのため、メールフォームのカラム数を1カラムにして、画面が狭くなった時には入力欄が縦方向に伸びるようなレイアウトにすると、スマホユーザーでも使いやすくなるでしょう。
スマートフォンやiPhoneのような狭い画面だけカラム数を落とすという方法もあります。入力項目が多い場合などでは複数カラムの方が対応しやすいケースも多いでしょう。
いずれの場合にも、質問文や補足の文字数を多くしすぎると、スマホで表示する際にごちゃごちゃしてしまう可能性があるので、シンプル性を心がけた方がよさそうです。
オファー
オファーはメリットやサービスの特徴を、フォームの上部に記載することを指します。
例えば、ホテルの予約フォームではホテルの内装とサービスについても同時に見られるようになっているものもあるでしょう。この内装とサービスの記述が、オファーと呼ばれるものです。
オファーはデバイスのサイズによって表示位置を変えるなどの工夫をすることも大切になります。
例えばホテルの予約フォームなどでは、PC版では2カラム、スマホで表示すると1カラムで表示する場合、ホテルの内装の写真を2カラム表示ではフォームの横、1カラムでは真上に表示するといった見やすくするための工夫です。
デバイスによってオファーがより利用者の心をくすぐるように、デザインを配慮していきましょう。
プログラミングでの基本的な作成方法
ホームページにフォームを設置する方法はいくつかありますが、自分で作成するにはプログラミングを行う必要があります。
様々なプログラミング言語がありますので、それぞれでどういった機能や役割を担えるかを見ていきましょう。
HTMLでのフォーム作成
HTMLはWebサイトを作成するプログラミング言語です。サイト内の文字の装飾やデザイン、レイアウトやリンクなど様々なことが行えます。
比較的簡単なプログラミング言語で、初心者にも扱いやすいのが特徴です。HTMLでフォームを作る際には、以下のような書き方をします。
<form action=”” =””>
//フォームの中身
</form>
formから/formの間が、フォームの中身であることを表します。
actionは、フォームの送信後に、入力したデータをどこに送信するかという送信先を指定するタグで、確認画面に飛ばすのが一般的でしょう。
methodは、送信するときの転送方法で、getとpostの2種類があります。
PHPでの確認画面や完了画面作成
PHPも、HTML同様にWebサイトを作成するためのプログラミング言語で、HTMLとの併用のしやすさや難易度の低さから、使われることが多い言語です。
PHPは、主にカウンター機能などの付属物の作成などに使用されます。
フォーム画面では、先ほどHTMLで指定したactionタグから、PHP形式で作成した確認画面、完了画面へと情報を送信しユーザーを移動させるために使うことができるでしょう。
入力フォームをHTMLで作成し、そこから先はPHP形式のファイルを使用すると簡単にフォームを作れます。
CSSでの装飾
CSSは、ウェブページのスタイルを指定するための言語です。HTMLで作成する文書スタイル、WebページのレイアウトはCSSを利用するのが一般的と言えます。
CSSでは、Webページを表示する際の色やレイアウト、プリンタで出力した際の出力スタイルなど、Webページ上の表示・出力といった指定をすることができるでしょう。
フォーム作成においても非常に効果的で、例えば現在入力しているフォームの文字の色を変える、入力欄の縦横幅を伸ばすといったデザインが実現可能です。
Bootstrapでの作成
BootstapとはCSSのフレームワーク（アプリケーションの土台として活用するためのソフトウェア）です。
Webページでよく利用されるフォームやボタン、メニューといった部品がテンプレートとして用意されているのがBootstapの特徴です。
そのため、Bootstapをダウンロードしてからフォームの雛形のHTML形式のファイルを利用すれば、簡単にフォームに手を加えて作成できます。
Bootstapが登場する前は、PC向けとスマホ向けの2つのフォームを用意しなければなりませんでしたが、Bootstapは1つで済むというレスポンシブデザインにも優れていて、利用者はかなり多いようです。
フォーム作成サービスでの作成方法
プログラミングでフォームを作成するには、当然ですがプログラミングの知識が必要です。初心者が短期間で便利なものを作成するのは難しく、導入しようと思っても勉強からはじめなければなりません。
そこで、初心者がWebサイトにフォームを設置する場合は、フォーム作成サイトがよく使われます。どういったものなのか見ていきましょう。
フォーム作成サービスの機能やメリット
フォーム作成サービスを利用する1番のメリットは、プログラミングの知識が不要ということです。フォーム作成ではフォームのテンプレートがあらかじめあるものが多く、豊富な機能も揃えております。
プログラミング言語を用いた場合、複雑な処理が必要なものも、作成サービスを利用することで簡単に作れるでしょう。
クラウド型のサービスであれば、フォームによって寄せられた問い合わせなどのデータをオンライン上で管理できるため、複数の人間のよる迅速な対応が可能というメリットもあります。
Googleフォームでの作成例
Googleが提供している『Googleフォーム』というフォーム作成サービスは無料で利用でき、他では有料になってしまうような様々な機能を利用できます。
主な特徴として挙げられるのは、その回答形式の多さです。複数の選択肢から1つを選ぶラジオボタン式、複数の回答を選ぶチェックボックス式や均等メモリ式など、多彩な回答形式が用意されています。
また、回答の欲しい質問には必須項目にチェックを入れることでその質問に答えなければ次に進めないようにしたり、動画や画像を質問に挿入したりすることも可能です。
Googleフォームの使い方を学ぼう。メリットや使い方の例を紹介
メールフォームは設置した方が良い？メリットや作成方法のまとめ
サンキューページも作ろう
フォームから送信をしてくれた利用者に対して、サンキューページを作ってみてはいかがでしょうか？利用者の満足度を上げるためのポイントやその他の効果についても開設します。
サンキューページの表示
問い合わせや登録のための事務的な手続きというのは、入力する手間がかかりストレスがかかってしまうものです。
そこで、終わった後に登録に対するお礼のページを表示することで、サイト運営者側からの感謝と、達成感を提供することができます。
送信完了画面で同時に表示されることが多く、送信者に対して受付が完了したという確認も兼ねた場合が多いようです。
コンバーション計測
サンキューページにコンバーションタグを設置して、コンバーションを計測することが可能です。
例えば、商品購入のお礼画面にコンバーションタグを設置することで、訪問した人の中で何%の人がその商品を購入しているのかが簡単に計測できるようになります。
コンバーションの動きから、Webサイトの改善点についても見えてくるでしょう。
通知メール
サンキューページを表示する際に、内容がフォーム送信者・サイト運営者の両方にメールとして届くように設定しておくのが望ましいでしょう。
申し込み完了画面は基本的に、事前の確認画面の内容が必要になるため、履歴などから直接行こうとしても表示されません。
商品やサービスを購入した場合の内容の確認や、サービス登録した際のパスワードやIDをメールで確認できるようにしておいた方が親切です。
また、運営側に送ることによって、その後の対応やデータ処理が迅速に進むという面もあります。
セキュリティについて押さえておこう
メールフォームの活用において、セキュリティ対策は大きな課題です。メールフォームはサイト訪問者であれば誰でも利用できる点、そして入力内容がオンラインで送受信されるという点から、第三者の悪意に晒されやすいのです。
そこで、データを第三者に簡単に盗み見られないようにするための暗号化について、解説していきます。
SSLとは
SSLとは、簡単に言えばWebサイト上でやりとりをされるデータを暗号化することです。
かつては銀行などの金融機関で主に使用されていたのですが、最近ではインターネットの普及に伴って、民間企業や個人事業者による利用も増えています。
サイト全体を暗号化することを常時SSL化と呼び、これはセキュリティ対策としてはより高度なものと言えるでしょう。
常時SSL化を行うと、サイトのURLの冒頭が『http』から『https』に変化します。そのため、訪問者に対して「このサイトは安全ですよ」というアピールにもなり、安心感にもつながるのです。
暗号化の仕組み
クライアント側（フォーム側）からSSL化のリクエストが行われると、サーバー側から『公開鍵』が送られます。
それを元に、今度はクライアント側から『共通鍵』がサーバー側におくられ、これによって利用者が個人情報やデータをサーバー側に送った際に暗号化され、そのデータを鍵によってサーバー側は暗号を解読し、データを読み取るという仕組みです。
この仕組みの場合は、運営側のサーバーが一時的なデータ保管庫として活用され、さらに他のサーバーにデータを預ける場合は、その間のやりとりが暗号化されていないようなケースも考えられます。
そのためファイアウォールなど、暗号化とは別の対策も施策しておくことが重要です。
まとめ
メールフォームは基本的には入力項目は最低限シンプルな方が好まれます。ただし、そのためにはサイト運営側は入力中の文字の色を変えたり、スマホとPCの両方で使えるデザインを確立したりと様々な工夫をこらさなければなりません。
機能をつけるためにはプログラミングの知識が必要ですが、最近ではフォーム作成サービスを利用することで、プログラミング知識のない人でもWebサイトにフォームが導入できるようになっているのでおすすめです。
ユーザーの意見をよりWebサイトに反映させるためにも、手軽で使いやすいフォームの設置が求められています。
また、簡単にフォーム作成をしていきたい方には、弊社のマルチデバイス対応のフォームが簡単操作で作成できる Webフォーム作成サービス「SPIRAL®」もおすすめです。問い合わせ・資料請求は無料ですので、まずはお気軽にお問い合わせください。
