コピペで簡単！HTMLを使ったメールフォームの作り方

メールフォームは、Webサイトのページに直接テキストを入力して、メッセージを送信できるページです。

わざわざメーラーを立ち上げる必要がなく、あらかじめ決められた項目に入力するだけなので、ユーザーの入力の手間を大幅に省けます。

メールフォームはHTMLやCSSといったコードを使用して作成できます。
しかし、「HTMLでメールフォームを作りたいけど、時間がかかりそう」「難しそうだけど、初心者でも作れるの？」とお悩みではないでしょうか？

今回は、HTMLを使ったメールフォームの作り方を紹介します。

▼ HTML・CSSで自由にフォームを作成したい場合、formrun をご検討ください！
回答データの管理やメール送信など豊富なバックエンド機能とセキュリティ対策であなたのフォーム環境構築をサポートします。

▼ formrunでは、ノーコードでメールフォームを作成することが可能です。
メールアドレスがあれば無料登録可能で、無期限で無料プランが利用できるのでformrunでぜひフォームを作成してみてください。
>> formrunでフォームを作成する

▼ formrunのテンプレートはそのまま利用できるリッチな見た目で、用途に合わせて必要な設問が最適な順番で配置されているため、 設問タイトルを少し修正するだけで簡単に高クオリティのフォームを作成できます。気になる方はこちら。
>> formrunテンプレート

HTMLを使ったメールフォームの作り方

HTMLのメールフォームは、主に次のようなタグを使用して作成します。

• form
• input
• textarea
• select
• submit

ここでは、それぞれのタグにどのような役割があるのかを解説します。

form

メールフォームは「form」タグを使って作ります。

入力欄やチェックボックスなど、メールフォームを構成する項目を<form></form>で囲むことで、申し込みや資料請求に必要なデータの送信が可能です。

input

「input」タグは、氏名など改行なしの短い文章を入力する入力欄の作成が可能です。「input=”〇〇”」で入力する内容を指定します。

例えば、数字専用フィールドなら「input=”number”」、メールアドレス入力フィールドなら「input=”e-mail”」など、要素を指定してフォーム内のさまざまな項目を作成します。

textarea

「textare」タグは、改行なしの文章を入力できるinputタグに対し、複数行のテキストが入力できる入力欄を作成するタグです。

rows属性とcols属性を<textare></textare>で囲うことで、入力欄の高さや幅の指定が可能です。

select

「select」タグは、セレクトボックスを作成できます。

セレクトボックスをクリックすると複数の選択肢がプルダウンで表示され、その中から1つだけ選択が可能です。
選択肢は<option></option>を用いて作成し、全体をselectタブで囲みます。

submit

inputタブの中に「submit」を指定すると、入力データを指定した送信先へ送る「送信ボタン」を作成できます。

「input type=”submit” value=”送信」というように、value属性に「送信」という値を入れると、ボタンに「送信」と表示させることが可能です。

CSSでメールフォームの見た目を調整する

CSSを使えば、テキストの表示位置・フォントサイズ・テキストフィールドの横幅・背景色など、さまざまな要素の装飾ができます。

代表的なCSSは、次の通りです。

• width：幅
• height：高さ
• padding：余白
• color：文字色
• font-size：文字サイズ

CSSで入力フィールドのサイズを調整したり、ボタンを押しやすいサイズにしたりすると、ユーザーが見やすく入力しやすいメールフォームを作成できます。

メールフォームのユーザビリティは、コンバージョンに影響する重要な要素です。見やすさと分かりやすさを重視したデザインにしましょう。

HTMLのメールフォームの構成

メールフォームは、次の3つから構成されています。

• 入力フォーム画面
• 確認画面
• 完了画面

入力フォーム画面では、ユーザーの氏名（会社名）やメールアドレス、問い合わせ内容などを入力します。
ユーザーがストレスを感じて、途中で入力を中断してしまわないように、入力項目は必要最低限に留めましょう。

確認画面は、入力した内容に間違いがないか、ユーザーに確認してもらうために必要です。
もし入力した内容に間違いがあれば、この画面で訂正してもらいます。

完了画面は、メールが無事に送信完了したことをユーザーに伝える画面です。
完了画面を実装すると、ユーザーに安心感を与えられる効果があります。

確認画面と完了画面はPHPで作る

HTMLで作成できるのは、メールフォーム画面のみです。

フォーム画面から遷移する確認画面や、送信ボタンを押した後に表示させる完了画面は、PHPというプログラミング用語を用いる必要があります。

▼ formrunを使えば、作成したフォームにカスタムURLを組み込むだけで複雑なバックエンドは構築不要です。
データの管理やメール送信・セキュリティ対策はformrunにお任せください。

▼ formrunでは、ノーコードでメールフォームを作成することが可能です。
メールアドレスがあれば無料登録可能で、無期限で無料プランが利用できるのでformrunでぜひフォームを作成してみてください。
>> formrunでフォームを作成する

HTMLで作ったフォームからメールを送信する方法

HTMLで作成しただけのメールフォームから、データは送信できません。
ユーザーが入力したデータを送信するためには、PHPやCGIといったプログラミング用語を使用しなければなりません。

