 | ||||||||||
| ||||||||||
Better form builder guideBuilding forms can be a daunting task, but here's how to make forms with ease, in less time, that are more attractive and functional and more secure. | ||||||||||
| FREE web site optimisation evaluation  | But first an overview of what a form is and does. | |||||||||
You may also like to read " how good a form builder are you " Many form processing scripts are based on CGI which stands for Common Gateway Interface which requires that an acknowledgement be returned to the web browser, generally in the form of a thank you page, but it need not be. Some forms are processed directly in the browser with the use of Javascript or other software language, but these forms are generally used for information manipulation like performing calculations. When the form content is sent to a CGI program on your server, it can be sorted, merged, calculated, stored in databases, returned to a web page and included in emails. Most forms just collect information and send it somewhere, but if you don't tell the form what to do with the information, it will do nothing with it. The HTML for a basic form would be something like this:
This HTML code will produce a simple form in a web page:
The form named "feedback" is built within an HTML table and the action when the submit button is clicked on is determined by the "POST" action statement. This statement in this example points to a script called formscript.cgi located in the domain cgi-bin, a host folder specially for running cgi scripts. The form has a hidden field called "requiredfields" which in this case requires the input of the first name and email address. Someone leaving either of these fields blank and clicking on Submit will be prompted by the formscript to enter the required details. But there are many ways a Form Builder can build a better form.
Here are 21 things you can do to be a better form builder 1. Form Builder with an Image Not a Submit Button Instead of a normal form submit button : In the above form you can use an image here's the code: <input type="image" name="Submit" src="submitimg.gif" border="0" height="25" width="165" hspace="5" vspace="10" align="middle"> Replace submitimg.gif with the URL of the image you're using. The border, height, width, hspace, vspace, and align attributes are optional. If used, they effect the image and its position the same as they do when used in an <img... tag; adjust their values as required. The form Submit button would be replaced by your image.
2. Form Builder with Style Forms can be dull, boring things. However, for IE and Netscape 6.1, you can give them a bit of style by specifying the background and text colors of the input fields. It's done with Cascaded Style Sheets or CSS for short: <style type="text/css"> Put the above in the HEAD area of your page. The background of your form's input fields will be yellow and the text in the fields will be blue. Just change the colors to suit yourself. 3. Form Builder Clears Form Field When Clicked An email field might have "Email Here" as it's value so the user knows what information belongs in that field. To make is easier for the user, the "Email Here" can be automatically removed from the form field when the user clicks within it. Like this: <input type="text" name="email" value="Email Here" onFocus="if(this.value=='Email Here'){this.value='';}"> When changing the phrase "Email Here" to one of your choosing make sure to change it in both locations in this line of code. 4. Form Builder Puts the Cursor in a Field When the Page Loads Put this attribute into your <body... tag onLoad="document.feedback.email.focus()"> Replace "feedback" with the name you've assigned to your form as in: <form method="POST" action=http://yourdomain.com/cgi-bin/formscript.cgi name="feedback"> Replace "email" with the name of the form field where you want the cursor to be when the page loads. For example if you want the form cursor to appear in the "firstname" field then in this example you would use <body onLoad="document.feedback.firstname.focus()"> 5. Form Builder with an Online Form Generator A method not often used for creating forms, is an Online Form Generator. Although the forms they create can have limited appearance, they can create quite complex forms with tick boxes, check lists, drop down menus, free form text areas etc. You just enter the required details into the online form and then the form you specified is created for you to use on your own website. 6. Form Builder For Easier, Quicker, More Attractive Forms If you don't want to get into coding of forms in your web pages, there is another solution which means you don't have to worry about HTML. You can also produce a much wider variety of different forms more easily, quicker and more attractive than the basic forms shown so far. You can see and example of a form produced by a Flash Form Builder and discover more about what you can do in : flash form builder 7. Form Builder to Stop Spammers Web Forms send submitted information normally to an email address. If that email address is specified in a form field, even a hidden field, or if the form user can specify the destination of the submitted info, then your form might be used by spammers. If the source code of the web page in which you have the form reveals anything useful to a hacker, your form is vulnerable to being hijacked. The spammer can copy your form, use a program to change the email address every time it is used and submit your form, to your script, on your server, hundreds of times a minute. By using a CGI program with destination email addresses hard coded into the script you make it much more difficult for spammers to hijack your form. In the typical form design that uses a CGI script to process the form, the ability of a hacker to hijack your form is largely determined by the design of the form in the web page and the CGI script you use. Using free form scripts can make your forms vulnerable to hijacking for three reasons.
8. Form Builder Can Do More Than Gather Visitor Details Forms are often just thought of as a way to just gather visitor details, like name, email address, comments, preferences etc. But forms can be designed that make decisions. When I say the form can make decisions, that's not quite true, it's the processing script powering the form that makes the decisions and then presents information back to the visitor in the same form or another form. Suppose we need to collect photographs and information about the photographer. Plus we want to notify several members of a committee that a photograph has been submitted for the contest and verify the email address of the photographer. The information could be collected in this manner: Page one- Collect the name, address and email address of the photographer, plus the title of the photo entry. We need a release statement accepted by the photographer. Page two- If the photographer provides all the information needed a page is presented where the photograph may be submitted for the contest. Alternate Page two- if there is no acceptance of the release statement, a page is presented indicating the photo cannot be submitted and non-acceptance is recorded. Page three- If Page two is successfully completed (photo submitted), a final page with the completed information is displayed as the first step in confirming the contest entry. Emails are sent to the committee members and an email is sent to the contestant requesting verification of submission. Simple and complex form builder functions and many more sophisticated tasks can be accomplished automatically with a special form processing script. 9. submit button multiple click trapper
| ||||||||||
Copyright Tony Simpson © 2005 - Webpageaddons.com - All Rights Reserved. | ||||||||||
