HTML form template worth starting from: the four things it must get right

Published , updated

Searching for a form template turns up thousands of them and most are the same twenty lines with different class names. The differences that matter are not visual. They are whether the labels are real labels, whether the controls carry names, whether groups are grouped, and whether the thing has any opinion at all about where the submission goes. Those four questions sort the useful templates from the ones you will end up rewriting.

The four things a template must already get right

A label element per control, bound with for and id, and not a placeholder doing the job of one. A name attribute on every control you intend to receive, since a control without a name is silently left out of the submission. A fieldset and legend around each group of radios or checkboxes, so the group has an accessible name. And a method of post on the form, because the default is get and a message does not belong in a URL. A template missing any of these is not saving you work, it is deferring it.

What a template will always be missing

The action attribute. It is the one part nobody else can fill in, because it depends entirely on your hosting: a serverless function, a server of your own, or a hosted endpoint. Templates leave it empty or point it at a placeholder, and a form that posts to an empty action reloads the page it is on and appears to do nothing. If you take one habit from this page, make it checking the action before you call a form finished.

Styling is the easy half, so do not pick on it

It is tempting to choose a template by how it looks, and looks are the part you can change in five minutes with your own CSS. Structure is the part you would have to rewrite. Pick the template with the right elements and restyle it, rather than the pretty one built out of divs with click handlers, which will fight your keyboard users and your own stylesheet at the same time.

Naming, so you can find what you meant

The same thing is written every possible way round, and none of the phrasings means anything different: the phrase order changes and the markup does not. What does differ is the scope you are being offered. Some templates are a whole page including layout and a stylesheet, some are the form element on its own. The form on its own is usually what you want, because your page already has a layout and merging somebody else's is more work than writing the fields.

A template, read line by line

Take the twenty lines a typical template gives you. Line one is the form element: check for method post and an action, and expect the action to be a placeholder. Lines two to four are a text input for the name: a label with a for attribute, an input with a matching id, a name attribute, type text. Lines five to seven are the email address: the same shape with type email. Lines eight to twelve are a group of radios inside a fieldset with a legend, each radio sharing one name and carrying its own id, label and value. Lines thirteen to fifteen are the message as a textarea with its label. Line sixteen is a submit button. Anything else in the file is styling, scripts or the author's branding, and it is the part to read most carefully before it goes into your page.

Templates for the forms that are not contact forms

A registration template adds a password input with autocomplete set to new-password and a consent checkbox that is not pre-ticked. A file upload template adds enctype multipart/form-data to the form element, which is the attribute the template is most likely to omit and the one whose absence fails silently. An order template adds number inputs with min and step and never a hidden price. A survey template is mostly fieldsets. In each case the template's value is the elements and their attributes, the checks above apply unchanged, and the action is still yours to fill in. The guides on this site walk the contact, registration and upload forms in full; the generator writes any of them from a field list.

Questions people ask about html form template

Should a template include CSS?

A little, as a demonstration, and kept separate so you can throw it away. What you do not want is markup whose structure only makes sense with the stylesheet it shipped with, because then you have adopted both.

Are there parts of a template worth keeping even if I restyle everything?

Yes: the element choices, the label bindings, the names, the fieldsets and the input types. That is the whole of the value. Everything visual is yours to replace.

Can I use a template with a framework?

Yes, and the same rules hold. A framework changes how the markup is produced, not what good markup is: labels bound to controls, names on the controls, groups in fieldsets, and an action that points at something able to answer.

Where should the template's action point on a static site?

At an absolute URL that accepts a POST: a serverless function you deploy, a server of your own, or an endpoint service such as Endpointo Pro. A template cannot fill this in because it depends on your hosting, and a template whose action still says hash or a placeholder is a form that reloads its own page and does nothing.

Sources

Related answers

Get an endpoint for this formPoint this form at Endpointo