Webforms

The Webform module allows you to collect information from site visitors. This module gives you the ability to create surveys, multi-page questionnaires, contest forms etc. Webform features a basic analysis of the results collected, which can be downloaded from the website.

NOTE: Webform will be enabled on IC sites upon request. Please send us a request from the Store Features page (Store > Configuration > Account Information and Preferences > Store Features).

WEBFORM COMPONENT TERMS

When creating your webform you can select from several different component types:

1.     Date - Provides a date field that can be entered by selecting a month, date, year or via a pop-up calendar.

2.     Email - Provides a field that will validate the format of the entered email address

3.     Fieldset - Allows you to separate your fields into groups

4.     Hidden - Allows you to add a field that will be hidden from the display itself but will gather data behind the scenes.

5.     Number - Provides a field that will validate the content entered is a numeric value

6.     Page Break - This splits your form into multiple pages by splitting the entries above it onto one page, and below it onto another page.

7.     Select Options - Create predetermined options your visitors can choose from

8.     Text Area - Provides a large multi-line text box

9.     Text Field - Provides a single-line text box

10.  Time - Provides a time field that can be formatted to offer 12 or 24 hour time slots in 1, 5, 10, 15 and 30 minute increments

WEBFORM CONFIGURATION OPTIONS

Every component type has additional settings which can be used to manipulate the display of the component, or validate the entered data. Because each component type is different, there will be differences in the settings that will be shown on each of their configuration pages. The configuration options available are:

1.     Label - This is the field name and can be changed at any time. It is required and will be used to identify the column of data in reports.

2.     Field key - The field key is automatically generated by webform and is used to identify the component internally within the system. It is a required field and we do not recommend changing it from the system default.

3.     Default value -  Under certain circumstances you may want to have a component pre-populated with data. All components that support this feature will have an option for a  default value on their settings pages. You can either type in a value or use a token.

4.     Token values -  Tokens are placeholders that will be replaced by an actual dynamic value when the form renders. For example, the token %username will be replaced by the actual username of the logged in user.  Selecting the Token Values heading provides a list of all available tokens for that field.

5.     Description -  There are times where you might like to explain to the user what the purpose of a particular field is or what kind of information is being requested. The Description field provides an area to do so. You may use token values here as well.

6.     Validation -  The webform module makes some basic field validation available. Users will be unable to submit a form if any one or more of these rules are broken by their attempted submissions:

○      Mandatory: Check this box if a field absolutely must receive a value from the end user and may not be left blank. By default, if this setting is checked, the field label will be marked with a red asterisk to indicate that user input is required for this field.

○      Unique: This is a useful setting for fields where no two form users may enter the same value, for example, e-mail address or member id number.

○      Max length: You can specify the maximum number of characters that users may enter into a field.

○      Start date/End date: You can specify the earliest and latest date that may be entered into a field. This field accepts any date in any GNU Date Input Format. Learn more about what date options are possible by clicking on the GNU Date Input Format link that appears with this option.

○      Integer: When enabled this allows only integer values such as 12.34 to be entered and considered valid.

○      Minimum/Maximum:You can specify the minimum or maximum numeric value entered into a ‘Number’ field.

○      Step: When enabled, this will limit the numeric value options to specific increments, for instance, entering ‘10’ will allow values such as 10, 20, 30, etc.

7.     Display - We have several options that can affect the manner in which a field is rendered on the form:

○      Width: This setting defines the number of characters that will be visible in the text field.

○      Prefix text left: You can specify default text to display to the left of the text field you are creating, such as, $ or #.

○      Prefix text right: You can specify default text to display to the right of the text field you are creating, such as, lb, kg, or %.

○      Label display: Field labels may be specified to be displayed above the input field (Above), adjacent to the input field (Inline), or not at all (None).

○      Enable popup calendar: When enabled, the user is provided the option of selecting a date from a pop-up calendar.

