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

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

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

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

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

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

jQuery|2019年02月27日

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

今回の項目を学ぶ前にHTML×CSSでメールフォームのコーディングを学びましょう。
コーディングしたデータに対し、送信機能をつけるとスムーズです。

メールフォームはWEBサイトやWEBサービスまで、何にでも活用できます。

例えば、お問い合わせフォームのように、連絡を取る方法として。
または会員登録をした時に送られる、自動完了メールとして。

少しずつメールの使用頻度は減っていますが、まだ不要ではありません。
情報を伝える方法として、まだまだ使われます。

そこで、今回はメールフォームを作る方法を習得してみましょう。

ただし、メールフォームを作るためには、jQueryだけでは出来ません。

メールはサーバーの機能を使って送ります。
サーバーの機能を使うためには、バックエンドと呼ばれる別の言語が必要です。

今回、バックエンドの言語はPHPを使っていきます。
PHPの項目を学んでから、取り組むと学びやすくなります。

ただ、絶対ではありませんので、そのまま進んでもOKです。

では、さっそく今回のミッションに進んでいきましょう。
他の言語も混ざってきますし、難易度が少しあがります。

今回のミッション

メールフォームの送信機能を実装してみましょう。
HTMLやCSSはこちらを参考に作ってみてください。
すでに作られた方は、そのままファイルを使ってください。

再現するファイルは下記になります。

ソースコードの解説を参考に、上記を再現してみてください。

一通りソースコードを理解してから取り組むと良いでしょう。
新しい書き方も出てくるので、いきなりだと難しいかもしれません。

どうしても動かなければ、下記からファイルをダウンロードしてください。
細かい箇所のチェックはエラーなど、見つけてみましょう。

なお、毎回ご提供するこちらはあくまでも、参考ファイルです。
より良い書き方を見つけたら、ご自身で改良してみてください。

ソースコードの解説

まずは、下記ソースコードに目を通してみましょう。
全体の流れを把握したら、自分で実践してみてください。

index.html

<div class="profBox" id="formarea">
    <h1>メールフォーム</h1>
    <dl>
        <dt>メールアドレス※</dt>
        <dd>
            <div>
                <input type="text" name="mailarea"  placeholder="info@startout.work" class="inputText mailarea" />
                <!--入力を確認する際は、下記に入力内容が表示されます-->
                <div class="mailareaConfirmation"></div>
                <!--ミスがあった際は、下記にエラーが表示されます-->
                <div class="missmailbox"></div>
            </div>
        </dd>
    </dl>
    <dl>
        <dt>お名前※</dt>
        <dd>
            <div>
                <input type="text" name="namedata"  placeholder="例) 佐々木 太郎" class="inputText namearea" />
                <div class="namedataConfirmation"></div>
                <div class="missnamebox"></div>
            </div>
        </dd>
    </dl>
    <dl>
        <dt>備考</dt>
        <dd>
            <div>
                <textarea name="textboxdata" class="textboxdata textboxarea"></textarea>
                <div class="textboxdataConfirmation"></div>
            </div>
        </dd>
    </dl> 
    <!--入力時にはこちらのボタンが表示されます。-->
    <div class="makesurebox">
        <button class="btnStyle1 submitarea">確認</button>
    </div>    
    <!--確認時にはこちらのボタンが表示されます。最初はクラスdelateareaで非表示に。-->
    <div class="delatearea backandsendbox">
        <button class="btnStyle1 backBtnArea mgb10px">戻る</button>
        <button class="btnStyle1 sendBtnArea">送信</button>
    </div>    
</div>

構造はご理解いただけたでしょうか。

ただ、これだけだと何のことか分からないかもしれません。
jsと組みあわせて、初めて意味がわかってくるはずです。

さっそく、jsを見ていきましょう。

