Form Designer

How to

1. Access Form Designer
2. Create a new Standard Form
3. Edit a Form
4. Add or Edit Form Objects for User Input
5. Insert a Form onto a page or Masterpage
6. Read Form Results
7. Create a new Login Form
8. Create a new Filter Form
9. Create all three forms (integrated), Step-By-Step

Accessing Form Manager

To access the Form Designer you must be logged in with the administrator toolbar visible at the top of the screen.

• To load the content menu on the left of your screen select the button from the administrator toolbar.
• Select 'Forms' from the content menu.

The Form Designer will load in the same window. Any existing forms will be shown in the table on the right side of this window. The Manager Options menu will appear on the left side of the screen.

Up to ten forms will appear on each page of the Form Manager. When additional forms exist in a folder, the top of the Manager will change. Forward and back arrows allow movement through the pages. The drop down list shows the ID numbers for the objects on each page.

Creating a new Standard Form

To create a new form object, enter the Form Manager as described above and select 'Add Form' from the Manager Options menu.  You will be presented with three form types to choose from.

Standard form: A standard form is a form that is created to collect all of your data.  Once data has been inputted into the form, it is automatically stored on a database.

Login form:A login form allows a user to 'login' and access data/information that has been collected from a standard form.

Filter form:Filter forms are used to conduct searches on standard form data and 'filter' out selected information.

Select 'Standard Form' and click 'Next' to continue.

You will now be presented with some options to customise your form.

A title must be given to the new form on this page. All other fields are optional. Title and Description will appear in the Form Manager - identifying the form to administration users.

Once Form Objects have been inserted into the form, a new section will be added to the Form Details. This can be accessed by editing the form.

The 'Fields Displayed' list will be made up of form object names. If an item in the Fields Displayed list is NOT highlighted it will NOT appear to users when they are filling in the form. Items may be selcted individually by holding the Ctrl button whilst clicking each.

Select the 'Save' button to confirm the creation of your form. The Form Manager will load, showing the title and description at the end of the table. Please Note: the form will be blank after the initial completion of this step. See Form Objects to add user input fields.

Editing Form

To edit a form that is currently in the Form Manager, select the radio button next to that object's ID number and click the 'Edit' button from the Manager Options menu on the left of the screen. This will load the Form Details screen seen when initially creating the form. These details may be edited. Select the 'Save' button at the bottom of the screen to commit any changes that you make.

To edit the Form Objects - as seen by a user when the form has been inserted onto a page or Masterpage - see Adding or Editing form Objects.

Adding or Editing Form Objects for User Input

Items that make up the form can vary dependant on your requirements. It is recommended that you use only what is required to best collect the information you are requesting from users.

To begin adding form objects, access the Form Manager and select the radio button next to the ID number of the form you wish to edit. Select 'Edit Structure' from the Manager Options menu. This will load the Form Editor. The menu for the form editor will appear at the top of the screen. Below this is a text area in which you can insert form elements and text. Items inserted into this editor will make up the bulk of your form.

The top two rows of the Form Editor menu are similar to the Article Editor. For more information on using these features please refer to Article Editor. The bottom row of this menu is specific to form objects/elements.

Form Elements

• Clicking on the Form Editor menu to insert one of these form elements will load a small popup window. This window will request information about the form element you are adding. The six form elements described below all hold a single attribute in common. 'Column Heading' is used to identify the information supplied by the user in the email or database copy of form results. Therefore in the 'Column Heading' you should enter a short description of the information that is being requested for each form element you add.

• Some fields may be set to 'Mandatory' by selecting the yes value for that attribute. Validation occurs when a form is submitted - the computer will check that the information provided by the user matches what has been requested. If mandatory has been set to yes, but the user did not enter the requested information, a validation message should appear to them.

• 'Value' will appear initially in the text box when the form page is loaded into an Internet browser. It could be for example <enter your name here> or <enter email address>.

