Follow

Building Webforms

A webform can be used to collect one-way input submissions from users. Example uses might include contact forms, surveys and questionnaires. Submission results are stored and can be emailed, viewed online within your site, or downloaded into a spreadsheet.

 

Quick Tips: 

  • Always test your survey by completing and viewing the format of the response prior to implementation.  This will help you ensure your survey output is in your desired format.  
  • Deleting a survey component will remove the question and ALL response received for that component.  
      • Once you have added a component "type", if you want to change the type you must delete the line item and start over.  This cannot be changed once the component has been added. 
      • 2021-10-13_13-31-55.png

Create form page

Click on Add New Form and then give the page a title and then click Save or Preview. Commenting is available on forms but is by default disabled.

2019-08-07_06-05-00.png

  1. Add components

After saving the page, you should see a tab called Webform with the sub-tab Form Components selected. Components are form input elements that can be added one at a time. Give the component a label, or name, and then select the component type using the dropdown menu. If necessary, you can make a form component required by checking the box. Finally, click Add to create the component.

2019-08-07_06-09-52.png

All new webforms will have a location id automatically populated in the Label field.  By adding a location identifier when using the form, you can track where in the document a form was used/completed.  This is valuable when using the same form throughout different documents or locations.  

2020-02-26_11-09-48.png

Simply add your desired term as a location identifier when adding the survey within the site to track where in the document a form was submitted. 

 

2021-09-28_10-37-44.png

Your results will then populate the location id field with your specified location. 

2020-02-26_11-14-11.png

Once you have selected and saved the component type you cannot change it without deleting and rebuilding that specific question.  

Component Types: 

  • Fieldset - a container in which you can place other components creating a subsection of a form.  You can then further customize with by collapsing, hiding the label or adding the description above the field.  
    • Collapsible, Collapsed by Default, Hide label, Description above field & Private
    • 2021-09-29_11-34-05.png
    •  
  • Fivestar - Allow the user to give a star ranking
  • Textfield - a text box, such as “first name”.  Use the field when responses will be one word or one sentence.
  • Textarea - a box for visitors to enter full paragraphs (e.g. for comments).  No text limitation.
  • Date - select a date from a drop down list.  Date the survey is completed is automatically populated in the results. 
  • Email - allows user to enter an email address; is handy when configuring email responses of submissions.
  • Grid - a questionnaire-like section using radio buttons
  • Number - will only accept numerical values.   
    • Tip: to allow dashes or parentheses (phone number field) use the textfield component.  Use the Placeholder to show the user the format you desire.  Note - this placeholder would work in the textfield or area because it allows the use of number and dashes.  
    • 2021-09-28_11-10-01.png
  • Markup - allows form creator (you) to add custom HTML and place it between other form components (e.g. text, links, images).  The content should be added in the Value box. 
    • 2020-07-13_14-13-59.png
  • Select Options - checkboxes, radio buttons, drop down lists, and list boxes to offer choices. 
    • Radio buttons let users select only one option, and checkboxes allow users to select more than one option. On the configuration screen, in the Options field, type your choices in this format: 
                  0|Yes
                  1|Maybe
                  2|No

The pipe character located between the number and the choice is located between the delete and enter keys on most keyboards. 

To reorder your components, or to drag them into fieldsets, click on the icon to the left of the component. Dragging up or down changes the order of appearance, and dragging to the right can nest a component within a fieldset.

  1. Configure Form Settings
  • Click on the Webform tab, then the Form Settings sub-tab. 
  • Here you can enter a confirmation message so users know they have successfully submitted the form, or you can direct users to an existing page upon form submission.
  • Default message set to Thank you, your submission has been received
  1. Configure Email Settings
  • Click on the Webform tab, then the E-mails sub-tab. 
  • To receive an email when forms are submitted, add your email to the Address field, and then click Add.
  • E-mail header details such as subject line and from address can be changes or customized along with the email template.      
  • After clicking Add, edit the E-mail Template to change the content of the email.
  1. Conditionals

Conditionals can be used to create advanced webforms that reveal or omit certain questions based on user input. For example, you could ask users at the beginning of the form to indicate if they are staff or faculty, and use a conditional to show different follow-up questions depending on their response.

The following is a simple set of instructions you can follow to set up and use conditionals:

  1. Click on the Webform tab, then the Conditionals sub-tab
  2. Click the icon next to the text "Add a new condition"
  3. Use drop-down menus to set up each conditional logic, as described below.
    • The basic formatting is as follows:

      If [component][condition][value],
      then [component] [condition] [state]
       
    • As an example, consider a form used to provide a second comment. Perhaps different follow-up questions are required based on the yes/no response the user chooses from a select options component. A conditional might read:

      If [Additional Feedback] [is] [Yes],
      then [Additional Feedback field] [is] [shown]
  4. You can add or remove conditionals, or "if" and "then" statements to an existing conditional, with the + and - icons.
  5. Click Save conditions to apply your conditionals to the form.
  1. Viewing and downloading your submission results
  • Click the Results tab.
  • Use the sub-tabs to view, edit, download, or clear the submission results.
  • The Analysis sub-tab will provide a more advance view of chart options.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.