Create a Webform

The steps below outline the process for creation of a one page Contact Us form, but
other form types use similar options and are easy to master.

Step 1. Create a New Form Page First, select Create A Webform from the
Manage Content dropdown and complete
the template as shown below.

1. Title: Add the form name. There’s no need to include the word “form.” Simply call it “Contact Us,” “Sign Up Now” or something
user friendly.

2. Webform Category: Different categories
will include distinct question sets, but all follow a similar process. Choose whether
this will be a contact form, survey, newsletter
signup or something else. This example
is a Contact Us page.

3. Layout: Select a one-, two- or three-column layout for desktop viewing. All forms collapse down to a single column as they resize for mobile.

4. Offer Expiry Date: At the top of the tabbed section, enter the end date, if applicable. If there is no end date, leave blank.

Webform Tabs

If you select Webform as the category, three unique tabs appear.

Webform

1. Form Position: Select where you want your form to appear relative to any image
you might be using.

2. Thankyou Message: Enter a message to be displayed for the user upon submission
of the form.

3. Promotion Code: Enter a code, if needed, that will be required for form submission.

4. Offer Expiry Date: At the top of the tabbed section, enter the end date, if applicable. If there is no end date, leave blank.

5. Webform Image: Visit Add an Image for detailed instructions on choosing an image
and entering the information required.

Hero Area

1. Image Style: Identify whether you would like the original image to be displayed as uploaded, or if you want to customize it. If you select Customize Image, you will be offered additional options.

a. Hero Area Text: Enter any text you
would like to appear within the hero area.

b. Hero Area Image Position: Select
how where you want your image to appear relative to any additional content
in the hero area.

c. Hero Area Background Color:
Whenever possible, the product brand color should be used.

• Enter a hex color code in the text field and click Choose. It is preferable to enter the hex values in the field provided, to make sure
the colors appear correctly on all monitors and devices.

• If necessary, you can select a color
by sliding the bar in the right column and tapping in the square to choose a specific shade. When you’re happy with the color, click Choose.

Thankyou File

1. Thankyou File: This section configures
what happens after the user completes the form submission. If you are offering a PDF for download or a follow-up by mail, select the appropriate action here. Otherwise, leave blank.

a. Print and Mail

1. Mail Message: Enter the message
you would like to appear on the file to be mailed here.

2. Print Message: You can enter a
separate message for users printing
at home.

3. Thankyou Header Image: If you have an image to appear in the header, add it here. Visit Add an Image for detailed instructions on choosing an image and entering the information required.

! Use an image with an aspect ratio of
1366x480. If you use an image with another
aspect ratio, it may be stretched or skewed
when it appears on screen.

4. Thankyou File Invoice Image: If
you are sending an invoice and
have an image you would like to include, add it here. Visit Add an Image for detailed instructions on choosing an image and entering the information required.

5. Thankyou File Sidebar Text: Enter
a message to be displayed in the sidebar.

6. Thankyou File Text: Enter a message
to be displayed in the sidebar.

b. PDF File

1. Thankyou Header Image: If you have an image to appear in the header, add it here. Visit Add an Image for detailed instructions on choosing an image and entering the information required.

! Use an image with an aspect ratio of
1366x480. If you use an image with another
aspect ratio, it may be stretched or skewed
when it appears on screen.

2. Thankyou File Invoice Image: If
you are sending an invoice and have an image you would like to include, add it here. Visit Add an Image for detailed instructions on choosing an image and entering the information required.

3. Thankyou File Sidebar Text: Enter
a message to be displayed in the sidebar.

4. Thankyou File Text: Enter a message to be displayed in the sidebar.

Additional Content

These tabs appear beneath the primary
content fields in the template.

Get step-by-step instructions for the remaining
options, including Revision Information and Publishing Options in the Additional Content Details section.

Meta Tags

Add page and content Meta Tags that
incorporate popular search terms to aid in
search performance and user access. See Meta Tags for additional detail.

