Bootstrapmade php-email-form.php tải xuống miễn phí

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

Nội dung chính Show

Đánh dấu HTML
Các lớp Bootstrap
Giới thiệu PHP
Khai báo các biến
Xác thực biểu mẫu
Sử dụng PHP để lưu trữ các giá trị ban đầu
Gửi biểu mẫu bằng PHP
Mã PHP cuối cùng
Mã HTML cuối cùng
Tải xuống mã nguồ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

Ban đầu, có vẻ như chúng tôi đang sử dụng khá nhiều mã nhưng lưu ý rằng rất nhiều mã bị lặp lại. Trước tiên, hãy chia nhỏ đánh dấu HTML

Đầu tiên, mọi thứ được chứa bên trong thẻ

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$human = intval($_POST['human']);

5 của chúng tôi được sử dụng để khai báo một biểu mẫu yêu cầu đầu vào của người dùng. Trong thẻ biểu mẫu, có nhiều thuộc tính

Phương pháp. Có hai phương thức biểu mẫu khác nhau có thể được sử dụng, nhận và đăng. Nếu chúng tôi sử dụng get, dữ liệu biểu mẫu sẽ được thêm vào URL khi gửi. Ví dụ: nếu chúng tôi đã gửi biểu mẫu có tên là “Chris”, thì URL sẽ hiển thị http. //lãnh địa. com/?name=chris

Mặt khác, sử dụng phương thức đăng sẽ gửi dữ liệu biểu mẫu dưới dạng giao dịch đăng HTTP. Nói chung, phương thức đăng nên được sử dụng cho các biểu mẫu liên hệ

Vai trò. Bootstrap đã thêm thuộc tính

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$human = intval($_POST['human']);

6 để trợ giúp về khả năng truy cập. Đó là một thực hành tốt để thêm điều này vào

Hoạt động. Thuộc tính hành động được sử dụng để chỉ ra vị trí của tập lệnh PHP. Trong trường hợp này, chúng tôi đã bao gồm tập lệnh trên cùng một trang với biểu mẫu liên hệ của chúng tôi. Vì lợi ích của hướng dẫn này, chúng tôi sẽ chỉ sử dụng chỉ mục. php

Nhãn được sử dụng để chỉ định thông tin nào sẽ được nhập vào mỗi đầu vào. Thuộc tính

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$human = intval($_POST['human']);

7 được sử dụng để liên kết nhãn với tên đầu vào. Trong ví dụ của chúng tôi ở trên, chúng tôi đặt nhãn tên của mình thành

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$human = intval($_POST['human']);

8 Điều này sau đó sẽ liên kết nhãn với loại đầu vào có

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$human = intval($_POST['human']);

9 Nếu bạn nhấp vào nhãn “Email”, hãy lưu ý rằng con trỏ của bạn bây giờ sẽ được kích hoạt trên đầu vào email

<Đầu vào>

Bây giờ chúng tôi có nhãn của mình, chúng tôi cần khai báo đầu vào của mình

Kiểu đầu vào. Có một số loại đầu vào khác nhau và điều quan trọng là phải chỉ định đúng loại, đặc biệt là khi nói đến thiết bị di động. Nếu chúng tôi chọn loại đầu vào “email”, bàn phím email sẽ được hiển thị trên thiết bị di động. Nếu chúng tôi chọn loại đầu vào “tel”, người dùng di động sẽ có thể nhấp vào số điện thoại và thực hiện cuộc gọi ngay tại chỗ

Trong biểu mẫu liên hệ của chúng tôi, chúng tôi đã sử dụng các loại văn bản đầu vào, email và gửi. Lưu ý rằng vùng văn bản không phải là một loại đầu vào mà là thẻ HTML của chính nó. Cũng lưu ý rằng bạn có thể chỉ định tổng số hàng mà bạn muốn vùng văn bản chiếm theo mặc định. Trong ví dụ của chúng tôi, chúng tôi đã sử dụng 4 hàng

Nhận dạng. Thuộc tính id cho phép bạn cung cấp một danh tính duy nhất cho phần tử HTML của mình. Như chúng ta vừa thảo luận, điều này rất hữu ích khi liên kết nhãn với đầu vào của bạn

Tên. Thuộc tính tên được sử dụng để tham chiếu các phần tử trong JavaScript hoặc để tham chiếu dữ liệu biểu mẫu sau khi biểu mẫu được gửi. Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng tên kết hợp với mã PHP của chúng tôi

Trình giữ chỗ. Trình giữ chỗ cho phép bạn hiển thị văn bản bên trong các đầu vào biểu mẫu, chủ yếu để có thêm hướng dẫn. Lưu ý rằng ngay khi người dùng bắt đầu nhập vào biểu mẫu đầu vào, văn bản giữ chỗ sẽ biến mất

Giá trị. Thuộc tính giá trị khác nhau tùy thuộc vào loại đầu vào. Trong trường hợp nhập văn bản của chúng tôi, giá trị được sử dụng để xác định giá trị đầu vào ban đầu của biểu mẫu. Bây giờ chúng tôi để trống phần này nhưng chúng tôi sẽ giới thiệu mã PHP. Bạn sẽ thấy tại sao sau này

Trong trường hợp nút, thuộc tính giá trị được sử dụng để hiển thị văn bản nút

Điều đó gần như bao gồm tất cả các đánh dấu HTML mà chúng ta cần để bắt đầu. Trước khi chúng tôi bắt đầu thêm PHP của mình, hãy xem qua các lớp Bootstrap mà chúng tôi đã đưa vào đánh dấu của mình

Các lớp Bootstrap

Như bạn có thể thấy, Bootstrap giúp tạo kiểu cho một biểu mẫu cực kỳ dễ dàng với công việc tối thiểu. Chúng ta chỉ cần khai báo một vài lớp để lấy các kiểu cần thiết

First, we give our

tag a class of

$from = 'Demo Contact Form'; 
$to = '[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

for each input area with with a class of

$from = 'Demo Contact Form'; 
$to = '[email protected]'; 
$subject = 'Message from Contact Demo ';

$body = "From: $name\n E-Mail: $email\n Message:\n $message";

Đố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";

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

Sử dụng PHP để lưu trữ các giá trị ban đầu

Như chúng tôi đã đề cập ở đầu hướng dẫn, thuộc tính giá trị của các trường văn bản của chúng tôi được sử dụng để đặt giá trị ban đầu. Nếu không có giá trị nào được đặt, biểu mẫu sẽ trống mỗi khi chúng tôi gửi biểu mẫu. Điều này tạo ra sự cố nếu chúng tôi gửi biểu mẫu có lỗi vì ngay cả những trường được điền chính xác cũng sẽ được đặt lại thành trống. Điều này trở nên rất khó chịu nếu chúng tôi gửi biểu mẫu bị lỗi và chúng tôi phải nhập lại tất cả thông tin của mình

May mắn thay, chúng ta có thể sử dụng PHP để lưu trữ các giá trị ban đầu. Khi làm như vậy, các đầu vào biểu mẫu sẽ không được đặt lại nếu biểu mẫu được gửi có lỗi. Thay vào đó, nó đặt giá trị ban đầu thành bất kỳ văn bản nào mà người dùng đã nhập trước khi gửi biểu mẫu

Điều này được thực hiện bằng cách sử dụng đoạn mã sau

value="<?php echo htmlspecialchars($_POST['name']); ?>">

Đây là mã giống như chúng tôi đã sử dụng để khai báo biến

$from = 'Demo Contact Form'; 
$to = '[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']);

Nế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']);

Mã 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']);

Mã 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']);

Tả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