13
7.2 Komodo CMS User Guide – Form Builder Module Version 7.2 November 2014 Melbourne 33 Tope Street South Melbourne VIC 3206 Australia t +61 3 9282 9888 f +61 3 8699 1100 e [email protected] Sydney Level 2, 68 Moncur Street Woollahra NSW 2025 Australia t +61 2 9302 0200 f +61 2 9302 0239 e [email protected]

Komodo cms form builder module v7 2

Embed Size (px)

DESCRIPTION

Guide to using form builder module

Citation preview

7.2

Komodo CMS User Guide – Form Builder Module Version 7.2 November 2014 Melbourne 33 Tope Street South Melbourne VIC 3206 Australia t +61 3 9282 9888 f +61 3 8699 1100 e [email protected] Sydney Level 2, 68 Moncur Street Woollahra NSW 2025 Australia t +61 2 9302 0200 f +61 2 9302 0239 e [email protected]

KOMODO CMS USER GUIDE – FORM BUILDER MODULE V7.2

Create web forms (surveys, polls etc) in minutes. The non-technical form builder includes email and

data management and a separate testing environment.

The Form Builder Module can be accessed from the Komodo grey menu bar under the Module drop

down list (Fig.1).

Fig.1

Creating Forms

To kick off the process, click on Add New Form button (Fig.2) and give your form a name (Fig.3).

Scroll to the bottom of this window and save the change. We will return to the Form Details page

later.

TIP: This widow is also where you’ll access the complete list of forms you have created and where

you come to edit and export data which is auto saved by the cms (from the Form Data tab).

Fig.2

Fig.3

The next step is to link your form to the page where it will be accessed from. To do this, go to the

relevant page and navigate to the dropdown Komodo > page properties in the grey menu bar.

Select the Form Tab from within the page editor, and then select the form you are linking to (Fig.4).

Remember to save the changes as you move through these stages.

Please note, only one form can be attached to a webpage at the one time.

Fig.4

You are now ready to design your form.

TIP: It is a good idea to set up a table (to create tables, please refer to the Komodo CMS General

User Guide – page 15) which will give your form a professional structure. For each form field you also

need to include a text label so using a table is the neatest way to achieve this. See Fig.5 below for an

example of the structure to use. Ultimately, the way you set-out your from is entirely up to you.

Fig.5

To add a form field, select Add New Item from the menu bar and then select Form Builder (Fig.6).

This will give you a range of form fields to choose from including:

Text Field

Drop Down Menu

Checkbox

Radio Button List

Spam Blocker

File Upload

Form Button

Fig.6

Let’s take a closer look at each Form Builder field options.

Fig.7

Text Field

A text field gives you the

option of a text box or a

text area (Fig.7) and you

can choose the width you

require. Using the style list

you can also choose the

text style you would like

used in the box.

Select ‘Mandatory: Yes’ to

make this a required field.

Tip: Ensure the field name

corresponds with the front

end field name for easy

identification and selection

when it’s time to set up the

backend of your form.

Validation rules for phone

numbers and email address

text inputs content items

have been introduced.

Setting this parameter will

prompt the web user by the

system to check and re-

enter the number, email

address accordingly.

Fig.8

Drop Down Menu

A Drop Down menu (Fig.8)

allows you to add multiple

options for a user to select

from. You can choose the

width you require, the

style of text as well as

making the field

mandatory. Choose a

default option to attract

attention.

Checkbox

A Form Checkbox allows you to gather data on multiple areas and gives you the option of a text box

or a text area and you can choose the width you require. Using the style list you can also choose the

text style you would like used in the box. Select ‘Mandatory: Yes’ to make this a required field.

Please note, you’ll need to create a check box for each individual criteria (as seen in the screen

capture below).

Radio Button List

Using Radio List buttons limits respondents to choosing only one option. So, if you need a yes or no

answer to a question, this is the form field to use. Once again, you can choose style of text, make the

field mandatory and choose a default option to attract the web user’s attention. There is also the

option of displaying radio buttons vertically or horizontally.

Fig.11

Spam Blocker

Web bots and

spiders crawl

through websites

looking for unsecure

web forms to spam

and inundate email

inboxes with email

junk. To ensure your

email inbox is not

one of these always

add the spam

blocker (Fig.11)

before the form

submit button.

Fig.12

File Upload

To allow web users to

attach a file/document

to your form (eg. Job

application form,

competition form etc)

utilise the ‘File Upload’

content item. First,

decide where the

attachment will be

saved – attached to

the admin email only

(1.) or within a folder

in the File Library (2.)

and select this from

File Save Location

dropdown. Set

remaining parameters

as required.

TIP: You’ll require

multiple File Upload

content items for more

than one attachment.

Fig.13

Submit button

There are two types of

buttons you can select

from – standard

button (Fig.13) and

image (Fig.14)

For both options there

are 3 types of form

buttons: Complete

Form Entry; Continue

Form Entry – use this if

your form continues

over another page or

several pages; Cancel

Form Entry.

You can choose the

text displayed on the

button as well as the

destination a

respondent goes to

after they click on

submit, like a ‘Thank

you’ page.

Fig.14

Submit button...cont.

If you select the image

display for the button,

you will need to first

upload the image to

the file directory and

then click on ‘Select

File’ to attach the

button image.

Complete all other

parameters as

required.

The final steps are to set-up the administrator area so you can direct where and to whom the

submitted form data goes to in your organisation.

Proceed to the next section of this document to find out how.

Form Settings – Visitor and Administration Email Notifications

After you have created your form by adding the required fields, return to the Form manager (Fig.2)

and click on the form in the Form Name column. You will see the following sections and options:

Visitor Email

This function sets up an automatic email response to respondents who complete the form. You will

need to have an email address field set up in your form for this option. Simply enter the email

address you would like the email to be sent from, the message (in Email Content) and select the

email address field from the Recipient Email Address Field dropdown (see screen capture of next

page).

Administrator Email

This function sets up an automatic alert to the form owner(s) with the details of form entries. Simply

enter the email address you would like displayed (eg. [email protected]), the

email address of the recipient (unlimited), the subject and the content you want displayed. Use the

Add Field Response To Email list to select the information you would like included in the email.

TIP: It’s important to place each recipients email on a separate line – ensure no spacing and comas

are added after each email address.

Missing Mandatory Fields Notification Options

Use this to alert respondents if they have not completed mandatory fields. Add as such as “please

complete the following missing mandatory field(s)” and then choose whether to set the message to

occur for each mandatory field or all at once.

Remember to always save your form details.

TIP: You have the option to leave this area of the form management area blank. The system will

capture the data regardless.

As well as setting-up email notification to the form owner(s), the system automatically collects and

stores the form data in a separate part of the form manager module to enable it to be exported at

any time.

Collect & Export Form Data

Collecting and analysing form data is made very easy with the export option included with the Form

Builder module. To export your data, return to the Form manager (Fig.1), select the relevant form

and then the Form Data tab. You will see the options to either Export Data or to Clear Data.

Export Data – data is exported into an excel spreadsheet which allows you to analyse the responses,

prepare graphs and charts, reports etc.

Clear All Response Data – this will permanently clear all the response data from form. Make sure

you have exported and recorded the details before you select the option.

Tip: Always test your form to ensure all fields are captured and that the recipient and administrator

emails have been set-up correctly and are capturing all the data as expected.