こんにちは!セミマサです。
WordPressプラグイン「ContactForm7」のような、画面遷移無しのお問い合わせフォームを作ってみました。この記事はその備忘録になります。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <section> <divclass="inner"> <h2class="heading">お問い合わせはこちら</h2> <p><spanclass="red">※</span>は必須項目です。</p> <formmethod="post"id="contact-form"action="contact.php"> <labelclass="form-label">お名前<spanclass="red">※</span></label> <inputtype="text"name="name"value=""placeholder="お名前"required> <labelclass="form-label">メールアドレス<spanclass="red">※</span></label> <inputtype="email"name="email"value=""placeholder="メールアドレス"pattern="[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+" title="メールアドレスは、aaa@example.com のような形式で記入してください。" required> <labelclass="form-label">件名</label> <inputtype="text"name="subject"value=""placeholder="件名"> <labelclass="form-label">お問い合わせ内容<spanclass="red">※</span></label> <textareaname="message"cols="40"rows="10"placeholder="お問い合わせ内容"required></textarea> <inputtype="submit"value="送信"class="send-btn"id="submit"> </form> <pclass="contact-result"></p> </div> </section> |
お問い合わせフォームのHTMLです。
・inputタグやtextareaタグにrequired属性をつけると入力必須項目にすることができます。今回はお名前・メールアドレス・お問い合わせ内容を入力必須にしました。
・メールアドレスに関してはpattern属性をつけて「***@***.***」という形式での入力を指定しています。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | @charset"UTF-8"; .heading{ font-size:2rem; } .inner{ padding:20px5%; } form{ width:100%;} .form-label{ margin-top:16px; display:block; width:100%;} input{ width:100%;} textarea{ width:100%;} .red{ font-size:0.8rem; color:red;} .send-btn{ margin-top:16px; cursor:pointer;} .contact-result{ width:100%; padding:8px0; background-color:#e1a948; text-align:center; color:white; display:none;} *{ box-sizing:border-box; } |
こちらはCSSになります。
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <?php if($_SERVER['REQUEST_METHOD']!='POST'){ //methodがPOSTでない場合変数をすべて空にする $name=''; $email=''; $subject=''; $message=''; $complete_msg=''; }else{ //取得した値を変数に代入 $name=$_POST['name']; $email=$_POST['email']; $subject=$_POST['subject']; $message=$_POST['message']; //完了メッセージの初期化 $complete_msg=''; //送り先のアドレス $to='ここに送り先のアドレスを入れる'; //送信者情報 $headrs="From: ".$email."\r\n"; $message.="\r\n\r\n".$name; //送信処理 mb_send_mail($to,$subject,$message,$headrs); $complete_msg='送信されました!'; //完了メッセージを返す echo$complete_msg; // 初期化 $name=''; $email=''; $subject=''; $message=''; } ?> |
次はPHPのコードです。$toの中身は送り先のメールアドレスに置き換えてください。
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | $('#contact-form').submit(function(event){ //submit実行を止める event.preventDefault(); var$form=$(this); var$button=$form.find('.send-btn'); $.ajax({ url:$form.attr('action'), type:$form.attr('method'), data:$form.serialize(), //10秒でタイムアウト timeout:10000, //重複送信を避けるためにボタンを無効化 beforeSend:function(xhr,settings){ $button.attr('disabled',true); }, //完了後ボタンを押せるように complete:function(xhr,textStatus){ $button.attr('disabled',false); } }).done(function(data,textStatus,jqXHR){ // 成功時の処理 //フォームを初期化 $form[0].reset(); $(".contact-result").text(data); $(".contact-result").slideToggle(200); $(".contact-result").delay(3000).slideToggle(200); }).fail(function(jqXHR,textStatus,errorThrown){ // 失敗時の処理 $(".contact-result").text("エラーが発生しました。ステータス:"+jqXHR.status); $(".contact-result").slideToggle(200); $(".contact-result").delay(3000).slideToggle(200); }); }); |
最後にjQueryのコードになります。
・submitはデフォルトでは処理実行後にページの先頭に戻ってしまうのでevent.preventDefault()で処理を止め、ajaxでデータのやり取りをします。
・ slideToggleメソッドを使ってContactForm7のようにニュッとメッセージウィンドウが出るようにしています。delayメソッドによって3秒後にウィンドウが閉じます。
おわりに
動作確認は取れたもののセキュリティ対策ができていないので、セキュリティを学んで改良したいと思います。
※追記:改良しました。詳しくは下記記事をご覧ください!