Creating Contact Forms That Work

19 May 2014

Penned by Lysianthus

A contact form is an important thing to have in a website. It allows a user to personally contact and get in touch with a website owner.

However, not everyone knows how to create a contact form. Because of this, website owners often resort to third party applications and scripts to serve as or help them make contact forms. These third-party scripts often come with advertisements and unnecessary processes, such as waiting and loading more than two pages before an e-mail can be successfully sent. This is inefficient and induces bad user experience, as sending a contact form should be simply done with nothing more than one click.

In this tutorial, I will teach you how to create a working contact form.

Skill Requirements

For you to completely understand this tutorial, you need the following skills:

basic HTML
basic PHP

Tutorial Part 1: The Contact Form

First, create a file where the contact form will be displayed. This is where the user will input all the information asked in the contact form. For this tutorial, we will create a file named index.html.

index.html

<!DOCTYPE html>
<html>
 
<head>
    <title>Contact</title>
</head>
 
<body>
    <form method="post" action="contact.php">
        <p><label for="name">Name</label></p>
        <p><input id="name" name="name" type="text" /></p>
        <p><label for="email">E-mail Address</label></p>
        <p><input id="email" name="email" type="email" /></p>
        <p><label for="url">Website URL</label></p>
        <p><input id="url" name="url" type="url" /></p>
        <p><label for="message">Message</label></p>
        <p><textarea id="message" name="message"></textarea></p>
        <p><button name="submit" type="submit">Submit</button></p>
    </form>
</body>
 
</html>

In the code, we enclose the table in a form element. This is important as this indicates that what is inside it is a form. As noticed in line 9, the element has attributes. The method="post" indicates that the method for the submission will be $_POST—it will be more useful later on—and action="contact.php" indicates that the information inputted on this form will be sent to contact.php.

Also notice that each input element (i.e., input and textarea) has a name attribute. This is also important since it names the content inputted to the element, and it will help in identifying and differentiating the inputted values. Remember that the name for each element must be unique.

Tutorial Part 2: Organizing the Information

Next, create a file where the information from the contact form will be received, organized, and sent to a recipient (you). Since this is a contact form, we will name it contact.php in this tutorial.

contact.php

<!DOCTYPE html>
<html>

<head>
    <title>Contact</title>
</head>

<body>
<?php
    if (isset($_POST[’submit'])) {
        /* the contact form information */
        $name = $_POST['name'];
        $email = $_POST['email'];
        $url = $_POST['url'];
        $message = $_POST['message'];

        /* the mail */
        $to = '[email protected]'; // the recipient
        $subject = 'Insert subject here'; // the subject line
        $body = "Name: $name\nE-mail Address: $email\nWebsite URL: $url\n\nMessage: $message"; // the formatted content of the e-mail
        $header = "From: $name <$email>";

        /* sending... */
        mail($to, $subject, $body, $header);
?>
    <p>The message was sent successfully!</p>
<?php
    } else {
?>
    <p>Oops! Something went wrong. Try again!</p>
<?php
    }
?>
</body>

</html>

Line 10 means that if the element with the name ‘submit’ has been set (if the user pressed submit), the codes from line 10 to 24 will be executed.

Lines 12 to 15 are the codes that will fetch the information from the contact form. In line 12, the value of variable $name will become the value inputted to the input element which has the name ‘name’ in the contact form. For example, if the user wrote ‘Lysianthus’ on ‘Name:’ in the contact form, then $name = 'Lysianthus'. The same applies to the other variables.

For example, if I submit the following information through the contact form:

Name: Lysianthus
E-mail Address: [email protected]
Website URL: http://affeli.us
Message: Hi! How are you?

Then, with the received information, the code will secretly become like this:

$name = 'Lysianthus'
$email = '[email protected]'
$url = 'http://affeli.us'
$message = 'Hi! How are you?'

Lines 18 to 21 are the codes that will organize the information into an e-mail. You can edit the lines as you require.

An example output of $body given the code is this (this is how the e-mail will look like):

Name: Lysianthus
E-mail Address: [email protected]
Website URL: http://affeli.us

Message: Hi! How are you?

Finally, line 24 will send the e-mail to the given recipient. And using the power of the if-else statement, the appropriate sentence is displayed when a message has been sent successfully and when it’s not.

Done!

The heading says everything. That’s it! You have successfully learned how to code your own contact form.

If you have questions and clarifications, you can leave a comment on this article so I can answer them.

Download contact-form.zip

Writings Tutorials