Using University of Glasgow webforms

Before you create a new form for your webpage, please read the following advice on creating accessible forms, so that your form meets Web Content Accessibility Guidelines (WCAG):

Contents

Overview

This popular programme collects information entered into a Web form to construct an e-mail message which is then sent to a specified address. The e-mail message is a formatted list of field names and their values.

Sample email output

[Web form ] //www.gla.ac.uk/your/form.html
[email_from] someone@out.there.net
[email_subj] change of address

[Surname]
GUStaff

[Title]
Ms
[Initials]
I.M.

[College/School/Service]
University Services

[Telephone]
4899

[Email address]
Somebody@glasgow.ac.uk

The first three lines give the address of the originating form, the email address of the user if known and subject.

The remainder of the message shows the name of the field in square brackets followed by the input typed into the form. Field names can be quite long, e.g.

[What is the capital of France and would you like to go there?]
Paris. Yes please.

Any fields which were left blank on the form are not included in the email message.

Note that if you require a mechanism to store and manipulate all the returns from a form you should look at the Questionnaire System, which collates results in a database, which may then be interrogated using any ODBC compatible package like a spreadsheet or database.

Constructing a webform

Your HTML file will need to contain the necessary HTML tags for creating a form, plus some extras to make it work with the webform program. A minimalist example might be,

<FORM METHOD="POST" ACTION="//www.gla.ac.uk/cgi-bin/webform.cgi">
<INPUT NAME="email_to" VALUE="somebody@glasgow.ac.uk" TYPE="HIDDEN">
What is your favourite food?
<INPUT NAME="best food" TYPE="TEXT" SIZE=50>
<INPUT NAME="Submit" TYPE="SUBMIT" VALUE="Send Response">
</FORM>

which would look like this:

What is your favourite food?

Explanation

<FORM METHOD="POST" ACTION="//www.gla.ac.uk/cgi-bin/webform.cgi">

: start the form and names the program that will process the form.

<INPUT NAME="email_to" VALUE="somebody@glasgow.ac.uk" TYPE="HIDDEN">

: define who will receive the form contents.

What is your favourite food?
<INPUT NAME="best food" TYPE="TEXT" SIZE=50>

: these lines are designed by the user according to the type of form required.

<INPUT NAME="Submit" TYPE="SUBMIT" VALUE="Send Response">br/>

: produces a button at the end of the form to enable a user to send the completed form.

</FORM>

: the last line marks the end of the form.

The form can be embedded within a larger html page and use can be made of CSS stylesheets and javascript form validation if required, though use of these features is not described here.

See also

Using CSS to format a form

Reference guide

The form comprises,

  • a start form tag with a reference to the web form processing program
  • the input fields - required and optional fields control how webform works. There may be any number of user input fields.
  • an end form tag

Required Form Elements

Requiredformelements which must appear in the html form:


start form tag

<FORM METHOD="POST" ACTION="//www.gla.ac.uk/cgi-bin/webform.cgi">

This should appear once at the start of the form within your html page.


email_to

<INPUT NAME="email_to" VALUE="somebody@glasgow.ac.uk" TYPE="HIDDEN">

This is usually entered as a hidden field. The value is the email address of the recipient of the data from completed forms.


end form tag

</FORM>

The closing tag of the form which appears after all the other form elements.


Optional Form Elements

Optional form elements which may be placed in the form:


email_subj

<INPUT NAME="email_subj" VALUE="Course Enquiry" TYPE="HIDDEN" >

This defines the subject line that will appear on the e-mail message generated by the form so set it to a meaningful value. If the field is omitted then a default value of webform response will be used. It is usually a hidden field, but may be coded as a text field, or popup menu of topic, to allow the person completing the form to set the subject, eg:

What is the nature of your query?
<INPUT NAME="email_subj" TYPE="TEXT" SIZE=50 >

email_from

<INPUT NAME="email_from" TYPE="TEXT" SIZE=50 >

