今日のTIPS:各リンクの上でマウスホイールをクリックすると、別ウィンドウでページが開きます

【HTML&PHP】メールフォーム(お問い合わせフォーム)の作り方

2020-04-08

今回は、HTMLとPHPを使ったメールフォーム(お問い合わせフォーム)の作り方について、記載していきます。

「勇気を出して問い合わせる女の子」

使用されるケース

企業のWebサイトに連絡先として設置したり、商品やサービスのWebサイトに「申し込みフォーム」として設置したりなど、Webサイトでは一般的に基本的に設置されています。

WordPressであればプラグインを使用して容易に設置できますが、WordPressや外部サービスを使わない場合はHTMLPHPにてコーディングする必要があります。

ページの構成について

一般的には、メールフォームが設置されている「コンタクトページ」、フォームに記載した情報を利用者に確認してもらう「確認ページ」、メールを送信した旨を記載する「サンクスページ」の計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’も同様です。

最後にホームに戻るためのリンクをつけて完成です。

以上となります。

▼【30日返金保証あり】買い切り型の学習動画サービス「Udemy」でスキルアップ!