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...
This is a comprehensive list of the new form input types that you can use with a short explanation:
You can see an example of each of these on the W3Schools website.
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.
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.
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.
This section allows you to apply some styling to your form including colours, width, fonts, margin and padding.
Field styling allows you to adjust the spacing, borders and colours of your input fields.
Change the styling of the page headers, intro text and labels.
If you are familiar with some of the more advanced form attributes you can define these here. Advanced attributes include:
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.
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.
Join Coveloping membership from $4.99 a month and get your first month free, cancel at any time