今回の項目を学ぶ前に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からポストする手段では、だいたい使いまわせます。
最近はこのようにフロントエンドとバックエンドの組み合わせが一般的です。
フロントエンドだけでなく、バックエンドも合わせてできる必要性が高まっています。
この機会にバックエンドも学んでみてはいかがでしょうか。
なお、今回のメールフォームですが、効率化できる部分がいくつかあります。
ご自身で、もっとソースコードをシンプルにできる方法を探してみましょう。