php メールフォームにPHPだけで送信機能をつけよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

メールフォームにPHPだけで送信機能をつけよう

php|2019年02月27日

2019年02月27日
  • このエントリーをはてなブックマークに追加

今回の項目を学ぶ前に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つのファイルに分けて送信する方法は過去のものです。
最近はjQueryVue.jsと組み合わせた、画面遷移を挟まない方法が主流です。
STARTOUTでも、各項目で説明しています。

よりスマートな方法を学びたい方は、ぜひ、学習してみてください。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら