How to create an HTML5 responsive contact form with a PHP email script

In this article we'll be looking at how you can create an HTML5, responsive contact form to use in your web site. This tutorial also includes the PHP code required if you want to send the contents of your form via email. If you're running a WordPress site, you might want to check out an earlier article, how to create a contact form for WordPress without using a plugin.

In this tutorial we'll be creating a contact form with the following fields, which will post to a PHP script that will email you the contents:

  • First Name
  • Second Name
  • Email
  • Telephone
  • Enquiry Category
  • Message
  • Submission
contact-form

HTML5 Responsive Form Generator

To save some time, members can use the Coveloping HTML5 Responsive Form Generator, which has all the HTML5 fields and new attributes available for you to use. The predefined templates will save you some time and are customisable to fit the branding for your site. If you don't have Coveloping membership, you can use the example code below that we generated for you.

Form Markup and Styling

Firstly we're going to build up our form fields. With HTML5 there's a range of specific fields you can use to improve usability, such as email, which will validate an address, so we'll take advantage of these.

HTML5 Form fields

Let's take a quick look at the field additions to HTML5:

  • color - colour picker
  • date - date picker
  • datetime - select date and time with timezone
  • datetime-local - select date and time without timezone
  • email - validate an email address
  • month - select month and year
  • number - requires numerical value, min and max values can be defined
  • range - displayed as a slider with mix and max values defined
  • search - input field that behaves as a search
  • tel - requires valid telephone number
  • time - special formatting for time input
  • url - requires valid url with http prepended
  • week - select week and year

Using the form generator you can add and edit any of these field types, for our contact form we're going to use standard text fields, an email field, a tel field and a textarea for the message box. The HTML markup is available below.

HTML5 Markup

Create a file called contact.php and add the following form.

<form id="form" class="form" name="form" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8">
    <h1>Get in touch</h1>
    <div class="form-content">
        <div class="intro"><p>Use the form below to get in touch!</p></div>
        <div id="section0">
        </div>
        <h2 class="section">Your Details</h2>
        <div id="section1">
            <div class="field"><label for="FirstName">First Name</label><input type="text" id="FirstName" name="FirstName" required></div>
            <div class="field"><label for="SecondName">Second Name</label><input type="text" id="SecondName" name="SecondName" required></div>
            <div class="field"><label for="Email">Email</label><input type="email" id="Email" name="Email" required></div>
            <div class="field"><label for="Telephone">Telephone</label><input type="tel" id="Telephone" name="Telephone"></div>
        </div>
        <h2 class="section">Message</h2>
        <div id="section2">
            <div class="field"><label for="About">About</label><select id="About" name="About"><option value="general">General Enquiry</option><option value="service">Services</option><option value="product">Products</option></select></div>
            <div class="field"><textarea id="message" wrap="hard" required></textarea></div>
            <div class="field"><input type="submit" id="SubmitForm"></div>
        </div>
    </div>
</form>
<link href="http://fonts.googleapis.com/css?family=Roboto" id="google-font-selector" rel="stylesheet" type="text/css">

Notice in the above form we've ignored the action attribute so the form will post to itself, you can define this if you wish to place your PHP logic in a separate file.

CSS Styling

The CSS uses percentages so that it will responsively scale down for different screen sizes. Add the following file to your CSS style sheet, or wrap it inside style tags inside your header.

.form{ 
    max-width: 90%; 
    min-width: 25%; 
    border-width: 2px; 
    border-color: #B4C9D6; 
    border-radius: 4px; 
    border-style: solid; 
    color: #3A5261; 
    font-size: 14px; 
    margin: 0px; 
    background-color: #FFFFFF; 
    padding: 40px; 
} 
.form-content{ 
    margin: 0px; 
} 
.form label{ 
    color: #222222; 
    font-size: 14px; 
    display: block; 
} 
.form div{ 
    display: block; 
    auto: width; 
} 
.form input, form textarea, form select{ 
    border-width: 1px; 
    border-style: solid; 
    border-color: #6E9BB8; 
    border-radius: 0px; 
    padding: 3px; 
    width: 100%; 
} 
.form input[type=radio], input[type=checkbox]{ 
    margin: 10px; 
    width: 13px; 
} 
.form, .form h1, .form h2{ 
    font-family: 'Roboto', sans-serif;; 
} 
.form h1{ 
    font-size: 40px; 
    color: #3A5261; 
    padding: 0px; 
    margin: 0px; 
    margin-bottom: 10px; 
    border-bottom-style: dotted; 
    border-bottom-color: #CCCCCC; 
    border-bottom-width: 2px; 
    border-radius: 0px; 
    background-color: #FFFFFF; 
} 
.intro{ 
    margin-bottom: 10px; 
} 
.clear{ 
    clear: both; 
} 
.form textarea{ 
    height: 50px; 
    width: 100%; 
} 
.form input[type=submit]{ 
    width: 100%; 
    background-color: #3A5261; 
    color: #CFEAFF; 
} 
.field{ 
    margin-bottom: 15px; 
}