May be a hidden field if you want a fixed value, but more usually a text field to obtain the mail address of the person completing the form. If omitted mail messages will have this address set to webform@gla.ac.uk. The address is used to set the originator field in the outgoing e-mail message, so the recipient sees the message as originating from this address and may then reply directly to the user if required.


email_cc

<INPUT NAME="email_cc" VALUE="an.other@glasgow.ac.uk" TYPE="HIDDEN" >

Use this hidden field if you want to send a copy of the form response to someone else.


thanks_url

<INPUT NAME="thanks_url" VALUE="http://some.place/thanks.html" TYPE="HIDDEN" >

Use this hidden field if you want to override the default thank you page sent after successful completion of a form. This is useful to preserve the look and feel of a set of pages for example.


msg_head

<INPUT NAME="msg_head" VALUE="off" TYPE="HIDDEN">

The VALUE parameter may be set to any of [on|ON|On], [off|OFF|Off] or [origin|ORIGIN|Origin] and is used to control the heading at the start of the mail message.

Default is on.

  • on - display the message header ( address of form, user's e-mail address, subject of message)
  • off - omit the message header
  • origin - only display the address of the originating form in the message header

include_ip

<INPUT NAME="include_ip" VALUE="yes" TYPE="HIDDEN">

Use this hidden field if you want the host name and IP address of the workstation the user is using to complete the form appended to the mail message header.
The VALUE parameter may be set to any of [yes|YES|Yes] and [no|NO|No].
Default is no. Only applies if msg_head is on.


allow_html

<INPUT NAME="allow_html" VALUE="no" TYPE="HIDDEN">
<INPUT NAME="allow_html" VALUE="web_address" TYPE="HIDDEN">

Use this hidden field to control whether users are permitted to enter html tags and web addresses, links or urls into form fields.
The VALUE parameter may be set to any of [yes|YES|Yes], [no|NO|No] or a list of fields (comma separated and no spaces) for which you wish to allow html input or web addresses, eg, web_address,user_comments.
If the value is set to a list of fields then a user may enter web addresses of the form http://www.gla.ac.uk or simply www.gla.ac.uk/library. Html tags like <a href=" http://www.gla.ac.uk">University of Glasgow<\a> will be rejected, because the end result of the form is a text message to the recipient.
Only web addresses in specific domains will be accepted, principally the university campus domain, gla.ac.uk. Others will be rejected.

Warning. Note that setting this option to Yes is likely to result in abuse of the form by miscreants posting what may be unwanted or undesirable content. 
You might want to combine use of this option with the restrict_to instruction, described below, to limit the use of the form.
Default is no.


restrict_to

<INPUT NAME="restrict_to" VALUE=".gla.ac.uk" TYPE="HIDDEN">

Use this hidden field if you want to restrict the availability of the form. Setting this to a value of 'gla.ac.uk for example would mean only users of computers in the University domain would be able to complete and send the form. Outwith the domain responses would generate a security access error. The value item may be a single value or a comma separated list of domains or IP addresses, eg, ".gla.ac.uk, .ed.ac.uk", "130.209.", "123.231."), ".gla.ac.uk, 123.231.".
A value of yes restricts use to the gla.ac.uk university campus domain.
Default is no. No domain restriction on use of form.

Advanced usage

E-mail address lists

The email address in the field email_to and email_cc may also be entered as a comma separated list of mail addresses, eg:
somebody@glasgow.ac.uk,sombodyelse@glasgow.ac.uk
Furthermore to guard against automatic programs harvesting email addresses for malicious purposes, the email address can be encoded as follows
somebody at glasgow ac uk
(equivalent to somebody@glasgow.ac.uk)

<INPUT NAME="email_to" VALUE="somebody at glasgow ac uk" TYPE="HIDDEN" >


Required Fields

To force the user of the form to complete certain fields, the name of the field should be prefixed with:
require or require_
These prefixes can also be applied to the optional fields email_subj and email_from if these are to be completed by the user. It is usual to mark such fields with an asterisk(*) and to inform the user these are required fields. eg

<p>* indicates fields that must be completed<\p> <p>* Your name<\p> <INPUT NAME="require_name" TYPE="text" SIZE=30> <p>* Your E-mail address<\p> <INPUT NAME="require_email_from" TYPE="text" SIZE=50>

The prefixes are stripped off and do not appear in the resultant mail message.

For back compatibility with earlier programs the prefix may also be xxxx or xxxx_ but will not be removed in the mail message.

Validation

The content of all forms is subject to a number of checks for security reasons and to prevent misuse of the facility.

  • If any of these checks fail then an appropriate error message page will be returned.
  • These may relate to server problems, author problems or user problems.
  • Server errors are usually caused if the webform.cgi program encounters a problem. You will need to contact IT Services for assistance.
  • Author problems originate if fields needed for the correct operation of the webform program are missing or have incorrect values.
    The author of the form should investigate and correct the error
  • User errors originate if the user completing the form omits a value for a required field or enters some unacceptable content into any of the fields.

The following checks are made.

  • All forms must have an email_to field.
  • All required fields marked by require or xxxx must be completed by the user.
  • Email addresses must be correctly specified, eg name@some.domain
  • HTML formatted text is not permitted in text input fields. This may be overidden with the allow_html option described above.
  • There is a limit on the maximum size of all information accepted by webform.cgi from a single form.
  • There is no limit on the size or complexity of forms.

Graphical Submit buttons

To use an image as the submit button then this must be named with a name=submit attribute, for example:

<input src="SubmitButton.gif" name="submit" type="image" value="Submit" />

Example

Here is another example, and how it appears in a browser. It uses a number of form field elements, and sets the email_from field as a required value.

<p>The following illustrates the use of webform for mailing the content of web fill in forms.</p>
<p>* denotes required fields.</p>
<form action="//www.gla.ac.uk/cgi-bin/webform.cgi" method="POST">
What is your name?<br/> <input name="name" type="text" size=50><br/>
 * What is your email address?<br/> <input name="require_email_from" type="text" size=50><br/>
What is your favourite food? <br/> <select name="favourite food"> <option>curry</option> <option>fish</option> <option>omelette</option> <option>pasta</option> <option>pizza</option> </select><br/>
Other, please specify <br/><input name="other_food" type="text" size=50><br/>
<input name="submit" type="submit" value="Send">
<input name="email_to" type="hidden" value="somebody@glasgow.ac.uk"> <input name="email_subj" type="hidden" value="web form test example"> </form

The following illustrates the use of webform for mailing the content of web fill in forms.

* denotes required fields.

What is your name?


What is your email address?*


What is your favourite food?

Other, please specify

Using CSS to format a form

If you use T4 then the CSS styles below are already included.

Formatting a form using CSS

Forms must be given a class of 'rform'.

<form class="rform">

Fieldsets are used to provide groupings using legend tags for titles.

<fieldset>
 <legend>Your chosen title</legend>
</fieldset>

Labels are used for accessibility and titles when adding input fields.

<label for="questionone">Question One</label><input type="text" name="questionone" id="questionone" />

Example

<form class="rform" action="//www.gla.ac.uk/cgi-bin/webform.cgi">
<input name="email_to" value="somebody@glasgow.ac.uk" TYPE="hidden">
 <fieldset>
  <legend>Your chosen title</legend>
   <label for="questionone">Question One</label><input type="text" name="questionone" id="questionone" /><br/>
   <label for="questiontwo">Question Two</label><input type="text" name="questiontwo" id="questiontwo" /><br/>
   <label for="questionthree">Question Three</label><input type="text" name="questionthree" id="questionthree" /><br/>
 </fieldset>
<input name="Submit" type="submit" value="Send Response">
</form>

will produce the following form:

Your chosen title

Notes:

  • a <br/> tag should be placed at the end of each field line.
  • The submit code can be placed either inside or outside the <fieldset> tag.

Support and further information