Form Builder: Compare Hosting

Form Building Software and Hosting

One of the most powerful — and difficult to use — features of HTML is interactive forms. Form controls allow a simple HTML document to become an interactive tool for gathering user data and feedback.

But they can also be tedious to set up and difficult to style. And even if you can manage the front-end design, a form isn’t worth anything if the contents don’t have anywhere to go. Thankfully, there are several tools to help you build and manage beautiful forms.

How HTML forms work

To get the most out of a form-building tool, it is helpful to have a solid understanding of how forms work normally.

A form is a collection of form controls, each one capable of receiving input from a user. There are many different types of form inputs — text input, checkboxes, drop-down selectors, and many others.

When a form is submitted, the values of the various form elements are collated into an HTTP request and sent to whatever URL is specified in the form code. From there, it is up to a server to handle what to do with the data.

An HTTP request is the same type of request that your browser makes when you load a new page. The server that the form data is sent to handles it the same way it handles any other HTTP request — it processes the data it receives and then responds. Often, with HTML forms, the response is a page with a message like “Thank you for filling out this form.”

The target URL of the form, where the form data is sent, is defined in the main <form> element. Also defined there is the method, which is either GET or POST. The GET request is used for forms which are requesting information from the server, like search forms — the request is seeking to get some content (this is the type of request you make when you load a new web page). The POST request is used send, or post some information to the server. It should be used whenever the form’s purpose is to collect data from the user.

Here is a simple email subscription form to illustrate some of these details:

<form action="http://example.com/subscribe" method="post">
 <label for="firstName">First Name</label><br>
 <input type="text" name="firstName" id="firstName">
 <br><br>
 <label for="firstName">Last Name</label><br>
 <input type="text" name="lastName" id="lastName">
 <br><br>
 <label for="email">Email</label><br>
 <input type="email" name="email" id="email">
 <input type="submit" value="Subscribe">
</form>

This starts to give you an idea of why a form building tool can be helpful.

• three simple fields required writing 11 lines of code
• each input requires several, seemingly duplicated, attribute values

If you have a complicated form — lots of fields, or more complex data-entry controllers — this can become both difficult and extremely tedious.

Styling Forms

The default display of form elements in most browsers is extremely unattractive. Besides the general “battleship gray” of buttons and drop-down UI, there are typically serious problems with alignment, line height, and spacing.

This causes two problems:

• Many of the form elements look bad individually.
  • For example — Radio Buttons and Check Boxes do not usually align properly with their own labels.
• Form elements do not look good together.
  • For example — an <input type="text"> element and a <select> drop-down on the same line will not line up with each other properly because they are not the same size..

This can be very frustrating.

Some of the problems — like vertical height and spacing, are dealt with in some of the more popular CSS Resets, but not all of them.

If you are going to build a CSS Style Sheet for your project from scratch, be sure to create several detailed example forms, using all of the form elements in a variety of combination. Be especially mindful of multi-column forms.

Because of the difficulties of form styling, using a form builder can often save a lot of trouble.

Handling Forms on the Server

You need to have some server-side script or application to process form input. If you are using a Content Management System, you might have the capacity to set this easily, but if you’ll need some service to provide this for you.

This is another way in which form builder software can help you. Form builders that work like plugins to WordPress of Drupal will connect directly to your existing system and integrate your collected data into your database. On the other hand, standalone form building systems will save your collected form data into an account where you can view it. They will often email form responses to you as they come in.

Form Builders

Standalone Form Builders

• Jotforms
• Google Docs Forms
• PHP Form Generator

WordPress From Builder Plugins

• FormBuilder
• Contact Form 7
• Gravity Forms