○      Use a text field for year: When enabled, the user is provided a field to enter the year of the date in question instead of a dropdown selection.

○      Collapsed by default: When enabled the fieldset will be set to ‘closed’ by default

○      Collapsible: When enabled, the user can choose to make a fieldset open or closed.

○      Hidden type:

■      Secure value: Allows the use of all tokens, even for anonymous users

■      Hidden element: This is less secure and changeable via JavaScript

○      Resizable: When enabled the user is allowed to resize the field while viewing it.It is only resized for their view and does not permanently change your form.

○      Hide label: When enabled the label of this field will be hidden from the view of the user

○      Height/Width: You can specify the height and width of a text area field.

○      Time format -

■      12-hour (am/pm): When enabled the time options provided will be in a format using A.M. and P.M. - 9:30 p.m.

■      24-hour: When enabled the time options provided will be in a format using a twenty-four-hour clock - 20:55

○      Minute increments: Lets you decide in what increments times can be selected (1 minute, 5 minutes, 10 minutes, 15 minutes and 30 minutes.

○      Disabled: You may wish to show to your users a default value that they may not change, such as their username token value. To make the field value non-editable check this box.

○      Private: Certain fields may be required for the use of form administrators, but do not require any form user input. By checking this box, only form administrators will have access to this field and it will not be shown when the form is rendered to non-administrative users.

8.     Next page/Prev page button label - Allows you to determine what text is displayed to indicate a user may move to the next page or previous page when the form consists of multiple pages.

NOTE: Not all components will have every configuration option available. If it is available, it will be on the configuration page for that component.

CREATE A WEBFORM

In the examples below, we create two basic web forms and utilize each component type just to give you an idea of what is possible.

Navigate to: Content > Add Content > Webform

REWARDS PROGRAM WEBFORM

The example below guides you through creating a rewards program enrollment form. The example utilizes several different components including pagebreak and also includes a conditional rule. Remember, this is just an example and can be altered to meet your needs.

1.     Enter a title - Example: Rewards Program

2.     Enter a body (optional) - Example: The Reader Rewards plan is a frequent buyers’ plan to thank you for shopping at our store or from our website. Enrollment is FREE and includes: $20.00 reward certificate for every $100 spent on ANY item in our store. Invitation to our members-only monthly newsletter with exclusive offers. Enrollment is valid for one year. Ready to enroll? Complete the signup form below.

3.     Adjust the page settings

A.    Menu Settings: If you would like your page to be a clickable link in a menu, select ‘Provide a menu link’ and fill out the fields in this section.

B.    Book Outline: Can be used to create a Table of Contents.  Anything associated with a book will have automatically generated links to the prior and next topic in the book.

C.    URL Path settings: We highly recommend using the ‘Generate automatic URL alias’ option. However, if you'd like to make the web address of your page something specific, enter the address in the provided field.

D.    Publishing Options: - Is the page ready to go live? Select your publishing option

4.     Save

5.     Create your webform by adding the webform components

A.    Create Field - Date

a.     Enter a label - Example: Date of Enrollment

b.    Select the type -  Date

c.     Click add - Configure the date field:

●      Default Value - Example: We want this field to be automatically filled in with the date the form is being submitted, so we are using the GNU Date Input Format - today

●      Description (optional) - Example: Your enrollment will be valid for ONE year from this date.

●      Review the ‘Validation’ settings - Example: We are leaving this set to the default GNU Date Input Format which is most common and we are making this a required field.

●      Display - Example: We are leaving the display defaults in place, which allow a popup calendar option along with a select list for the date.

d.    Save Component

B.    Create Field - Email

a.     Enter a label - Example: Email Address

b.    Select the type - Email

c.     Click add - Configure the email field:

●      Default Value - Example: We want the visitor to enter their email but, if they are logged in, it should capture the email for their account. So, select ‘User email as default’ which provides the necessary token.

●      Description (optional) - Example: Please provide your email address

d.    Save Component

C.    Create Field - Text field

a.     Enter a label - Example: Full Name (first and last)

b.    Select the type - Text field

c.     Click add - Configure the text field:

●      Default Value - Example: Leave blank

d.    Save Component

D.    Create Field - Select Options

a.     Enter a label - Example: Is this your first time enrolling?

b.    Select the type - Select options

c.     Click add - Configure the select options field:

●      Default Value - Example: leave blank

●      Description (optional) - Example: Please let us know if you are enrolling for the first time or renewing a previous enrollment.

●      Options - Example: We need to provide the possible answers for this question in a format of ‘safe_key|some readable option’ what the means is that it needs a machine readable alpha/numeric response with no characters and then a display response -

○      yes|This is the first time I am enrolling

○      no|I am renewing a previous enrollment

●      Validation - Example: We are making this field mandatory

d.    Save component

E.    Create Field - Text field

a.     Enter a label - Example: What is your ID number?

b.    Select the type - Text field

c.     Click add - Configure the text field:

●      Description (optional) - Example: This can be found on the back of your Rewards Plan card and in the original enrollment confirmation email you received.

d.    Save Component

F.    Create Field - Hidden

a.     Enter a label - Example: Username

b.    Select the type - Hidden

c.     Click add - Configure the hidden field:

●      Default Value - Example: We want to capture the username of the person who is submitting this form if they are logged in, but we do not need them to see this field, so we have selected to make it a ‘hidden’ field and have set the default value to the username token: %username

●      Display - Example: Leave this to the default of ‘Secure value’

d.    Save Component

G.    Create Field - Select Options

a.     Enter a label - Example: Would you also like to be enrolled in our Monthly newsletter?

b.    Select the type - Select options

c.     Click add - Configure the select options field:

●      Description (optional) - Example: Our monthly newsletter contains special savings and coupons, save time and enroll in both now!

●      Options - Example: We need to provide the possible answers for this question in a format of ‘safe_key|Some readable option’ what the means is that it needs a machine readable alpha/numeric response with no characters and then a display response. So we’ve entered:

○      yes|Yes, please subscribe me

○      no|No, do not subscribe me

●      Validation - Example: We are making this field mandatory

●      Display - Example: Select ‘List Box’

d.    Save component

6.     Split your pages - you can also split this form into multiple pages. Example: Using the steps below we will split this form into 3 pages setting one of the pages to only appear if the previous question is answered ‘No’:

A.    Enter a label - Example: Page 2

B.    Select the type - Page Break

C.    Click add - Configure the page break field:

a.     Display - Example: We are leaving the button language to the default but you may adjust them to your preference.

D.    Expand ‘Conditional Rules’

a.     Set the ‘Component’ to ‘Is this your first time enrolling?’

b.    Set the ‘Operator’ to ‘is one of’

c.     The value should be the response that should prompt this page to appear. Example: We want this field ‘Reward ID number’ to appear only if the response to ‘Is this your first time enrolling?’ is No, I am renewing so the value entered should be No

E.    Save Component

F.    Drag your Page 2 break component to be placed in front of the first question for page 2. Example: What is your ID number? and Save

G.    Repeat steps a-c only but change the label to Page 3 and Save component

H.    Drag your Page 3 break component and place it in front of the first question for page 3. Example: Would you also like to be enrolled in our Monthly newsletter?

I.      Save

NOTE: You may review your fields and arrange the order or set the required ones to mandatory and select Save.

Your webform is now created.

 

BOOK REVIEW WEBFORM

The example below guides you through creating a book review form that customers can use to add their review for their favorite book. Please note that is just an example and can be altered to meet your needs.

1.     Enter a title - Example: Submit A Book Review

2.     Enter a body (optional) - Example: Love to read? Love to give your opinion? Great! We want to hear it! We are looking for avid readers to submit reviews of their recent reads. Simply fill out the form below.

3.     Adjust the page settings

A.    Menu Settings: If you would like your page to be a clickable link in a menu, select ‘Provide a menu link’ and fill out the fields in this section.

B.    Book Outline: Can be used to create a Table of Contents.  Anything associated with a book will have automatically generated links to the prior and next topic in the book.

C.    URL Path settings: We highly recommend using the ‘Generate automatic URL alias’ option. However, if you'd like to make the web address of your page something specific, enter the address in the provided field.

D.    Publishing Options: - Is the page ready to go live? Select your publishing option

4.     Save

5.     Add your webform

A.    Create Field - Text field

a.     Enter a label - Example: Name

b.    Select the type - Text field

c.     Click add - Configure the text field:

●      Description (optional) - Example: This will be included with your review and may be your actual name or a preferred nickname.

d.    Save Component

 

            Repeat step A to also create text fields for Title, ISBN and Author.

B.    Create Field - Email

a.     Enter a label - Example: Email Address

b.    Select the type - Email

c.     Click add - Configure the email field:

●      Default Value - Example: We want the visitor to enter their email but, if they are logged in, it should capture the email for their account. So, select ‘User email as default’ which provides the necessary token.

●      Description (optional) - Example: Please provide your email address, this will not be included on your review.

d.    Save Component

C.    Create Field -  Number

a.     Enter a label - Example: How many times have you read this book?

b.    Select the type - Number

c.     Click add - Configure the number field:

●      Description (optional) - Example: Please tell us how many times you have read this book.

●      Validation - Example: We’re allowing a minimum of 1 and a maximum of 20

●      Display - Example: Since we entered a minimum and maximum we have set the display element type to a ‘select list’ and left all other display options to their default.

d.    Save Component

D.    Create Field - Text Area

a.     Enter a label - Example: Review

b.    Select the type - Text area

c.     Click add - Configure the text area field:

●      Description (optional) - Example: Provide us with your review.

d.    Save Component

E.    Create Field - Time

a.     Enter a label - Example: What time did you read this book?

b.    Select the type - Time

c.     Click add - Configure the time field:

●      Description (optional) - Example: Please provide the time you are submitting this review - it is for our records only.

●      Display - Example: We are selecting a 12-hour time format in 15-minute intervals

d.    Save Component

6.     Order your fields - using the drag and drop arrow re-order your fields into the order you wish them to display and select Save. You can take this a step further and also group them into fieldsets:

A.    Create Field - Fieldset

a.     Enter a label - Example: About the Book

b.    Select the type - Fieldset

c.     Click add - Configure the fieldset field:

●      Description - Example: Please provide the following information about the book you are reviewing.

d.    Save Component

B.    Using the drop and drop arrow, drag that field set field ‘About the Book to be positioned right above the first question that belongs to this group and click Save

Your webform is now created.

SET YOUR SUBMISSION EMAILS

Navigate to the ‘Emails’ tab for your web form

 

1.     Enter the email address that should receive notification that a submission has been made for this web form

2.     Click add

3.     Configure the email to your preferred appearance

a.     Email Subject

b.    Email from address

c.     Email from name

d.    Email template - you can use the token values and included email values to design a custom email

4.     Save email settings

 

SET YOUR FORM SETTINGS

Navigate to the ‘Form Settings’ tab for your web form

1.     Confirmation Message - Enter the message you would like displayed to your visitor after successfully submitting their completed form.

2.     Redirection location - Set where the page redirects

a.     Confirmation page - most common

b.    Custom URL - you may create a separate page with a confirmation page and provide the url to the page here

3.     Total submissions limit - are you only allowing a specific number of submissions. Example: You might set a limit if you only wanted to review 25 nominations

4.     Per user submission limit - can a user submit more than one form? Example: You may set a limit on the number of submissions per user. Not recommended for forms that accept submissions from anonymous users

5.     Status of this form - you can close the form when you no longer want submissions to be made

6.     Submission access - Restrict which roles can submit this web form. If you enabled a user submission limit, you will want to remove 'anonymous user' for the roles who can submit.

7.     Save configuration

 

ACCESS AND REVIEW YOUR WEBFORM DATA

Navigate to: Content > Webforms you can view submissions, analysis, tables and download the information as well.

The table on his page is broken down into 3 columns - Title, View, and Operations. Each column contains clickable action links that take you further into the form.

1.     Title - This column displays the title of each created webform. Selecting the title takes you to the published page.

2.     View - This column provides you with 4 view options for the data submitted through each of your webforms:

a.     Submissions: Provides a table of each submitted form and allows you to view the submitted information, edit the information or delete it entirely.

b.    Analysis: Provides a basic review of data received and is displayed in the same sequence as our webform components. The type of analysis on a particular component is determined by the type of data the component stores:

■      Select option component types will list all of the available options in conjunction with a count of the number of times each option has been selected among all of the submissions received to date.

■      Text input components will show us how many submissions have left this field blank, how many have included a value for the component, and finally, an average word count calculated from the submissions where the submitted value is not blank.

c.     Table: Provides a simple and clean view of the submission results in a table format. Each webform field is granted its own column and the submitted data displays accordingly.

d.    Download: There are several options we may use to define our download request parameters:

■      Export format: This can be either a Delimited text file or a Microsoft Excel file.

■      Delimited text format: As the submitted data is exported in its chosen format, you need to tell Webform how our spreadsheet application knows where one field's data ends and the next one starts. Selecting a delimited text format allows you to do so, however, it is important to select the delimiter carefully, or our spreadsheet will provide incorrect results. For instance, selecting a comma as the delimiter would work only if no commas is in the submitted data. If commas are present in the submitted data, the spreadsheet software will split one field's data across two or more columns, depending on the number of embedded commas in the data.

■      Select list options: When you configure a Select Options component, you specify two values per option on the component settings page—the internal key and the readable option. In this control, you may specify which of these two values is included in the data download. You may also specify whether the various selections per component should be listed each in their own column or coupled together in a single column.

■      Include export components: You may not always want or need to download all of the submitted fields. On those occasions where only a few of the form fields are needed, you may uncheck the fields you do not need.

■      Download range options: Just as you do not always want or need to download all of the submitted fields, you may also wish to download only a specific set of submissions and may use these options to exclude a range of submissions.

NOTE: Once you have configured the download format, select the ‘Download’ button and make sure to save your file once downloaded.

3.     Operations - This column provides you with the actions you may take on your existing webforms:

a.     Edit: This brings you straight to the node you initially created for your webform, in edit mode and you may make changes to it.

b.    Components: This brings you straight to the webform components page for the individual webform, where you may edit or add components.

c.     Clear: This will clear ALL SUBMISSIONS for the individual webform. This action cannot be undone and should be used with caution.

 

RECAPTCHA

In an effort to reduce the amount of spam submitted through your webforms we highly recommend adding ReCaptcha to each form.

FIND THE FORM ID

1. From the admin menu go to Content > Webforms
2. Find your webform > select 'edit'
3. In your browser address field you will see a node number. For example, https://www.storename.com/node/1550/edit.  This node number will be different for all webforms, in this example, it is 1550
4. Make note of that ID number
5. Repeat steps 1-4 to find ID for all webforms

ADD RECAPTCHA

Navigate to  Configuration > People > Captcha

1. Scroll down until you see the empty Form_ID field
2. Type the following into the empty field: webform_client_form_1550 (1550 is the example ID, you should change this based on the ID you made note of)
3. Set the challenge type to 'Default Challenge Type'
4. Save Configuration
5. Repeat steps 1-5 until you have added reCaptcha to all webforms
6. Confirm reCaptcha has been added to each form by logging out and visiting the webform page, you should see reCaptcha added to the bottom of the form.