こんにちは!セミマサです。
WordPressプラグイン「ContactForm7」のような、画面遷移無しのお問い合わせフォームを作ってみました。この記事はその備忘録になります。
HTML
<section>
<div class="inner">
<h2 class="heading">お問い合わせはこちら</h2>
<p><span class="red">※</span>は必須項目です。</p>
<form method="post" id="contact-form" action="contact.php">
<label class="form-label">お名前<span class="red">※</span></label>
<input type="text" name="name" value="" placeholder="お名前" required>
<label class="form-label">メールアドレス<span class="red">※</span></label>
<input type="email" name="email" value="" placeholder="メールアドレス" pattern="[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+" title="メールアドレスは、aaa@example.com のような形式で記入してください。" required>
<label class="form-label">件名</label>
<input type="text" name="subject" value="" placeholder="件名">
<label class="form-label">お問い合わせ内容<span class="red">※</span></label>
<textarea name="message" cols="40" rows="10" placeholder="お問い合わせ内容" required></textarea>
<input type="submit" value="送信" class="send-btn" id="submit">
</form>
<p class="contact-result"></p>
</div>
</section>
お問い合わせフォームのHTMLです。
・inputタグやtextareaタグにrequired属性をつけると入力必須項目にすることができます。今回はお名前・メールアドレス・お問い合わせ内容を入力必須にしました。
・メールアドレスに関してはpattern属性をつけて「***@***.***」という形式での入力を指定しています。
CSS
@charset "UTF-8";
.heading{
font-size: 2rem;
}
.inner{
padding: 20px 5%;
}
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: 8px 0;
background-color: #e1a948;
text-align: center;
color: white;
display: none; }
*{
box-sizing: border-box;
}
こちらはCSSになります。
PHP
<?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
$('#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秒後にウィンドウが閉じます。
おわりに
動作確認は取れたもののセキュリティ対策ができていないので、セキュリティを学んで改良したいと思います。
※追記:改良しました。詳しくは下記記事をご覧ください!