今回の項目を学ぶ前に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でも、各項目で説明しています。
よりスマートな方法を学びたい方は、ぜひ、学習してみてください。