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

• 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)

The 6 components of web forms• Labels

These tell users what the corresponding input fields are for (what content should be in them)

• Input FieldsInput fields enable users to provide data or feedback

• ActionsThese are links or buttons that, when pressed by the user, perform an action, such as submitting the form.

• HelpThis provides assistance on how to fill out the form.

• MessagesMessages 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”).

• ValidationThese measures ensure that the data submitted by the user conforms to acceptable parameters.

http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

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 – 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