Example: Creating a "Contact us" custom form
The following example will create a Contact us custom form page on our web site. This form will contain a security CAPTCHA field. It will automatically send an email to both the user who completed the form and the site administrator.
Setting up the custom form

-
Add a custom form under your site, titled
Contact us
. -
Right-click on the custom form’s Form contents asset in the asset tree and select the Form contents screen.
-
On the Form contents screen, create a new section on the form, titled personal information:
-
Enter Personal information in the Add sections field.
-
Click Save.
-
A new section asset will appear in the asset tree, as shown in the figure above.
Adding the form fields

-
Right-click on the Personal information section asset in the asset tree.
-
Select the Details screen.
-
In the Add form fields field, select the
Text
question type in the first list. -
Select
3
in the second list to add a total of three test type form fields. -
Click Save.
Three question assets will appear in the asset tree and be added to the current form fields list, as shown in the figures.
+ image::4-0-0_current-questions-list.png[The form fields added to the current form fields list]
Add a Select type question to the form:
-
In the Add form fields field, select the
Select
question type in the first list. -
Select
1
in the second list. -
Click Save.
A fourth question asset will appear in the asset tree and be added to the current form fields list.
Repeat these steps to add three more form fields:-
Two
Numeric
type form fields -
One
Email
address type form field.Seven question assets now appear in the asset tree and are listed in the current form fields list:
-
Add another question to the form outside of the Personal information section:
-
Right-click on the Form contents asset in the asset tree and select the Form contents screen.
-
In the Add form fields field, select
Text
in the first list. -
Select
1
in the second list. -
Click Save.
A question asset will appear in the asset tree and be added to the current form fields section.

Setting up each question
First name question
To set up the First name question:
-
Right-click on the
Question 1
(text type) asset under the Personal information section of the asset tree. -
Select the Details screen.
-
In the Title field, enter
First name
. -
In the Maximum length field, enter
50
.
This setting will mean that users can only enter up to fifty characters in this field. -
In the Required entry field, select
Required
.
This setting will mean that users will be required to answer this question on the form. -
In the Custom required error field, enter
Please enter your first name
.
This text will be displayed on the form if the user does not answer this question. -
Click Save.
The name of the asset in the asset tree will change to First name.
Surname question
To set up the Surname question:
-
Right-click on the
Question 2
(text type) asset under the Personal information section of the asset tree. -
Select the Details screen.
-
In the Title field, enter
Surname
. -
In the Maximum length field, enter
50
.
This setting will mean that users can only enter up to fifty characters in this field. -
In the Required entry field, select
Required
.
This setting will mean that users will be required to answer this question on the form. -
In the Custom required error field, type
Please enter your surname
.
This text will be displayed on the form if the user does not answer this question. -
Click Save.
The name of the asset in the asset tree will change to Surname.
Address question
To set up the Address question:
-
Right-click on the
Question 3
(text type) asset under the Personal information section of the asset tree. -
Select the Details screen.
-
In the Title field, enter
Address
. -
In the Height field, enter
3
.
This setting will display a multi-line text field on the form for this question. -
Click Save.
The name of the asset in the asset tree will change to Address.
State question

To set up the State question:
-
Right-click on the
Question 4
(Select type) asset under the Personal information section of the asset tree. -
Select the Details screen.
-
In the Title field, enter
State
. -
In the Options field, enter the following options into the fields provided: QLD, NSW, ACT, VIC, TAS, NT, SA, and WA.
-
Click Save.
The name of the asset in the asset tree will change to State.
Postcode question
To set up the Postcode question:
-
Right-click on the
Question 5
(numeric type) asset under the Personal information section of the asset tree. -
Select the Details screen.
-
In the Title field, enter
Postcode
. -
In the Width field, enter
4
.
This setting will mean that the question field will be four characters wide. -
In the Maximum length field, enter
4
.
This setting will mean that users can only enter up to four characters in this field. -
Click Save.
The name of the asset in the asset tree will change to Postcode.
Email address question
To set up the Email address question:
-
Right-click on the
Question 6
(email address type) asset under the Personal information section of the asset tree. -
Select the Details screen.
-
In the Title field, enter
Email address
. -
In the Required entry field, select
Required
.
This setting will mean that users will be required to answer this question on the form. -
In the Custom required error field, enter
Please enter your email address
.
This text will be displayed on the form if the user does not answer this question. -
Click Save.
The name of the asset in the asset tree will change to Email address.
Phone number question
To set up the Phone number question:
-
Right-click on the
Question 7
(numeric type) asset under the Personal information section of the asset tree. -
Select the Details screen.
-
In the Title field, enter
Phone number
. -
In the Width field, enter
10
.
This setting will mean that the question field will be ten characters wide. -
In the Maximum length field, enter
10
.
This setting will mean that users can only enter up to ten characters in this field. -
Click Save.
The name of the asset in the asset tree will change to Phone number.
Comments question
To set up the Comments question:
-
Right-click on the
Question 1
(text type) asset under the Form contents asset in the asset tree. -
Select the Details screen.
-
In the Title field, enter
Comments
. -
In the Height field, enter
3
.
This setting will display a multi-line text field on the form for this question. -
Click Save.
The name of the asset in the asset tree will change to Comments.
Defining the layout of the custom form
Page contents layout
The default layout of the Contact us form is shown in the figure below.

