HTML CSS JavaScript jQuery PHP MySQL

How to Create a Contact Page with PHP

Updated on by David Adams

How to Create a Contact Page with PHP

For this tutorial, we'll be creating a contact us page, a contact us page is what your clients will use to contact you. We'll be using PHP, you'll also need a working mail server. If you don't have one installed on your server emails will not be sent to your inbox, we recommend Postfix if you're running Linux.


Creating the Form Design

Let's create a basic form design our clients can use to send emails, create a file called: contact.php.

To create a form we can use HTML, below is a basic form:

<form class="contact" method="post" action="contact.php">
	<input type="email" name="email" placeholder="Your Email Address" required>
	<input type="text" name="name" placeholder="Your Name" required>
	<input type="text" name="subject" placeholder="Subject" required>
	<textarea name="msg" placeholder="What would you like to contact us about?" required></textarea>
	<input type="submit">
</form>

With the form above, when the client submits the form the data will be sent to our PHP script using POST request.

We can now add some style to our form with CSS:

input,textarea,select {
	outline:0;
	font-family: Tahoma, Geneva, sans-serif;
}
.contact input[type="text"], .contact input[type="email"] {
	display: block;
	margin-top: 15px;
	padding: 15px;
	border: 1px solid #dfe0e0;
	width: 500px;
}
.contact input[type="text"]:focus, .contact input[type="email"]:focus {
	border: 1px solid #c6c7c7;
}
.contact textarea {
	resize: none;
	margin-top: 15px;
	padding: 15px;
	border: 1px solid #dfe0e0;
	width: 700px;
	height: 200px;
}
.contact textarea:focus {
	border: 1px solid #c6c7c7;
}
.contact input[type="submit"] {
	display: block;
	margin-top: 15px;
	padding: 15px;
	border: 0;
	background-color: #518acb;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	width: 150px;
}
.contact input[type="submit"]:hover {
	background-color: #3670b3;
}

If we load up the contact.php file we should see something like this:

Contact Us Form Design

Sending Contact Form Data with PHP

What we need to do now is to write a script that will send the form data directly to an email, this would be your contact email for your website.

$response = '';
if (isset($_POST['email'], $_POST['subject'], $_POST['name'], $_POST['msg'])) {
	if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
		$response = 'Email is not valid!';
	} else if (empty($_POST['email']) || empty($_POST['subject']) || empty($_POST['name']) || empty($_POST['msg'])) {
		$response = 'Please complete all fields!';
	} else {
		$to      = 'contact@example.com';
		$from    = $_POST['email'];
		$subject = $_POST['subject'];
		$message = $_POST['msg'];
		$headers = 'From: ' . $_POST['email'] . "\r\n" . 'Reply-To: ' . $_POST['email'] . "\r\n" . 'X-Mailer: PHP/' . phpversion();
		mail($to, $subject, $message, $headers);
		$response = 'Message sent!';		
	}
}

The first thing that happens here is our script will check if all fields are sent, it will then check if the email is valid and check to make sure none of the fields are empty.

If everything worked out correctly it will send an email, remember to set the $to variable to your contact email.

We can now display the response:

echo $response;

Full Source

<?php
$response = '';
if (isset($_POST['email'], $_POST['subject'], $_POST['name'], $_POST['msg'])) {
	if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
		$response = 'Email is not valid!';
	} else if (empty($_POST['email']) || empty($_POST['subject']) || empty($_POST['name']) || empty($_POST['msg'])) {
		$response = 'Please complete all fields!';
	} else {
		$to      = 'contact@example.com';
		$from    = $_POST['email'];
		$subject = $_POST['subject'];
		$message = $_POST['msg'];
		$headers = 'From: ' . $_POST['email'] . "\r\n" . 'Reply-To: ' . $_POST['email'] . "\r\n" . 'X-Mailer: PHP/' . phpversion();
		mail($to, $subject, $message, $headers);
		$response = 'Message sent!';		
	}
}
?>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1">
		<title>Contact Us</title>
		<style>
		html {
			background-color:#F8F9F9;
			padding:30px;
		}
		input,textarea,select,p {
			outline:0;
			font-family: Tahoma, Geneva, sans-serif;
		}
		.contact input[type="text"], .contact input[type="email"] {
			display: block;
			margin-top: 15px;
			padding: 15px;
			border: 1px solid #dfe0e0;
			width: 500px;
		}
		.contact input[type="text"]:focus, .contact input[type="email"]:focus {
			border: 1px solid #c6c7c7;
		}
		.contact textarea {
			resize: none;
			margin-top: 15px;
			padding: 15px;
			border: 1px solid #dfe0e0;
			width: 700px;
			height: 200px;
		}
		.contact textarea:focus {
			border: 1px solid #c6c7c7;
		}
		.contact input[type="submit"] {
			display: block;
			margin-top: 15px;
			padding: 15px;
			border: 0;
			background-color: #518acb;
			font-weight: bold;
			color: #fff;
			cursor: pointer;
			width: 150px;
		}
		.contact input[type="submit"]:hover {
			background-color: #3670b3;
		}
		</style>
	</head>
	<body>
		<form class="contact" method="post" action="contact.php">
			<input type="email" name="email" placeholder="Your Email Address" required>
			<input type="text" name="name" placeholder="Your Name" required>
			<input type="text" name="subject" placeholder="Subject" required>
			<textarea name="msg" placeholder="What would you like to contact us about?" required></textarea>
			<input type="submit">
		</form>
		<?php if ($response): ?>
		<p><?php echo $response; ?></p>
		<?php endif; ?>
	</body>
</html>

Conclusion

That's basically all you need to do to create a contact us page, it's very easy and doesn't require you to write much code, PHP's built-in mail function makes it so simple to do.

If submitted emails are not being sent to your contact inbox remember to check your mail server. If your computer or server is not running a mail server emails will not be sent.

Remember to follow, share, and like our article if you find it useful.

Enjoy Coding!