Webforms: creating, customizing and using

Created by Sloane DellOrto, Modified on Fri, 30 Nov, 2018 at 3:18 PM by Karla Timbang

Forms can be used to collect data from site users. Examples you probably have on your site are a Contact Us form and a Website Feedback form. Other uses for webforms might be to gather survey data, to gather applications for a job, or to allow visitors to submit a request of some sort.

Important note: webforms are not secure and should not be used to collect credit card numbers, social security numbers, or other kinds of secure information.

Webforms only exist as attachments to posts. If you don't have the post started yet, create one with a Title and optional body text, and save it. Then use the edit hover flyout to choose "Configure webform." You can also get to webform configuration by going to Edit this post, then choosing the Webform tab.

For this example, we'll add a webform asking people to sign up for a volunteer event:

There are two ways to get to the Configure webform page. The first is to click the edit flyout and select Configure webform (illustrated in the screenshot above). The second way is to select the webform tab while editing, revising, adding a poll, sending an email blast, etc...

Configuring your webform

The fields where you are collecting data from your visitors (like Name or Email address) are called Form Components.

The Form Components will need to be added individually. By default, when you navigate to the Configure Webform page, you should be on the Form Components page.

Here is a list of the types of components you can add to your form and what they are used for:

Date - Month, day, and year fields. Options include format, time zone and available years.
Email - A field that validates against standard email formatting - in other words, requires something that looks like an email address. This type of field automatically populates if a user is logged in, or allows anonymous users to add their e-mail manually. It's important to use this field type, instead of a plain textfield, for gathering email addresses for two reasons: (1) it requires correct formatting, helping to ensure your visitor entered an actual email address, and (2) because it is an email field, it will become available for sending to if desired. This would be used if you wanted to send them a copy of their own submission, or to send them a thank you message, etc.
Fieldset - Fieldsets allow you to organize multiple fields into groups. You might use a Fieldset titled "Contact information" and put your fields like Name, Address, Email, Phone inside it ... then another Fieldset for "Interests" and nest your questions in that.
File - Allow users to upload and submit files of the type(s) configured in the optional settings.
Grid - Allows creation of grid questions, denoted by radio buttons. Options go across the top (for example, Poor, Good Great), and Questions appear on the side (How are we doing?) The display allows the user to fill in bubbles as responses to each question.
Hidden - A field which is not visible to the user, but is recorded with the submission. This field requires that you insert tokens (pieces of code that will pull various information from the visitor) and is for advanced users only.
Markup - Displays text as HTML in the form; does not render a field. For advanced users only.
Page break - Break up a multi-page form into manageable chunks.
Select options - Allows creation of checkboxes, radio buttons, or select menus. Options are created on the second page, where you are able to add the items that you want to appear in your select list. If you wanted to learn about people's food preferences you might give your form component the title, "What is your favorite food?" and the select options could be things like Pizza, Ice Cream, Vegetables, Falafel. On the configuration page you can also decide if you want people to be able to select multiple options, and if you want them to be presented in checkboxes or drop down lists.
Textarea - A large text area that allows for multiple lines of input. Options include the ability to change the amount of text you'll accept, change the size of the text box, etc. This is typically used when you're asking for comments, or full addresses, anything that may require line breaks or lots of text.
Textfield - For basic plain text, like Name, Address, etc. The edit screen will include options like Label and Description as shown above. You can limit the number of characters accepted.
Time - Presents the user with hour and minute fields. Optional am/pm fields.

The most common component used is the Textfield since it is meant for collecting short amounts of text data, like First name or Phone number.

To add a component to your form, name the component and choose the type of component that matches the type of data you want to collect. For our example, we want to gather their name and some background on past volunteering they have done. For the name field, we'll use textfield and for the background volunteer info we'll use text area.

Check the Mandatory box if you want the user to be required to fill in this field.
Click the Add button.
The next screen will give you options for the field you've created, including a description that you can present to your users to help them fill out the field properly. Everything on this page is optional, and will change depending upon the type of field you are creating. For standard fields like Textfield and Textarea, the below example is representative:

The Label should be in plain text, as it will be presented to your users. It can have spaces in it, but don't add punctuation at the end, as the system will automatically add a colon to the end.

The Field Key is the key stored in the database. It cannot use spaces or special characters - just lower case letters, numbers and underscores. The system will try to automatically populate this based upon the field title you gave, and you are welcome to simplify it if it looks a bit long and unwieldy. Or, you can just leave it as is.

The Default value field allows you to enter a value that will populate the field until the user replaces it with their own text. The Description field allows you to add detail or instructions that will appear below the field in your form.

There are a few more fields below these that you will probably not change, but to briefly cover them here:

The Validation / Mandatory check box is the same as the one on the previous page, so it will be in the same state as that box. You can check or uncheck this from either screen.

Display options allow you to change the width and height of your fields. Note that sometimes this will be overridden by the theme, however.

Check the Resizable check box to allow the user to resize the field as they are filling it in.

The Hide label checkbox allows you to hide the label of the component altogether. Although not common, you might check this box if you instead want the label, or prompt, in the "Default value" field instead.

The Disabled checkbox makes the field uneditable by the user. Not used often, but can be used if you want to enter Default text and not allow it to be changed.

Once you've customized the component, click Save.

