Making Web Forms

Knowing how to add a web form to a website is an essential skill for a web designer. Fortunately, making web forms is very routine and not difficult to do. The main focus of web design is about the design, layout and graphics but a web form requires some functionality and a little bit of understanding of how the “plumbing” works.

Making Web Forms

Making Web Forms

When a user fills out a web form and clicks the “Submit” button, the request must be processed. The form submission must be sent by email to the website owner and the user’s browser should load a response page indicating that the form was successfully processed and that someone will be in touch.

Making web forms doesn’t have to be complicated or expensive. It basically requires a few things:

  1. It requires a web authoring application or an online application to create the HTML form
  2. It also requires a script that will be used as the form handler, and
  3. It sometimes requires a means to check the data entry for accuracy

All-in-One Solutions vs Individual Applications

There are a lot of available software applications for making web forms. Sorting through them can be a challenge without a clear idea of a workable and practical way to go about the job. The available options tend to break down into a few choices:

  1. There are “all in one” software applications that can make every aspect of a web form. This includes the design and layout of the form (making all the form elements – the input fields, checkboxes, drop-down menus, etc.), data validation (controlling the quality of the input), security (using a captcha) plus the script that processes the form (the form handler).
  2. There are third-party online providers that will host your web form or do the processing of the form submissions. In this case, the form can be designed online and although the form HTML may be hosted on your website, the form processing would be done by the third-party provider.
  3. Then there are individual applications that a web designer would use to make the different parts of a web form. For example, one software application would be used for the design and layout of the form, a different application would be employed for putting together the data validation and another application would be used to generate the script to make the captcha and process the form submissions.

As for choice number 1, we believe that a single application can be too complex. The trouble is that by putting all of these features into a single application it becomes too complicated for the most part and they are usually unable to do the individual tasks as well as if they were done by separate applications.

We don’t like choice number 2, either. Even though it can be convenient to make the form online, we don’t like the idea of using a third-party to process the submissions.

We believe it is best to use choice number 3 from the above list. We would rather host the form processing scripts ourselves because we can maintain better control that way. Besides, the online design tool may not be as flexible as we would like it to be.

Points to Consider When Making a Web Form

You can save a lot of time by using an assortment of different software applications along with a workflow that covers the basics. When making a web form, you are mainly concerned with:

  • The form design – The look and feel of the form has to be attractive and inviting to make the user want to fill it out.
  • The form handler script – The form handler script (or form processing script) is a program that processes the form and sends the submission results to the form owner by email.
  • Data validation – You want to make sure that users fill out the form correctly so you get complete and accurate data. Data validation can either be done server-side within the form processing script or it can be done client-side using JavaScript within the HTML page containing the form.
  • Security – You don’t want a bunch of spammers and bots sending you bogus form submissions. You handle this with a captcha feature that forces the user (a human) to pass a simple test. They are presented with an image with some text that they have to enter in a text box before they hit the “Submit” button.

The form design and layout is best handled by a good web authoring tool. It stands to reason that you would want to layout the web form with the web design tool you are most accustomed to and do the rest of the functions with different software.

As far as the form processing and the data validation goes, we prefer to do these separately. We like to use script generation software that loads the HTML form and then generates the form handler script and we like to use JavaScript for the data validation. Free JavaScript is available for this purpose and it can easily be added to an HTML form.

Web Forms Work Flow

Below is an illustration of the workflow we use for making web forms:

Web Forms Workflow

Web Forms Workflow

Web designers need an easy solution. We have looked at a lot of applications and we have concluded that it is better to obtain different software for the individual tasks. The workflow is pretty simple:

  1. Build the HTML form using any web design software application. This way you can design the web form with a web design tool that you are most familiar with.
  2. Generate the form handler script with an application that loads the form and then generates the script used to process the form submissions and email them to the owner. This application writes the code for the form handler and the captcha used for security.
  3. Use simple JavaScript for the data validation and manually add it to the HTML form afterwards. Even though form script generation software described in #2 above may be able to add data validation to the various form elements, we prefer to do it manually because it is generally a lot more flexible and easier to make it exactly like we want it.

Making the Web Form HTML

Most web designers rely on their web authoring software to layout the web form. Even as far back as 1997 when the version 4 browsers first came out, I remember seeing form creation capability in FrontPage Express, which was included free with Microsoft Internet Explorer 4.

The available software options for web authoring range all the way from expensive to fairly affordable to free. Although it might be reasonable for a professional web design studio to use an expensive application, the more infrequent or casual user would do better with a cheaper alternative or even free, open source software. Please check our article on web authoring software for suggestions.

Free Online Form Layout

There is a free form layout tool called “pForm” that is available to quickly and easily create an HTML web form online.

pForm - Free online web form builder

pForm – Free online web form builder

The generated HTML and CSS can be customized to your liking and you can add data validation the same way most JavaScript can be incorporated into any HTML page.

The Form Handler Script

It is important to be able to host the form handler script on the same hosting account where the web form is being hosted. You could use a general formmail script or you could use web form script generation software as described below.

