WEB FORM DESIGN

Creating forms for a web page For your web project you have to design a form for inclusion on your web site (the form information should be included in the wireframes). We will use Google Docs to provide the technology (NOT the Wordpress form), but for your plan you need to know the basics of good form design Forms are used to collect information of various types from users and as a way of receiving feedback or orders.

What is a web form? Front end – what you see on the web page – Created using HTML and CSS – Boxes, input fields etc – Button to submit the data entered into the form Back end – what happens on the server to process the form and capture the data – This needs a custom script on the web server – Made easy for us now by technology such as Google Forms which generates the HTML for the front end and automatically captures the data and displays it in a spreadsheet Google Forms

The 6 components of web forms Labels These tell users what the corresponding input fields are for (what content should be in them) Input Fields Input fields enable users to provide data or feedback Actions These are links or buttons that, when pressed by the user, perform an action, such as submitting the form. Help This provides assistance on how to fill out the form. Messages Messages give feedback to the user based on their input. They can be positive (such as indicating that the form was submitted successfully) or negative (“The user name you have selected is already taken”). Validation These measures ensure that the data submitted by the user conforms to acceptable parameters.

Google Forms Google Drive includes a form creation module that allows you to create many types of forms for use on a website Once you have created your form you can embed it on your website The data entered into the form by site visitors will be automatically captured in a Google Docs spreadsheet for you Create a Google Form (info from Google) Create a Google Form

4 Form elements (input fields). You will need to include at least 3 in your web project form Text boxes – for single line entry Text area – for multi line entry (creates a large text field for comments etc) Check boxes – when multiple answers are possible Radio buttons (multiple choice) – when only one answer is possible Sample form created using Google Docs

Making forms better for your users Text boxes– how big should they be? Should you constrain the number of characters? Names (first, last, family etc) – not all names fit neatly into boxes! Labels – make them clear and useful Phone numbers, postal codes – show an example of format Required fields (indicate clearly and don’t make it required unless you really do need the data) Submit / Reset buttons