PLEASE NOTE Web Forms will be deprecated soon.
Please use Checkbox instead. 

How to use Checkbox for your form or survery. 

This information will remain here until Webforms are replaced. 

 

Webforms allow you to capture specific fields of information from users. They can be used for contact forms, surveys, and registration.

Forms should be used when you need to ensure that users provide specific bits of information. However, a form should be kept simple and to the point so as not to discourage users from completing them.

Creating a webform

A form is also a node of its own, rather than being placed on an existing website.

  1. Go to Content > Add content > Webform
  2. Add a Title for the node and any Body copy that you want to display above the form. This might be general contact details or an explaination of who the form submits to and when the user can expect a response by.
  3. Add the form to a menu if you want it to be accessible as part of the navigation (e.g. Contact page). It can be left out of the menu if you want users to go through other pages/steps before reaching the form (e.g. Registration or Survey)

Adding fields

Once the form node is created you can add fields to the form. Each field is on its own row and consists of a label and a field type. There are a range of field types available such as text field, email, date, checkbox, drop down list.

In this example we will create the following fields for a contact form: Name, Email, Phone, Enquiry

  1. In the first label field type 'Name'
  2. Selet the 'textfield' Type
  3. Tick the Mandatory field because we need to know who is contacting us.
  4. Click Add. This will bring up the advanced settings for the field where you can set various optional parameters. If you don't need to set any parameters then just click Save Component at the bottom to finish adding the field to the form.

Adding a Name field to a form

Advanced textfield parameters

  • Default value - Prefils the field with a value. Allows you to use Tokens to populate user and dynamic values (see the Tokens list toggle below the Default Value field).
  • Description - Displays small help text below the field.
  • Unique - Checks if the same value has been entered in another field in the form and flags a validation error to the user if duplicates exist.
  • Max length - Sets a character limit on the field. For instance a postcode field could be limited to 4 characters.
  • Width - Sets a pixel width on the field. Entering '200' will make the field 200 pixels wide.
  • Prefix text placed to the left of the textfield - Can be used to indicate the kind of value e.g. $ symbol for a Donation field.
  • Postfix text placed to the right of the textfield - Can be used to indicate the kind of value e.g. pm after a Time field.
  • Label display - Displays the label above or beside the field, or hides the label.
  • Disabled - The field will display but users cannot enter any values or interact with it. Mandatory fields that are disabled will prevent the form from being submitted if it doesn't auto-populate some value.
  • Private - The field will only appear to users who can edit the field.

Add the rest of the fields

  1. Type 'Email' in the label field
  2. Select 'E-mail' as the field type. This will validate that a real email address has been entered when the form submits.
  3. Tick the Mandatory field because we need to be able to reply.
  4. Click Add and then Save Component.

 

  1. Type 'Phone' in the label field
  2. Select 'Textfield' as the field type.
  3. Don't tick Mandatory as the user should be able to decide if they provide their phone number.
  4. Click Add and then Save Component.

 

  1. Type 'Enquiry' in the label field
  2. Select 'Textarea' as the field type. This allows multiple lines of text to be entered by the user.
  3. Tick the Mandatory field so they can't submit a blank enquiry.
  4. Click Add and then Save Component.

Setting recipient/s

Now that our form fields are built we can configure where the form submits to. Go to the 'Emails' tab at the top right.

  1. Enter an email address for the form to send the submission to. This might be a generic contact for your unit e.g. webservices@uq.edu.au
  2. Optional - Set the subject line for the form submission.
  3. Optional - Set the sender address. Because we capture an email address in the form we can use that value as the sender address, or leave it as default to have it sent from the site admin address.
  4. Optional - Set the sender name.
  5. The email template will automatically include all of the field values in the form. You can customise the template if you want to include other information or display the results in a specific format.
  6. Save email settings.

Setting confirmation message and completion events

Once the form submits the user needs to receive some notification that the form has submitted successfully. Go to 'Form Settings' at the top right.

  1. Enter a message in the Confirmation Message field to tell users that the form has submitted successfully and how long before they can expect a reply. You can take this opportunity to lead them on to something else which might help them or they might be interested in.
  2. Alternatively, the form can redirect them to another existing page on submit instead of the confirmation message.
  3. Optional - You can set a limit on the total number of submissions. This is useful for registrations when there are a limited number of seats available.

Demo