To edit the attributes of a form element, select/highlight that element and click the button relating to the element type from the Editor's menu. The attributes popup will be shown and can be edited in the same manner as when it was initially created.

Insert onto page or Masterpage

To insert onto a page or Masterpage you must be logged in with the administrator toolbar visible at the top of the screen.

• On the page you wish to insert the form onto, make sure you are in edit mode by selecting the button in the administrator toolbar.
• In the desired section of that page/Masterpage select the button.
• The Object Manager will load. Under Information Management at the bottom right of the Object Manager, select 'Forms' to open the Form Manager.
• Browse the Form Manager for the desired object and click the 'Insert' button next to that form's ID number.

The page/Masterpage will reload showing the form in the selected location.

For more information see Page Content or Masterpage.

Form Results

The results returned can be used for analysing, for a mail out, or can be exported to a csv file. They may be viewed via the Form Manager or the nominated email address.

• In the Form Manager, click 'Show Data' to retrieve Results.

The results will be displayed in a table.

At the top of the results table you will see three buttons followed by the table headers.

• Table headers are:
• • 'ID' - Each form result will be given an identifying number when it is created.
  • 'Created / Modified on' - records the date the user submitted their form, or edition date if it has been modified by an admin user.
  • All other table headers are created by the 'Column Heading' values defined in your form.

Each entry in the table is listed below. In the left column (for each item) is an 'Edit', 'Delete' and an 'Email' button.

• Selecting 'Edit Record' allows an admin user to edit the form details.
• 'Delete Record' will remove the result and any related file uploads from the database.
• Clicking 'E-mail Record' will deliver that form result to the nominated email address.
• 'Export All Data' allows a user to export the collected data from a standard form into a program like Microsoft Excel.

By default the columns of the result table are ordered by their ID number. To order by a different value, select the text in that table header.

Login Forms

To create a Login form you must first have a corresponding 'Standard' form to link to.

Begin by selecting 'Form Designer' from the Content menu and then select 'Login Form' from the three options. Click on 'Next' to continue.



Title: Type in a name for your Login form.  A description is optional.

Parent form: This is where your correspindong Standard form is selected.  Once logged in, this is the page that the Login form will forward to.

Editing the Login Form

Once the title has been inserted and the Parent form selected, click 'save'.  Click on 'Edit' in the manager options to return to the 'Edit Login Form' window.   On returning to these settings, there will be some new options for your Login form.

Username Field:  Depending on the data collected in the parent Standard form, the 'username' can be anything from someones first name or nickname to their email address.

Username Heading:  Type in a heading that lets the user know what to enter.  In the image above we have selected 'Email' as the username field, so a logical heading for this would be 'Email'.

Password Field:  Similar to the Username Field.  Select which field you would like to use as the password.

Password heading:  Type a suitable heading like 'Password'.

Button Caption:  Here you can type in a name for the 'Submit' button.  In this instance we have chosen 'Enter!'.

In the image above, the 'Preview' button has been clicked and an example of the Login form has been revealed.

Filter Forms

As with Login forms, Filter forms also require a corresponding Standard form. 

Begin by selecting 'Form Designer' from the Content menu and then select 'Filter Form' from the three options. Click on 'Next' to continue.

The 'Create FIlter Form' window will now appear.  Add a title for your Filter form and pick your parent Standard form.  The filter form will allow users to search and group data/records from the specified standard form.



Once you have selected your parent form, save the settings and select 'Edit' from the manager options.  Now you will find some new options for your Filter form.

Depending on your parent 'Standard' form, select the fields that you want to search.

By checking the 'Automatically show without search?' button, it will overpass the user input stage and go straight to the results.  With this button unchecked, it allows the user to input their desired search information, as seen in the preview section above.  'Show partial matches' simply means that the search will pick up similar results that are not exact to what the user has requested.  For example, if a user searches for 'Jon', results will pick up all entries with the name 'Jon', 'Jono' and 'Jonothan', as they both begin with the same three letters.

