Creating a Webform

Step 1. Click on Create a Form in the top menu. The first thing to do is enter a unique title. Please note that your URL will be formed based on your title, so please try to keep the title short (and sweet).

Step 1.

Step 2. If you want any descriptive text or content at the top of your form, use the WYSIWYG editor to populate the Body field.  Please note that for multi-page forms, this section will be displayed at the top of each page so if you want only want content on the front (or any other) page, enter the content in to a Markup component (refer to steps 8+ for more information).

Step 2.

Step 3. Complete the Contact Info fields. This section is displayed at the bottom of your form, and directs users to the appropriate contact person in case of questions about the form.

Step 3.

Step 4. Review and update the Privacy Notification section if needed. This section is also displayed at the bottom of your form and it is crucial to identify the reasons for collecting any personal information, giving the UBC Forms system legal authority to operate within FIPPA compliance.

Step 4.

Step 5. The Webform Results Access and Modify fields are auto-complete username fields. Use these fields to grant view and edit access for all webform submissions to specific users within the UBC Forms system. Please note that users must have an active account in the system, so they must have already successfully logged on using their Novell credentials.

Step 5.

Step 6. The "Hidden" field at the bottom of the page will hide your form from the homepage list. Your form will still be accessible but it won't be publicly listed.

Step 6.

Step 7. Once you are happy with your changes, click the Save button at the bottom of the page.

Step 7.

Step 8. After you have saved the form, you should see a notification that it was successfully created.  At this point you can start to add fields to your form.  If you ever need to get back to this page, you can click either the top Webform tab or the Components sub-tab and you will land here.  This page is where you will build out all of the fields for your form!

Step 8.

Step 9. Start adding components! In the text box that says "New component name" type in the label of your field.  In the Type column select a component type from the drop down list.  The most common component is a Textfield so let's start with that for now.  You can choose to make the field mandatory by checking the Required checkbox, and when you are ready click the Add button.

Step 9.

Step 10. After clicking Add you will be taken to the next step for adding a component.  On this page you can update the Label (this is what is displayed to the user) and you can make the text as simple or as descriptive as you like.  Please note that the Field Key setting is generated automatically based on what you originally typed as your label, and although not necessary, it is strongly recommended that you make this option short and sweet (no spaces, only lower case letters and underscores, try to abbreviate long keys into short but relevant names).  Next you can define a Default Value if you wish, and then after that you can include a Description which is a great way to expand on the intention or requirements of the field.

Step 10.

Step 11. Scrolling down to the Validation section, you can choose to make the component Required as well as specify the Maxlength (maximum characters) for the field. It is strongly recommended that you limit the amount of characters to only what you feel should be necessary in order to maintain a clean and efficient database, and to prevent users from accidentally or intentionally copying and pasting large amounts of text data in to these fields.

Step 11.

Step 12. In the Display section you will have different options for how the field appears, including the ability to include prefix and suffix labels.  More importantly you can define whether the Label is displayed Above or Inline (or not at all).  The forms system has been configured to display inline fields uniformly, but this is totally up to you to decide and you can always come back later and change it if you want.

Step 12.

Step 13. Once you are happy with the settings for your new component, click the Save component button at the bottom of the page.

Step 13.

Step 14. After saving your new component, you will automatically be returned to the Components page.  Now let's try adding the second most popular component, which is are Drop-down Lists / Checkboxes / Radio Buttons.  Unfortunately you won't find those terms listed in the Type list, but they are all the same component which is a "Select options" field.

Step 14.

Step 15. Regardless of whether you want a list, checkboxes or radio buttons, all of the options are defined in the same format.  In the Options section, you will enter each option on it's own line in the format of safe_key|Some readable option.  What this means is that the first portion (before the | or "pipe" character) is defined as the "safe key" and this is the value that is stored in the database.  It is critical that you keep this value short and do not use anything other than letters, numbers and underscores.  If you enter any special characters (spaces, quotes, ampersands, dollar signs) then there could be unintended consequences which may cause the form to not work properly.  Please be careful with the safe key!  The second portion after the pipe is the "readable option" and this can contain any type of text that you like, and this is the value that is displayed to the end user.

Step 15.

Step 16. The next important configuration option for a Select field is the Multiple setting.  By default it is unchecked, which means that the user can only select 1 option at a time, such as in the case of a Radio Button.  If you change this setting and enable Multiple, this will turn the radio buttons in to Checkboxes!

Step 16.

Step 17. Another important option is the Allow "Other..." option which gives the user the option to specify their own selection that may not be in the list.  You can define the custom text for the option, or leave it as the default which reads "Other...".

Step 17.

