お問い合わせフォームの作成にチャレンジしてみようと思い立ったのですが、HTMLで入力フォームの表示はできても、お問い合わせ内容を入力した情報をメール送信するPHPの書き方が分かりませんでした。
そのため、お問い合わせフォームのHTMLとPHPの参考コードを元に処理の意味を理解しながら、お問い合わせフォームの作り方を覚えることにしました。
お問い合わせフォームの作り方を勉強するため記事にまとめたので、ポンコツな内容があったらすいません。
お問い合わせフォームの作り方を覚える
お問い合わせフォームの作り方を覚えるために自力では無理だったので、HTMLとPHPの書き方を参考に使用したのが次のコードです。
<?php
if(isset($_POST['submitted'])) {
//項目チェック
if(isset($_POST['checking'])) {
$captchaError = true;
} else {
//名前の入力なし
if(trim($_POST['contactName']) === '') {
$nameError = '名前が入力されていません';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
//メールアドレスの間違い
if(trim($_POST['email']) === '') {
$emailError = 'メールアドレスが入力されていません';
$hasError = true;
} else if (!preg_match('|^[0-9a-z_./?-]+@([0-9a-z-]+.)+[0-9a-z-]+$|', trim($_POST['email']))) {
$emailError = 'メールアドレスが正しくありません';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//お問い合わせ内容の入力なし
if(trim($_POST['comments']) === '') {
$commentError = 'お問い合わせ内容が入力されていません';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
//エラーなしの場合、メール送信
if(!isset($hasError)) {
mb_language("japanese");
mb_internal_encoding("UTF-8");
$emailTo = "送信先メールアドレス";
$subject = 'お問い合わせ';
$body = "
下記の通りお問い合わせを受け付けました。 \r\n
\r\n
-------------------------------------------------\r\n
お名前: $name \r\n
メールアドレス: $email \r\n
お問い合わせ内容: $comments \r\n
-------------------------------------------------
";
$title = "サンプルメール";
$from = mb_encode_mimeheader("$title"."のお問い合わせ","UTF-8");
$headers = 'From: '.$from.' <'.$email.'>';
mb_send_mail($emailTo, $subject, $body, $headers);
//自動返信用
$subject = 'お問い合わせ受付のお知らせ';
$from = mb_encode_mimeheader("$title","UTF-8");
$headers2 = 'From: '.$from.' <'.$emailTo.'>';
$body = "
$name 様 \r\n
$title にお問い合わせありがとうございます。\r\n
改めて担当者よりご連絡をさせていただきますので、\r\n
今しばらくお待ちください。\r\n
\r\n
-------------------------------------------------\r\n
お名前：$name \r\n
メールアドレス：$email \r\n
お問い合わせ内容：$comments \r\n
-------------------------------------------------
";
mb_send_mail($email, $subject, $body, $headers2);
$emailSent = true;
}
}
} ?>
<!-- l-wrapper -->
<div class="l-wrapper ">
<article>
<?php if(isset($emailSent) && $emailSent == true) { ?>
<h1 class="heading heading-page"><?=$name;?>様、<br>お問い合わせありがとうございます。</h1>
<section class="content content-page">
<p>この度はお問い合わせいただきありがとうございます。<br>
メールを確認次第、担当者よりご連絡をさせていただきます。<p>
</section>
<?php } else { ?>
<form action="mail-smple.php" method="post">
<table class="contactTable">
<tr>
<th class="contactTable__header">お名前<span class="required">必須</span></th>
<td class="contactTable__data">
<input type="text" name="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
<?php if(isset($nameError)) { ?><span class="error"><?=$nameError;?></span><?php } ?>
</td>
</tr>
<tr>
<th class="contactTable__header">メールアドレス<span class="required">必須</span></th>
<td class="contactTable__data">
<input type="text" name="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" />
<?php if(isset($emailError)) { ?><span class="error"><?=$emailError;?></span><?php } ?>
</td>
</tr>
<tr>
<th class="contactTable__header">お問い合わせ内容<span class="required">必須</span></th>
<td class="contactTable__data">
<textarea name="comments" rows="10"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if(isset($commentError)) { ?><span class="error"><?=$commentError;?></span><?php } ?></td>
</tr>
</table>
<div class="btn btn-center"><input type="hidden" name="submitted" value="true" /><button class="btn__link" type="submit">送信する</button></div>
</form>
<?php } ?>
</article>
</div>HTMLのお問い合わせフォームの表示とPHPでのメール送信の流れも実際に試したかったので、mail-smple.phpのファイルを作成してサーバーにアップし、動作確認もしながら勉強しました。
コードの参考元は、このブログで使用しているWordPressテーマLION MEDIAのお問い合わせフォームです。
初めてお問い合わせフォームの作り方を覚えるために使うHTMLとPHPのサンプルとしては難しく思いましたが、実際に使用できるサンプルでお問い合わせフォームの作り方を覚えたかったのです。
お問い合わせフォームのPHPがどのような処理をしているのか意味を理解することから覚えてみました。
お問い合わせフォームのPHP
お問い合わせフォームのPHPはif文の条件式でHTMLのsubmit送信ボタンがクリックされた場合、$_POSTの変数に入力フォームの値がセットされてるかをissetで確認しながら「名前」「メールアドレス」「お問い合わせ内容」の各フォームに入力があるか、または入力間違えがないかの処理を分岐していきます。
<input type="submit" name="submitted" value="true" />
PHPではじめに確認するのはHTMLのinput属性のtype属性をsubmitにして表示させた送信ボタンがクリックされたときです。
<?php
if(isset($_POST['submitted'])) {
type属性をsubmitにしたinputタグのneme属性の値をPHPの変数$_POSTのパラメータに渡すことで送信ボタンがクリックされたときの条件を作れます。
そして、入力フォームの送信ボタンがクリックされた場合のフォーム入力で「名前」「メールアドレス」「お問い合わせ内容」が入力なしで送信された場合は、条件式を繋いで「入力されていません」の表示ができるようにPHPを書いていきます。
名前の入力なしをチェック
お問い合わせフォームで名前を入力して欲しい場合に、名前なしで送信してしまうことがないように、PHPで名前の入力なしをチェックできるようにします。
<?php
if(isset($_POST['submitted'])) {
//項目チェック
if(isset($_POST['checking'])) {
$captchaError = true;
} else {
//名前の入力なし
if(trim($_POST['contactName']) === '') {
$nameError = '名前が入力されていません';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
上のPHPの記述は先に説明したコードに「項目チェック」と「名前入力なし」のPHP部分を加えています。
まず項目チェックのifの条件isset($_POST[‘checking’])ですが、すでにここから私は理解に苦しみます。
issetで$_POSTのcheckingパラメータ付き変数をチェックする条件にマッチした場合、$captchaErrorの変数に格納したtrueになるのだと思っていますが、trueにならないので、次のelse文の条件で名前の入力チェックをする流れになっていくのだと思います。素直にまだ理解不足です。
そしてelse文でお問いわせフォームの名前入力欄が「名前入力なし」だった場合、HTMLのフォームに「名前が入力されていません」の文字列を表示できるように変数に代入しておきます。
そのためのifの条件は「HTMLのフォームから$_POSTに渡すcontactNameが何も入力されていない場合」という条件を(===)比較演算子を使って作ります。===は$a が $b に等しく、および同じ型である場合に TRUEを返す比較演算子です。
この条件に一致した場合、つまりフォームに名前を入力してないで送信しようとした場合に「名前が入力されていません」の文字列を変数$nameErrorに代入してHTMLフォームで変数を使います。
フォームで名前が入力された場合は、elseで$_POST[‘contactName’]を$nameに代入しておきます。フォームで名前を入力した値が入っている$nameの変数をメール送信するときに使用できます。
難しくて覚えるのきっついわぁ…
メールアドレスの間違い
PHPでお問い合わせフォームのメールアドレスの間違いをチェックするときは、「メールアドレスが何も入力してない場合」と「メールアドレスの入力が間違えている場合」「メールアドレスが入力された場合」の条件をif文で作り変数にも代入しておきます。
<?php
if(isset($_POST['submitted'])) {
//項目チェック
if(isset($_POST['checking'])) {
$captchaError = true;
} else {
//名前の入力なし
if(trim($_POST['contactName']) === '') {
$nameError = '名前が入力されていません';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
//メールアドレスの間違い
if(trim($_POST['email']) === '') {
$emailError = 'メールアドレスが入力されていません';
$hasError = true;
} else if (!preg_match('|^[0-9a-z_./?-]+@([0-9a-z-]+.)+[0-9a-z-]+$|', trim($_POST['email']))) {
$emailError = 'メールアドレスが正しくありません';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
項目チェック、名前の入力なしのPHPの記述にメールアドレスの間違いの処理を加えて記述しています。
メールアドレスが入力フォームで未入力の場合、ifの条件式で空の値に等しい条件式をif(trim($_POST[‘email’]) === ”)と記述します。$_POSTのパラメータのemailについては、HTMLフォームのメールアドレスを入力するinputタグのname属性で指定した値です。
emailの値が空の値に等しい条件に一致した場合、つまりメールアドレスが何も入力されていない場合の処理を、メールアドレスが入力されていません。の文字列を変数$emailErrorに代入しておきます。
未入力ではないけどメールアドレスの入力を間違えている場合のPHPも必要で、else ifの条件でpreg_matchのpatternを指定した正規表現によりtrim($_POST[‘email’])を検索、正規表現にマッチしてない入力なら、メールアドレスが正しくありません。をHTMLフォームで表示できるように変数$emailErrorに代入しておきます。
上記条件以外の場合、入力されたメールアドレスが入力されて、間違いもない場合はelseで$_POST[‘email’]でメールアドレスをPOSTに格納します。
この時点で、こんな難しいPHPでお問い合わせフォームの作り方を覚えようとしている自分に後悔を覚えるようになってきました。
お問い合わせ内容の入力なし
次にフォームで「お問い合わせ内容の入力なしの場合」をチェックするPHPです。
項目チェック、名前の入力なし、メールアドレスの間違いのPHPの記述にお問い合わせ内容の入力なしの処理を加えて記述しています。
<?php
if(isset($_POST['submitted'])) {
//項目チェック
if(isset($_POST['checking'])) {
$captchaError = true;
} else {
//名前の入力なし
if(trim($_POST['contactName']) === '') {
$nameError = '名前が入力されていません';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
//メールアドレスの間違い
if(trim($_POST['email']) === '') {
$emailError = 'メールアドレスが入力されていません';
$hasError = true;
} else if (!preg_match('|^[0-9a-z_./?-]+@([0-9a-z-]+.)+[0-9a-z-]+$|', trim($_POST['email']))) {
$emailError = 'メールアドレスが正しくありません';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//お問い合わせ内容の入力なし
if(trim($_POST['comments']) === '') {
$commentError = 'お問い合わせ内容が入力されていません';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
お問い合わせ内容が入力フォームで未入力の場合のPHPは、ifの条件式で空の値に等しい条件式をif(trim($_POST[‘comments’]) === ”)と記述します。
$_POSTのパラメータのcommentsはHTMLフォームのお問い合わせ内容を入力するtextarea要素のname属性で指定した値で$_POST変数に渡されます。
お問い合わせ内容に何も入力がない状態で送信した場合に$commentError = ‘お問い合わせ内容が入力されていません’;$commentErrorに文字列を代入した変数をHTMLフォームで使います。
フォームでお問い合わせ内容の入力がある場合には、その入力した内容は$_POSTに格納されるので、変数に代入しておくことで送信メールを送るときの内容に変数で値を取得できます。
入力したフォーム内容をメール送信
お問い合わせフォームの作り方で、HTMLのフォームで入力した内容をPHPを使ってメール送信できるようにする作り方を覚えます。
項目チェック、名前の入力なし、メールアドレスの間違い、お問い合わせ内容の入力なしの処理を記述した下に「エラーなしの場合はメール送信」のコメント以降のPHPを覚えることにします。
<?php
if(isset($_POST['submitted'])) {
//項目チェック
if(isset($_POST['checking'])) {
$captchaError = true;
} else {
//名前の入力なし
if(trim($_POST['contactName']) === '') {
$nameError = '名前が入力されていません';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
//メールアドレスの間違い
if(trim($_POST['email']) === '') {
$emailError = 'メールアドレスが入力されていません';
$hasError = true;
} else if (!preg_match('|^[0-9a-z_./?-]+@([0-9a-z-]+.)+[0-9a-z-]+$|', trim($_POST['email']))) {
$emailError = 'メールアドレスが正しくありません';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//お問い合わせ内容の入力なし
if(trim($_POST['comments']) === '') {
$commentError = 'お問い合わせ内容が入力されていません';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
//エラーなしの場合はメール送信
if(!isset($hasError)) {
mb_language("japanese");
mb_internal_encoding("UTF-8");
$emailTo = "送信先のメールアドレス";
$subject = 'お問い合わせ';
$body = "
下記の通りお問い合わせを受け付けました。 \r\n
\r\n
-------------------------------------------------\r\n
お名前: $name \r\n
メールアドレス: $email \r\n
お問い合わせ内容: $comments \r\n
-------------------------------------------------
";
$title = "サンプルメール";
$from = mb_encode_mimeheader("$title"."のお問い合わせ","UTF-8");
$headers = 'From: '.$from.' <'.$email.'>';
mb_send_mail($emailTo, $subject, $body, $headers);
//自動返信用
$subject = 'お問い合わせ受付のお知らせ';
$from = mb_encode_mimeheader("$title","UTF-8");
$headers2 = 'From: '.$from.' <'.$emailTo.'>';
$body = "
$name 様 \r\n
$title にお問い合わせありがとうございます。\r\n
改めて担当者よりご連絡をさせていただきますので、\r\n
今しばらくお待ちください。\r\n
\r\n
-------------------------------------------------\r\n
お名前：$name \r\n
メールアドレス：$email \r\n
お問い合わせ内容：$comments \r\n
-------------------------------------------------
";
mb_send_mail($email, $subject, $body, $headers2);
$emailSent = true;
}
}
} ?>
お問い合わせフォームに入力をしてメール送信するifの条件
if(!isset($hasError))
isssetで値が入っているか調べる変数の$hasErrorは、ここまでPHPで項目チェックしてきた「名前」「メールアドレス」「お問い合わせ内容」でtrueを代入してあります。
ifの条件の!isset($hasError)が「何ではないとき」の否定なのか理解不足ですが、否定のビックリマークを書かないで、フォームを入力なしでメール送信すると送信できてしまうので、$hasErrorに入れたtrueを否定できているいうことなのだと覚えることにしました。のちに勉強し直します。
で、メール送信するにはメール送信用の関数「mb_send_mail」がPHPで用意されています。
書式
md_send_mail( $to, $subject, $text, $header);
mb_send_mail(送信先, 件名, 本文, ヘッダー);
- $toは送信先
- $subjectは件名
- $textは本文
- $headerはヘッダー
それぞれの変数を定義することでメールに自動的に記載されます。
またPHPのmb_send_maiの前には「mb_language」で言語の指定と「mb_internal_encoding」で文字コードの指定をします。
メール送信する部分だけのPHPを切り分けて見ました。
//エラーなしの場合、メール送信
if(!isset($hasError)) {
mb_language("japanese");
mb_internal_encoding("UTF-8");
$emailTo = "送信先のメールアドレス";
$subject = 'お問い合わせ';
$body = "
下記の通りお問い合わせを受け付けました。 \r\n
\r\n
-------------------------------------------------\r\n
お名前: $name \r\n
メールアドレス: $email \r\n
お問い合わせ内容: $comments \r\n
-------------------------------------------------
";
$title = "サンプルメール";
$from = mb_encode_mimeheader("$title"."のお問い合わせ","UTF-8");
$headers = 'From: '.$from.' <'.$email.'>';
mb_send_mail($emailTo, $subject, $body, $headers);
//自動返信用
$subject = 'お問い合わせ受付のお知らせ';
$from = mb_encode_mimeheader("$title","UTF-8");
$headers2 = 'From: '.$from.' <'.$emailTo.'>';
$body = "
$name 様 \r\n
$title にお問い合わせありがとうございます。\r\n
改めて担当者よりご連絡をさせていただきますので、\r\n
今しばらくお待ちください。\r\n
\r\n
-------------------------------------------------\r\n
お名前：$name \r\n
メールアドレス：$email \r\n
お問い合わせ内容：$comments \r\n
-------------------------------------------------
";
mb_send_mail($email, $subject, $body, $headers2);
$emailSent = true;
}
}
} ?>作り方を覚えるお問い合わせのメール送信は2つ。
「下記の通りお問い合わせを受け付けました。」のメール
これは自分に送信されるメールです。
「$emailTo」「$subject」「$body」を定義して、mb_send_mailの引数に順番に入れます。$emailToにメールを受け取りたい自分のメールアドレスを書きます。
そして$bodyの中に記述する「お名前：$name」、「メールアドレス：$email」、「お問い合わせ内容：$comments」の変数は、お問い合わせフォームを入力して$_POSTに入った情報の変数なため、フォーム入力者の情報がメールで送信され届きます。
「自動返信用」はお問い合わせフォームを入力した人へのメール返信です。
メール送信先にお問い合わせしてくれた方のメールアドレスを使用するので、mb_send_mailの引数で$toの送信先には$emailを記述します。
$emailには、お問い合わせフォームを入力した方がメールアドレスを入力しているため$_POSTに情報が渡されています。その情報を格納してる変数$emailでフォーム入力者のメールアドレスに自動返信でメールが送信され届きます。
お問い合わせのメール送信は実際に自分から自分に二つのメールアドレスを使って試してみると、どの記述がメール送信したときの表示部分になるのか覚えやすいです。
お問い合わせフォームのHTML
お問い合わせフォームのHTMLを記述していくときはformタグを親要素にしてマークアップしていきますが、今回参考にしたお問い合わせフォームのHTMLでは、はじめに、submit送信した後にフォーム画面で一言コメントを表示する記述をします。
<?php if(isset($emailSent) && $emailSent == true) { ?>
<h1 class="heading heading-page"><?=$name;?>様、<br>お問い合わせありがとうございます。</h1>
<section class="content content-page">
<p>この度はお問い合わせいただきありがとうございます。<br>
メールを確認次第、担当者よりご連絡をさせていただきます。<p>
</section>
<?php } else { ?>
PHPでifの条件式をif(isset($emailSent) && $emailSent == true)にします。
式は$emailSentの変数に値があって、$emailSent == trueで等しく、両方が含まれる場合の条件だと理解しています。
このifの条件が一致した場合に下のh1タグからsection終了タグまでの内容が、入力フォームを送信した後に表示されます。
そして上記のifの条件に該当しない場合に、お問い合わせフォームをHTMLで作成していきます。
formタグ、action属性、method属性
HTMLでお問い合わせフォームの作り方はformタグをフォーム全体を囲む親要素にします。
formタグに必須の属性も覚えておきます。「action属性」と「method属性」です。
action属性の値にはHTMLフォームで入力した情報を処理するURIを指定します。今回はHTMLフォームと情報を処理するPHPが同じファイルなので「mail-smple.php」を指定しています。
method属性には「post」を指定します。「get」にしてしまうとフォーム送信後にページのURLに$_POSTに渡された入力情報が表示されてしまうため、よろしくないからです。
<form action="mail-smple.php" method="post">
<table class="contactTable">
<tr>
<th class="contactTable__header">お名前<span class="required">必須</span></th>
<td class="contactTable__data">
<input type="text" name="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
<?php if(isset($nameError)) { ?><span class="error"><?=$nameError;?></span><?php } ?>
</td>
</tr>
<tr>
<th class="contactTable__header">メールアドレス<span class="required">必須</span></th>
<td class="contactTable__data">
<input type="text" name="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" />
<?php if(isset($emailError)) { ?><span class="error"><?=$emailError;?></span><?php } ?>
</td>
</tr>
<tr>
<th class="contactTable__header">お問い合わせ内容<span class="required">必須</span></th>
<td class="contactTable__data">
<textarea name="comments" rows="10"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if(isset($commentError)) { ?><span class="error"><?=$commentError;?></span><?php } ?></td>
</tr>
</table>
<div class="btn btn-center"><input type="hidden" name="submitted" value="true" /><button class="btn__link" type="submit">送信する</button></div>
</form>
<?php } ?>
HTMLでお問い合わせフォームの項目を作成するのはinputタグです。
inputタグはtype属性の種類が多くあり、いろいろなフォーム作成ができますが、今回は勉強なので、参考のHTML通りにtype=”text”を使用して覚えます。
そしてname属性が必須なので覚えておきます。
<input type="text" name="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
たとえば上のinputタグは名前を入力してもらうフォームでname属性の値contactNameにしてます。このcontactNameの値はフォームで名前を入力した情報が$_POST変数に渡されます。このとき$_POST変数に渡すことができるのはform要素のmethod=”post”を指定した場合です。
または今回はじめにPHPでお問い合わせフォームの項目チェックをする処理を作成したときの、$name = trim($_POST[‘contactName’])も名前入力した情報をinputタグのname属性の値として$_POSTに渡されて変数$nameに代入したりできます。
実はお問い合わせフォームの作り方をHTMLとPHPで覚えるために勉強してる今回で、name属性がとても重要なのだと覚えることができた私でした。
入力値をvalue属性にセット
HTMLでお問い合わせフォームの各項目を作成をするときのinputタグの属性にはvalue属性があり、PHPでvalue属性の値にフォームの入力値をセットすることもできるのを知りました。
<input type="text" name="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
入力値をvalue属性にセットする作り方は、PHPのif文で$_POSTに格納したフォーム入力の値、たとえば名前の値(contactName)が$_POSTにあるかどうか確認して、ある場合にはechoします。
お問い合わせフォームで入力して内容がvalue属性に保持できるので、入力し直す場合には楽になる作り方だと覚えることができました。
必須項目が入力なしのときの表示
今回のお問い合わせフォームの作り方のPHPで、フォームの名前、メールアドレス、お問い合わせ内容の「項目チェック」をする作成をしたときに、フォーム入力なしの場合にはコメントを表示するように$nameErrorの変数に文字列を代入しておきました。
<input type="text" name="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
<?php if(isset($nameError)) { ?><span class="error"><?=$nameError;?></span><?php } ?>
変数$nameErrorをお問い合わせフォームのHTMLでinputタグの下にif文で変数チェックをして、値がある場合にはechoで文字列を表示します。このような作り方でフォームが入力なしで送信した場合には、名前なら「名前が入力されていません」のコメントが表示します。
