How to Create a Form Using Drupal Webform

STEP 1 – Creating the Form

In the toolbar at the top of the page go to My Workbench > Create content > Create Area Page:

  • On Navigation tab -> enter Title of form
  • Select department under Page Content Area (i.e., this associates form with your department site).
  • Enter Menu Label title (i.e., typically the same as Title field unless adding to main department menu and need to shorten).
  • Menu: leave None unless adding it to department menu.
  • Select Main Content tab add preliminary content for form, if needed, in the Body section (i.e., text, links, images, etc.).
  • Click Save button.
  • On next page click on Webform link to begin building form.

*Alternatively,  you can add a form to an existing page by clicking on Webform link when viewing page in Drupal.

Note: if one selects My Workbench -> Create Content - Webform, the form will have no department navigation bar.  This will result in a non-departmental form (i..e, solid black bar will appear where department navigation menu would display).

STEP 2 – Adding Components

To add components, find the text box that says “New component name”. You will use that space to create a new field for your form (e.g., Last Name, Department, etc.).  This will appear above form field.

Select type of field that will be on your form.  Textfield is the most common (i.e., single line entries).  Select Textarea for longer entries that require several lines. Other common form elements include: Date, Email, Select Options, and File. See short descriptions of form fields.

If field is required for end user to complete, check the box under Mandatory.

Click Add (button) when finished when finished with each form field element..  This will display page for editing component.

STEP 3 – Editing Components

  • Label – able to change if needed
  • Field Key (variable where computer logs the data).  Update only if you are updating label (i.e., maintain underscore between words).
  • Default value (optional) – if field will have a default this will get submitted by end user unless he/she changes it in form. Click Browse Available Tokens link to see a list of tokens, along with descriptions, that can be used as a default value. Example: if using a date filed setting Wednesday, August 21, 2019 - 11:49 will display as Month dd, yyyy - h:mm.
  • Description (optional) (i.e., description comes AFTER the Label and field).  It is used as a guide for end user when completing form. Note: tokens may be used in description as well.
  • Validation (Mandatory, Max length, etc.).  This is reflects your choice in step 2 (above).  Update here if necessary. Check box in front of Unique, if applicable (i.e., Field to enter Banner Y number would not allow same Y number entered by two or more individuals).
  • Maxlength - set textfield to maximum number of characters (i.e., limit field for phone number to 10 characters).
  • Modify how the field is displayed
  • Display: Width (i.e., leave blank - requires CSS to be set-up by web team if specific length of form field box is needed), Placeholder displays inside form box until user enters a value, Prefix and Postfix if applicable, Label display (i..e, Above is default, Inline requires CSS noted for Width, and None -> if using Description to guide user in completing field), Description above field (i.e., default is to display below field on form), Disabled (i.e., use for default information that all submission must include -> example: date field as a time stamp for when form was submitted), and Private (i.e., example might be for a Notes field where retrievers of form submissions could add additional comments -> ex: form is Complete, Please contact person to verify specific information, etc.).

Once you’re finished managing your field settings, click Save component (button) to finish adding it to your form.

*If you don’t save, the field will not be added to your form!

NOTE: See Webform Examples for detailed field type settings.

ADDITIONAL NOTE: repeat Steps 3-4 in order to add additional fields to your form. When finished adding components, click the Save button in order to update form (i.e., or before viewing).


Multi-Page Forms


Conditionals (Optional)

Note: conditionals allow you to present to the end user additional selections based upon how they respond to a given item or question on the form. These selections will then trigger further actions/responses from end user. A form item/question may have a number of options, each with their own action item.
Example: Form Item is set to Registration Method. Two choices are presented to end user: 1) Register in Person and 2) Register Online.  If the end user selects "Register in Person" this triggers the action: Select a Time to Register (i.e., where end user needs to make a response).  If the end user selects "Register Online" this triggers the action: Provide Us With a Phone Number in Case We Need to Contact You (i.e., where end user needs to make a response).