'Search Results Settings' is where you make changes to how the results will be displayed. 

'Fields to be retrieved' are the pieces of information that you want the user to see once they have conducted a search.  You can select several or all of the fields depending on how much you want to display to the user.

'Record Identifier' is the field that will appear to the left of the search resulst.  A good example of a record identifier is an image or a username.

The results of the search can be sorted in different ways depending on your standard form data.  If we had a standard form full of individuals and their basic information, you could select 'Sort results on: last name' to get a list of these people in alphabetical order.

You can also restrict how many records are displayed on a page at one time and select the maximum number of search results pages.

Step-by-step example of integrating all three forms (Tutorial)

The following example will take you though creating a series of integrated forms.  We will begin by creating a Standard form containing peoples profiles and eventually link to it with a Login and Filter form.

Creating the Standard Form:

Once you have logged in, click on 'Add Form' at the top of the manager options.



Select 'Standard Form' from the three given options and click 'Next' to continue.  The Create Form General Settings will now appear.  For this example we are making a form of profiles with basic information, so we've added the title 'Profiles' and given it a short description (optional).



Once you have entered this information, click 'Save'.  We will change more options in this window in later steps.



Once you have clicked Save, you will be returned to the manager where you will see your new Standard form.  Now we need to build our form so that we can begin adding profiles.  Continue by clicking on 'Edit' in the manager options.

After ckicling edit, you will be forwarded to the form creator.  Here we have created a very simple form for our users to submit their profiles.  The following steps will cover how this was created.

Begin by adding a table to put all our content in.  In this instace, we made a table 200 pixels wide with 2 columns and 6 rows.  We firstly combined the two top cells to add the title.  Add a title now.

The first bit of information we would like to collect is the persons name.  In the first column we simply add a title for the text field.  In the second column we add a text field by clicking the 'Text Field' button in the above menu.  A popup window with options for the text field will appear.

Validation: There are three options to select from here.  Alphanumeric, Numeric and Email.  For out 'Name' text field we will be selecting 'Alphanumeric'.

Mandatory:  This allows us to make a certain fields mandatory for the user to fill in.  We definitely what the users name so we will set 'Mandatory' to 'Yes'.

Column Heading:  Add the name of our text field here.  We are collecting the users name, so 'Name' would be a good choice.

Value:  Value allows you to put some text in the field that the user will eventually write over.  This can be handy for short instructions like "Maximum 10 characters" or "First and last name here".  For out form we will leave it blank.

Hidden:  The hidden option can be turned on so that certain data cannot be seen by the user.  Instead, it can be altered by the administrators of the website.  For our simple form, we will leave 'Hidden' on 'No'.

Character Width:  This sets the length of the text field.  Sometimes you will see that email text fields are longer to accommodate the full length of the address.  We will leave this at the default setting for this form.

Maximum Characters:  Here we can add a limit to how many characters can be entered into the field.  This is handy for password fields if we want to restrict all passwords to a maximum of 10 characters.  Because we are editing the name field now, we will allow up to 20 characters.  We will only be collecting the users first name for this form.

Type:  There are three options to choose from here.  Text, Password and Username / Unique Id.  Because we are making a name field, we will set this to 'Username / Unique Id'.

We will come to the Filter Form Id and Filter Field Name later in the example.

Click on 'OK' to continue our form.  To go back and change options later on, simply click on the field you want to edit and then click the 'Text Field' button again.

Next we will ask for the users Age.  In the left column, below 'Name', we will insert the text 'Age'.  In the right column, we will place another 'Text Field' as we did for Name.  In the pop-up option box, enter the following details:

Validation: Numeric
Mandatory: No
Column Heading: Age
Value: (leave blank)
Hidden: No
Character Width: 5
Maximum Characters: 3
Type: Text

Click 'OK' to continue.

