HTMLでのメールフォームの作り方!HTMLタグからサンプルコードまで紹介

メールフォーム
メールフォーム

ホームページにおいて、企業・顧客間をつなぐコミュニケーションツールが「メールフォーム」です。これはHTMLというマークアップ言語を用いて作られますが、具体的な作成方法をイメージできない方も多いのではないでしょうか。

今回は、メールフォーム設置のメリットと注意すべきポイント、そしてHTMLを構成する要素「タグと属性」について解説します。メールフォームの作成手順も紹介しているので、ぜひ参考にしてみてください。

メールフォーム作成にはHTMLの知識が欠かせませんが、すぐにでもフォーム作成を行いたい場合は、知識不要で設置可能な「クライゼルのフォーム作成ツール」をご検討ください。

メールフォームをHTMLで制作する際の基本

ここではフォームの仕組みやメールフォームの構成など、フォームに関する基本的なことについて解説します。

フォームの仕組み

フォームとは、ユーザーが入力を行う定型化された記入欄のことで、紙の記入用紙のように、入力欄に内容を書き込んだり、選択肢から1つを選んだりするための操作項目が並んだ画面を指します。

なかでもメールフォームは、ユーザーが各項目の入力・送信を行うことにより、そのデータがネットワークを通じて、サーバーに送られる仕組みとなっています。送られた情報は、企業側がメール形式で受け取ることが可能です。

メールフォームを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でメールフォームを設置するメリットと作成方法について解説しました。メールフォームには、ユーザーにとっての手軽さや、企業側のコスト削減といった多くのメリットがあります。一方で作成時の注意点が多く、管理・運営のコスト面も懸念されます。

これらを解消する方法の一つとして、フォーム作成ツールの活用が挙げられます。メールフォームの作成をはじめ、経営・売上アップの効率化を図るための取り組みについて、今一度検討してみてはいかがでしょうか。

弊社の多彩な業務で使える高セキュリティなCRMプラットフォーム「クライゼル」のカタログは下記からダウンロードいただけます。機能・料金表の記載もありますので、ぜひご覧ください。
服部誠

トライコーン(株)取締役兼マーケティング統括。
Web広告、CRM、CDP、データ可視化などお客様のwebマーケティングの課題解決に長年従事。
Salesforce Marketing cloud メールスペシャリスト / アドミニストレータ / コンサルタントおよび、Salesforce アドミニストレータの各認定資格を保持。

服部誠をフォローする
トライコーンラボ
タイトルとURLをコピーしました