Create a Webform

From ITwiki

Revision as of 14:47, 7 August 2012 by Cmilloy (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Webform is the module for making forms. After a submission, users may be sent an e-mail "receipt" as well as sending a notification to administrators. Results can be exported into Excel or other spreadsheet applications.

Please make sure to log into the specific site of the section which needs a new Webform.

The login procedure is the same as the one described in the section titled Access.

“Section” refers to the section in the Stevens Webpage. Some sections include sit, cal, sse, howe, news etc.


Create a new Webform

Step 1 - Click Create content

Click on the “Create content” shortcut from the top grey bar.

Step 2 - Click Webform

Click on the link “Webform".

Step 3 - Enter Webform Information

The Create Webform page is displayed. Some of the fields to be entered are described in the figure below. The Fields marked with an asterisk are compulsory.

Title: The title of the page (the URL/link to this content will based on the title)

Body: The Body constitutes the main content that needs to be displayed in the page. Major content of the page is placed in this section. For more information, please see the Body heading under Create a Page section.

Step 4 - Select Administration Unit

For the Administration Unit select list, choose the administration unit that will access the form (for results, webform settings, etc.). You can select multiple administration units by: on Mac - Press and hold the Command key/on Windows the Ctrl key For e.g., for a Registrar page, the administration unit “-Registrar” under SIT could be chosen. The dashes before the section names represent the hierarchy with the parent section/administration unit. -- (double) denotes a child of the Administration Unit with a - (single) dash. This helps in better content management, access control and associating content to their respective administration units.

Step 5 - Create a Page Revision (optional)

Under the “Revision information” tab at the bottom left of the page, create a revision of the page for version controlling. This helps to undo the changes made and also the see the page content before the changes were made.

Step 6 - Enter Page URL (optional)

Under the “URL path settings” tab at the bottom left of the page, is an option to change the URL. By default, the URL is automatically generated by which site you are in and what is entered in the title field (see above). If one is in the /sit site and creates a page titled Stevens Advantage and leaves this field blank, the URL generated by the system will be

If we want this page to be in the Undergraduate Admissions site (, which is a subsite of /sit, we need to edit “URL path settings” and enter admissions/stevens-advantage and the URL generated will be

Step 7 - Choose Moderation State

Under the “Publishing options” tab at the bottom left of the page, select the checkbox next to “Published” to publish the page.

Step 8 - Click Save

Click “Save” to create the Webform page. At this instance, only an empty Webform would be created. The fields/elements/components of the Webform have to be manually added. After clicking “Save”, the “Webform” tab is displayed as shown in the image.

Step 9 - Add Components to Webform

For adding a Component to the Webform, please see the following steps:

1. Enter the component name. This is the name which is displayed in the main Webform page.

2. Select the component type from the list. Choosing the component close to what is really needed helps automatically apply the validations and also maintains the data integrity. For example, choosing a type Date will not allow the user to enter characters and Drupal will take care of all the validations by itself.

Some of the frequently used types are described below:

  • Date: For date types.
  • E-mail: This type is used when an E-mail type is required. This will take care of the validation checks for an e-mail ( like the @ symbol, .com or .edu at the end)
  • Fieldset: This is used to group components into one section. A Fieldset can also have a name.
  • Number: The number field makes sure no characters are entered. Also options for specifying maximum/minimum limit and round-off limit could be specified here.
  • Select options: This is useful when a user wants to include a drop-down select list similar to the one as the “Component Type” list.
  • Textarea: This is used when the user needs to type multi-line text.
  • Textfield: This is helpful when the user needs to type single line text.

3. Check the box under “Mandatory” if the field required is mandatory.
4. Click “Add” to add the field.

The Edit component page is displayed to customize the component if required. The image describes and highlights some options which could be customized for the component added.

The image below shows the placing of the Above Label, Inline Label and No Label.

5. Finally click “Save component” to save the changes applied.

Steps to create Select options component

To create a Select options list, please follow the steps below:

  1. In the Forms component page under Webform tab, add the component name and select the component type as "Select options" and click "Add".
  2. In the Edit component page, under the "Options" section, enter the options to be populated for the list. The format for entering an option is component machine name, then the display name separated by the vertical(|) bar symbol, i.e. machine_name|display name.
  3. Click “Save component” to save the changes applied.

E.g.: The image show a select list of department majors.

Step 10 - Set-up Automated E-mail responses (optional)

E-mail automated responses can be set-up by following the steps below:

1. Choose the E-mails button (under the Webform tab) and you have two options:

Address: Specify an email address (to be entered manually) for notification/internal purposes, i.e. an email to be received by a person overseeing a registration form.
Component value: Select from the User E-mail drop-down menu the email label (from the form). The use case of this is to set up an automated confirmation response for a person completing this form.
2. Click “Add” to add an e-mail.

The Edit e-mail settings page is displayed to customize the e-mail settings if required. The image describes and highlights some options which could be customized for the e-mail added.

3. Finally click “Save e-mail settings” to save the changes applied.

Step 11 - Set-up Form submission Confirmation message (optional)

After the user submits the form, a confirmation message can be set-up to be displayed.

This is done by selecting the “Form settings” below the “Webform” tab at the top of the page.

1. Enter the Confirmation message in the Textarea under the “Confirmation Message”.

2. Redirection location: This option decides the page to be displayed after the user submits the form.

  • “Confirmation page” displays the “Confirmation Message” in its own page without changing the link.
  • “Custom URL” will redirect the user to a new page link after user submits the form with the “Confirmation Message” displayed.
  • “No Redirect” reloads the page with a fresh form without displaying a “Confirmation Message”.

3. Total submissions limit: This option helps to set the total submission limit for the form. 4. Per user submission limit: This option is useful to allow number of times a single user can submit the form. This is a useful option to prevent spamming of the form. 5. Status of this form: This is helpful to allow/disallow the form to be submitted.

  • “Open” keeps the form open for submission.
  • “Close” closes the form for submission. Please not that the Close option does not delete the webform. It only makes it inactive.

The image describes and highlights some options which could be customized for the form.

Step 12 - Click Save

Finally click “Save configuration” to save the changes.

Step 13 - View Webform

To see the Webform, choose the “View” tab at the top right of the page. A sample Webform is shown below.

Sample Webform

The image below shows a sample webform.

Personal tools