Now we have one component in our webform, name. Let's add another one, email address, since we want to get ahold of our volunteers via email. To add this, type in Email into the component name field and then choose the type - E-mail. You can edit the parts of the component or just scroll down and save.

Continue adding components until you're done then test the form by filling it out to make sure your fields work.

Configuring the email recipient of a webform

Once you're done adding the fields you want, click the Emails button at the top of the form. Here you can add (one or more) email addresses for whomever should receive the webform submissions. You can even send different emails to each recipient, which is handy if you want to send a confirmation message and a copy of the submission to the sender, and instructions along with the submission to someone at your organization who needs to follow up.

Note that the webform submissions will always be saved and available on the site, attached to the form itself, but it's a good thing to have someone notified when they are submitted, too.

To add a recipient, either enter their email address next to the Address radio button, or use the Component value if their email address will be collected using an "Email" type form component.

On the next screen you can customize how you want the email to appear - the send from name, address, even the body of the message that is delivered.

Allowing visitors to sign up for your email list - the "Subscriptions" button

You can use a webform to sign people up for your mailing list, which is used to send Bundle & Blast™ emails from your site. There is more on this in the Bundle & Blast™ article, but in a nutshell: if you have synchronized your site with Mailchimp so that your groups are updated, then on this tab you will be able to select groups to add your visitor to when they submit the form. You can also choose to send a welcome message, confirmation message, or nothing.

Configuring overall form behavior - the "Form settings" button

Confirmation message: You can optionally enter text that the user will see when they complete the form.
Redirect URL: instead of a confirmation, you might send them to a page within your site.
Submission limit: optionally restrict the number of times a logged in user can submit the form. Note that this only works for logged in users and will cause problems if you set a limit and you plan to have anonymous / non-logged-in users filling out the form!
Status of this form: You can close the form to submissions if you have received the limit you'd like.
Advanced settings: click the text to expand this link, and choose from the options provided. The option to "Show complete form in teaser" is found here, and enables visitors to fill out the form on a landing page, instead of being required to click through to the full post to complete the form.

The Results tab

You can get here from the edit hover flyout (Webform results) or by editing the post and then choosing the Results tab.

Submissions button: view the webform submissions in a list, including date/time, user, IP address, and View / Delete links.

Analysis button: The system has a built-in analysis function, allowing you to view statistics about the submissions of the form.

Table button: Allows you to see all submissions in a table. Other than downloading, this is often the most useful view.

Download button: download all the results to Microsoft Excel or other spreadsheet program

Choose the format you'd like to export in: Delimited text or Microsoft Excel
(Optional) Click on the text link "Select List Options" where you can choose how your information will be downloaded.
(Optional) Click on "Included export components" to choose what information to download (you may not want every single detail the webform has collected, like IP address, etc).
(Optional) Click on "Download Range Options" to choose a specific range to download
Click the Download button and the file will download onto your computer as a CSV or XLS file which can opened, edited, and studied.

Clear button: will clear all of the webform submissions; not suggested unless you're clearing test submissions before your site goes live.

More (advanced) fun with webforms!

Create a conditional webform

Create a post (you can't have a webform without a post). Configure your webform by clicking on the flyout button on your post and selecting "configure webform".
Add the "Select options" list that you would like to make conditional. (Let me know if you need help with creating a select options list)
Scroll down and save.
Create the next component you would like to appear after selecting one of the options in your previous component. This can be any of the options (textfield, select options, email address, etc...).
When you are in the editor for creating this component, you'll see a textlink at the bottom called "Conditional rules". Click on it to open up your options.
Select the component you would like this conditional response to relate to.
Now you can determine whether the new component will appear or disappear depending on what is selected under the "Operator" drop down.
Enter in the value of the selection you would like to be conditional from the previous component. This value will be the information you added before the pipe "|" of your select options.
Scroll down and save component. Test it out to make sure everything works.

Turn on/off captchas (the security verification code) on webforms

Go to "configure webform" on the form you wish to turn captcha on/off (it is on by default).
Click on the tab called "Form Settings" and scroll down to the bottom, click on the text link called "Advanced settings"
At the bottom of the advanced settings there is a checkbox called "Bypass Captcha." This disables the Captcha, but could lead to SPAM submissions - just something to be aware of.
Scroll down and save!

Add a webform component that sends submission to one department or email address in a list of choices

On the edit hover flyout for the post, choose "Configure webform"
Add a form component of type "Select list"
On the next screen, below the Options boxes, click the box to "Customize keys (Advanced)" - see below, 1
In the options field, add email addresses of the recipients on the left, and the word or phrase you want the visitor to see on the right - see below, 2

Scroll down and save
Navigate to the "E-mails" tab and add the Select List. For example, if you titled your Select List "Inquiry Type", add the component value, "Inquiry Type."
On the next screen, you can edit any of the options or simply scroll down and save.
Next edit the post your webform is attached to and save it (just for caching reasons).
Then, double check and test that your changes are correct and the inquiries go to the proper email addresses.

How to add bundled content so there are posts below the webform

Create a post and add desired webform components, save.
Edit the post and scroll down to the grey vertical tabs.
Click on the "Bundled content" tab
Search for the posts you would like to be bundled, select them and then scroll down and save.
The bundled posts should now appear at the bottom of your original post.