Save

Save your work by selecting Save at the
bottom of the page. It will not be published
until the Published checkbox is selected under
Publishing Options.

Step 2. Add and Configure Form Fields

Expand the Menu option at the top of the browser window, and select Manage Content (rather than hovering over it to view the navigation options beneath it). Select Edit to the right of the name of the form you just created, then choose the Webform tab in
the upper right. From the dashboard, you can also Delete or Clone forms Dashboard.

1. Label/New Component Name: Enter
the label for the field, exactly as it should appear to the user.

2. Type: Select the type of information you
want the user to enter, whether it’s free text, a date or a number.

! To include introductory, footer or general text, enter “Intro,” “Footer,” or similar in the label field and choose Markup as the type. Click Add and include your text in the Value field that appears on the next page.

3. Required: Check the box at the right if the field is required.

4. Add: Select Add to enter more detail
about this field and responses allowed.

5. Edit, Clone or Delete: At the far right,
you can choose to Edit an existing field,
Clone it to create a similar field with the same component details or Delete a field.

6. Re-order Items: Select the four arrows
symbol at the left of any entry to change the order in which questions appear.

Component Details

Upon adding a field, you will be sent to an Edit Component detail page. The most common field types are detailed below. You may also include field sets, user-uploaded files, rating grids for surveys and more in your forms. In addition, you can set up conditional questions that appear based on a user’s response, incorporate a variety of validation options and settings by clicking through the options under the Webform tab.

1. Label: Edit the label you provided, if
necessary.

2. Field Key: Enter a distinct field key, if necessary for data processing, or the Label
text will be used.

3. Default Value: Enter a date, value or text for the field to default to if the user doesn’t change it.

4. Description: Provide text that will appear when the user hovers over the field, to
help them understand what needs to be entered or why.

5. Encryption: Select this for any personally
identifiable information that should be encrypted upon submission. Note that
once the form is live and there are usersubmitted results, you cannot change
the encryption setting without creating
an all-new form, so it’s best to encrypt all
personally identifiable information. Do not
encrypt any yes/no or true/false answers.
If you need to change encryption settings
after the settings are locked, you will have
to create a new form or clear all submitted
records. Remember to download a copy of
the results before clearing records as data is not recoverable.

6. Text Fields and Areas, and E-mail Fields:
If you are editing a free-text field or box,
the following options will appear.

a. Multiple (e-mail only): Specify whether
users can enter more than one address.

b. Format (e-mail only): Mark Short
Format Only if the server cannot support
various long and short format addresses.

c. Validation: Choose whether the field is
required, assure that an address or name has not already been entered or include a
character limit.

d. Display Width: Specify a width for the text field, if you do not want to use the default.

e. Display Height and Resizable (text
areas only): Enter a number of rows to
be visible in the text box, and check the
box if you would like users to be able to
enlarge the box.

f. Format Options: Specify any symbols
or words to display before or after the field, such as a currency or percent symbol. You may also have labels appear in-line, instead of above the field.

g. Disabled: Check the box if users should not be able to edit the default text.

h. Private: Check the box if this field should not be seen by public users

7. Number or Postal Code Fields: If you
are editing a numeric field, the following
options will appear.

a. Validation: Enter details to ensure that
the user has provided an accurate and allowable response. This can include upper and lower limits on numeric responses,
allowing only round numbers, ensuring that a number has not already been entered, and so on. For postal codes, you will also be asked to select countries to be checked against, as well as whether blank spaces should be inserted or removed from codes.

b. Display/Element Type (number
fields): Identify whether the user will enter
a number or select from a drop-down list.
If Select List is chosen, minimum and maximum values must be entered to appear in the drop-down.

c. Format Options: Specify any symbols
to display before or after the field, as well as how decimal places and commas
should appear. You may also have labels
appear in-line, instead of above the field. For postal codes, a width can be specified.

