Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Ajax-Jquery-Javascript > [Tuts]Hướng dẫn xây dựng form liên hệ với Bootstrap cực kỳ đơn giản
[Tuts]Hướng dẫn xây dựng form liên hệ với Bootstrap cực kỳ đơn giản
Nguyễn Trung Hiếu
Share Code Web Company 2015

[Tuts]Hướng dẫn xây dựng form liên hệ với Bootstrap cực kỳ đơn giản

Bài viết sẽ hướng dẫn các bạn làm thế nào để tự mình 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

How to build Bootstrap contact form with php

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é.

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é

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ỏ.

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.
form group
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é)

Trong đó hàm submitForm(); có nội dung như sau:

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
suscess form

Hàm gửi mail

Mở file process.php ra và thêm đoạn code sau đây:

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:

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:

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

form submit success
Để 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:

wrong message

Tổng kết

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

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}