具体的には、送信先を指定する「action」や、送信方法を指定する「method」などの属性を用います。

例えば<form action=”/〇〇.html” method=”POST”>のような書き方をした場合、action属性が「〇〇.html」に指定され、入力されたデータを「〇〇.html」に送信することが可能です。

メールフォームは個人情報を扱うため、methodはかならず「POST」を指定しなくてはなりません。

PHPやCGIを用いたメールフォームプログラムは、無料で配布されています。
「メールフォーム　PHP」、「メールフォーム　CGI」などで検索をかけ、使い勝手が良さそうなものを利用しましょう。

コピペで簡単！HTML/CSSで作れるメールフォーム3選

コピペで簡単に実装できる、メールフォームデザインを3つご紹介します。

シンプルなフォームデザインを集めましたので、CSSで自由に装飾してください。
今回ご紹介するフォームデザインはすべて、Codepenより引用しています。

例1　シンプルなメールフォーム

  See the Pen   メールフォーム（bootstrap5） by Mika (@designer_mika)   on CodePen.

例2　プルダウ付きメールフォーム

  See the Pen   Untitled by MAKOTO ISHII (@mktishiiiii)   on CodePen.

例3　入力例付き問い合わせフォーム

  See the Pen   お問い合わせFormコピペ by Yuya (@yuyaphotograph)   on CodePen.

▼ formrunなら作成したフォームにカスタムURLを組み込むだけで、作成したフォームはそのままに豊富なバックエンド機能が利用できます

▼ formrunでは、ノーコードでメールフォームを作成することが可能です。
メールアドレスがあれば無料登録可能で、無期限で無料プランが利用できるのでformrunでぜひフォームを作成してみてください。
>> formrunでフォームを作成する

メールフォーム作成ツールおすすめ3選

HTMLでメールフォームを作成するには、タグや属性の種類など覚えることが非常に多く、知識習得には時間がかかります。

「HTMLでメールフォームを自作するのは難しそう」「すぐにメールフォームを作りたい」という方は、メールフォーム作成に特化したツールを利用しましょう。

以下より、無料使用できるメールフォーム作成ツールを3つご紹介します。

フォームで顧客管理をするなら「formrun（フォームラン）」

formrunではノーコードで40種類以上のテンプレートから簡単にフォーム作成ができる「クリエイターフォーム」と、お客様がHTMLやCSSで作成したフォームでそのままデータ管理ができる「コード型フォーム」の2種類のフォームを提供しています。

データ管理やメール送信など豊富な機能で効率よく顧客管理を行いたい場合、ぜひformrunをお試しください。
>> ノーコードでフォーム作成可能！クリエイターフォームを試してみる
>> コード型フォームを試してみる

顧客データを自動でまとめてくれる「Googleフォーム」

Googleフォームは、Google提供のフォーム作成ツールです。Googleアカウントがあれば、誰でも簡単かつスピーディにメールフォームを作れます。

レスポンシブデザインを採用しているため、スマートフォンやタブレット端末でも、フォーム作成から集計まで完結できる点が魅力です。

スプレッドシートと連携すれば、フォームから取得したユーザー情報は、自動的に集計・管理できます。

メールフォームを無制限で作れる「EasyMail（イージーメール）」

EasyMailは、PHPでメールフォームを作りたい人におすすめのフォーム作成ツールです。

WordPressのように、自社サーバー上に設置することで利用でき、一度インストールすれば無制限でメールフォームを作成できます。

メールフォームに特化したツールのため、入力補助機能やよく使われる項目は、初期状態でも豊富に揃っています。
フォームから取得した情報はCSVでダウンロードでき、Excelでの管理が可能です。

HTMLを使ったメールフォームを活用しよう

本記事では、HTMLを使ったメールフォームの作り方や、コピペで実装できるメールフォームをご紹介しました。
HTMLを使ったメールフォームは、主に次のようなタグで作ります。

• form
• input
• textarea
• select
• submit

これらのタグで、メールフォームを構成する項目を作成し、CSSを使用してデザインや装飾など見た目を整えます。

メールフォームは「入力フォーム画面」「確認画面」「完了画面」で構成されており、HTMLで作成できるのは「入力フォーム画面」のみです。その他の画面は、PHPを使用して作成する必要があります。

コーディングの知識がない、もしくはメールフォーム作成に割くリソースがない場合は、フォーム作成ツールを活用するのがおすすめです。

弊社が提供する「formrun」は最短30秒でデザイン性の高いフォームを作成でき、自動返信メール設定や顧客管理まで完結します。
DMMやBASEなど大手企業でも導入されており、企業のサービスや世界観に合った最適なメールフォームを作成可能です。

メールフォーム作成ツールの導入をご検討中の方は、ぜひformrunを無料でご利用ください。

▼ formrunでは、ノーコードでメールフォームを作成することが可能です。
メールアドレスがあれば無料登録可能で、無期限で無料プランが利用できるのでformrunでぜひフォームを作成してみてください。
>> formrunでフォームを作成する

formLab編集部

formrunやフォーム作成や顧客管理に関する情報を発信しております。

EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。