How to create a con2tact form in HTML

How to create a con2tact 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

How to create a con2tact form in HTML

HTML

Below is the HTML code for the contact form

?
1
2
3
4
5
6
7
8
9
10
<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>
    Message<br>
    <textarea name="cf_message"><br>
    <input type="submit" value="Send">
    <input type="reset" value="Clear">
</form>

And this is how it will look in the browser’shave 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 <input> and <textarea> tags should have an attribute “name” with a unique identifier. This attribute is used to identify from 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 the 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)

?
1
2
3
$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)

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

Subject of the email you receive from the contact form

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

Constructing the body of the message

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

Constructing the headers of the message

?
1
2
$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

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

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

?
1
2
3
4
5
6
7
8
9
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.
https://freelyfatima.com
        window.location = 'contact_page.html';
    </script>
<?php
}

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

?
1
2
3
4
5
6
7
8
9
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.
https://freelyfatima.com
        window.location = 'contact_page.html';
    </script>
<?php
}?>

One Response

Leave a Reply