21
WebForms User Guide Author: Kenneth Caines September 2007 (Edited by: Jenny Murray) Web Forms Users Guide v1.2 Page 1
WebForms
User Guide Author: Kenneth Caines September 2007 (Edited by: Jenny Murray)
Web Forms Users Guide v1.2 Page 1
Contents
1. Introduction................................................................................................................................3 2. Access ..........................................................................................................................................4 3. Form Index .................................................................................................................................5 4. Form Creation and Form Definition........................................................................................6 5. Form Creation Summary Page...............................................................................................10 6. Adding and Amending Form Fields.......................................................................................11 7. Adding and Amending Fieldsets.............................................................................................15 8. Fieldset Index ...........................................................................................................................17 9. Field Index ................................................................................................................................18 10. Responses..............................................................................................................................19 11. Preview..................................................................................................................................19 12. Web Form Links ..................................................................................................................20 13. Form Links ...........................................................................................................................20 Appendix A: Webforms Groups.....................................................................................................21
Web Forms Users Guide v1.2 Page 2
1. Introduction The WebForms application is designed to allow users to create and deploy web forms without having any specific technical knowledge. It is accessed through a web browser and has the following features:
o Group ownership of forms. o Form templates. o Standard input controls Text, Check, Radio, Password, Select, Text Area, or Hidden. o Basic field validation, including mandatory, field length, and regular expressions. o Grouping of input fields into fieldsets. o Preview option to enable form creator to see what the form looks like as they are building it. o Email or database form handler. o Handler-only option that can be incorporated into existing forms.
This guide describes how to use the application and is intended for new users.
Web Forms Users Guide v1.2 Page 3
2. Access Anyone with a valid CCNT username and password can access the Webforms application. The software is accessed via a web browser at the following url:
http://webapps2.cranfield.ac.uk/webforms/admin
To log on, type in your CCNT username and password and click Submit. Maintenance of web forms is restricted by group. If you are in a WebForms group, you will be able to edit web forms belonging to that group that were created by other users. You can be in more than one group. If you are not in a WebForms group, you will still be able to create and edit ‘personal’ web forms, but no-one else will be able to edit them (except super administrators), and you will not be able to edit forms created by anyone else. If you want to be part of a WebForms group, you should contact one of the group’s signatories. The IT Service Desk (x4199) will be able to advise.
Web Forms Users Guide v1.2 Page 4
3. Form Index When you log on, the Form Index will be displayed. This is a list of all the forms that you have access to.
You will be able to return to this page at any time by clicking Form Index in the Web form links right-hand navigation panel. The Form Index page is broken down into 3 sections: Personal Forms These are forms created by the person logged in and only editable by the person logged in. WebForm Groups These are forms organised by ownership group. You will only see forms in the groups to which you belong – unless you are a super administrator, in which case you will see all groups. Other Personal Forms These are personal forms owned by other users. You will only see this section if you are a super administrator.
Web Forms Users Guide v1.2 Page 5
Note: all forms, marked personal or otherwise, are maintainable by super administrators, and are available from the internet for submission until their expiration date is reached. 4. Form Creation and Form Definition To create a new form, click on Create New Form at the bottom of the Form Index, or in the Web form links right-hand navigation panel. To amend an existing form, click the form Title in the Form Index.
Complete the form definition as follows: Title Type in the name or title of the form. Rendering The form rendering can be setup on one of three ways:
i. Page - The web forms application will be used to provide a web page containing the form for submission. The form will be rendered in the standard Cranfield Visual Identity (V.I.) – which is dynamically based on the Cranfield University ‘About us’ page.
Web Forms Users Guide v1.2 Page 6
ii. Form - The form will appear without the standard decoration, and can be incorporated as part of a page using an object, or iframe HTML element.
iii. None - No visual components will be created, only the form
handling components can be evoked from an independent form. In this mode, a form would be provided elsewhere, and would have as its action the url of this handler.
Ownership Select the group to which the form will belong from the drop-down, or
select Personal to restrict maintenance access to the form creator (ie you) and the super administrators.
You will only see the groups to which you belong in the drop-down –
unless you are a super administrator, in which case you will see all groups.
Preamble For forms rendered in Page mode only (see above), enter any preamble text
that you want to appear after the heading and breadcrumb, but before any fieldset or field content.
The Preamble can contain html tags – for example the <b>bold</b> tag.
CSS References should generally be left blank, but may be used to change the layout in accordance with the V.I.
Web Forms Users Guide v1.2 Page 7
Response Handler Select either:
• Email: the responses will be emailed to the address below; or • Database: the responses will be saved in a database.
Email Address If you selected Email for the Response Handler above, the Email Address is
mandatory. It can optionally be a comma separated list of addresses. If you selected Database for the Response Handler above, the Email Address
becomes optional, but if present any submissions will also be emailed to that address.
Expiration Date The form will cease to be available from the Expiration Date. Template Page Optionally a Template Page may be specified. If specified, this page will be
used to encapsulate the form, thus providing a page framework to surround the form.
The Template Page that you specify must have a <div id="content">
component enclosing the page content. (Pages that are already in the V.I. will already have this tag, but you must check that it is present if you specify as a template a page that is not in the V.I.)
If you do not specify a Template Page, your page will default to the
standard Cranfield V.I., which is dynamically based on the Cranfield University ‘About us’ page.
Note: if a super administrator has previously created or edited this form
and has ticked the Redirect box (see below), this field will become fixed and you will not be able to edit its contents.
Redirect The Redirect checkbox can only be activated by super administrators, and is
provided for compatibility purposes.
Web Forms Users Guide v1.2 Page 8
If you tick the Redirect checkbox, you must specify a Template Page (see above), and the page that you specify must be under www.cranfield.ac.uk – ie it cannot be a legacy page or a page on any other server.
For forms of rendering type Page, checking Redirect causes visitors to the
Template Page to be presented with this form instead, thus disabling the original Template Page.
For forms of rendering type None (ie handler only), visitors to the Template
Page will still be presented with the original Template Page, but the action will have been re-written to pass control upon submission to the web forms handler.
For forms of rendering type Form, checking Redirect will have no affect. Summary Page Optionally a Summary Page may be specified. If specified the Summary
Page will redirected to, following successful submission of the form data. If you do not specify a summary page, a default page showing the form
name and thanking the submitter will be used:
Click Submit to save the form. After creation, URLs for the form and the handler will be displayed on a form creation summary page.
Click Clear to delete a form. You will only see this button if you are
editing an existing form.
Web Forms Users Guide v1.2 Page 9
5. Form Creation Summary Page After you click Submit on the New Form creation page, the Form Creation Summary page will be displayed showing a summary of the type of form created and the form and form handler url’s.
How to use the url’s: For forms of rendering type Page, the form url can be included on any other web page as a link. The form handler url will be already included as the form action so you will not need to do anything else with it. For forms of rendering type Form, the form url will need to be included as the src attribute of an inlined element. The form handler url will be already included as the form action so you will not need to do anything else with it. For forms of rendering type None, you will need to modify the action attribute of your form (created elsewhere) to the form handler url. The form url can be ignored. Note: although you will not be able to return to the form creation summary page after you have left it, the information shown here will be available on the Form Definition page. The following links are available from the Form Creation Summary page:
Web Forms Users Guide v1.2 Page 10
Click this link to continue to define the new form by adding fields to it. See
chapter 6 Adding and Amending Form Fields. 6. Adding and Amending Form Fields To add a new field to the form, click on the Form Creation Summary, or click
on the Field Index. To amend the definition of existing form fields, click on the Field Title in the Field Index.
Define form fields as follows: Title The title is optional and will be displayed to the left of the input control.
For radio and checkbox controls, it would be normal to include the title on the first option, but omit for subsequent options.
The Title must not be more than 75 characters in length. Name The Name of the control is mandatory, and will be used to identify the
value in any submission.
Web Forms Users Guide v1.2 Page 11
The Name must be unique, except for type Radio. Type Select the control type from the drop-down – it may be any of Text, Check,
Radio, Password, Select, Text Area, or Hidden. Field Set The field set to which the field belongs, or ‘Direct to Form’. See chapter 7
Adding and Amending Fieldsets. Position The relative position of the field within the form or fieldset to which it is
associated. Options The summary checkbox, if set, will cause the control value to be passed to
the summary screen following submission. Note: there is a 250 character limit on the url calling the summary screen.
This includes the base summary url plus the query string containing all the summary fields.
The reference id for the response will always be passed as the "ref"
parameter. Parameters may be transcribed on the summary page by referencing them as "${param.name}" within a Rhythmyx content item, where "name" is substituted with the respective parameter or control name.
Example: for a personalised thank-you, the form would contain text fields
with the names: “title” and “surname”. The summary page would have the following incantation:
Thank-you for your submission, ${param.title} ${param.surname}. The end user would then see this as: Thank-you for your submission, Mr Smith.
The associated information specifies how the control will appear. Certain characteristics are only available to specific control types: Size Used for control type Text – this controls the width of the input text box. Max Length Used for control types Text and Hidden – this is the maximum number of
characters that can be entered into the text box. The text box will scroll if the maximum length does not fit into the defined width.
Web Forms Users Guide v1.2 Page 12
Columns Used for control type Text Area – this controls the width of the text area. Rows Used for control type Text Area – this controls the height of the text area. (Note – the Columns and Rows parameters control the size of the input text
area, not the number of characters that can be entered; input text will automatically wrap and scroll as required.)
Values Used for control types Hidden, Select and Radio. For type Hidden, if the Max Length parameter is also specified, make sure
that the length of the value does not exceed it or the user will get an error on form submissions.
For type Select, the Values represent the contents of the drop-down. They
may contain key=value pairs (one per line), where the value will be presented to the user, but the key will returned by any submission. Omitting the key= part, the key will be assumed to the same as the value. Omitting the key, but maintaining the =value part will provide for a null option that can later be validated to implement a mandatory control.
For type Radio, you need to create a radio input field for each radio button
option – each option will have the same field name but a different value. Use the Description (see below) to label the different options. Use the Position (see above) to make sure that the options are adjacent.
Preamble Preamble text will appear above the control. The Preamble can contain html tags – for example the <b>bold</b> tag. Description A Description of the control will appear underneath that control, or right of
it for Radio and Check controls. The Description can contain html tags – for example the <b>bold</b> tag.
Validation can be performed on each control. For Radio controls, validation should only be defined against one of the controls (options), usually the first. If an input fails validation during submission, the error returned to the user is that contained in the description, appended to the name of the control that failed. Mandatory Select Yes or No from the drop-down. Regex Regular expressions can be used to force a particular response pattern, but
are beyond the scope of this document.
Web Forms Users Guide v1.2 Page 13
eg. [0-9]/[a-zA-Z]*[0-9] would require a single digit followed by a "/",
zero or more letters (uppercase or lowercase), followed by a further single digit.
A simpler example ABC.* would equate to a more traditional wildcard
string ABC* Min Length The minimum number of characters that must be entered. Description Error message text (optional). If not defined default text will be used. The Description can contain html tags – for example the <b>bold</b> tag.
CSS References should generally be left blank, but may be used to change the layout in accordance with the V.I.
Click Submit to save the field. If you have just created a new field, another New Field page will be displayed to allow you to enter another new form field. If you were editing an existing field, the Field Index page will be displayed.
Click Clear to delete a field. You will only see this button if you are editing
an existing field.
Web Forms Users Guide v1.2 Page 14
7. Adding and Amending Fieldsets Forms may optionally be broken down into sections with a thin line border around, called a fieldset. To add a new fieldset to the form, click on the Form Links right hand navigation box, or click on the Fieldset Index. To amend the definition of existing fieldsets, click on the fieldset Title in the Fieldset Index.
Define fieldsets as follows: Title Enter the title of the fieldset – it will appear embedded in the fieldset
border. Preamble Enter any text – it will be rendered within the fieldset border before any
fields (inputs). The Preamble can contain html tags – for example the <b>bold</b> tag. Position The position of the fieldset relative to other fieldsets – select from the
drop-down.
Web Forms Users Guide v1.2 Page 15
CSS References should generally be left blank, but may be used to change the layout in accordance with the V.I.
Click Submit to save the fieldset. If you have just created a new fieldset, the Field Index page will be displayed. If you have just edited an existing fieldset, the Fieldset Index will be displayed.
Click Clear to delete a fieldset. You will only see this button if you are
editing an existing fieldset.
Web Forms Users Guide v1.2 Page 16
8. Fieldset Index Forms may optionally be broken down into sections with a thin line border around, called a fieldset. This page lists the fieldsets defined on the current form. It can be accessed by clicking on the Form Links right hand navigation box.
To edit a fieldset, click on the fieldset Title.
Web Forms Users Guide v1.2 Page 17
9. Field Index This page lists the fields (inputs) defined on the current form. It can be accessed by clicking on the Form Links right hand navigation box.
To edit a field, click on the field Title.
Web Forms Users Guide v1.2 Page 18
10. Responses The responses page is only relevant for form submissions being handled by a database, and provides a summary of the responses to date. From this screen, a form maintainer may export the data as a csv file, and has the option to clear down the database. When you click on in the Form Links right hand navigation box, the Response Summary page will be displayed. This will show a summary of responses received to date:
The following additional options will appear in the Form Links right hand navigation box:
When you click on this link, the response data will be downloaded from the database into csv format. You can then open or save the csv file on your PC.
If you click on this link and confirm, the responses for this form will be
cleared from the database. 11. Preview When you are creating or editing a form, you can see what it looks like at any time by clicking
the Form Links right hand navigation box.
Web Forms Users Guide v1.2 Page 19
12. Web Form Links The Web form Links right hand navigation box has the following links:
Takes you to the Form Index – see chapter 3 Form Index.
Takes you to the Form Definition page to define a new form – see chapter 4 Form Creation and Form Definition.
13. Form Links The Form Links right hand navigation box is context-sensitive so the links that you will see will depend on the page that you are on:
Takes you to a preview of the current form – see chapter 11 Preview.
Takes you to the Fieldset Index for the current form – see chapter 8 Fieldset Index.
Takes you to the Fieldset Definition page to define a new fieldset for the
current form – see chapter 7 Adding and Amending Fieldsets.
Takes you to the Form Definition page for the current form – see chapter 4 Form Creation and Form Definition.
Takes you to the Field Index for the current form – see chapter 9 Field
Index.
Takes you to the Response Summary page for the current form – if the current form handler is database – see chapter 10 Responses.
Exports data from the current form to a csv file – see chapter 10 Responses.
Deletes all responses received to date from the database for the current
form – see chapter 10 Responses.
Web Forms Users Guide v1.2 Page 20
Appendix A: Webforms Groups Access to the WebForms application is restricted to anyone with a valid CCNT username. Maintenance of web forms created by other people is restricted by group (as defined by Web Central). All groups relating to the WebForms application are prefixed "WebForms_". Super administrators (members of group WebForms_Admin_Super) have full access to all web forms.
Web Forms Users Guide v1.2 Page 21
