Build an HTML5 responsive contact form

In this tutorial we'll be using the latest HTML5 form attributes with modern CSS responsive techniques to create a flexible, cross-platform contact form. Here's a preview of what we'll be creating:

 

What's new in HTML5?

HTML5 has brought with it a whole range of new attributes and input types that improve validation and the functionality that is available. So before we get started with the code, let's take a look at what's on offer...

New HTML5 form attributes

There's two new attributes that can be applied directly to the form tag in HTML5:

  • autocomplete - defines if the fields should autocomplete based on previous user input
  • novalidate - defines if the form fields should be valid before submission

As both of these default to true, we won't be using them in the code example to follow. 

New HTML5 input types

There are several new input types that are great for automatically validating certain data types (e.g. emails):

  • color - popup colour selector
  • date - popup date selection
  • datetime - select data and time with timezone
  • datetime-local - select date and time without timezone
  • email - requires input to be a valid 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

In this article we'll be using the tel, email and url input fields in our contact form.

New HTML5 input attributes

There are also new attributes that can be applied to one or several of the input types:

  • autocomplete - should the individual field autocomplete
  • autofocus - if the input should get focus on page load
  • form - specifies which form an element belows to if located outside of the form tags
  • formaction - specifies a file that will process the input on submission
  • formenctype - data encoding on form submission (e.g. for files or plaintext)
  • formmethod - 'post' or 'get' applied to submit or image types
  • formnovalidate - override the form 'novalidate' attribute
  • formtarget - where to return the post response (e.g. new window or iframe)
  • height and width - size of inputs
  • list - input element with options pre-populated
  • min and max - restrict the valid data input to higher and lower integers
  • multiple - allow multiple values (for email and file fields)
  • pattern - apply a regulat expression that the field must match to be valid 
  • placeholder - background text shown inside the input
  • required - field must be completed to submit form
  • step - set an interval of numbers that will be accepted

Building an HTML5 Responsive Form

So let's get started, we'll begin with the HTML markup:

HTML

To start with, lets create the basic form structure that posts to a 'process.php' file. Leave this as a slash if you want to post back to the same page.

<form id="form" action="/process.php" method="post">
    <h2>Get in touch
    <p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx
    <!--fields-->
</form>

For each one of our fields we're going to wrap a division, and provide a label that references that input. Notice how all the 'required' information is wrapped in a span tag so we can style this individually.

<div>
    <label for='name'>Name<span class='required'>(required)</span></label>
    <input type='text' name='name' placeholder='your name here' required />
</div>

<div>
    <label for='tel'>Tel</label>
    <input type='tel' name='tel' placeholder='your telephone here' />
</div>

<div>
    <label for='email'>Email <span class='required'>(required)</span></label>
    <input type='email' name='email' placeholder='you@yourdomain.com' required />
</div>

<div>
    <label for='url'>Website</label>
    <input type='url' name='website' placeholder='http://' />
</div>

<div>
    <label for='message'>Message <span class='required'>(required)</span></label>
    <textarea name='message' required></textarea>
</div>

<div>
    <button type='submit'>Send Message</button>
</div>

CSS

On to the styling...

Apply a max and min width we want the form to have, center it and apply some border and shadow styling:

#form
{
    min-width:300px;
    max-width:600px;
    margin:auto;
    font-family: sans-serif;
    box-shadow: 5px 5px 5px #888888;
    padding:20px;
    border:4px solid #27748A;
}

#form h2
{
    color:#27748A;
    font-size:35px;
    margin:0;
}

#form p
{
    font-size:15px;
    color:#222222;
}

Make all the fields 100% width so they will be responsive to screen size, add spacing to the containing divs and apply some styling to the labels:

#form div
{
    margin-top:10px;
}

#form input, textarea, button
{
    width:100%;
    border:2px solid #9ECEDB;
    padding:3px 5px;
}

#form label
{
    font-weight:bold;
    font-size:12px;
    color:#184552;
}

Apply some styling to the button including a pointer cursor and hover highlight effect:

#form button
{
    background-color: #9ECEDB;
    color: #184552;
    cursor:pointer;
}

#form button:hover
{
    background-color: #CBEAF2;
}

Lastly, add a class for the required text so it's shown in a different colour:

.required
{
    color:#dd6666;
}

Demo

See everything pulled together in the full screen responsive HTML5 contact form demo:

Demo

Free form generator

If you want to have the code automatically generated for you while you play about with the styling, check out this form builder by coveloping.

Form Generator

 

Sign Up

NEXT: Clearing and resetting forms with jQuery

Code snippet for resetting and clearing form elements using jQuery.

comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.