Bài viết sẽ share code cho các bạn để xây dựng một form liên hệ cực đẹp cho website với Bootstrap kết hợp xử lý dữ liệu bằng PHP và AJAX cực kỳ đơn giản.
Demo sau khi hoàn thành các bước xây dựng form liên hệ bằng Bootstrap
Cấu trúc tập tin và thư mục trong bài lab
Để các bạn dễ hình dung, thì mình đưa ra cấu trúc file và folder có trong project này. Các bạn cũng nên tạo các file và folder như vậy để tiện theo dõi nhé.
|
1 2 3 4 5 6 7 8 |
Bootstrap-Form: ├── css/ ├── images/ ├── js/ ├── scripts.js ├── php/ ├── process.php ├── index.html |
Chúng ta cũng sẽ phải cần một vài tài nguyên bắt buộc phải có để phục vụ cho bài lab
Sau khi download về, các bạn giải nén và đưa vào từng thư mục tương ứng trong bài lab nhé
|
1 2 3 4 5 6 7 8 9 10 11 |
Bootstrap-Form: ├── css/ ├── bootstrap.min.css ├── images/ ├── js/ ├── scripts.js ├── bootstrap.js ├── jquery-1.11.2.min.js ├── php/ ├── process.php ├── index.html |
Xây dựng form cơ bản với HTML
Mở file index.html và thiết kế một form cơ bản như dưới đây chẳng hạn. Hãy chú ý rằng thẻ meta viewport là để thông báo cho trình duyệt biết form của chúng ta có hỗ trợ các màn hình kích thước nhỏ.
|
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 36 37 38 39 |
<!DOCTYPE html> <html> <head> <title>Contact form using Bootstrap 3.3.4</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/animate.css"> </head> <body> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <h3>Send me a message</h3> <form role="form" id="contactForm"> <div class="row"> <div class="form-group col-sm-6"> <label for="name" class="h4">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter name" required> </div> <div class="form-group col-sm-6"> <label for="email" class="h4">Email</label> <input type="email" class="form-control" id="email" placeholder="Enter email" required> </div> </div> <div class="form-group"> <label for="message" class="h4 ">Message</label> <textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea> </div> <button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button> <div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div> </form> </div> </div> </body> <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="js/form-scripts.js"></script> </html> |
Bên trong thẻ body, chúng ta thêm 2 thẻ div nữa. Một cái mang class="row" với ý nghĩa rằng form của chúng ta sẽ nằm trong một hàng thôi. Thẻ div thứ hai mang giá trị class="col-sm-6 col-sm-offset-3" với ý nghĩa rằng form của chúng ta sẽ chiếm 50% độ rộng và bắt đầu từ cột thứ 3 trở đi (bootstrap hỗ trợ tối đa 12 cột). Thẻ div với class="form-group" với ý nghĩa gom nhóm các điều khiển trong form lại.
Như vậy là cơ bản chúng ta đã thiết kế xong phần “xương” của bài lab rồi. Cùng chuyển qua phần xử lý các action trên form nhé.
Xử lý các sự kiện trên form
Xử lý sự kiện nhấn nút submit của form bằng đoạn script sau.(Viết trong file scripts.js nhé)
|
1 2 3 4 5 |
$("#contactForm").submit(function(event){ // cancels the form submission event.preventDefault(); submitForm(); }); |
Trong đó hàm submitForm(); có nội dung như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function submitForm(){ // Initiate Variables With Form Content var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); $.ajax({ type: "POST", url: "php/process.php", data: "name=" + name + "&email=" + email + "&message=" + message, success : function(text){ if (text == "success"){ formSuccess(); } } }); } function formSuccess(){ $( "#msgSubmit" ).removeClass( "hidden" ); } |
Nếu ajax thành công sẽ hiện ra đoạn thông báo Message Submitted! đồng nghĩa với việc xóa bỏ class hidden đi
Hàm gửi mail trong php
Mở file process.php ra và thêm đoạn code sau đây:
|
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 |
<?php $name = $_POST["name"]; $email = $_POST["email"]; $message = $_POST["message"]; $EmailTo = "emailaddress@test.com"; $Subject = "New Message Received"; // prepare email body text $Body .= "Name: "; $Body .= $name; $Body .= "\n"; $Body .= "Email: "; $Body .= $email; $Body .= "\n"; $Body .= "Message: "; $Body .= $message; $Body .= "\n"; // send email $success = mail($EmailTo, $Subject, $Body, "From:".$email); // redirect to success page if ($success){ echo "success"; }else{ echo "invalid"; } ?> |
Chú ý: Hàm mail() có thể không hoạt động do một số shared host đã tắt đi. Bạn có thể tham khảo hàm gửi mail khác ở trên mạng nhé..
Nếu bạn cần một “form màu mè” hơn thì làm thế nào?
Về cơ bản như vậy là xong rồi. Còn ai muốn màu mè hơn thì đọc tiếp nhé. Để làm cho form sinh động hơn chúng ta cần thêm 2 công cụ sau:
Animate.css sẽ giúp chúng ta có những hiệu ứng trong form tốt hơn. Bootstrap validator sẽ giúp chúng ta xử lý phần xác nhận nhập từ người dùng.
Lúc này cấu trúc thư mục của ta sẽ như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Bootstrap-Form: ├── css/ ├── bootstrap.min.css ├── animate.css ├── images/ ├── js/ ├── scripts.js ├── bootstrap.js ├── jquery-1.11.2.min.js ├── validator.min.js ├── php/ ├── process.php ├── index.html |
Muốn validate các điều khiển trong form thì mình sẽ phải chế lại sự kiện click nút submit một chút:
|
1 2 3 4 5 6 7 8 9 10 11 |
$("#contactForm").validator().on("submit", function (event) { if (event.isDefaultPrevented()) { // handle the invalid form... formError(); submitMSG(false, "Did you fill in the form properly?"); } else { // everything looks good! event.preventDefault(); submitForm(); } }); |
Trong đó ba hàm formSuccess(); để thông báo là thành công. formError(); gọi ra sự kiện thông báo lỗi và submitMSG(); để hiển thị dòng thông báo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function formSuccess(){ $("#contactForm")[0].reset(); submitMSG(true, "Message Submitted!") } function formError(){ $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).removeClass(); }); } function submitMSG(valid, msg){ if(valid){ var msgClasses = "h3 text-center tada animated text-success"; } else { var msgClasses = "h3 text-center text-danger"; } $("#msgSubmit").removeClass().addClass(msgClasses).text(msg); } |
Để thông báo các trường điều khiển mà người dùng không nhập vào thì hiển thị một thông báo. Chúng ta sử dụng thuộc tính data-error="NEW ERROR MESSAGE" với nội dung thông báo cụ thể. Khi đó, đoạn viết trong thẻ form sẽ có dạng như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="row"> <div class="form-group col-sm-6"> <label for="name" class="h4">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter name" required> <div class="help-block with-errors"></div> </div> <div class="form-group col-sm-6"> <label for="email" class="h4">Email</label> <input type="email" class="form-control" id="email" placeholder="Enter email" required> <div class="help-block with-errors"></div> </div> </div> |
Vậy là xong rồi đó. Còn bạn nào chặt chẽ hơn thì kiểm tra luôn cả trong file process.php để xem người dùng có nhập dữ liệu không. Nếu nhập thì cho phép gửi mail, không nhập thì báo lỗi nhé. Chúc các bạn thành công
