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

HTML contact form

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”

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. 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
}?>