How to create a contact form in HTML

This tutorial will teach you how to create a very simple contact form for HTML based website template.

First of all create 2 files: contact_form.html and contact.php. The first file will contain HTML code for the form and the second -will process the data from the form

HTML

Below is the HTML code of the contact form

<form action="contact.php" method="post">
	Your name

    <input type="text" name="cf_name">

	Your e-mail

    <input type="text" name="cf_email">

	Message

    <textarea name="cf_message">

	<input type="submit" value="Send">
	<input type="reset" value="Clear">
</form>

And this is how it will look in the browser

Let’s have a quick look at some main aspects of it. The <form> tag should have 2 additional attributes:

action=”contact.php” – this attribute specifies where to send the data from the contact form fields, when it has been submitted

method=”post” – this attribute specifies how to send data from the form to the file specified in the action attribute The <input> and <textarea> tags should have an attribute “name” with a unique identifier. This attribute is used to identify form data after it has been submitted to the server And the 2 input elements that are used as Submit and Clear buttons, one should have type=”submit” assigned to it and the other type=”reset”

That’s basically it. As easy as it looks

PHP

Now for the contact.php file that will actually grab the data from the fields, compose into a message and send to your email. You can download contact.php file from this link. Below is the code of the file with comments to its major sections.

Assigning the data sent from the contact form fields (cf_name, cf_email, cf_message) to php variables ($cf_message, $field_email, $field_message)

$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

$mail_to shall contain the site owner email, this is where the email is sent to. You can specify multiple emails by separating them with a comma (e.g. mail-one@template-help.com, mail-two@template-help.com)

$mail_to = 'test@test-mail.com';

Subject of the email you receive from the contact form

$subject = 'Message from a site visitor ' . $field_name;

Constructing the body of the message

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;

Constructing the headers of the message

$headers = "From: $cf_email\r\n";
$headers .= "Reply-To: $cf_email\r\n";

Defining mail() function and assigning it to a variable $mail_status, which is used below to check whether the mail has been sent or not

$mail_status = mail($mail_to, $subject, $body_message, $headers);

If the mail() function executed successfully then do the code below

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		// Print a message
		alert('Thank you for the message. We will contact you shortly.');
		// Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com
		window.location = 'contact_page.html';
	</script>
<?php
}

If the mail() function fails, then execute the following code

else { ?>
	<script language="javascript" type="text/javascript">
		// Print a message
		alert('Message failed. Please, send an email to gordon@template-help.com');
		// Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com
		window.location = 'contact_page.html';
	</script>
<?php
}?>

You can also download compiled contact_form.html and contact.php files in a single package

 

Proceed to the tutorial on how to add fields to the contact form

If you want to pep up the design of your admin panel, review our Bootstrap Admin Themes.