PHP Script for emailing your form

This PHP script will check that any fields marked as required are complete, and then sanitise the input from the user. If the data is good, then it will be emailed to the defined email address using the php mail function.

<?php 
if ($_SERVER['REQUEST_METHOD'] === 'POST'){ 

    if (!isset($_POST['FirstName']) || !isset($_POST['SecondName']) || !isset($_POST['Email'])){ 

        $errors .= 'Please complete all the required fields.'; 
     } 

    if ($_POST['FirstName'] != "") { 
        $_POST['FirstName'] = filter_var($_POST['FirstName'], FILTER_SANITIZE_STRING); 
        if ($_POST['FirstName'] == "") { 
            $errors .= 'First Name is not valid.<br/>'; 
        }
    }
 
    if ($_POST['SecondName'] != "") { 
        $_POST['SecondName'] = filter_var($_POST['SecondName'], FILTER_SANITIZE_STRING); 
        if ($_POST['SecondName'] == "") { 
            $errors .= 'Second Name is not valid.<br/>'; 
        }
    }
 
    if ($_POST['Email'] != "") { 
        $email = filter_var($_POST['Email'], FILTER_SANITIZE_EMAIL); 
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
            $errors .= 'Email is not valid.<br/>'; 
        }
    }
 
    if ($_POST['Telephone'] != "") { 
        $_POST['Telephone'] = filter_var($_POST['Telephone'], FILTER_SANITIZE_STRING); 
        if ($_POST['Telephone'] == "") { 
            $errors .= 'Telephone is not valid.<br/>'; 
        }
    }
 
    if ($_POST['About'] != "") { 
        $_POST['About'] = filter_var($_POST['About'], FILTER_SANITIZE_STRING); 
        if ($_POST['About'] == "") { 
            $errors .= 'About is not valid.<br/>'; 
        }
    }
 
    if(!$errors) { 
        $to = 'you@yoursite.com'; 
        $from = $_POST['Email']; 
        $subject = 'Contact Form Completed'; 
        $content = "
        First Name: " . $_POST['FirstName'] . "
        Second Name: " . $_POST['SecondName'] . "
        Email: " . $_POST['Email'] . "
        Telephone: " . $_POST['Telephone'] . "
        About: " . $_POST['About']; 

        if(mail($to, $subject, $content, 'From:' . $from)){
            echo '<p class="alert alert-success">Thank you for contacting us, your message has been sent.</p>'; 
        } else { 
           echo '<p class="alert alert-danger">There was a problem sending your message</p>'; 
        } 
    } else { 
        echo '<p class="alert alert-danger">' . $errors . '</p>'; 
    }
}
?>

Finally the PHP can either be added to your contact.php file, or to a separate file that you point your action to. Note if you do the latter, you'll need consider how you'll handle the form display if the page errors. Don't forget to modify the to address where you'd like the submissions to be sent.

HTML5 Responsive Form Generator

Like this tool? Check out the Generator and Business ranges.

David Bainbridge

Coveloping co-founder and regular contributor to the Coveloping blog. David is a contract web developer based in Bristol, UK also posting code snippets and tutorials on the Code Synthesis blog.

Coveloping Membership

Access to a range of developer tools, get your first month free

Start Your Free Trial

Don't miss out!

Sign up to our newsletter for the latest news from Coveloping

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Hi! Great resource!
    Is it possible to link an smtp server to the script to send the mails through a mailing service, like Sendgrid?

  • Code Copied!