Hướng dẫn bootstrap contact form send email - biểu mẫu liên hệ bootstrap gửi email

Bootstrap Mẫu liên hệ

Lưu ý: Tài liệu này dành cho phiên bản cũ hơn của Bootstrap (v.4). Một phiên bản mới hơn có sẵn cho Bootstrap 5. Chúng tôi khuyên bạn nên chuyển sang phiên bản mới nhất của sản phẩm - Thiết kế vật liệu cho Bootstrap 5. Truy cập Docs V.5 This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Hôm nay chúng ta sẽ học cách dễ dàng tạo các biểu mẫu liên hệ đẹp bằng cách sử dụng Framework, PHP và JavaScript. Bạn không cần kiến ​​thức chuyên gia để đạt được điều này, chỉ cần làm theo hướng dẫn này. Nếu bạn có bất kỳ câu hỏi, xin vui lòng đăng một câu hỏi trên diễn đàn hỗ trợ của chúng tôi.

Tôi sẽ học được gì?

1. Cách tạo biểu mẫu liên hệ HTML bằng bootstrap
2. Cách kết nối biểu mẫu liên hệ với email của bạn bằng Php
3. Cách xác thực các trường đã nhập bằng JavaScript và PHP
4. Cách gửi biểu mẫu liên hệ mà không tải lại trang bằng Ajax
5. Cách tạo cơ chế chống thư rác
6. Cách sử dụng các đầu vào khác nhau

Vào cuối hướng dẫn này, tôi cũng sẽ cho bạn thấy một vài kiểu mẫu liên hệ khác nhau như một nguồn cảm hứng và sẵn sàng sử dụng đoạn trích. Nếu bạn không muốn làm theo hướng dẫn hoặc bạn, chỉ cần một giải pháp làm việc, bạn có thể tải xuống các tệp cuối cùng từ kho lưu trữ GitHub của chúng tôi tại đây.

Bootstrap Mẫu liên hệ

Một mẫu liên hệ ví dụ được đưa ra dưới đây:

Sao chép và dán mã sau vào tệp của bạn (tức là index.html):

Note!

Trong hướng dẫn này, chúng tôi đang sử dụng thiết kế vật liệu cho thư viện Bootstrap, bạn có thể tải xuống miễn phí từ đây. Nếu không có thư viện, biểu mẫu vẫn sẽ hoạt động, tuy nhiên nó có thể trông và cư xử khác nhau. Bạn nên sử dụng thư viện này cùng với hướng dẫn.

Kết nối biểu mẫu liên hệ của bạn với email bằng Php

Tạo một tệp mới có tên mail.php trong cùng một thư mục với biểu mẫu liên hệ và đặt trong mã sau:

Bây giờ chỉ cần thay thế bằng địa chỉ email của bạn và nó đã được thực hiện. Hãy nhớ rằng để tập lệnh hoạt động, bạn sẽ cần giữ nó trên máy chủ hỗ trợ PHP như Apache.

Bạn có thể tải xuống tệp mã nguồn từ đây.

Xác thực JavaScript (Xác thực phía máy khách)

Hình thức của chúng tôi bây giờ hoạt động tốt. Tuy nhiên, hiện tại nếu người dùng mắc lỗi bằng cách nhấp vào Gửi mà không điền vào biểu mẫu, điều này sẽ dẫn đến việc gửi email trống. Vấn đề tiềm năng khác là người dùng có thể phạm sai lầm trong địa chỉ email của mình để anh ta không bao giờ nhận được phản hồi từ chúng tôi.

Để áp dụng xác thực, chúng tôi phải thay đổi mã mẫu của chúng tôi. Vì vậy, trước tiên thay đổi dòng hiện có trong tệp index.html

với dòng sau, thay vì gửi trực tiếp biểu mẫu sẽ gọi chức năng xác thực của chúng tôi:

