Knowledgebase
How do I create a form in Drupal
Posted by on 14 February 2013 12:29 PM

The Webform feature in Drupal allows you build survey forms that users can fill in on your DCU department website. After submitting information, users can be automatically emailed a 'receipt' containing the information they filled out. Webform can also be set up to send an email notification to multiple email addresses (e.g. staff in your DCU department) when a user fills in the form.

When setting up a webform, you have the ability to control:

  • Who can fill in the form (e.g. DCU students, DCU staff, or everybody)
  • How many times the form can be filled in by a user. (e.g. setting it to only allow one entry if the form is being used for a vote.)
  • When the form can be accessed (e.g. closing the form to new entries after a certain date.)

The administrator/builder of the webform also has the ability to see basic online statistical reports on submissions to the form, or download the results of the form in a format that can be opened in Excel or other spreadsheet applications.

Creating a basic webform page

Creating a webform is similar to creating an ordinary page in Drupal. You should familiarise yourself with the tutorials How do I log in to Drupal? and How do I create a page in Drupal? before reading through this tutorial.

  1. To begin creating a webform, log into Drupal and click the Add Content shortcut at the top of your screen. (See the How do I create a page in Drupal? tutorial for screenshots on how to do this.)
  2. Instead of clicking on Basic page, click on the Webform option on the bottom of the list as shown below:
  3. Create the content that will appear on the page before your webform begins. See the Creating a new Page tutorial for instructions on how to do this.
  4. Once you've clicked Save on the new page section, you'll then see a screen like the one shown below.