Now we will ask for the users gender.  We will do this in a drop-down style menu with Male and Female as the options.
Click in the cell below 'Age' and type in 'Gender'.  In the right column click the 'Selection Field'  button in the top menu.  You will now be presented with a window with options to customise the drop-down.

We will be making this information mandatory, so select 'yes'.  Put the Column Heading as 'Gender'.  Leave the size blank for this field.  If we set the size to 2 lines, there would be no drop-down function and instead it would display both of the options without having to click. 

Text: add the two different options (Male and Female) in here, one at a time, followed by the 'Add' button.  You can set either Male or Female as the initial selected option by highlighting it and clicking 'Set as selected value'.

Leave Hidden on 'No'.  Click 'OK' to continue.

Next we will insert a text field for the users email address.  In the left column type 'Email' and put a text area in the right column.  Input the following options into the 'Text Field' window.

Validation: Email
Mandatory: Yes
Column Heading: Email
Value: (leave blank)
Hidden: No
Character Width: (leave as default - blank)
Maximum characters: (leave blank)
Type: Text

Click 'OK' to proceed.

Lastly we will ask for the users unique password.  Type 'Password' into the left column and add a text field to the right.  Add the following details into the text field window.

Validation: Alphanumeric
Mandatory: Yes
Column Heading: Password
Value: (leave blank)
Hidden: No
Character Width: (leave blank)
Maximum Characters: 10
Type: Password

Click 'OK' to continue.

Out simple form is now complete!  Now we can go and start adding some data entries (in our case, profiles) to the form.  Make sure you click the save  button in the form editor.  This will save your form and return you to the Form Designer manager.

To have a look at our form and add some profiles, we need to click on 'Show Data' in the Manager options.

You will come to a new screen (above) with the 'Form Data Options' and a list of entries to the right.  The list is currently blank as we haven't added any profiles yet.  To add a new profile, click on 'Insert New Record' in the Form Data Options box.  You will be forwarded to a page including the form you just created.  For this example we will add 10 profiles so that we have something to work with when we create the Login and Filter forms.  Put in some details similar to the example below.  Create profiles for Person1 - Person10.  We have used the persons name as the password too, just to make it easier to remember for this example.

If you try to input the same text into the 'Name' field twice, you will get an error.  When we were editing the form, we set the Name text field to be 'Username / Unique ID'.  This makes sure that all the entries into the 'Name' field are different and will help avoid problems later on in the Login and Filter forms.  Also, because it was set to a mandatory field, if it is left blank, we will get an error as shown below.  The form has also picked up a mistake in the email address and therefore highlights it as being invalid.

On completion of Person10, you will see that there is a list of profiles in the data manager.  We can see all of the information that the person has supplied to us through our form.  To edit a record, select the radio button to the left of the ID number and click 'Edit' under the 'Form Data Options'.

If we now go back to the Form Designer manager page, we can add some extra options to our form.  Click 'Content' followed by 'Settings' (making sure the radio button next to our form is selected) from the Manager Options.

Firstly we have some Backend Data Settings.  This is to allow data entries to be emailed to the administrators and/or the user who has just submitted the form. 

Fields to be Listed:  Select all or several fields to be included in the email.
Email data to: Type in the administrators email here.  Add a subject if you need.

The next section is the 'Email Content Settings' which is where you can control the content of the main email.  Email Header and Footer can be set here.  For our example, we might want a copy to go to the User, so we might send them a thank you email.  "Thank you for submitting your profile.  You entered the following information:..."

Check the 'Show Fields' box if you want to include the data that the user submitted.  The data shown here will be determined by what you selected in the previous stage (Backend Data Settings).

The 'Auto Response Settings' is where you can select wether or not you would like the user to get the email.  Select 'Yes' after 'Send E-mail to User' followed by 'Email' which will grab their email address that they submitted in the form.

Creating the Login Form

