Today, we are going to take a look at the Form Builder tool. This powerful, WYSIWYG tool gives you the power to create advanced web-based data collection forms. Data collected from these forms can be:
- Stored in an online database, exportable to a spreadsheet file.
- Emailed to a contact list.
Creating advanced forms requires a much more indepth tutorial. Therefore, this post will be an overview of the Form Builder tool along with instructions for creating a simple “Contact Form” that is emailed to a specific address.
Please note: Microsoft Internet Explorer must be used to create and update Form Builder forms. Resulting forms can be filled out and submitted using any web browser.
Create a new form wizard
Step 1 – Simply provide a name for the form.
Step 2 – Select a form type. For this example, we will select an Email form. Data submitted from clients will be sent to contact(s) specified in Step 3.
Step 3 – Select the contact information. The To address will have all the form data emailed to it. The From address is the sender. To help with spam filters, this should be a valid email address. The Subject field’s value will be appended to the form’s name to help identify the data for the recipient.
Step 4 – Pick a Success URL to send users to after they have submitted the form. It should have some simple data in it thanking the user for her/his submission. The Failure URL is used when an error occurs while processing the form.
When you have completed the wizard, click the Finished button to begin working with the form.
Form Builder Layout
Closing the wizard will present you with a blank form page. Here are the main sections:
Click to see the full size
Yellow – these are the form elements that you will use to collect data. Simply click and drag an element into the form body (red section) to add it to the form. See below for an explanation of each control.
Blue – the tool bar is used to format text and save/publish your form. See below for an explanation of the key buttons.
Green – this is the properties box. The contents here are context-specific. The screen on the right shows the form body’s properties (width, default font, etc). The properties listed here will depend on which controls you have selected in the form area. You can modify the fields that are not greyed out.
Red – this is your form’s body. The contents in the box will be shown on any page you add the form to.
Key Toolbar Elements
Form Properties – opens the form wizard so you can change the type of form, the email settings, or the destination URLs.
Save – saves the form without publishing it. For forms that are in use, this is akin to saving a “draft” of your changes. Clients will not see the changes, and you will be able to continue with your edits in the future.
Set Form Live – this “publishes” the form so that clients can interact with on page(s) it has been added to. Any time you modify an existing form, you must “Set Form Live” to update the page(s) the form is on.
Form Elements
Text Box – A simple one-line text box used to collect text or numeric data. Use the “required” property to indicate whether or not the field is mandatory for form submission.
Text Area – multi-line text answers. Let users submit longer answers in paragraph form if desired.
Dropdown Box – A list of items, allowing a user to select ONE of the options listed.
Select Box – a list of options in a scrollable box. Multiple options can be selected by using “CTRL + Click”
Radio Button – present a list of options. A user can select one item from each group.
Check Box – present a list of options. A user can select any number of the available options.
Submit Button – submit the form for processing. Each form must have a Submit Button in order to save and email the submission.
Text and Decoration Elements
Label – textual content on the form. Format the text using the formatting toolbar.
Frame – borders around sections of the form. For appearances only.
Image – used to add an image to the form.
Creating A Sample Contact Form
The following video shows how to create a simple contact form. Elements are dragged onto the screen and have their properties updated. When the form is ready to go, simply click the (Set Form Live) toolbar button.
Note: The most important property for each input control is the “Name” property. This is the user-friendly identifier for each control and should describe the data collected by the control. Eg: “First Name”, “Email”, “Comments”. See the sample email at the end of this blog to see the relationship between the “Name” property and each respective user-submitted value.
Add the Form to a Web Page
When you are satisfied with the form, it will need to be added to a page on your website so that users can interact with it. The Forms are “components” in the Web Manager.
To add a form to a page, follow the “Add Component” instructions in the Seamless Editing System. See “Managing Components” in the “SES Guide” – www.port80solutions.com/images/ses/ses-guide.htm#common-tasks
The Contact Form on a Web Page - click to see a full size view.
Email Notification
Once the form has been filled out and submitted, an email with the data will be sent to the contact(s) specified in Step 3 of the Wizard.
Form Builder Email - click to see full size.
Summary
The Form Builder tool is a very powerful Web Manager component. It provides you with the ability to quickly create an advanced, professional form that retrieves all the relevant data from your clients, visitors, and/or members.
Check back in the future for more Form Builder-related blogs as we explore more powerful capabilities such as reporting and using lookup tables.