فرادرسساخت فرم تماس بوت‌استرپ (Bootstrap) به زبان ساده
در این نوشته قصد داریم در مورد یکی از اجزای ضروری برای هر وب‌سایت یعنی فرم تماس صحبت کنیم. روش‌های زیادی برای طراحی فرم تماس وجود دارد ولی در این مطلب شما را با یکی از بهترین و ساده‌ترین انواع فناوری‌ها برای اجرای صحیح و ساده فرم تماس در یک وب‌سایت آشنا می‌کنیم. در این روش چند ابزار بسیار خوب را با هم ترکیب می‌کنیم (بوت‌استرپ ۳، JQuery و jqBootstarpٰValidation) که نتیجه فوق‌العاده‌ای خواهد داشت. این فرم تماس کوچک اما قدرتمند، برای هر وب‌سایتی مناسب است.
می‌توانید خود مستقیماً این فرم تماس را توسعه دهید. همچنین اگر می‌خواهید از آن استفاده کنید، می‌توانید از ریپازیتری گیت‌هاب آن را pull کنید.
در زمان توسعه این فرم تماس اهداف زیر را در ذهن داریم
- طراحی مینیمال
- پیگیری تماس‌های اشخاص برای ارتباطات آینده
- ارسال اطلاعات به‌طور مستقیم به ایمیل
- اعتبارسنجی ورودی هم در سمت کلاینت و هم سرور
- نمایش پیام موفقیت در زمان ارسال فرم یا نمایش پیامهای جایگزین در صورت وجود مشکل
البته احتمالاً متوجه شده‌اید که توسعه یک فرم تماس کار چندان عجیب‌وغریبی نیست. اما ترکیب فناوری‌هایی که ما برای این کار استفاده می‌کنیم، باعث شده است که کارایی مطلوبی داشته باشد.
گردش کار خود را به چهار بخش تقسیم می‌کنیم
- کتابخانه‌های موردنیاز
- UI
- اعتبارسنجی سمت کلاینت با استفاده از تعامل JQuery – PHP
- PHP (سمت سرور)
کتابخانه‌های موردنیاز
به کتابخانه‌های زیر نیاز خواهیم داشت
صرفاً با دانلود فایل‌های موردنیاز می‌توان کار را آغاز کرد.
پس از استفاده از بوت‌استرپ و jqBootstrapValidation سایت ما چیزی شبیه زیر خواهد بود.
–
– – css
– – – bootstrap.Min.Css
– – js
– – – bootstrap.Min.Js
– – – jqBootstrapValidation.Js
اینک به رابط کاربری (UI) می‌پردازیم.
UI
برای بخش رابط کاربری از بوت‌استرپ 3 و برخی خصوصیات jqBootstrapValidation.Js استفاده می‌کنیم. در اینجا در مورد اجزای بوت‌استرپ 3 توضیح نمی‌دهیم چون خارج از حوصله این نوشته است. اما هرگاه سؤالی داشتید می‌توانید در بخش نظرات مطرح کنید تا پاسخ دهیم.
در این وب‌سایت باید یک فایل به نام form.html ایجاد کنیم.
نسخه نهایی این فایل چنین خواهد بود.
1 <body>
2 <br />
3 <!-- a row has to be in a container -->
4<div class="container">
5 <!-- Contacts -->
6 <div id="contacts">
7 <div class="row">
8 <!-- Alignment -->
9 <div class="col-sm-offset-3 col-sm-6">
10 <!-- Form itself -->
11 <form name="sentMessage" class="well" id="contactForm" novalidate>
12 <legend>Contact me</legend>
13 <div class="control-group">
14 <div class="controls">
15 <input type="text" class="form-control"
16 placeholder="Full Name" id="name" required
17 data-validation-required-message="Please enter your name" />
18 <p class="help-block"></p>
19 </div>
20 </div>
21 <div class="control-group">
22 <div class="controls">
23 <input type="email" class="form-control" placeholder="Email"
24 id="email" required
25 data-validation-required-message="Please enter your email" />
26 </div>
27 </div>
28
29 <div class="control-group">
30 <div class="controls">
31 <textarea rows="10" cols="100" class="form-control"
32 placeholder="Message" id="message" required
33 data-validation-required-message="Please enter your message" minlength="5"
34 data-validation-minlength-message="Min 5 characters"
35 maxlength="999" style="resize:none"></textarea>
36 </div>
37 </div>
38 <div id="success"> </div> <!-- For success/fail messages -->
39 <button type="submit" class="btn btn-primary pull-right">Send</button><br />
40 </form>
41 </div>
42 </div>
43 </div>
44 </div>
45
46
47 <!-- JS FILES -->
48 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
49 <script src="./js/bootstrap.min.js"></script>
50 <script src="./js/jqBootstrapValidation.js"></script>
51 <script src="./js/contact_me.js"></script>
52
53 </body>اگر با بوت‌استرپ آشنایی داشته باشید این کد برایتان کاملاً واضح خواهد بود.
چند نکته مهم وجود دارد که می‌بایست در اینجا مطرح کنیم.
- از آنجایی‌که در این پروژه از jqBootstrapValidation استفاده می‌کنیم، می‌بایست خصوصیت novalidate را در فرم خود قرار دهیم، در غیر این صورت اعتبار سنجی HTML ۵، اعتبار سنجی jqBootstrapValidation را کنار می‌زند.
- برای تغییر دادن رنگ یا استایل پیامهای خطا می‌توانید به‌سادگی کلاس css “.help-block” را تغییر دهید.
- کلاس‌های data-validation-* برای تعیین پیامهای خاص هنگامی‌که کاربر یک عمل اشتباه انجام می‌دهد، استفاده می‌شود. در اینجا می‌توانید اطلاعات بیشتری کسب کنید.
- کتابخانه jqBootstrapValidation فیلدهای ورودی و تگ‌های متنی را بررسی می‌کند و در صورت نیاز به‌طور خودکار مورد اعتبارسنجی قرار می‌دهد. برای مثال اگر خصوصیت “required” وجود داشته باشد، این کتابخانه در صورت خالی ماندن فیلد به‌طور خودکار یک پیام خطا ایجاد می‌کند.
اعتبارسنجی سمت کلاینت، تعامل JQuery – PHP
به‌این‌ترتیب توانستیم طراحی فرم خود را به پایان ببریم. مرحله بعدی فعال‌سازی کتابخانه jqBootstrapValidation و ارسال داده‌های کاربر به php که درنهایت یک ایمیل به کاربر می‌فرستد و پیامی را برای وی به نمایش می‌گذارد.
قسمت عمده این کار در یک تابع کوچک JQuery انجام می‌گیرد و کد آن چنین است.
/*
Jquery Validation using jqBootstrapValidation
example is taken from jqBootstrapValidation docs
*/
$(function() {
$("input,textarea").jqBootstrapValidation(
{
preventSubmit: true,
submitError: function($form, event, errors) {
// something to have when submit produces an error ?
// Not decided if I need it yet
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "./bin/contact_me.php",
type: "POST",
data: {name: name, email: email, message: message},
cache: false,
success: function() {
// Success message
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append( "</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append( "</button>");
$('#success > .alert-danger').append("<strong>Sorry "+firstName+" it seems that my mail server is not responding...</strong> Could you please email me directly to <a href='mailto:me@example.com?Subject=Message_Me from myprogrammingblog.com'>me@example.com</a> ? Sorry for the inconvenience!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
})
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle="tab"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('#success').html('');
});
JqBootstrapValidation امکان بازنویسی تحویل فرم را در زمان موفق بودن فراهم کرده است. درصورتی‌که کاربر همه اطلاعات را بدون خطا تحویل داده باشد، یک درخواست POST به فایل bin/contat_me.Php ارسال می‌کنیم و در آن نام، ایمیل و متن پیام کاربر را قرار می‌دهیم.
فایل contact_me.php که در بخش بعدی کد آن را ارائه کرده‌ایم در یک ایمیل همه فیلدهایی که کاربر وارد کرده است را برای ما می‌فرستد. همچنین بررسی می‌کنیم که قادر به اتصال به این فایل هستیم یا نه. در زمان دریافت موفق پیام کاربر یک پیام موفقیت به کاربر بازگردانده می‌شود. در غیر این صورت یک پیام ارسال می‌کنیم و می‌گوییم که پیام خود را مستقیماً برای ما ایمیل کند (مثلاً در حالتی که سرور ایمیل ما خاموش شده باشد، اعتبارسنجی در سمت سرور ناموفق باشد، و یا مجوزهای فایل PHP نادرست باشند).
PHP (سمت سرور)
درنهایت به آخرین بخش کار می‌رسیم. ما یک فایل PHP داریم که بر روی داده‌های دریافتی از کاربر اعتبارسنجی می‌کند و یک ایمیل برای ما ارسال می‌کند. کد PHP به‌صورت زیر است.
1<?php
2// check if fields passed are empty
3if(empty($_POST['name']) ||
4 empty($_POST['email']) ||
5 empty($_POST['message']) ||
6 !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
7 {
8 echo "No arguments Provided!";
9 return false;
10 }
11
12$name = $_POST['name'];
13$email_address = $_POST['email'];
14$message = $_POST['message'];
15
16// create email body and send it
17$to = 'me@myprogrammingblog.com'; // put your email
18$email_subject = "Contact form submitted by: $name";
19$email_body = "You have received a new message. nn".
20 " Here are the details:n nName: $name n ".
21 "Email: $email_addressn Message n $message";
22$headers = "From: contacts@myprogrammingblog.comn";
23$headers .= "Reply-To: $email_address";
24mail($to,$email_subject,$email_body,$headers);
25return true;
26?>همان‌طور که می‌بینید فایل PHP بسیار ساده‌تر است. البته می‌توان اعتبارسنجی بیشتری وارد آن کرد. در این مورد فقط بررسی می‌کنیم که آیا همه فیلدها پرشده‌اند و آیا ایمیل فرمت صحیحی دارد یا نه. اگر همه‌چیز درست باشد، یک ایمیل ایجاد می‌کنیم و از تابع ایمیل PHP برای ارسال آن استفاده می‌کنیم.