The comments question in this layout appears at the top of the form. There is no heading for the page. We need to change this layout to move the comments question to the bottom of the page, add a heading, and include additional features.

To change this layout you need to add the page contents bodycopy:
-
Right-click on the Form contents asset.
-
Select the Form contents screen.
-
In the Use bodycopy field, select Page contents.
-
Click Save.
A bodycopies folder will appear in the asset tree, containing the page contents bodycopy. -
Right-click on the page contents bodycopy and select edit contents.
-
Enter the following content into the WYSIWYG editor.
The List of submission errors keyword replacement is added to the top of the form to display errors when the form is not completed correctly. The Submit button is also added so that the user can submit the form.
The new layout of the contact us is shown in the figure below.

Thank you layout
The default layout of the Thank you page on the Contact us form is shown in the figure below. This layout is shown when the user submits the form.

The comments response in this layout appears at the top of the form. There is no heading for the page. We need to change this layout to move the comments question to the bottom of the page, add a heading, and include additional features.

To change this layout you need to add the "Thank you" bodycopy:
-
Right-click on the Form contents asset.
-
Select the Form contents screen.
-
In the use bodycopy field, select Thank you.
-
Click Save.
The thank you bodycopy will be added to the bodycopies folder, as shown in the figure to the right. -
Right-click on the Thank you bodycopy and select edit contents.
The content shown in the figure below is entered into the WYSIWYG editor.

The new layout of the Contact us page is shown in the figure below.

Adding the CAPTCHA fields
To add the CAPTCHA field to the contact us form:
-
Right-click on the Form contents asset in the asset tree.
-
Select the Form contents screen.
-
In the Require CAPTCHA field, select
Yes
. -
In the CAPTCHA key length field, enter
6
.
This setting will mean that the CAPTCHA image will display six characters.
-
In the CAPTCHA character zoom field, enter
3
.
This setting will mean that the CAPTCHA characters will be randomly zoomed between sizes1
and3
. -
Click Save.
-
Add the CAPTCHA keyword replacement on the page contents bodycopy, as shown in the figure below.
The CAPTCHA field will now appear on the contact us form.
Setting up the emails
Recipient email
The recipient email needs to be set up so that an email is sent to the site administrator.
To do this, follow these steps:
-
Right-click on the Form contents asset in the asset tree.
-
Select Email options.
-
Navigate to the Recipient email options section of the screen.
-
In the To field, enter the email address of the site administrator, for example,
admin@example.com
. -
In the From field, enter the 'from' email address.
You can use the email address form field keyword replacement in this field (for example,%response_100_q6%
). This replacement will use the email address that the user enters on the form. -
In the Subject field, enter a subject for the email, for example `%response_100_q1% %response_100_q2%` has contacted Squiz.
-
In this example, we are using the user’s responses to the first name and surname form fields in the Subject of the recipient email.
-
In the body field, the content shown in the figure below is added to the email’s HTML version.

The keyword replacements for each question can be found by clicking on the List of keywords available for use in emails hyperlink under the Keyword replacements section on the screen.
Receipt email
The receipt email needs to be set up so that an email is sent to the form user.
To do this, follow these steps:
-
Right-click on the Form contents asset in the asset tree and select email options.
-
Navigate to the Receipt email options section of the screen.
-
In the Receipt recipient question field, select the
Email address
question.
This option will send an email to the address that the user enters on the form. -
In the From field, enter the 'from' email address, for example,
admin@example.com
. -
In the Subject field, enter a subject for the email; for example: Thank you for contacting Squiz.
-
In the Body field, the content shown in the figure below is added to the email’s HTML version.

The keyword replacements for each question can be found by clicking on the list of keywords available for Use in emails hyperlink under the keyword replacements section on the screen.
Final steps
Before making the Contact us form live to the public, check the following:
-
The layout of the page contents is correct.
-
The required form fields are validated, and the error messages appear on the form.
-
That you can fill out and submit the form.
-
The layout of the thank you layout is correct.
-
The recipient email is sent to the contact within the organization.
-
The receipt email is sent to the user who filled out the form.
-
The submission is logged to the database.
Once you are sure the custom form is working correctly, change its status to live and grant public read permission.