【HTML&PHP】メールフォーム（お問い合わせフォーム）の作り方
今回は、HTMLとPHPを使ったメールフォーム（お問い合わせフォーム）の作り方について、記載していきます。
使用されるケース
企業のWebサイトに連絡先として設置したり、商品やサービスのWebサイトに「申し込みフォーム」として設置したりなど、Webサイトでは一般的に基本的に設置されています。
WordPressであればプラグインを使用して容易に設置できますが、WordPressや外部サービスを使わない場合はHTMLとPHPにてコーディングする必要があります。
ページの構成について
一般的には、メールフォームが設置されている「コンタクトページ」、フォームに記載した情報を利用者に確認してもらう「確認ページ」、メールを送信した旨を記載する「サンクスページ」の計3つのページで構成されています。
基本的にコンタクトページはHTML、確認ページとサンクスページはPHPのファイルで作成することになります。
作成方法
ここではシンプルに「名前」「メールアドレス」「お問い合わせ内容」の3項目を入力内容とします。
また、利用者がメールを送信した際に、Webサイト運営者側と利用者にそれぞれメールの内容が送信されるものとします。
コンタクトページについて
ファイル名はここでは「contact.html」として作成します。
フォームの部分は下記のようなコードとなります。
<form action="confirm.php" method="post">
<dl>
<dt><label for="name">▼お名前</label></dt>
<dd><input type="text" required id="name" name="name"></dd>
<dt><label for="mail">▼メールアドレス</label></dt>
<dd><input type="email" required id="mail" name="mail"></dd>
<dt><label for="contents">▼内容</label></dt>
<dd><textarea name="contents" id="contents" cols="40" rows="10" required></textarea></dd>
</dl>
<button type="submit">確認画面へ</button>
<button type="reset">リセット</button>
</form>form action="confirm.php"
の記述で、「確認画面へ」のボタンを押すと確認ページのファイル「confirm.php」に情報が送られます。
見た目を整えると下記のようになります。
確認ページ
ファイル名は「confirm.php」として進めます。
確認部分は下記のようなコードとなります。
<form action="submit.php" method="post">
<dl>
<dt><label for="name">▼お名前</label></dt>
<dd><?php print(htmlspecialchars($_POST['name'],ENT_QUOTES));?></dd>
<dt><label for="mail">▼メールアドレス</label></dt>
<dd><?php print(htmlspecialchars($_POST['mail'],ENT_QUOTES));?></dd>
<dt><label for="contents">▼内容</label></dt>
<dd><?php print(htmlspecialchars($_POST['contents'],ENT_QUOTES));?></dd>
</dl>
<button type="submit">送信</button>
<a href="contact.html"><button type="button">戻る</button></a>
<input type="hidden" name="name" value="<?php print(htmlspecialchars($_POST['name'],ENT_QUOTES));?>">
<input type="hidden" name="mail" value="<?php print(htmlspecialchars($_POST['mail'],ENT_QUOTES));?>">
<input type="hidden" name="contents" value="<?php print(htmlspecialchars($_POST['contents'],ENT_QUOTES));?>">
</form>form action="submit.php"
によって、「送信」のボタンを押した際にサンクスページの「submit.php」に情報が送られます。
4行目の
<?php print(htmlspecialchars($_POST['name’],ENT_QUOTES));?>
の部分には、「contact.html」から渡された「name="name"」に入力された値が表示されます。
6行目の「mail」、8行目の 「contents」の部分も同様です。
下部の
<input type="hidden" name="name" value="<?php print(htmlspecialchars($_POST['name’],ENT_QUOTES));?>">
以下3文の部分は、ページには表示されませんが「送信」ボタンを押した際に「submit.html」に送られる情報となります。
この時点でコンタクトページに情報を入力して「確認画面へ」を押すと下記のようになります。
※文言はHTMLで追加しています。
サンクスページ
ファイル名は「submit.php」として進めます。
該当部分は下記のようなコードとなります。
<p>下記内容で送信しました。</p>
<?php
$email="example@tekitou.co.jp";
mb_language("japanese");
mb_internal_encoding('UTF-8');
$subject="「".htmlspecialchars($_POST['name'],ENT_QUOTES)."」さんからのお問い合わせ";
$body="「Webサイト名」から自動送信\n\n";
$body.="◆お名前\n".htmlspecialchars($_POST['name'],ENT_QUOTES)."\n\n";
$body.="◆メールアドレス\n".htmlspecialchars($_POST['mail'],ENT_QUOTES)."\n\n";
$body.="◆内容\n".htmlspecialchars($_POST['contents'],ENT_QUOTES);
$header = "MIME-Version: 1.0\n";
$header .= "Content-Transfer-Encoding: 7bit\n";
$header .= "Content-Type: text/plain; charset=ISO-2022-JP\n";
$header .= "From: " .mb_encode_mimeheader("Webサイト名より自動送信") ."<".htmlspecialchars($_POST['mail'],ENT_QUOTES).">\n";
$header .= "Reply-To:".htmlspecialchars($_POST['name'],ENT_QUOTES) ."<".htmlspecialchars($_POST['mail'],ENT_QUOTES).">";
$success = mb_send_mail($email,$subject,$body,$header);?>
<?php
$email=htmlspecialchars($_POST['mail'],ENT_QUOTES);
mb_language("japanese");
mb_internal_encoding('UTF-8');
$subject="お問い合わせを受け付けました";
$body="「Webサイト名」から自動送信\n\n";
$body.="※このメールへの返信は不可となっております\n\n";
$body.="下記内容でお問い合わせを受け付けました\n\n";
$body.="◆お名前\n".htmlspecialchars($_POST['name'],ENT_QUOTES)."\n\n";
$body.="◆メールアドレス\n".htmlspecialchars($_POST['mail'],ENT_QUOTES)."\n\n";
$body.="◆内容\n".htmlspecialchars($_POST['contents'],ENT_QUOTES);
$header = "MIME-Version: 1.0\n";
$header .= "Content-Transfer-Encoding: 7bit\n";
$header .= "Content-Type: text/plain; charset=ISO-2022-JP\n";
$header .= "From: " .mb_encode_mimeheader("Webサイト名より自動送信") ."<no-reply@tokyorecyclenavi.com>\n";
$header .= "Reply-To:"."<no-reply@tekitou.com>";
$success = mb_send_mail($email,$subject,$body,$header);?>
<dl>
<dt><label for="name">▼お名前</label></dt>
<dd><?php print(htmlspecialchars($_POST['name'],ENT_QUOTES));?></dd>
<dt><label for="mail">▼メールアドレス</label></dt>
<dd><?php print(htmlspecialchars($_POST['mail'],ENT_QUOTES));?></dd>
<dt><label for="contents">▼内容</label></dt>
<dd><?php print(htmlspecialchars($_POST['contents'],ENT_QUOTES));?></dd>
</dl>
<a href="index.html"><button type="button">ホームに戻る</button></a>最初のphpの記述はWebサイト「運営者」へお問い合わせがあった旨の自動送信メール、次のphpの記述は「利用者」へお問い合わせを受け付ける旨の自動送信メール、最後のdlの記述は、ページに表示する内容となります。
$email=" “;
の中身は、自動メール送信先のアドレスを指定します。
mb_language(“japanese");
mb_internal_encoding('UTF-8’);
の部分は日本語を扱うことを前提としてそのまま。
$subject=" “;
の中身は、メールのタイトルを指定します。
$subject="「".htmlspecialchars($_POST['name’],ENT_QUOTES)."」さんからのお問い合わせ";
と記述することで、メールフォーム利用者の名前を活用できます。
$body=" “;
の中身は、メールの本文が入ります。
「\n」をつけることでで改行されます。
上記記述の後に
$body.=" “;
と、bodyの後に「.」を付けた記述を行うことで、「$body=" “;」に続けて文章を表示することができます。
※「.」が無いと 「$body=" “;」 の中身を上書きしてしまいます。
$header = “MIME-Version: 1.0\n";
$header .= “Content-Transfer-Encoding: 7bit\n";
$header .= “Content-Type: text/plain; charset=ISO-2022-JP\n";
の部分はそのまま。
$header .= “From: " .mb_encode_mimeheader(" “) ."<“.htmlspecialchars($_POST['mail’],ENT_QUOTES).">\n";
について、
mb_encode_mimeheader(" “)
の「" “」の中身は、自動送信メールを返信しようとした際に本文に表示される送信者の名前です。
<“.htmlspecialchars($_POST['mail’],ENT_QUOTES).">
の部分は、送信者の名前の後に<>の内側に送信者のアドレスが表示されるように指定しています。
$header .= “Reply-To:".htmlspecialchars($_POST['name’],ENT_QUOTES) ."<“.htmlspecialchars($_POST['mail’],ENT_QUOTES).">";
については、自動返信メールを返信しようとした際に宛先に表示される名前と、宛先に指定されるアドレスを指定しています。
$success = mb_send_mail($email,$subject,$body,$header);?>
はそのままでOKです。
これでメールを送信する記述は完了です。
続くdlでは、送信した内容をページに表示しています。
<?php print(htmlspecialchars$_POST['name’],ENT_QUOTES));?>
の記述で名前の部分に入力した情報が表示されます。
'mail’や’contact’も同様です。
最後にホームに戻るためのリンクをつけて完成です。
以上となります。