Introduction to Webforms
Form Building Basics
Editing Tools Walkthrough
Viewing Results

 

Introduction to Webforms

Webforms can be added to SiteNow as questionnaires that are accessible to users. The results and statistics are recorded after submissions are sent, and may be accessed by privileged users.

Webforms have two parts, the page and the form. The page includes the title and description of the webform, and will appear above the form itself. The description can be used to explain the purpose of the form and/or submission guidelines. 

To begin creating a webform, click 'Add content' and select 'Webform' at the bottom of the resulting list. Enter the title of your webform and a description if you wish, and then click 'Save and add form components' at the bottom of the page to move on to the form builder. 

 

Form Building Basics

Once you've been directed to the form builder, you will see a variety of fields (including textfields, email, radios, select lists, dates, files, and more) to choose from. You can click and drag a field from the 'Add a Field' palette on the right.

The webform builder screen

 

Once you've selected a field, and dragged it into the 'Form preview' section, you can click on the yellow box (or the pencil icon in the upper right corner of this box) to pull up a list of additional options that enable you to add to and edit the field. 

New textfield box

 

Editing Tools Walkthrough

Although every field has different options, these are the basic editing tools for a textfield. Many other fields have similar options.

As you make changes in the 'Properties,' 'Display,' and 'Validation' tabs, you can see what the final product will look like right under 'Form preview.' This updates automatically as you go along.

Form preview box

 

Beneath the 'Properties' tab, there are three items. 

  • Firstly, you are required to enter a title for your field.
  • You may also enter a default value, although this is optional. This is what appears in the box that the user will be entering text into - similar to how some search bars contain the word 'search' within the bar automatically to give users additional information about what they are supposed to type into that box.
  • You can also enter a description for your field. This is also optional. 

Textfield Properties tab

 

You are given additional options regarding what users will see under the 'Display' tab.

  • Entering text into the 'Prefix' bar means that that text will be shown right before the field (in this case, a text box), while text entered into the 'Suffix' box will be shown right after the field.
  • The 'Placeholder' box is essentially the same as the 'Default value' box of the 'Properties' tab; however, 'Default Value' takes priority. This means that if you have something typed in as the default value for the text box, the placeholder will not replace that. 'Default value' must be empty if you want your placeholder to be shown. Many users prefer using placeholders instead of default values. This is because placeholders automatically disappear when a user click on the box, while default values must be manually deleted if a user clicks on the box. Both 'Placeholder' and 'Default value' are optional, so if you want no text to be shown in the text box, you may leave these both blank.
  • The 'Size' box adjusts the size of the text box. For example, if you enter '10' into the size box, the text box will be long enough to fit 10 characters. If you leave this blank, the text box will default to 60 characters. 
  • The 'Label Display' dropdown refers to the title you entered in the 'Properties' tab, allowing you to select its placement relative to the field. You may choose to display the title above the field (this is the default), in line with the field, or not at all. 

First five options under Display tab

There are four more options beneath the 'Label Display' dropdown. 

  • The 'Disabled (read-only)' checkbox allows you to disallow users from entering anything into the field, making it read-only.
  • The 'Private' checkbox makes the webform private, viewable only to users with access. If you plan for your webform to be public and accessible to anyone who visits your site, it is best to leave this unchecked, as is the default. 
  • Finally, the last two boxes involve CSS (Cascading Style Sheets). A feature of CSS is a class, which defines a set of attributes (e.g. background color, width, height, etc.) and can be applied to any amount of html elements on the page. Adding CSS classes involves creating style sheets with code. This webpage can provide instructions on creating style sheets. Leave these two fields blank if you have no need to highly customize your webform.

The final four options under the Display tab

 

There are three final editing options under 'Verification.' These allow you to limit the responses you receive. 

  • Checking the 'Required' box means that a user must type something into the field in order to submit the form. A red asterisk will be added at the end of the title to signify this.
  • Checking the 'Unique' box means that, if you have multiple versions of the same field on your form, a user cannot enter the same thing into more than one box. If the user does do this, they will not be able to submit the form. 
  • The 'Max length' box allows you to place a limit on the amount of characters that a user can type in. Leaving it blank will mean there is no character limit. 

Verification tab options

 

Viewing Results

The easiest way to view results is by navigating to the published webform and clicking 'Results' on the corresponding toolbar.

Webform toolbar

Under the 'Submissions' subtab on the far left, you'll see a list of all submissions. You will be able to view the date and time of each submission, as well as the names of the users who submitted the form and their IP addresses. 

 

The 'Analysis' subtab is also helpful for knowing things like averages and calculations. You should get a screen where you can 'Add Analysis Components' by clicking on the blue text. 

You should get a dropdown similar to the one shown below, which lists all components included in your webform. Check the boxes of the components you want to be included on the analysis page (meaning they will be analyzed for general information). If you want every single component analyzed, click 'Include All Components' at the top. 

The include components button

After adding these components, you should see a chart similar to the one shown below. This gives you basic information - how many users left a specific component blank and how many entered a value, as well as the average submission length in words.

The analysis chart for a webform

 

The content under the 'Table' tab is very similar to that under 'Submissions,' but it gives you additional information. You should be able to ee exactly what each user submitted under each form component. 

Webform toolbar results button and table subtab

 

The 'Download' tab allows you to export a copy of the analysis information. You have several options for how you want to download the information, and you can select the content you'd like to download as well as the formatting it comes in. 

Webform results button and download subtab

 

Start by going to navigating to your webform and clicking the 'Webform' button. After that, click on the subtab 'Form Components.'

Webform form components button

In the chart containing all of the fields in your webform, click on the four-arrow symbol to the left and drag each component into the desired order. Components at the top of the list will appear first.

Dragging and dropping form components

When you're done, click 'Save' at the bottom to implement your changes.

Start by navigating to your form and clicking the 'Webform' button. Then, click the subtab 'Form settings' on the far right, beneath the webform toolbar.

Webform form settings button

Scroll down the resulting page until you see the option shown below, 'Status of this form.' To close the webform, click 'Closed.' This will prevent any further submissions.

Status of this form button

When you've done this, scroll down to the bottom and click 'Save configuration.'

Start by navigating to your webform and clicking 'Results.' Then click the 'Clear' subtab on the far right side of the mini toolbar.

Results button and Clear subtab

Click the 'Clear' button to erase all submissions you have received.

Clear button
Article number: 
102037
Last updated: 
June 23, 2016
Service: