ホームページにおいて、企業・顧客間をつなぐコミュニケーションツールが「メールフォーム」です。これはHTMLというマークアップ言語を用いて作られますが、具体的な作成方法をイメージできない方も多いのではないでしょうか。
今回は、メールフォーム設置のメリットと注意すべきポイント、そしてHTMLを構成する要素「タグと属性」について解説します。メールフォームの作成手順も紹介しているので、ぜひ参考にしてみてください。
メールフォーム作成にはHTMLの知識が欠かせませんが、すぐにでもフォーム作成を行いたい場合は、知識不要で設置可能な「クライゼルのフォーム作成ツール」をご検討ください。
メールフォームをHTMLで制作する際の基本
ここではフォームの仕組みやメールフォームの構成など、フォームに関する基本的なことについて解説します。
フォームの仕組み
フォームとは、ユーザーが入力を行う定型化された記入欄のことで、紙の記入用紙のように、入力欄に内容を書き込んだり、選択肢から１つを選んだりするための操作項目が並んだ画面を指します。
なかでもメールフォームは、ユーザーが各項目の入力・送信を行うことにより、そのデータがネットワークを通じて、サーバーに送られる仕組みとなっています。送られた情報は、企業側がメール形式で受け取ることが可能です。
メールフォームをWebサイトに設置すれば、サイトを訪問したユーザーはフォームを通じて問い合わせを行えます。加えて、企業側は問い合わせメールの内容から顧客情報を入手できます。したがって、双方にとってメリットの大きいコミュニケーションツールといえるでしょう。
メールフォームの構成
メールフォームは通常、入力・確認・完了という3種類の画面で構成されます。
入力画面は、入力欄へメッセージを記入したり、選択項目から選択肢を選んだりするフォームです。ユーザー情報や、問い合わせ内容などを書き込むためのフォームとなります。
確認画面は、入力画面で書き込んだ内容が間違っていないかをユーザーが確認するためのフォームです。入力内容の確認・訂正・キャンセルを行ったのち、データを送信します。
完了画面は、確認画面で送信を行った後に自動で表示される画面です。メールが無事に送信されたことが顧客へと伝わるとともに、問い合わせの受付番号・入力内容・今後の手順などを画面上で表示できます。
PHPなどのプログラム言語の知識やサーバー知識も必要
上記の入力フォーム、確認画面、完了画面を動作させるには、PHPなどのプログラム言語の知識が必要になります。また、このプログラムを動作させるためのWebサーバー環境も必要となります。
メールフォームを設置するメリット
メールフォームの設置には、いくつかのメリットがあります。ここでは「問い合わせの手軽さ・入力内容の自動チェック機能・自動返信機能」の三つを紹介します。
気軽に問い合わせができる
メールフォームでは、あらかじめ入力項目が指定できるため、問い合わせがスムーズに行えます。各ユーザーと電子メールでやり取りをする場合、一度Webページを離れてメールソフトを起動しなければなりません。しかしメールフォームがあれば、ホームページからワンストップで送信まで行えるため、問い合わせのハードルを下げることもできるでしょう。
間違いの自動チェックができる
メールフォームでは、それぞれの入力項目に形式・文字数などを指定できます。そのため、数値を入れるべき箇所にテキストが入力されている場合や、アルファベットの大文字と小文字を間違えている場合など、入力内容のミスを自動認識できます。フォーム送信前にユーザーへ訂正・再入力を促せるため、入力のミスを格段に減らせるでしょう。
また、住所の検索がついたメールフォームであれば、郵便番号を入力するだけで住所を途中まで自動入力できます。これにより顧客の利便性が上がるだけでなく、入力ミスの防止にも役立つでしょう。
自動返信ができる
通常、メールの返信・対応には担当者が必要となり、不在の場合は何日も放置される可能性があります。
しかし、メールフォームの自動返信機能を利用することで、メールの送信完了や今後の流れを通知できます。
自動返信機能はユーザーに安心感を与えるだけでなく、企業側の確認・対応漏れを防ぐことにもつながるため、運営効率の向上を目指せるでしょう。
メールフォームを作成する際のポイント
メールフォームを作成する上でのポイントは、顧客視点からみて使いやすい機能を厳選することです。では、具体的な方法について詳しく解説します。
項目数は少なめに
入力項目や必須項目が多すぎると、途中で顧客が離脱するケースがあります。最低限度の項目数に絞ることで、最後まで入力してもらいやすくなるでしょう。ただし、必要な内容は業種や問い合わせ内容により異なるため、状況に応じて判断することが大切です。
入力例を記載する
入力例がないと顧客がどのように入力すればよいか迷ってしまい、その結果離脱してしまうケースがあります。記入例を用意して顧客のスムーズな入力を促すことで、回答へのハードルを下げることができるでしょう。
メールフォームの作成に必要なHTMLタグと属性
メールフォームは「HTMLタグとHTML属性」によって構成されています。ここからは、実際にメールフォームを作成するうえでの基本となる、タグと属性の特徴について説明します。
HTMLタグ
HTMLタグとは、文章に役割を持たせてWebページ上に表示させるためのものです。文章の先頭と末尾にそれぞれ<>で囲んだタグを設置することで、その効果を発揮します。
HTMLで用いられるタグの種類は100以上あるといわれています。そのなかでも、メールフォーム作成で用いられる主なタグの種類は以下のとおりです。
formタグ
formタグは、入力・送信フォームの全体を構成するための要素です。formタグがフォーム全体の外枠、そのほかのHTMLタグがフォームの内部を構成するパーツとなります。
labelタグ
labelタグは、フォーム内での選択肢に用いられるラジオボタン・チェックボックスなどの部品に項目名をつけるためのものです。
また、labelタグ内にあるfor属性とinputタグ内にあるid属性のテキストを一致させれば、項目名と部品が連動するようになります。これにより、項目名をクリックすると部品にも同様の操作が反映されるため、ユーザーはスムーズな項目選択ができるようになります。
inputタグ
inputタグとは、メールフォーム内にテキスト入力欄や部品を作成するためのものです。type属性やname属性を付け加えることで、部品の種類や項目名などを指定できます。
textareaタグ
inputタグで作成できる入力欄は1行なのに対して、textareaタグは複数行の入力が可能です。そのため、ユーザーが自由に文章を記載したい備考欄などに用いるのがよいでしょう。
buttonタグ
buttonタグは、送信ボタンや入力確認画面に進むためのボタンなど、さまざまな種類のボタンを作成できる要素です。ボタンはinputタグでも作成可能ですが、buttonタグのほうがカスタマイズ性に優れています。
HTML属性
HTML属性を使用すれば、タグに新たな情報を追加できます。
このHTML属性の設定により、HTML要素に特定の機能やスタイルを付加することができます。そのため、HTMLタグと属性はセットで理解しておく必要があります。
HTML属性のなかでも、とくにメールフォーム作成で用いられるのは以下の5種類です。
method属性
method属性はform要素で利用される属性で、入力内容の送信方法を指定するためのものです。
方法としては、ユーザーがファイルダウンロードなどデータを取得したい場合に用いる「get」と、入力したデータを送信する「post」の2種類があります。メールフォームの場合は後者にあたるため、postを指定しましょう。
type属性
inputタグにtype属性を追加することで、入力フォームの形式を細かく変更できます。メールフォームでよく用いられる、type属性で指定できる種類は以下のとおりです。
- text：1行のテキスト入力（属性を指定しない場合の初期値）
- number：半角数字のみ
- tel：電話番号（pattern属性とセットで用いることで指定可能）
- email：メールアドレス（@が含まれていないとエラー表示になる仕様）
- submit：送信ボタン（value属性内に入力したテキストがボタン名となる）
- radio：選択肢のうち、一つだけ選べるボタンを設置する
- checkbox：選択肢の中から、複数選べるボタンを設置する
name属性
name属性は、input 要素等の名前 を指定するための属性です。
フォームのデータが送信されるときには，この名前と入力データがセットになっており，サーバ側でどの要素のデータかを特定するために使われます。
for属性
labelタグとセットで用いられるのがfor属性で、二つのメリットを持ち合わせています。まず、labelタグの項目名とinputタグの入力内容が、視覚的かつ機能的に関連づけられることです。コードの構成がわかりやすくなるだけでなく、項目名と入力欄が連動することで、ユーザビリティの向上も実現できます。
もう一つは、入力欄が読み上げソフトに対応可能になることです。inputタグの入力欄にカーソルを合わせるとlabelタグの項目名を読み上げてくれるため、ユーザーをサポートする役割を果たします。
id属性
id属性は、要素に対しての固有の識別子を設定するための属性です。
id属性の値は文字通りユニークとする必要があるため、他の要素に設定されたid属性に同じ識別子を指定することはできません。
id属性を使用することで、JavaScriptやCSSなどのプログラミング言語からその要素を操作したり、スタイルを適用したりすることができます。
HTMLでメールフォームを作る方法
メールフォームを構成するタグ・属性について理解できれば、いよいよフォーム作成に移ります。以下のプロセスに沿って、段階的に行うことが大切です。
全体のレイアウト確認
本格的にフォーム作成へと移る前に、まずはサイト全体の構図を確認することが大切です。サイト内におけるフォームの位置や余白などが決まれば、はじめにサイト全体を指定するbodyタグとdivタグを設置しましょう。そのあとは、文字色やフォントなどWebページの細かなデザインを行うために「CSS」と呼ばれるスタイルシート言語を組み込みます。
今後のプロセスにおいても、HTMLでテキスト内容などフォームの構造部分を作ったあとで、細かなデザイン調整をCSSで行うことになります。
タイトル設置
サイト全体のデザインが決まったら、次にタイトル作成を行います。タイトルの位置・フォント・フォームとの余白などを決めたら、まずはHTMLで構造を記述します。そしてCSSで、先ほど決めた文字設定を反映させましょう。
フォーム設置
タイトルを設置したあとは、いよいよ本格的なフォーム作成に移ります。メールフォームを構成するおもな項目は「名前・性別・メールアドレス・電話番号・お問合せ項目・自由記入欄」の6つです。タグや属性を用いながら、ユーザーが使いやすいフォーム作成を心がけましょう。
送信ボタン設置
最後は、フォーム下に送信ボタンを設置して完了となります。buttonタグを使用する、もしくはinputタグのtype属性でsubmitを指定して作成できます。
CSS作成の際は「cursor: pointer」を記述することで、ユーザーがカーソルを合わせたときのマークが変わるため、視覚的にわかりやすい仕様となるでしょう。
HTMLを用いたメールフォームのサンプル
上記で紹介した手順に沿ってフォーム作成を行うと、以下のようなお問い合わせフォームが作成できます。作成時の参考にしてみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせフォーム</title> </head> <body> <div> <h1>お問い合わせ入力フォーム</h1> </div> <form action="confirm.php" method="post" name="form" onsubmit="return validate()"> <p>お問い合わせ内容をご入力の上、「確認画面へ」ボタンをクリックしてください。</p> <div> <label>お名前<span>必須</span></label> <input type="text" name="name" placeholder="例）山田太郎" value=""> </div> <div> <label>ふりがな<span>必須</span></label> <input type="text" name="furigana" placeholder="例）やまだたろう" value=""> </div> <div> <label>メールアドレス<span>必須</span></label> <input type="text" name="email" placeholder="例）guest@example.com" value=""> </div> <div> <label>電話番号<span>必須</span></label> <input type="text" name="tel" placeholder="例）0000000000" value=""> </div> <div> <label>性別<span>必須</span></label> <input type="radio" name="sex" value="男性" checked> 男性 <input type="radio" name="sex" value="女性"> 女性 </div> <div> <label>お問い合わせ種別<span>必須</span></label> <select name="item"> <option value="">お問い合わせ項目を選択してください</option> <option value="ご意見・ご感想">ご意見・ご感想</option> <option value="不具合について">不具合について</option> <option value="返信希望">返信希望</option> </select> </div> <div> <label>お問い合わせ内容<span>必須</span></label> <textarea name="content" rows="5" placeholder="お問合せ内容を入力"></textarea> </div> <button type="submit">確認画面へ</button> </form> </div> </body> </html>
PHPで確認画面・完了画面を設置するのも忘れずに
上記の手順を踏めば、メールフォームのHTMLは完成します。
しかし、情報をサーバーへ送信したり、担当者へメールを送信するにはPHPなどのサーバー側で動作するプログラムを使う必要があります。
PHPとは、ユーザーのアクセス時間・入力内容などの状況によって、表示内容が変わるWebページを作成できるプログラミング言語です。HTMLに組み込めるため、メールフォーム作成にも使用できます。
PHPを使ったメールフォーム作成方法は「この記事 」から確認できます。
HTMLよりも簡単にメールフォームを作成する方法は？
HTMLでメールフォームを作成するメリットは多くあります。しかし、一から作成するには手間がかかるうえ、セキュリティ対策も自身で行う必要があります。また顧客情報を適切に管理して企業運営につなげるには、外部サービスとの連携も重要です。これら一連のプロセスを自社で行うには、大きな負担がかかるでしょう。
そんなときにおすすめなのが「フォーム作成ツール」の活用です。HTMLやCSSの専門知識がなくても簡単にフォーム設置ができるほか、豊富なシステム連携機能も備わっています。フォーム作成にかかるコストを自社運営に充てることができ、効率性の向上も見込めるでしょう。
なかでもトライコーン株式会社が運営する「クライゼル」は、使いやすく豊富な機能・高品質なセキュリティ・丁寧なサポート体制が魅力のツールとなっています。メールフォームは自動生成とカスタマイズがしやすく、一回の契約でいくつでもフォーム設置可能です。また受け取った顧客情報を一括管理できるため、コスト削減にもつながるでしょう。
まとめ
今回は、HTMLでメールフォームを設置するメリットと作成方法について解説しました。メールフォームには、ユーザーにとっての手軽さや、企業側のコスト削減といった多くのメリットがあります。一方で作成時の注意点が多く、管理・運営のコスト面も懸念されます。
これらを解消する方法の一つとして、フォーム作成ツールの活用が挙げられます。メールフォームの作成をはじめ、経営・売上アップの効率化を図るための取り組みについて、今一度検討してみてはいかがでしょうか。
