How to create a contact form in HTML

How to create a contact form in HTML

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



Below is the HTML code of the contact form

<form action="contact.php" method="post">
    Your name<br>
    <input type="text" name="cf_name"><br>
    Your e-mail<br>
    <input type="text" name="cf_email"><br>
    <textarea name="cf_message"><br>
    <input type="submit" value="Send">
    <input type="reset" value="Clear">

And this is how it will look in the browser


Let’s have a quick look at some main aspects of it. The


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


Now for the contact.php file that will actually grab the data from the fields, compose into a message and send to your email.

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_to = '';

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_emailrn";
$headers .= "Reply-To: $cf_emailrn";

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.
        window.location = 'contact_page.html';

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');
        // Redirect to some page of the site. You can also specify full URL, e.g.
        window.location = 'contact_page.html';


Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.