d. Disabled: Check the box if users should not be able to edit the default text.

e. Private: Check the box if this field
should not be seen by public users.

f. Analysis: Check Exclude Zero if you
would like blank or “zero” entries to be left out of any averages calculated.

8. Date Fields: If you are editing a date field,
the following options will appear.

a. Default Value Time Zone: The user is
likely to enter their own time zone, so it is preferable to choose their time.

b. Hide: Remove unnecessary fields from
view, such as the current year or a specific
day of the month of diagnosis.

c. Validation: Enter start and end dates to
limit allowable responses.

d. Display: Specify whether you would like to include a pop-up calendar and choose between a text field or drop-down list for the year.

e. Label Display: Select whether labels appear in-line, instead of above the field.

f. Private: Check the box if this field should not be seen by public users.

9. Wrapper CSS Classes and CSS Classes:
Apply CSS classes to the wrapper around
both the field and its label, or just the field.

10. Save: Be sure to save each component
individually as you enter them.

Step 3. Set Up Triggered E-mails You may choose to send an e-mail to a member of the customer service or sales team based on specific responses, or you may wish to send a confirmation e-mail to the user once the form has been completed. Select the E-mails tab within the Webforms submenu to get started.
Dashboard

1. E-mail Address

• Address: To send an e-mail to
customer service, sales or another
recipient, choose Address and enter the e-mail address here.

• Component Value: To send an e-mail
confirmation to the user or an address
they have entered, first make sure you have created an e-mail address component type on the form. Select Component Value, then choose the component to be used from the dropdown. An e-mail address field must be
included in the form before you can do this.

! If you have selected Newsletter ID as the
component type, the user will be added to the mailing list for the next newsletter, and will not

2. Add: Select Add to enter more detail
about the e-mail to be triggered.

3. Edit, Delete or Clone: Edit or Delete an
existing e-mail entry using the links at the
right of each row. You can Clone an entry to simplify entering multiple similar entries.
This will create a copy of the existing entry
that you can alter as needed.

E-mail Details

Upon adding an e-mail address, you will be sent to a detail page.

1. E-mail Subject: Enter a subject line for e-mails to users. For internal e-mails, you can enter a subject line or choose the default. You may also use a form component as the subject line.

2. E-mail From Address: Enter a user-friendly address for e-mails to users.

3. E-mail From Name: Enter a user-friendly department or program name, such as “Accu-Chek Customer Care” for e-mails to users.

4. E-mail Template: A default template is provided for internal e-mail messages. Choose Custom Template to create an e-mail to follow up with prospects or customers.

5. E-mail Body/Text Box: Enter the e-mail body text here. The body is HTML compatible.

6. Included E-mail Values: For e-mails to customer service, sales or other internal audiences, you will most likely want to include all the information provided by the user. For user-facing e-mails, you can select any data you would like to include.

7. Save E-Mail Settings: Save this configuration before adding another.

Step 4. Map Data to Your CRM Platform

Connect your form field labels to the labels used by your CRM system to ensure that
information is correctly entered into CRM. Select Mapping CRM from the Webforms
submenu.

1. Add or Edit: Select Click Here for Add or Edit at the top of the dashboard.

2. Select form: From the dropdown list, select one of the forms you’ve created to
align with your CRM platform.

3. Salesforce OID: Enter your the organizational ID issued to your company by
Salesforce.

4. Webform Field Key: For each of your form fields or components in the left column, simply identify the corresponding field within the drop-down menu on the right. This will ensure that your CRM system is properly populated, even if you choose form labels that don’t match your CRM platform.

5. Inserted Fields: The WCMS inserts 6 hidden fields into every form—Webform
Submission ID, Created Date, Updated Date, IP Address, E-mail and User ID. Be sure to map these to their similarly named counterparts in the CRM drop-down.

6. Map Fields: When you have completed
linking fields, click Map Fields to save.