Steps

  1. Add new item to form (see Step 3 above).
  2. Choose "Select Options" for Type of component. (Note: if end user is required to respond to item - check box in front of Required).
  3. Click Save button in order to save new component.
  4. On next page, use the open boxes under Options to present your conditionals to the end user (Note: to add more options click on the Add Item link. Also, if one of the radio buttons is selected for an option, make sure to click on the No default link.).
  5. Click Save component button in order to save options.
  6. Add new form items (i.e., components) that will serve as action items to the end user (Note: in above Example this would mean two new fields: Select a Time to Register and Provide a Contact Phone Number).
  7. Set each component to a given Type that matches the form item (i.e., E-mail would be the Type for the form item Enter Your E-mail Address, Textfield or Number could be used as Type for form item Enter Your Current Phone Number, etc).  Note: each component Type will display a page with further options after you click on the Save button.
  8. Click Save button in order to save new components.
  9. Click the Conditionals button (i.e., above right) in order to set conditionals.
  10. Click on + sign to begin setting up first conditional.
  11. Use the drop down menu for the If statement to select the new form item (i.e., component) that you added in step 1 along with "is" and first conditional. 
  12. Use the drop down menu for the then statement to select the first action item (i.e., these are the form items that you added in step 6  (Note: selecting shown will only display the action item when the form item is selected - from Example  above: Select a time to Register is only displayed if end user selects In Person).
  13. From the Example above, steps 9 and 10 would look like this: If Registration Method is In Person then Select a Time to Register.
  14. Repeat steps 9-11 for next conditional (Note: these are based upon the options you entered in step 4. If you entered four options, then your form would have four If/Then conditional statements).
  15. When finished make sure to click on Save conditions button.

STEP 4 – Editing Order of Form Field Elements

  1. Click on Form components button.
  2. Click and drag on the cross symbol on the far left of each field to change the order in which they are displayed. You can also do this to choose where you would like to create new fields.

STEP 5 – Adding Recipient E-mails

If you would form submissions to get sent to a specific email address, you can add the recipient email address(es) by selecting the E-mails button under the Webform tab.

  1. Select the radio button preceding Address, enter recipient's email address, then click Add.
  2. Set the header details
    1. E-mail Subject: Default is the Title of form (see step 1 above), Custom - add subject line, and Component - this will send value entered by end user into form.
    2. E-mail from address: Default is Drupal system admin address (i.e., webmaster@ysu.edu), Custom - enter another address that will display in From line of recipient's email (i.e., this could be a department e-mail address), and Component - if email filed is part of form and is required for end user to enter a value.
    3. E-mail from name: Default is Drupal system admin address (i.e., Youngstown State University), Custom - add another name (i.e., department name, YSU student, etc.), and Component - select Name or Last Name (i.e., values entered by end user while completing form).
  3. E-Mail Template: Default template - Note: %username will only work for users with Drupal accounts (i.e., not for anonymous users on Web).  Optionally: select custom template from drop down menu and choose which tokens to include (i.e., click on Browse available tokens link to see list).
  4. Included E-mail Values: un-check boxes of fields you do not want to be returned via email (i.e., default is for all form field values to be returned). Check box to Exclude empty components from e-mail submissions.

Click Save e-mail settings button to save selections.

NOTE: when testing form, use your email address, to see how form works and submissions display.  Then change to specific email address for recipient.

STEP 6 – Submission Settings (i.e., includes confirmation page message)

If you would like a confirmation message that the end user sees after submitting form (i.e., set a confirmation message or redirection web page after form is submitted, limit the number of submissions, or other advanced settings), you can check the Form settings button under the Webform tab.

Confirmation message: enter content for message user sees after submitting form (i.e., text, links, images, etc.). Example: Thank you for your feedback!

Redirection location: if using a confirmation message, leave Confirmation page selected (i.e., default). Otherwise, enter a Custom URL (i.e., web page) address to redirect user to after form is submitted (i.e., department home page, etc. - for YSU home page use the token %site). No redirect (load current page) - will keep end on form page after he/she submits form.

Total Submission Limit: able to limit to X total number of submissions, or by hour, day, or week. 

Per user submission limit: able to limit user to X number of submissions ever/total, or by hour, day, or week.

Status of form: default is open.  Update to Closed if submissions are no longer being accepted.

AJAX: AJAX mode (i.e., does not require page reloads to submit – more dynamic, responsive, and faster).

Submission Access: if for public access (i.e., non-Drupal accounts) select anonymous user only.  Authenticated user is for YSU content managers/web editors who have Drupal accounts (i.e., this allows them to submit form while logged into Drupal).

Progress Bar: settings if using a multiple page form (i.e., with page breaks - page 1, page 2, etc.)

Preview page: check box if you are looking to allow end user to review their input before submitting form.

Advanced Settings: Show "Save draft" button: allows user to save partial form and finish later (i.e., must have a Drupal account and be logged in while completing form). Automatically save as draft between pages: use for multi-page form. Submit button text: customize wording here if desired (e.g., Send Form, etc.).
Submit button label - for changing default wording of Submit button.

Select Save Configuration (button) when finished working on form.

STEP 7 – Retrieving Form Submissions

NOTE: if form is being submitted to an e-mail address, this step is optional.

  1. Select My Workbench -> on the My Content tab look under under My Edits for form and click on title (i.e., note: click view all link and use search box if form does not display in list).
  2. Click on the Results link. This will display list of submissions with time stamp by end user.
  3. Click View link to see submission for each end user.  Alternatively, Edit or Delete each submission, if needed, by selecting appropriate tabs.
  4. Select Analysis (button) to view analysis of submissions.
    Add Analysis Components: check boxes in front of form items to add these to the Analysis page.
  5. Select Table (button) to view submissions by form field elements.
  6. Select Download (button) and indicate export format, list options, export components (i.e., form field elements), and download range. Note: use delimited text and comma (i.e., text format) if intending to import into a database program (i.e., MS Access, etc.).
    Select List Options: Select Keys - Full, human-readable options (values) (i.e. default - includes form field titles) and Select list format (i.e., separate or compact) for exporting data.
    Included Export Components: un-check any boxes to remove from download/export.
    Download Range Options: select option that best fits your needs. Note: return to this area each time you would like to download another export of data from submissions.
  7. Click on Download (button) when finished.

STEP 8 - Adding reCaptcha

  • After publishing your web form, email URL to the YSU Web Team ysudrupalsupport@ysu.edu and we will add the reCaptcha element.
  • Note: reCaptcha is used to prevent spammers or bots from writing junk to your forms or making repeated submissions. It prompts the user to check box that indicates "I am not a robot."