Adding fields to your webform

  1. Type the name of your field or question in the text box under Name.
  2. Select the type of field you want under Type. Some of the types you can use are as follows:
    • A Textfield can be used any one line question, e.g. Name, Phone Number.
    • Email: Similar to an ordinary textfield, but has some special features for email addresses (e.g. if a user has to log in with their DCU account before filling the form, this field can be set up to be automatically pre-filled with their email address)
    • Select options can be used for multiple choice options, such as shown below.

      Select options fields can also be styled in the format of tickboxes (e.g. where you want a user to be able to select multiple options) or a drop-down menu (e.g. where there are a large amount of options to choose from.)
    • A Grid can be used to ask users to rate different options, as shown in the example below:
    • A Textarea field can be used where you want users to type a paragraph or more of information, as shown below:
    • You can use a Page Break to split the questions across multiple pages (e.g. if you want to have users answer questions in sections.)
    • The Date and Time field types can be used to allow a user to pick a date and time, but we recommend using an ordinary Textfield instead. (Also, the webform system automatically keeps a log of what date and time a form was submitted, so there's no need to add a field to have a user enter the time they submitted the form.)
  3. When you've picked the field type, select whether you want the field to be mandatory or not using the Mandatory select box.
  4. When you've picked the field type you wish to use, click the Add button to the right of the screen.
  5. When you add a textfield, you'll be taken to a page of options for the field that looks like the below:
  6. The following settings are recommended for optimum display on the DCU website:
    • Field Key: This field is set automatically, and should be left as it is unless it needs to be changed (some advanced features of the webform use this key and it may require being changed for those.) If you need to change it, make sure the text is in lowercase and use underscores where you would otherwise use a space, e.g field_name.
    • Default Value: This should be left blank, unless there is text you want in the field by default.
    • Description: You should add description text in here where it might be helpful to user to direct them how to fill in a field. It will appear below the field as shown in the example below:
    • Validation: The mandatory field will already be ticked if you selected it on the previous screen. Unique should be left unticked. Maxlength should also be left blank.
    • Width: This controls how wide the textfield will be. It is recommended that you set this to either 25 or 40, though you may adjust it to your own needs.
    • Label placed to the left of the textfield: This should be left blank, unless you need to use it (e.g. for placing a € symbol next to a field for a currency amount.)
    • Label placed to the right of the textfield: This should be left blank, unless needed.
    • Label display: In most cases, this should be set to Inline, except for when using the Grid field type.

When you have finished changing any settings, you can click Save Component and move onto the next field you wish to create.

Additional options when using the "Email" field type

If you're using the Email field type, you will see an additional setting, User email as default. Setting this box to ticked will mean that the email field will automatically be populated by the user's email address if they are either DCU staff or a DCU student and are logged into the Drupal system.

Additional options when using the "Grid" field type

When using the grid field type, you will see the following sets of additional options:

  • Options:  Usually these are ratings such as "poor" through "excellent" or "strongly disagree" through "strongly agree".
  • Questions: These are the questions listed down the side of the grid.

Setting up email receipts/notifications

The next step after setting up all the fields you want in the form is setting up the email addresses you want a receipt/confirmation of submission to go.

  1. Click on the Emails button, located in the right hand side of the screen, as shown below:
  2. If you want a receipt to go to the user, click on the Component Value button and select the email field you set up (i.e. where the user would have entered their email address) from the drop down menu, as shown below:

    then click Add.
  3. You'll then be taken to the following page where you can customise the Email subject, Email from address, and Email from Name that will appear on the email receipt to the user. It is recommended that you set it up as follows:
    • Email subject: This can be left as the default, though you can customise it if you wish.
    • Email from address: You should select Custom and enter in the generic email address for your department, e.g. alumni@dcu.ie.
    • Email from Name: You should use the name of your DCU department in this field, or whatever name is appropriate.

    The E-mail Template field determines how information will appear in the body of the email itself. This field comes pre-populated with a default template. In most cases, it is recommended that use the default template and do not edit this field.
  4. Clicking on the Included E-mail Values link allows you to select which information from your form you wish to appear in the body of the email. By default, all fields are selected, but you can untick the checkboxes next to any field you don't wish to appear.
  5. When you've finished setting up options, you can click Save e-mail Settings.

Following the instructions above, you can then set up additional email addresses (e.g. your email address or the address of a colleague in your department) you want to receive an automatic email receipt when your form is filled out by a user.

Re-arranging the order of fields in your form

You can re-arrange the order the fields appear by clicking on the move icon  next to each field in the Form components view (see image below) and dragging the field up or down the list of fields.

When you've arranged all of the fields in the order you want them to appear, click the Save button.

Other webform settings

There are a number of other settings in the webform that you can access by clicking on the Form settings button as shown below.

The following settings are recommended in this section:

  • Confirmation message: You should type a message in this field to appear to users who have successfully completed the form, e.g. You have successfully completed the survey form. A member of the ISS team will be in touch with you shortly. This text will then appear in a box above the form page as shown below:
  • Text format: It is recommended to set this to Plain Text.
  • Redirection Location: It is recommended to set this to No redirect (reload current page). If you wish to create a custom Thank You page in Drupal, you can also do so and then put the URL into the Custom URL field.
  • Submission limit: In most cases, you should set this to Unlimited. If you wish to set the form up for the purposes of voting (e.g. student elections) you can limit submissions by selecting the Limit to _ submissions option and setting it as per your needs.
  • Submission access: see section below on Restricting access to the form.
  • Status of this form: This should normally be set to open. If you want to close the form to further submissions (e.g. it's in relation to an event that has finished, or a vote that is now over) you can later edit the form and change this to closed.
  • Advanced settings: It is recommended to leave the settings in this section with their default options.

Restricting access to your form

If you need to set up the form to only be accessible to a certain group, e.g. DCU students, DCU staff or certain sections of DCU staff, you should first create your form, then log a support request through the ISS Online Service Desk (http://iss.servicedesk.dcu.ie) with the following information in the URL of the form:

  • The URL of your form.
  • Groups / users you wish to have access to the form.

A member of the ISS web team will then contact you regarding your request.

Accessing/editing the form at a later stage.

Editing the webform you've created at a later stage is similar to editing any other page on your department's website except that you click the Webform tab instead of the Edit tab, as shown below:

 

You can then edit the webform as needed, in the same manner as when you originally set it up.

Viewing and downloading the results as a spreadsheet file

  1. Log in to Drupal if you are not already logged in.
  2. Go to the URL of your webform.
  3. Click on the Results tab (located to the right of the Webform tab as shown above.)

You'll then see a list of all of the submissions to your webform. To the right of your screen you'll also see buttons for Submissions, Analysis, Table, Download and Clear (as shown below.)

Submissions, Analysis and Table will allow to see reports on the submissions to your form. Download will allow you to download the data as a spreadsheet file compatible with Microsoft Excel or other spreadsheet software.

Clear will allow you to clear all user submissions to your form. (It is only advisable to do this if you have downloaded a copy of the data using the Download button.)

(2 vote(s))
Helpful
Not helpful

Comments (0)