Bây giờ chúng ta phải tạo chức năng xác thực của chúng ta. Thêm mã sau sau (bên dưới) tập lệnh đã nhập xong các tệp JavaScript Bootstrap:

Bạn có thể tải xuống tệp nguồn từ đây.

Xác thực PHP (Xác thực phía máy chủ)

Vì người dùng có thể dễ dàng vô hiệu hóa JavaScript ở phía mình, nên điều rất quan trọng là cũng cần xác thực biểu mẫu đã gửi ở phía máy chủ. Để thêm xác thực tương tự như chúng tôi đã làm trong điểm trước, hãy cập nhật tệp mail.php bằng cách thêm mã sau:

Bạn có thể tải xuống tệp nguồn từ đây.

Gửi email mà không tải lại trang bằng Ajax

Mẫu liên hệ của chúng tôi đang hoạt động chính xác, tuy nhiên trải nghiệm người dùng để lại nhiều điều mong muốn. Thay vì tải lại trang, chúng tôi muốn gửi biểu mẫu liên hệ trên cùng một trang. Hãy để thay thế mã JavaScript sau trong tệp index.html:

Chúng tôi cũng cần điều chỉnh mã PHP của chúng tôi. Thay vì gửi một chuỗi đơn giản với tin nhắn, chúng tôi sẽ gửi một đối tượng phức tạp hơn một chút sẽ chứa cả trạng thái và thông báo. Nếu mọi thứ diễn ra tốt đẹp và email đã được gửi thành công. Chúng tôi sẽ trả lại trạng thái 1 và làm sạch biểu mẫu của chúng tôi để đảm bảo rằng người dùng không gửi nó nhiều lần. Trong trường hợp lỗi xác thực, chúng tôi sẽ trả về 0 và giữ dữ liệu trong biểu mẫu.

Voila! Bây giờ hình thức liên hệ của chúng tôi hoạt động mà không tải lại.

Bạn có thể tải xuống tệp nguồn từ đây.

Xác thực PHP (Xác thực phía máy chủ)

Vì người dùng có thể dễ dàng vô hiệu hóa JavaScript ở phía mình, nên điều rất quan trọng là cũng cần xác thực biểu mẫu đã gửi ở phía máy chủ. Để thêm xác thực tương tự như chúng tôi đã làm trong điểm trước, hãy cập nhật tệp mail.php bằng cách thêm mã sau:

Bạn có thể tải xuống tệp nguồn từ đây.only if the entered value is correct. Real humans will easily perform this task, but bots most probably won't be able to pass the check.

Số sau sáu là bao nhiêu?

Câu hỏi khác

• Q: Một người điển hình có bao nhiêu mắt? (Vd: 1) A: 2
• Q: Có bao nhiêu chân trên một con chó điển hình? (Vd: 5) A: 4
• Q: Có bao nhiêu đơn vị trong một tá? (Vd: 11) A: 12
• Q: Tên của diễn viên di Caprio? (Vd: Rafaelo) A: Leonardo
• Q: Bao nhiêu ngày trong một tuần? (Vd: 8) A: 7
• Q: Bao nhiêu ngày trong tháng Bảy? (Vd: 28) A: 31

Nếu bạn muốn một giải pháp tinh vi hơn, hãy đọc về dịch vụ recaptcha của Google

Các đầu vào khác

Chúng tôi đã sử dụng các đầu vào văn bản cũng như vùng văn bản cho các đoạn văn bản lớn hơn nhưng vẫn có các loại đầu vào hữu ích hơn mà chúng tôi có thể sử dụng để tăng cường mẫu liên hệ của chúng tôi.

Hộp kiểm

Mã HTML:

Mã JS:

Mã PHP:

Nhiều hộp kiểm

Mã HTML:

Mã JS:

Mã PHP:

Nhiều hộp kiểm

Mã HTML:

Mã JS:

Mã PHP:

Nhiều hộp kiểm

Làm thế nào bạn có thể biết về chúng tôi? US

Bản tin

Quảng cáo