Login forms can be created to 'login' and access information/entries from the database created by a Standard form.  For our current example, a login form will  be made so that users can login to view and edit their profile.

Click on 'Add Form' at the top of the manager options.

Select 'Login Form' from the three given options and click 'Next' to continue. The 'Create Login Form' options will now appear.  We'll call this form 'Profile Login'.  For 'Parent Form', we need to link our Login form to our previous Standard form.  Click on 'PICK' to browse the form designer manager and select our standard form called Profiles.  In this instance it has an ID number of 4429.  This number will be different depending on how many forms you have in the manager.

To continue, click on 'Preview'.  Some new options will now appear in the general settings.  We will use the users name for the Username Field and type 'Name' in the Username Heading.  The Password Field will be left on password and the heading as 'Password' also.  Type in a button caption like Login or Enter.  The style settings can give your login form a unique look to match your website.  Have a play around with some of the settings until you get the desired look.

Click save to continue.

To actually test out our Login form, we need to insert it into a page.  Click the 'Tools' button in the main menu, followed by 'Page Manager'.

The layout editor will now appear.  Click on 'Add New Page'.

Type in a name for our page like 'Profile Login Page'.  Disable on the menu for now and click 'Add Page' to continue.

We will now see our page in the page manager list.

Click on the page iconnext to our newly created page to proceed to the edit view.

The next step is to insert content and locate our login form.  In a content area (eg. container or section) on your page, click insert.  Once the content page appears, click on 'Form Designer' under 'Multimedia'.

The multimedia item manager will now appear.  Click on 'Insert' next to our Profile Login form.

Our Login form is now placed inside a page.  We can now test to see if it works.  Type in the correct details for one of the users we included in the standard form.  We have decided to log in as Person6, password = person6.  Click enter to login.

Now that we have logged in, we can see the users profile, which we created earlier using the Standard form.  Here we are able to make changes like password or email.  Once the Submit button is pressed, the data is updated in the database.

If you try to login and make a mistake (wrong password for instance), you will recieve an error message like below.

You have now completed a login page!  The next stage will take you though creating a Filter form.

Creating the Filter Form

Filter forms can be created to 'search' the information in the database created by a Standard form.

Click on 'Add Form' at the top of the manager options.

Select 'Filter Form' from the three given options and click 'Next' to continue. The 'Create Filter Form' options will now appear. We'll call this form 'Profile Filter Form'. For 'Parent Form', we need to link our Login form to our Standard form again, as we did with the Login form. Click on 'PICK' to browse the form designer manager and select our standard form called Profiles.

Click on 'Preview' to bring up the additional settings.

For search settings, we will select the 'Name' and 'Email' fields.  Selecting these fields will generate text areas for us to type into later.

We will leave 'Show partial matches' and 'Auto show without search' unchecked for this example.

In the search results settings, select the 'Name', 'Age', 'Email', and 'Gender' fields under 'Fields to be retrieved'.  These are the fields that will be revealed after the search is complete.  Probably not a good idea to reveal the passwords!  Leave the Record Identifier to 'None' (if the users had uploaded an image of themselves, this would have been a good record identifier).  Sort results by 'Name'.  We only have 10 records in our example so we will just set records per page to 5 and max pages displayed to 2.  Add some styles to the form and press 'Preview' again to view your progress.  Once you are happy with the look, click 'Save' to continue.

As with the Login form, we need to insert our Filter form into a page so that we can test it out.

Create a new page in 'Page Manager' as we did for the Login form.  Call the page 'Profile Filter Page'.  Open up the page, click insert in a content area and locate our new Filter form 'Form Designer' under ''Multimedia'.  Once located, click 'Insert' to place the form onto our page.

Search for one of the profiles by typing in the users name or email.  Since we left the 'Show partial matches' unchecked in the settings, you will need to type in the exact name to get a result.  For this example we are going to search for Person6 just by using their name.  Click 'search' to filter though the database and retrieve your results.

Here are the results: