今回の項目を学ぶ前にHTML×CSSでメールフォームのコーディングを学びましょう。
コーディングしたデータに対し、送信機能をつけていくとスムーズです。
メールフォームはWEBサイトやWEBサービスまで、何にでも活用できます。
例えば、お問い合わせフォームのように、連絡を取る方法として。
または会員登録をした時に送られる、自動完了メールとして。
少しずつメールの使用頻度は減っていますが、不要ではありませせん。
仕事として、サービスの連絡事項を伝える方法として、まだまだ使われます。
そこで、今回はメールフォームを作る方法を習得してみましょう。
今回のミッション
メールフォームの送信機能まで再現してみましょう。
HTMLやCSSはこちらを参考に作ってみてください。
すでに作られた方は、そのままファイルを使ってもOKです。
再現するファイルは下記になります。
ソースコードの解説を参考に、上記を再現してみてください。
一通りソースコードを読み、理解してから取り組むと良いでしょう。
新しい書き方も出てくるので、いきなりだと難しいかもしれません。
どうしても動かなければ、下記からファイルをダウンロードしてください。
細かい箇所のチェックはエラーなど、見つけてみましょう。
なお、毎回ご提供するこちらはあくまでも、参考ファイルです。
より良い書き方を見つけたら、ご自身で改良してみてください。
ソースコードの解説
メールフォームには、基本的に3つのステップがあります。
- 内容の入力
- 入力内容の確認 ( 省略することも多い )
- 送信
今回、各ステップごとにファイルを用意します。
3ページ使って、メールを送信するということです。
これは、phpだけだと、画面の読み込み時にしか処理を動かせないためです。
index.php = フォーム入力ページ
confirmation.php = 入力内容確認ページ
send.php = 送信ページ
上記の3つを使って、送信の仕組みを作ります。
まずは、ソースコードに目を通してみましょう。
全体の流れを把握したら、すぐに自分で開発してみてください。
index.php
では、さっそく説明に入っていきます。
ポイントは、確認ボタンを押したら、一度、index.phpを呼び込み直すことです。
普通に再読み込みするのではなくURLパラメータをつけて読み込みます。
URLパラメータがついている時だけ、バリデーションチェックが起動。
内容に問題がなければ、確認ページにリダイレクトします。
まずはHTMLの説明から進めていきましょう。
<!--formのmethodにpostを設定。これで次ページに入力データを送れます。-->
<!--また、buttonを押すと、actionに指定したURLに遷移します。-->
<!--これらはHTMLの基本機能です。-->
<form class="profBox" id="formarea" method="post" action="index.php?type=confirmation">
<h1>メールフォーム</h1>
<dl>
<dt>メールアドレス※</dt>
<dd>
<div>
<input type="text" name="mailarea" placeholder="info@startout.work" class="inputText mailarea" value="<?php echo $_SESSION["mailarea"]; ?>" />
<!--ミスがあった際は、下記にエラーが表示されます-->
<?php if(!empty($mailareaErrorMessege)): ?>
<div class="erroebox"><?php echo $mailareaErrorMessege;?></div>
<?php endif;?>
</div>
</dd>
</dl>
<dl>
<dt>お名前※</dt>
<dd>
<div>
<input type="text" name="namedata" placeholder="例) 佐々木 太郎" class="inputText namearea" value="<?php echo $_SESSION["namedata"]; ?>" />
<!--ミスがあった際は、下記にエラーが表示されます-->
<?php if(!empty($namedataErrorMessege)): ?>
<div class="erroebox"><?php echo $namedataErrorMessege; ?></div>
<?php endif;?>
</div>
</dd>
</dl>
<dl>
<dt>備考</dt>
<dd>
<div>
<textarea name="textboxdata" class="textboxdata textboxarea"><?php echo $_SESSION["textboxdata"]; ?></textarea>
</div>
</dd>
</dl>
<div class="makesurebox">
<button class="btnStyle1 submitarea">確認</button>
</div>
</form>
なんとなく構造はご理解いただけたでしょうか。
次はPHPをみていきます。
なおPHPのソースコードはindex.phpの一行目から書きましょう。
位置としては<!DOCTYPE html>の上です。
<?php
//セッションを開始します。
session_start();
//基本的に以下は、HTMLのフォームから送信ボタンが押された後の処理です。
//送信ボタンが押されるとurlパラメータに?type=confirmationがつきます。
//そのURLパラメータを取得できたら、処理に移ります。
//GETでURLを取得
$url = $_GET["type"];
//$_SESSION["sendkey"]がtrueになっていれば、最後の画面で送信可能に。
$_SESSION["sendkey"] = "false";
//もし$urlパラメータにconfirmationが入っていたら実行。
if($url == "confirmation"){
//セッションにポストされたデータを保管。
$_SESSION["mailarea"] = htmlspecialchars($_POST['mailarea'], ENT_QUOTES);
$_SESSION["namedata"] = htmlspecialchars($_POST['namedata'], ENT_QUOTES);
$_SESSION["textboxdata"] = htmlspecialchars($_POST['textboxdata'], ENT_QUOTES);
//エラーがあった時のメッセージが入ります。
$mailareaErrorMessege = "";
$namedataErrorMessege = "";
//以下、バリデーションチェックに入ります。
if(empty($_SESSION["mailarea"])){
//$_SESSION["mailarea"]が空だったら$mailareaErrorMessegeにエラーメッセージを入力。
$mailareaErrorMessege = "メールアドレスが入力されていません。";
}elseif(!preg_match('/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/iD', $_SESSION["mailarea"])){
//$_SESSION["mailarea"]の内容がメールアドレスじゃなかったらエラーメッセージを入力。
$mailareaErrorMessege = "メールアドレスの形式が間違っています。";
};
if(empty($_SESSION["namedata"])){
//名前が入力されてなければnamedataErrorMessegeにエラーメッセージを入力。
$namedataErrorMessege = "お名前が入力されていません。";
};
if(empty($mailareaErrorMessege)&&empty($namedataErrorMessege)){
//エラーメッセージが存在しなければ「確認ページ」にリダイレクト。
header('Location: confirmation.php');
exit;
};
};
?>
これで入力フォームのページが出来上がりです。
次は、入力内容確認ページを見ていきましょう。
confirmation.php
確認画面は特にやることは、ほぼありません。
まずはHTMLから見ていきましょう。
<!--actionにsend.phpを指定。送信ボタンを押すとsend.phpに移動-->
<form class="profBox" id="formarea" method="post" action="send.php">
<h1>メールフォーム</h1>
<dl>
<dt>メールアドレス※</dt>
<dd>
<div>
<?php echo $_SESSION["mailarea"]; ?>
</div>
</dd>
</dl>
<dl>
<dt>お名前※</dt>
<dd>
<div>
<?php echo $_SESSION["namedata"]; ?>
</div>
</dd>
</dl>
<dl>
<dt>備考</dt>
<dd>
<div>
<?php echo $_SESSION["textboxdata"]; ?>
</div>
</dd>
</dl>
<div class="backandsendbox">
<!--buttonを押すとsend.phpに飛ぶので、戻るボタンは普通のリンクにする-->
<a href="index.php" class="btnStyle1 backBtnArea mgb10px">戻る</a>
<button class="btnStyle1 sendBtnArea">送信</button>
</div>
</form>
index.phpのソースコードから、変更点はありません。
PHPも同じく、数行の追加だけです。
<?php
session_start();
//セッションに、メールアドレスが入っているか確認
if(!empty($_SESSION["mailarea"])){
//確認画面まで到達したので、$_SESSION["sendkey"]をtrueに。
//これで次の画面でメールが送信可能に。
$_SESSION["sendkey"] = "true";
}else{
//もし$_SESSION["mailarea"]にデータが入っていなければトップにリダイレクト。
header('Location: index.php');
exit;
};
?>
これだけです。
次のページでメール送信を許可するだけですね。
ただし、$_SESSION[“mailarea”]の有無を確認してから許可します。
これは、送信後の二重送信を防ぐためです。
送信完了したあと、画面を戻して送信しなおしたとします。
すると、同じ内容が2度、送信されてしまうことになりますからね。
なので、次のページにて、送信と同時に$_SESSION[“sendkey”]をfalseにします。
2重送信を防ぐ仕組みは、特に会員登録などで必要です。
ご自身でもぜひ、どうすれば二重送信が防げるか、考えてみてください。
それでは、最後のページに移動しましょう。
send.php
まずはHTMLから説明します。
ここでもHTMLは、特に難しいことはありません。
<form class="profBox" id="formarea" method="post" action="index.php">
<h1>送信が完了しました。</h1>
<p>
お問合せ、ありがとうございました。<br>
今後とも、何卒よろしくお願いいたします。
</p>
<div class="backandsendbox">
<a href="index.php" class="btnStyle1 backBtnArea mgb10px">トップに戻る</a>
</div>
</form>
基本的には送信完了メッセージと、戻るボタンを設置するだけです。
ただ、send.phpではphp側で色々とやっることがあります。
<?php
session_start();
//もし$_SESSION["sendkey"]がtrueだったら送信可能に。
if($_SESSION["sendkey"] == "true"){
//データをセッションから変数に。
$mailarea = $_SESSION["mailarea"];
$namearea = $_SESSION["namedata"];
$textboxarea = $_SESSION["textboxdata"];
//以下はメールを送るための1セットのソースコードだと思ってください。
//まずは文字コードを日本語,UTF-8に設定します。
header("Content-Type:text/html; charset=UTF-8");
mb_language("japanese");
mb_internal_encoding("utf-8");
//送信先のメールアドレスを変数に入れておきます。
//ただ、変数という箱に入れただけでこれで送れるわけではありません。
$mail="info@startout.work";
//タイトルを変数に入れておきます。
$sub1="[自動返信] STARTOUTへのお問合せが完了しました";
//$mailareaとは、ユーザーが入力したメールアドレスです。
//$mail_toという変数に入れて、送る時に使います。
$mail_to = $mailarea;
//メールの本文を書きます。
//改行しながら変数に一行ずつ書いていきましょう。
$messegeall .= "STARTOUTへのお問合せありがとうございます。\n";
$messegeall .= "今後とも、何卒、よろしくお願いいたします。\n";
$messegeall .= "\n";
$messegeall .= "─登録内容の確認─────────────────\n";
$messegeall .= "\n";
$messegeall .= "お名前：".$namearea."\n";
$messegeall .= "メールアドレス：".$mailarea."\n";
$messegeall .= "テキスト：\n";
$messegeall .= $textboxarea."\n";
$messegeall .= "\n";
$messegeall .= "─────────────────────────\n";
$messegeall .= "\n";
$messegeall .= "============================================\n";
$messegeall .= "このメールは自動送信です。\n";
$messegeall .= "お心当たりのない方は、お手数をおかけいたしますが、\n";
$messegeall .= "下記メールアドレスまでご連絡ください。\n";
$messegeall .= "============================================\n";
$messegeall .= "\n";
$messegeall .= "ログイン : https://startout.work/login.php\n";
$messegeall .= "\n";
$messegeall .= "━━━━━━━━━━━━━━━━━━━━━━━━━━\n";
$messegeall .= " STARTOUT\n";
$messegeall .= " 本 社：〒143-0021\n";
$messegeall .= " 東京都大田区北馬込2-41-8\n";
$messegeall .= " E-mail：info@startout.work\n";
$messegeall .= "━━━━━━━━━━━━━━━━━━━━━━━━━━\n";
$messegeall .= " 関連プロジェクト\n";
$messegeall .= " ◆グローバルな「デザイナー×エンジニア×起業家人材」を\n";
$messegeall .= " 育成する「IT留学シェアハウス」セブ島\n";
$messegeall .= " 《WORKROOM》https://workroom.biz/\n";
$messegeall .= "━━━━━━━━━━━━━━━━━━━━━━━━━━\n";
//ここでメールを送信します。
//下記のフォーマットの該当箇所にデータの入った変数をいれましょう。
//$success1=mb_send_mail(送り先メアド,タイトル,メッセージ内容,"From:".送り元メアド);
//しかし、これだけでは「自動返信メール」が届きません。
$success1=mb_send_mail($mail_to,$sub1,$messegeall,"From:".$mail);
//自動返信メールは送り先メアドと、送り元メアドの位置を交換すると送れます。
$success2=mb_send_mail($mail,$sub1,$messegeall,"From:".$mail_to);
//最後にセッションを破棄し、リロードした際の二重送信などを避けます。
session_destroy();
}else{
//もし$_SESSION["sendkey"]がfalseならトップにリダイレクト。
header('Location: index.php');
exit;
};
?>
メールを送信する許可があれば、メールを送信を実行します。
送信し終わったら、セッションを全て破棄してください。
そうすれば、例えばリロードなどで二重送信されることはなくなります。
このファイルは1つのテンプレートみたいなものだと思ってください。
ただ、こうした3つのファイルに分けて送信する方法は過去のものです。
最近はjQueryやVue.jsと組み合わせた、画面遷移を挟まない方法が主流です。
STARTOUTでも、各項目で説明しています。
よりスマートな方法を学びたい方は、ぜひ、学習してみてください。