The script needs to be written in a server-side scripting language that is supported by the web host. Websites that are hosted on a Unix/Linux server will normally run scripts written in PHP (PHP: Hypertext Preprocessor) or Perl (the scripting language for CGI – Common Gateway Interface). Websites that are hosted on a Microsoft Windows server will normally run scripts written in ASP (Active Server Pages).

Originally, we were using a general Perl formmail script for all of our web forms. These Perl scripts had problems. First, there was the problem of security. The first formmail scripts had no means to hide the form owner’s email address from spam bots. The form owner’s email address was coded right into the HTML and was available for the whole public to see.

The next generation of Perl formmail scripts were a little more secure but they weren’t winning the arms race with spammers. They would hide the form owner’s email address but were unable to prevent automated submissions because there was no captcha included with them. The form owner’s email box was full of bogus web form submissions, so there was no easy way to sort out the good ones from the bad ones.

PHP Form Wizard

About 7 years ago we found a program called PHP Form Wizard that solved a couple of these problems. It was a Windows-only program that created custom PHP scripts for web forms.

PHP Form Wizard

PHP Form Wizard

PHP Form Wizard was a good program in its time but it had a couple of limitations. First, it was a Windows-only application – not much help for Macintosh users. Second, it would only generate PHP scripts. If you did everything in PHP, that was okay, but not everyone works in PHP.

PHP Form Wizard Data Validation

Adding data validation with PHP Form Wizard

Below is a screenshot of the PHP code generated by PHP Form Wizard. The generated code appears to be solid and reliable. We have not experienced any problems with it.

Generated PHP code from PHP Form Wizard

Generated PHP code from PHP Form Wizard

PHP Form Wizard also didn’t include support for captcha when we bought it. At that time you had to buy a separate add-on script called “PHP Form Captcha” from the same publisher. We are not sure whether or not the captcha is bundled with the program nowadays. PHP Form Wizard is still available for Windows users from cnet.com.

Forms To Go

A similar application with more features is available for both Macintosh and Windows platforms. The name of the software is “Forms To Go” and it is available from Bebosoft.com. The software has been around since April of 2003. It has many features, is available for a reasonable price and will generate scripts in PHP, Perl and ASP. They even offer a Lite version free of charge which has most of the features of the paid version except for the built-in captcha. The Lite version does, however, offer support for ReCaptcha, which is available at no charge (as of this writing).

Forms To Go

Forms To Go

Forms To Go is very straightforward and easy to use. Simply drag and drop an HTML form onto the opening screen to start the process. The program will detect all the form elements and present the user with the next screen, where data validation can be added where desired. The screenshot below lists all the field names. Clicking on the “Validation” column opens a dialog for configuring the validation rules.

Data validation with Forms To Go

Adding data validation with Forms To Go

You will have to enter the email address where the form submissions will be sent and the subject of the email and then generate the script. That’s all that is required. Optionally, you can configure a response page for successful submissions, an error page as well as many other options. The program is very complete. Shown below is a screenshot of the PHP code generated by Forms To Go.

Generated PHP code from Forms To Go

Generated PHP code from Forms To Go

We like Forms To Go and plan to use it a lot. It is sure to become one of our most often used tools. We believe having a separate software application to generate the form processing script is a good way to go.

Data Validation

Sometimes the data that the user enters when filling out the form has to be checked for validity. This can either be done server-side as part of the form processing script or it can be done client-side with JavaScript inside the same HTML page that contains the form. We prefer to do it client-side with JavaScript because it is more flexible with the tools we like to use.

If you decide to add the data validation manually with JavaScript then it would be done as a final step after making the HTML form and after generating the form processing script. The validation JavaScript is available free of charge from javascript-coder.com. This software publisher has been around for years. They have a general script for web form data validation which can be downloaded from their website. The latest version as of this writing is gen_validatorv4.js (we have also used previous versions – gen_validatorv2.js and gen_validatorv3.js). Their website has many examples and instructions on how to setup the data validation in your HTML web form.

Adding Validation JavaScript to the HTML Form

Adding the form validation JavaScript to the HTML is very straightforward. The documentation at the Javascriptcoder.com website gives the full details but here is a short synopsis. First, place a line in the <head> section of the HTML page that loads the gen_validatorv4.js JavaScript file:

Load the JavaScript file in the HTML head.

Load the gen_validatorv4.js JavaScript file in the HTML head.

Second, make sure that you give a name to the form in the <form> tag. Please note in the screenshot below that the <form> tag uses the “name” attribute. In this case the name=”form”.

Give the form a name

Give the form a name.

Third, after the </form> closing tag and before the </body> closing tag add some Javascript between and opening <script> tag and closing </script> tag with all the validation rules:

Validation JavaScript before closing body tag.

Validation JavaScript before closing body tag.

This is the simplest way to do it. Data entry errors can be displayed in alert boxes or as on-page alerts using CSS, either in a single location or next to the individual fields.

We hope you like this article and ask that you share it with friends with the “share” buttons below.


Check out on Google+