HTML5 Responsive Form Generator

Create HTML5 responsive forms that you can embed into your website with the HTML5 responsive form generator. If you need to post the contents of your form via email, you can also generate all the PHP you need as well.
  • Easy-to-use interface
  • Full HTML & CSS code generation
  • Generate PHP email script
  • Live preview
  • Save your code
  • Access to templates
HTML5 Responsive Form Generator

GigaBook Web Developer Tools

What's new in HTML5 forms?

HTML5 offers a selection of new form types and attributes that can help improve the user experience and automate validation in accordance with the different element being used. Let's take a look at what's new...

New HTML5 form input types

This is a comprehensive list of the new form input types that you can use with a short explanation:

  • color - popup colour selection
  • date - popup date selection
  • datetime - select date and time with the timezone
  • datetime-local - select date and time without the timezone
  • email - requires input to be a valid email address
  • month - select the month and year
  • number - requires numerical value, min and max values can also be defined
  • range - displayed as a slider with mix and max values defined
  • search - input field that behaves like a search
  • tel - valid telephone number required
  • time - special time formatting
  • url - requires valid url (with http prepended)
  • week - select week and year

You can see an example of each of these on the W3Schools website.

Community Templates

The HTML5 responsive form generator features an array of templates that have been created by the community, including a contact form complete with PHP code generation. Just click to load them to save yourself some time.

Features and Settings

Setup Form

The form setup options allows you to define the key sections of the form such as the heading (h1 tag), sections (h2 tags) and some introduction text for your form. To edit the sections after you've added them, simply hover over the title in the preview, and click the edit or delete options that popup.

The post to option defines which file you want the form to post data to, this may be the same file as you'll be storing the form in, or a seperate processing file.

Add Fields

Next you can add all your fields. All standard form types are available, as well as all new HTML5 field types as well. By choosing a field type the options available will automatically update, the only required field for each option is the 'id'.

To edit a field once you've saved it, simply hover over the field in the preview, and an edit or delete option will popup. Clicking this will reload the options into the add field section. You can re-order fields within the same section by dragging and dropping.

Design Form

This section allows you to apply some styling to your form including colours, width, fonts, margin and padding.

Field Styling

Field styling allows you to adjust the spacing, borders and colours of your input fields.

Text Styling

Change the styling of the page headers, intro text and labels.

Advanced Options

If you are familiar with some of the more advanced form attributes you can define these here. Advanced attributes include:

  • Method - 'post' or 'get'. Defines if your data is sent as variables in the url (get), or posted (default).
  • Target - by default the data will be posted in the same window, however you can post to a specific window or iframe by defining this attribute.
  • Enctype - by default this will be 'application', however you can set this to 'multi-type' if you wish to post files, or use 'text/plain' where spaces are converted to '+' symbols.
  • Charset - the character encoding of the data posted, defaults to UTF-8.
  • Autocomplete - if you want the fields in your form to provide suggestions based on previous user input.
  • Don't Validate - switch of HTML5 form validation.

HTML & CSS

This section will generate all the HTML and CSS you need to embed into your website. The HTML can be copied directly into your HTML / PHP files, the CSS should be placed in your .css file, or within the 'style' tags in the header of your page.

If you have a premium account you can save your form so that you can come back and edit it later.

PHP

If you want to send the contents of your form via email, then use the 'Email script' setting tab to define if PHP code should be generated, and which fields to use for the from address and email subject.

Sign up now for your free trial

Join Coveloping membership from $4.99 a month and get your first month free, cancel at any time


Start Now

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...

Code Copied!