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

formLab編集部
フォーム作成

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

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

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

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

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

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属性に「送信」という値を入れると、ボタンに「送信」と表示させることが可能です。

HTMLメールフォームの作り方【コピペOK・初心者向け】

ここでは、HTMLを使ってメールフォームを作成するための基本的な手順を5つのステップに分けて紹介します。

「どの順番で作ればいいの？」という方向けに、必要な工程だけをシンプルにまとめています。

STEP1：HTMLの基本構造を作る

まずは、メールフォームを設置するための土台となるHTMLファイルを準備します。

以下のように、<!DOCTYPE html> や <body> までを整えておくと、この後の作業がスムーズになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせフォーム</title>
</head>
<body>

<!-- ここにフォームを挿入 -->

</body>
</html>

STEP2：フォーム項目を追加する

メールフォームのメインとなる「入力欄」を設置します。

名前・メールアドレス・お問い合わせ内容といった情報を取得するため、form・input・textarea などのタグを使用します。

<form action="send.php" method="POST">
  <label>お名前：</label>
  <input type="text" name="name" required>

  <label>メールアドレス：</label>
  <input type="email" name="email" required>

  <label>お問い合わせ内容：</label>
  <textarea name="message" rows="5" required></textarea>

  <input type="submit" value="送信">
</form>

※ HTMLだけでは送信処理ができないため、action には後ほど作成する PHP ファイルを指定します。

STEP3：CSSで見た目を整える

入力欄の幅や余白、ボタンのデザインなどをCSSで調整すると、ユーザーにとって入力しやすくなります。

form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 16px;
}

最低限でもこのようなスタイルを設定しておくと、使いやすいフォームになります。

STEP4：PHPで送信処理を作成する

HTMLだけではメール送信ができないため、send.php などのPHPファイルに処理を記述します。

<?php
$to = "example@example.com";
$subject = "お問い合わせが届きました";
$message = "お名前: ".$_POST['name']."\\nメールアドレス: ".$_POST['email']."\\n\\nお問い合わせ内容:\\n".$_POST['message'];
$headers = "From: ".$_POST['email'];

mb_send_mail($to, $subject, $message, $headers);
?>

<p>送信が完了しました。ありがとうございました。</p>

※ PHPが動作するサーバーでのみ利用できます。

STEP5：動作確認をする

すべてのファイルをサーバーにアップロードしたら、実際にフォームに入力してテストしましょう。

  • メールが届くか
  • 必須項目でエラーが出るか
  • スマホで崩れないか

この確認を行うことで、ユーザーが安心して使えるフォームになります。

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

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

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

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

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

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

HTMLで使える主なバリデーション属性

メールフォームは入力ミスが発生しやすいため、HTMLのバリデーション機能を使って「誤入力を防ぐ仕組み」を整えることが重要です。

バリデーションが適切に設定されていると、ユーザーの離脱を防ぎ、送信データの品質も向上します。

required（必須入力）

入力が必須の項目に設定します。

未入力で送信しようとすると、ブラウザが自動で警告してくれます。

<input type="text" name="name" required>

email（メール形式チェック）

メールアドレスの形になっていない場合、自動でエラーを表示します。

<input type="email" name="email" required>

pattern（正規表現による入力制限）

電話番号・郵便番号など、「決まった形式で入力してほしい項目」に利用できます。

<inputtype="text"
  name="tel"
  pattern="\\d{2,4}-\\d{2,4}-\\d{3,4}"
  placeholder="090-1234-5678">

maxlength / minlength（文字数制限）

お問い合わせ内容の入力量をコントロールできます。

<textarea name="message" rows="5" minlength="10" maxlength="500" required></textarea>

placeholder（入力例の表示）

ユーザーが迷わず入力できるよう、例を提示します。

<input type="text" name="company" placeholder="株式会社サンプル">

バリデーションを適切に設定するとユーザビリティが向上する

HTMLバリデーションは、追加でJavaScriptを書く必要がなく、初心者でも簡単に利用できます。

以下のような効果が期待できます。

  • 入力ミスが減る
  • ユーザーの入力ストレスが減る
  • フォーム離脱率が下がる
  • 運用側のデータ確認の負担が減る

フォームの信頼性にも関わる要素なので、重要な項目には必ずバリデーションを設定しましょう。

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

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

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


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

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

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

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

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

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

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

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でぜひフォームを作成してみてください。
>> formrunでフォームを作成する

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

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

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

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

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

formrunでフォームを作成する

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

しかも、作成したフォームからの回答は一覧化され、自動・一斉・個別メールを送信することが可能です。豊富な機能が揃った有料プランの14日間無料トライアルもご用意しているので、データ管理やメール送信など豊富な機能で効率よく顧客管理を行いたい場合、ぜひformrunをお試しください。

14日間の無料トライアルをはじめる

>> ノーコードでフォーム作成可能！クリエイターフォームを試してみる
>> コード型フォームを試してみる

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

Googleフォーム公式サイト

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

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

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

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

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でぜひフォームを作成してみてください。
>> formrunでフォームを作成する