Biểu mẫu liên hệ là một trong những yếu tố phổ biến nhất được tìm thấy trên trang web và chúng có thể được sử dụng để thu thập bất kỳ loại thông tin nào được yêu cầu từ người dùng của bạn
May mắn thay, việc thiết kế các biểu mẫu liên hệ với Bootstrap thật dễ dàng với tất cả các lớp tích hợp có sẵn. Nhưng vì Bootstrap chỉ là một khung giao diện người dùng, nên chúng tôi cần giới thiệu chức năng bổ sung để làm cho biểu mẫu liên hệ hoạt động
Trong hướng dẫn từng bước này, chúng ta sẽ tạo một biểu mẫu liên hệ Bootstrap đang hoạt động với PHP, một ngôn ngữ phía máy chủ phổ biến. Biểu mẫu liên hệ của chúng tôi cũng sẽ được tích hợp tính năng ngăn chặn thư rác và xác thực biểu mẫu
Đánh dấu HTML
Điều đầu tiên chúng ta cần làm khi xây dựng biểu mẫu liên hệ là thiết lập cấu trúc HTML phù hợp với các lớp Bootstrap thích hợp. Mặc dù không bắt buộc, nhưng chúng tôi sẽ căn giữa biểu mẫu liên hệ bằng cách sử dụng các lớp $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $human = intval($_POST['human']); 4 và tôi sẽ cho rằng bạn đã lồng biểu mẫu vào trong một hàng và vùng chứa đúng cách
Để giúp chúng tôi bắt đầu, chúng tôi sẽ sử dụng đánh dấu HTML sau đây và chúng tôi sẽ xem xét từng khối chi tiết hơn
<form class="form-horizontal" role="form" method="post" action="index.php"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value=""> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" value=""> </div> </div> <div class="form-group"> <label for="message" class="col-sm-2 control-label">Message</label> <div class="col-sm-10"> <textarea class="form-control" rows="4" name="message"></textarea> </div> </div> <div class="form-group"> <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label> <div class="col-sm-10"> <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer"> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary"> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <! Will be used to display an alert to the user> </div> </div> </form>Sử dụng mã này, bạn sẽ có một cái gì đó giống như thế này
[email protected]'; $subject = 'Message from Contact Demo '; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 0which will use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout. We then create a new
Đối với mỗi nhãn, chúng tôi sử dụng một lớp $from = 'Demo Contact Form'; $to = '[email protected]'; $subject = 'Message from Contact Demo '; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 2 để tạo kiểu phù hợp cho nhãn của chúng tôi. Đối với ví dụ này, chúng tôi cũng đã thêm một lớp $from = 'Demo Contact Form'; $to = '[email protected]'; $subject = 'Message from Contact Demo '; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 3để các nhãn của chúng tôi xếp chồng lên nhau trên đầu vào của biểu mẫu trên các thiết bị di động nhỏ hơn. Điều này giúp việc đọc biểu mẫu trên thiết bị di động trở nên dễ dàng hơn rất nhiều
Cuối cùng, chúng tôi cung cấp cho mỗi đầu vào của chúng tôi một lớp $from = 'Demo Contact Form'; $to = '[email protected]'; $subject = 'Message from Contact Demo '; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 4
Giới thiệu PHP
Bây giờ tất cả đánh dấu HTML đã hoàn tất, chúng ta cần bắt đầu thêm đánh dấu PHP của mình
Khai báo các biến
Trong đánh dấu HTML của chúng tôi, chúng tôi đã chỉ định một thuộc tính tên cho mỗi đầu vào của chúng tôi. Chúng tôi sẽ khai báo các biến PHP sau để trích xuất dữ liệu này
$name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $human = intval($_POST['human']);Tiếp theo, chúng tôi cần khai báo các biến bổ sung cần thiết để gửi email của chúng tôi
$from = 'Demo Contact Form'; $to = '[email protected]'; $subject = 'Message from Contact Demo '; $body = "From: $name\n E-Mail: $email\n Message:\n $message";Xác thực biểu mẫu
Bây giờ chúng ta đã có các biến cơ bản, chúng ta cần giới thiệu một số xác thực để cảnh báo người dùng nếu có bất kỳ lỗi hoặc thiếu trường nào
Đối với trường tên và nội dung tin nhắn, chúng ta chỉ cần kiểm tra xem đã nhập văn bản chưa. Nếu không có văn bản nào được nhập, chúng tôi sẽ khai báo một biến mới có tên là “errName”
if (!$_POST['name']) { $errName = 'Please enter your name'; }Dấu chấm than trong PHP có nghĩa là 'không' nên đoạn mã trên dịch thành "Nếu trường tên trống sau khi đăng, một biến $errName được khai báo
Đối với trường email của chúng tôi, chúng tôi cũng sẽ xác minh xem email đã nhập có phải là email hợp lệ hay không bằng cách sử dụng mã sau
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { $errEmail = 'Please enter a valid email address'; }Cuối cùng, đối với bot spam, chúng tôi sẽ xác minh rằng số được nhập vào trường nhập liệu bằng 5. Nếu không, chúng tôi sẽ khai báo một biến lỗi khác
if ($human !== 5) { $errHuman = 'Your anti-spam is incorrect'; }Bây giờ chúng tôi đã khai báo tất cả các biến lỗi, chúng tôi muốn hiển thị chúng dưới mỗi đầu vào của biểu mẫu khi biểu mẫu được gửi. Ví dụ: chúng tôi sẽ chèn dòng PHP sau vào đầu vào tên của chúng tôi
<?php echo "<p class='text-danger'>$errName</p>";?>Lưu ý rằng chúng tôi đã sử dụng lớp $from = 'Demo Contact Form'; $to = '[email protected]'; $subject = 'Message from Contact Demo '; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 5 để biểu thị rằng có lỗi. Với dòng mã này, lỗi sẽ chỉ hiển thị nếu người dùng quên nhập tên của họ
Với tất cả xác thực của chúng tôi, đây là những gì người dùng sẽ thấy nếu họ gửi một biểu mẫu trống
[email protected]'; $subject = 'Message from Contact Demo '; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 6 của mình. Lưu ý rằng chúng tôi cũng đã thêm $from = 'Demo Contact Form'; $to = '[email protected]'; $subject = 'Message from Contact Demo '; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 7 vào các giá trị được đăng trong các đầu vào để thoát khỏi bất kỳ mã độc hại nào mà người dùng có thể nhập vào
Gửi biểu mẫu bằng PHP
Bây giờ chúng tôi có mọi thứ chúng tôi cần để gửi biểu mẫu. Chúng tôi bắt đầu với một câu lệnh if kiểm tra xem biểu mẫu đã được gửi chưa. Nếu có, nó sẽ lưu trữ tất cả các biến chúng tôi đã xác định ở trên
<?php if (isset($_POST["submit"])) { $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $human = intval($_POST['human']); $from = 'Demo Contact Form'; $to = '[email protected]'; $subject = 'Message from Contact Demo '; $body = "From: $name\n E-Mail: $email\n Message:\n $message";Nếu biểu mẫu được gửi, nó sẽ xác minh xem có bất kỳ lỗi hoặc thiếu thông tin nào với thông tin đầu vào không
// Check if name has been entered if (!$_POST['name']) { $errName = 'Please enter your name'; } // Check if email has been entered and is valid if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { $errEmail = 'Please enter a valid email address'; } //Check if message has been entered if (!$_POST['message']) { $errMessage = 'Please enter your message'; } //Check if simple anti-bot test is correct if ($human !== 5) { $errHuman = 'Your anti-spam is incorrect'; }Nếu không có lỗi, chúng tôi sẽ gửi biểu mẫu
$name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $human = intval($_POST['human']); 0Nếu biểu mẫu được gửi thành công, chúng tôi sẽ hiển thị cảnh báo bằng cách sử dụng lớp $from = 'Demo Contact Form'; $to = '[email protected]'; $subject = 'Message from Contact Demo '; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 8 thông báo cho người dùng rằng biểu mẫu đã được gửi thành công. Nếu biểu mẫu không gửi thành công, chúng tôi sẽ hiển thị cảnh báo bằng cách sử dụng lớp $from = 'Demo Contact Form'; $to = '[email protected]'; $subject = 'Message from Contact Demo '; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 9 thông báo cho người dùng rằng biểu mẫu chưa được gửi. Đảm bảo chèn mã PHP sau vào nhóm biểu mẫu cuối cùng mà ban đầu chúng tôi để trống
$name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $human = intval($_POST['human']); 1Mã PHP cuối cùng
Với tất cả các biến của chúng ta và các câu lệnh if đã có, mã PHP của bạn sẽ trông như thế này
$name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $human = intval($_POST['human']); 2Mã HTML cuối cùng
Đây là mã HTML cuối cùng trông như thế nào với PHP được thêm vào
$name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $human = intval($_POST['human']); 3Tải xuống mã nguồn
Chúng tôi đã đề cập đến khá nhiều mã và nó đã được chia thành nhiều phần khác nhau. Để xem hoặc tải xuống toàn bộ mã nguồn, bạn có thể truy cập qua trang GitHub của chúng tôi