Search
Expand Article

Building a Basic Web Form

A video short course...

A Guide to Building a Basic Web Form

 Before reading this article, read Web Forms Overview and Accessing the Form Editor.

To create a web form you will first need to Access the Form Editor and create a new page, then navigate to Actions>Change Content which will place your page in edit mode. Hover over the defaulted text block that says “Enter text here” and choose to add a block above or below.

From the window that opens, select Database Web Form, this will open the Form Controls Editor. Note: If you are not a customer of the full version of the Elexio CMS most options will be unavailable.

Web-Form-Block

Building a web form can be thought of as three phases.


1. Name it – First, You must name your form on the Form Options tab (A). It's important to note that the form name is a required field, but it is used for organizational purposes only. In other words, what you place in this field will not display to the users of the form. (Other fields in the Form Option tab will be discussed in Building an Advanced Web Form)

Form Options Screen

Email Notification: If you would like to notify someone when the the form is completed, enter each email address in the field labeled as "send additional notification to this email" (B). If you would like the specific details of each form response to be included in your notification email, make sure to check off the "Include Response Details" checkbox (C).

Each time the form is completed an email will be sent to the identified address so use caution when selecting an email notification. To send a notification to more than one email address, enter all the addresses in this field separated by a semi-colon. 

(Example Emailed Submission below)

Note: You can view all form submissions using Elexio Database reports. See Web Form Reports.

Thank-You Page: Last, we suggest setting up a 'thank-you' page where a user is redirected after completing your form. This page should include any expectations you may want to set. (For example, if this is a ministry or small group sign-up form, include if a leader will be in contact with them, and when). Input the URL of this page in the "Redirect Page" text-box (D).


2. Drag It – The Form Control Editor is a drag and drop tool. Controls, (Usually questions) are drug from the control editor into the blank area of your form (Both highlighted in the picture below). Containers are another type of control that can be added to a form. Most forms will need at least one type of container known as a Person Container. Information about people (Name, email, etc.) can only be collected in person container. Person containers will by default attempt to match form data (Name, email, etc.) with a people record in the Elexio Database. By default form data will update your Elexio Database. If you do not want form data to update your Elexio Database deselect the check box “If existing profile is found, update with form data”.

Controls are broken into two categories, basic and person. Basic controls can be placed anywhere in your form (in the open form area, in a person container or in a section container). Person controls can only be placed in a person container.

3. Tune It - Fine tuning your form is about making it easy for form users to read. By default the containers and controls you drag into your form will be labeled by their default name. For example a person container is by default labeled “Person”. To change that, navigate to the right of the container, hover there and then select the Edit button.

Then navigate to the label field and type a more descriptive label (i.e. if you are building a prayer request for set your label to “Prayer Request”. To save your edits select the button that says "Done" in the lower right. Control labels (i.e. the questions on your form can be adjusted by following the same steps)

Saving your basic web form

To save your form, first close the form editor by navigating its lower right and selecting the button that says “Ok”.

Then select Actions>Publish These Changes.

A final bit of fine tuning. All web form storage pages by default have a Rich Content Block that has the place holder text “Enter text here”. This block should be deleted navigating back to Actions>Change Content then hovering over the block and selecting the “X” menu item to delete it. And then once again navigate to Actions>Publish These Changes. Note: If you have activated edit mode (i.e. Actions>Change Content) but only moved blocks or deleted them, the option "Publish These Changes" will not be available until you first choose the option "Save My Changes".  Once saved, the publsh option will be available and should be selected.

Now you are ready to Connect a Form to a Database Action.

Quick Tip - 

Web Forms are stored in the Database, not the Website. This means that if you want to duplicate a form, you will need to do so from the Database rather than duplicating the page in the Pages area of your site. To manage your forms, try using the form manager in the Database: Events > Common Tasks > Edit Registration Forms

Back to Top