Creating an Online Contact Form

Modified on Thu, 7 Jul, 2016 at 11:42 AM

Online forms are made up of several "objects" (fields) that are all contained in a special folder that holds all the fields that make up that form.

When that folder is viewed, it will display all the objects in the folder on a page that allows your site visitors to fill in the form fields and submit the form.

This solutions article steps through an example to create a simple "Contact-Us" form. Follow these instructions to first define default setting and form action. Secondly, create the form fields to capture information from you site visitor.

1.) Create a form folder

Determine which folder (section) the form will be displayed.

a.) From the green edit bar select ‘Add New' then scroll down and select ‘Form’

b.) Next, fill out the form's default settings which sets some of the basic functions of the form and creates the folder which will contain these objects (making up the fields that will display on the form when called):

Title: Name of the form

Description

The description will display at the top of the form. The contents of this field will be be searchable and will display in search results.

Submit Button
This defines the button label text to use for the submit button. As an example, this could be labeled 'Send' (but is labeled "submit" by default).

Reset Button

Checking this box will include a button that will blank out all fields and allow the site visitor to start filling out the form again. You can change the default text of this button as you can the submit button.

Action Adapter

The form will use email when your site visitor submits it. For that, we enable an action adapter. By default, a ‘Mailer’ adapter is available and selected when creating the form folder which sends the online form using email.

Thanks Page Selecting the thanks page check box (which is selected by default) displays a confirmation to the submitter which is provides acknowledgement of the form submission.

Force SSL Connection
This option only needs to be selected if the information needs to be encrypted on transmission to the server. The type of information is typically sensitive in nature, Social Security, Credit Card, etc. As noted, the server needs to be configured to accept the form over SSL. This option is currently unavailable but slated for Fall 2016.

Form Prologue
This option provides the ability to include a text area above the form fields. This text could be anything from instructions or simply an explanation of the form. This is completely optional and has no bearing on function other than displaying text.

Note: This is a WYSIWYG editor providing many features such as image and link insertion text formatting and more allowing for a custom look for your form creations.

Form Epilogue
Same as Form Prologue only the text will display after the form fields (at the bottom).

c.) Now that the folder setup page has been filled out, make sure to save your settings by clicking the 'Save' button.

Now you will be presented with a basic form that will appear like the image below. However, there is still work to be done to make this form functional. Continue below to step 2 to complete the next steps.

2.) Making Your Form Functional

In this section, you will see how the form will be defined to send by email for processing using the action adapter called 'Mailer' that has already been included for us by default. To access the contents of the folder, and the 'Mailer' adapters contained there, select ‘Contents’

a.) Highlight and select 'Contents'

b.) Highlight and select ‘Mailer’

c.) The mailer adapter is where the form gets its information regarding the address to email the form. Select ‘Edit’ from the green bar.

d.) Enter the name and email address of the person who is to receive the information from the form.

e.) Then select ‘Save’ to keep these settings

3.) The form is now ready to be 'Published' so it can be seen by site patrons who are not logged in. To return to the form folder, you can use the navigation breadcrumbs found in the upper left of each page.

a.) Use the drop down ‘State’ on the green bar, and then select 'Publish'.

Summary: You now have published a functioning form that sends the filled out information by email to the recipient defined in the mailer adapter. Any red checks indicate required fields that must be completed. There are many field objects that you can use to customize your forms. You can use 'Quick Edit' to drag and drop fields on to your form. These advance options are not covered in this solutions article.

You can also use the "Add New' menu from the green bar and add field objects into the form folder. Once placed in the folder you can edit their settings for even more customization.