<script>
    //ミスのチェックをするための変数です。
    //true = ミスがある false = ミスがない
    //letはvarのような変数を定義する記述ですが、varより呼び出せる場所が限られます。
    let mailmiss = "true";
    let namemiss = "true";
     
    //フォームで入力した内容を入れておく箱です。
    let mailarea = "";
    let namearea = "";
    let textboxarea = "";
     
    //確認ボタンを押した時の処理です。
    $(".submitarea").click(function(){
 
        //エラーメッセージを一旦削除
        $(".missmailbox").text("");
        $(".missnamebox").text("");
             
        //エラーの確認変数を一旦trueにリセット
        mailmiss = "true";
        namemiss = "true";

        //それぞれの入力内容を変数に格納。
        mailarea = $("input[name='mailarea']").val();
        namearea = $("input[name='namedata']").val();
        textboxarea = $("textarea[name='textboxdata']").val();
         
        //入力内容にエラーがないかを確認するバリデーションチェックです。
        if(!mailarea){
            //もし、mailareaに何も入っていなかったら、下記のメッセージがmissmailboxに入ります。
            $(".missmailbox").text("メールアドレスが入力されていません。");   
        }else if(mailarea.match(/.+@.+\..+/)==null){
            //もし、mailareaに入力された内容がメールアドレスじゃなければ、下記のメッセージ。
            //「/.+@.+\..+/」は正規表現と言われ、これでメールアドレスの形を確認しています。
            $(".missmailbox").text("メールアドレスの形式が間違っています。");
        }else{
            //もし、特にミスがなければ、falseになります。
            //確認項目がすべてfalseの場合にのみ、メールが送信されます。
            mailmiss = "false";
        };
             
        if(!namearea){
            //もし、namedataに何も入っていなかったら、下記のメッセージがnamemissに入ります。
            $(".missnamebox").text("お名前が入力されていません。");   
        }else{
            //もし、特にミスがなければ、falseになります。
            //確認項目がすべてfalseの場合にのみ、メールが送信されます。
            namemiss = "false";
        };
             
        //名前にもメールにもエラーがない場合、確認画面に変化させます。
        if(mailmiss == "false" && namemiss == "false"){ 
            //各内容確認エリアに入力内容を挿入。
            $(".mailareaConfirmation").text(mailarea);
            $(".namedataConfirmation").text(namearea);
            $(".textboxdataConfirmation").text(textboxarea);    
     
            //フォーム類と確認ボタンを一旦削除。
            //deleteareaは要素を消すためのCSS。
            //CSSの内容は直接CSSを確認してください。
            $(".mailarea").addClass("delatearea");
            $(".namearea").addClass("delatearea");
            $(".textboxdata").addClass("delatearea");
            $(".makesurebox").addClass("delatearea");
             
            //戻る&送信ボタンを表示。
            $(".backandsendbox").removeClass("delatearea");
                 
        };
             
    });
         
    //戻るボタンをクリックした時の処理です。
    $(".backBtnArea").click(function(){
     
        //各内容確認エリアの入力内容を一旦削除。
        $(".mailareaConfirmation").text("");
        $(".namedataConfirmation").text("");
        $(".textboxdataConfirmation").text("");
             
        //クラスdelateareaを解除してフォーム類を表示。
        $(".mailarea").removeClass("delatearea");
        $(".namearea").removeClass("delatearea");
        $(".textboxdata").removeClass("delatearea");
        $(".makesurebox").removeClass("delatearea");
             
        //戻る&送信ボタンを消す。
        $(".backandsendbox").addClass("delatearea");
             
    });
         
    //送信ボタンをクリックした時の処理です。
    $(".sendBtnArea").click(function(){ 
        //ajaxを使ってPHPにデータを送信します。
        //メールはPHPなどのバックエンド側の言語でしか送れません。
        //よって、jsからPHPにデータを渡す必要があります。
        //下記はデータをPHPに投げる時の1セットだと思ってください。
        $.ajax({
            type: 'POST',
            dataType:'json',
            //こちらでデータをmail.phpに投げます。
            url:'functions/mail.php',
            data:{
                //入力データを送信します。
                //ひとまず、左右どちらも入力内容が入った変数名で統一してください。
                mailarea:mailarea,
                namearea:namearea,
                textboxarea:textboxarea,
            },
            success:function(data) {
                //成功したらPHPから返された値がdataから取得できます。
                //今回は、送信完了メッセージが入っています。
                //詳しくはPHPファイルを確認してみてください。
                //alertで送信完了メッセージを出します。
                alert(data)
                //フォームのトップページにリダイレクトします。
                location.href = "./";
            },
            error:function(XMLHttpRequest, textStatus, errorThrown) {
                //何かエラーが起きたらalertでエラーを表示させます。
                alert(errorThrown);
            }
        }); 
    });
</script>

少し長くなりました。

書き方は色々あると思いますが、1つ1つ確認してみてください。
じっくりと1行ずつ、意味とHTMLとの関連性を把握しましょう。

入力ページと入力確認ページがありますが、URLが分かれるわけではありません。
同じファイル内で項目を出し分けることによって、表示を切り替えています。

なお、表示を切り替えるためのdelateareaというクラスがありました。
delateareaは下記のような内容になっています。

.delatearea{
position: absolute;
left: -9999px;
}

display:none;等で消すのではなく、画面外に吹き飛ばしています。

なぜかと言うと、display:none;にすると、jQueryで値を取得できないからです。
存在そのものが消えてしまうようなイメージですね。

確認画面に遷移したとき、入力フォームから値を取得しています。
それが、display:none;にすると取得できなくなります。

一方、上記の書き方であれば、要素が画面外に移動するだけで表示はされています。
もちろんjQueryで値を反映させておくこともできますね。

ただし、今回の方法がすべてではありません。

先にデータを取得して変数に入れ、display:none;で表示を切り替えることも出来ます。
様々な書き方があるので、効率の良い方法を考えてみましょう。

では、次はPHPの内容を見ていきます。

functions/mail.php

<?php
 
//jsで送られてきたデータを受け取り、変数に入れます。
//PHPでは変数の書き方は$と文字列となります。
$mailarea = htmlspecialchars($_POST['mailarea'], ENT_QUOTES);
$namearea = htmlspecialchars($_POST['namearea'], ENT_QUOTES);
$textboxarea = htmlspecialchars($_POST['textboxarea'], ENT_QUOTES);
 
//以下はメールを送るための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);
 
//最後はjsonという形で送信完了メッセージをjsに戻します。
header('Content-type: application/json');
echo json_encode( "送信が完了しました!" );
 
?>

基本、PHPでは、メールを送る処理しかしていません。
なので、例えばVue.jsを使ったとしても、中身は同様です。

このファイルは1つのテンプレートみたいなものだと思ってください。
jsからポストする手段では、だいたい使いまわせます。

最近はこのようにフロントエンドとバックエンドの組み合わせが一般的です。

フロントエンドだけでなく、バックエンドも合わせてできる必要性が高まっています。
この機会にバックエンドも学んでみてはいかがでしょうか。

なお、今回のメールフォームですが、効率化できる部分がいくつかあります。
ご自身で、もっとソースコードをシンプルにできる方法を探してみましょう。

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

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

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

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

ウエヤマ ショウタ

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

ウエヤマ ショウタ

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

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

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

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

 詳しくはこちら