Step 18. Moving down to the Display section you can change the field in to a Drop Down List by selecting the Listbox checkbox.  We know that this may not be very intuitive at first, but this is how the default functionality of the Drupal Webform module operates and so unfortunately we must work within the limitations of this core feature.  So, if you want to have a drop-down list (or a multiple select list) then check off this option!  As with the previous component, once you are happy with the settings, scroll to the bottom and click the Save button.

Step 18.

Step 19. Now that you have created a couple of components for your form you can click the View tab to see what it looks like!

Step 19.

Step 20. Ready to set up some emails? Click the Webform tab and then the E-mails sub-tab.  The first thing to do is determine where the email will go to.  You can either type an email address (or multiple emails separated by commas) in to the textfield (labeled Address), or alternatively you could select a field (Component value) that contains an email address (for example if you want an email to go to the person who submitted the form, and you collected their email address in an E-mail field on the form).  Once you have an address defined, click the Add button to the right.

Step 20.

Step 21. On the settings page for the email, update the default settings for the E-mail subject, E-mail from address and E-mail from name.

Step 21.

Step 22. Next, scroll down to the E-mail template section and you should see something very similar to what is displayed below.  This is the default template that is generated automatically based on the fields that you have defined in your form.  If you leave this template alone (as in, don't change a single character!) then the email will be sent in a nicely formatted list with all of the form responses included.  Please note that it is strong recommended that you do not use the default template if your form contains personal information!  Email is not considered a safe form of communication, so if you have personal information in your form, change the contents of the default email and remove everything between (and including) <p>Submitted values are... and </table> (or copy and paste the entire example text below the next image).

Step 22.

<p>Submitted on [submission:date:long]</p>
<p>Submitted by user: [submission:user]</p>
<p>The results of this submission may be viewed at:</p>
<p>[submission:url]</p>

Step 23. Once you are happy with creating your email, click the Save e-mail settings button at the bottom of the page.

Step 23.

Step 24. After saving your email you will be returned to the E-mails sub-tab, and you should see a notification that your Email settings were added/saved.  If you want to quickly create another email, you can just click the Clone link to the right to save some time!

Step 24.

Step 25. Now let us move on to the Form settings sub-tab (of the Webform main tab).  The first option you can modify is the confirmation message that is displayed when someone submits your form.  The default message reads:

Thank you for your submission.

An e-mail was sent to the e-mail address submitted with the form. (This only displays if you have an email configured)

You will be able to view your submission results at:

https://forms.ok.ubc.ca/node/[your form ID]/submissions

If you have any questions, please contact us

[link]Go back to the form[/link]

Step 25.

Step 26. After configuring you confirmation message (optional), you can also choose to limit the number of submissions (Total, and Per User).  You can also turn the form on and off (Open, Closed) very easily by adjusting the Status of this form field.

Step 26.

Step 27. If you want to have your form automatically scheduled to open and/or close at a specific date and time, then click the Scheduler heading to expand the section.  Specificy a Start time and/or an End time, and then choose the Access restriction method option that makes the most sense for your form.  Most scheduled forms will Allow access to the page, hide the webform so that users know that the form exists, but is not yet open.  You can also choose the display a custom message for both before the start date/time and after the end date/time.

Step 27.

Step 28. Scroll down to the Submission access section and define which roles will have access to submit your form.  If you want your form to be available to the general public (anyone), then make sure that both anonymous user and authenticated user are checked off.  If you want to restrict your form to specific roles, then only select those roles and ensure all others remain unchecked.

Step 28.

Step 29. When you are happy with all of the settings, scroll to the bottom of the page and click the Save configuration button.

Step 29.

Step 30. Finally, your form is ready to publish!  Before you publish it, click the Access control tab.  This section will define the roles of users that can view your form.  Please be very careful editing these settings!  If you grant a role a permission to edit or delete any webform content, this will give all users in that role to edit/delete your form!  The only setting that you should adjust is the View any webform content column, and you should always match any setting that you defined in the Submission access section of the form settings (refer back to Step 28).  If you want your form to be available to the general public, then make sure that both of the anonymous user and authenticated user checkboxes are selected.  If you want to restrict access to your form to specific roles, then ensure that only those roles are checked, and all others remain unselected.  Please note that if you have different roles selected for this section and the Submission access section of the form settings (refer back to Step 28) then your users might not be able to properly view/submit the form!  Always try to make these two sections match!

Step 30.

Don't forget to scroll to the bottom and click the Save button!

Step 31. Once you are satisified with the Access control settings, click the Publish tab and click the Confirm button. That's it!

Step 31.

Step 32. If everything went smoothly, click the View tab and your form should be live and ready to accept submissions!  If you got stuck, or encountered some unexpected error, please don't hesitate to contact us.  Additionally, you are encouraged to attend our weekly drop-in training session every Wednesday afternoon between 2pm and 4pm in ADM 013.

Step 32.

Cheers! Happy Forming!!