The Form Element places an interactive form onto your website, allowing you to collect information from site visitors.  

All information gathered from your form will be stored in a database that can be accessed through the Form tab found within the Dashboard.


To get started, click and drag the Form Element from the Edit Menu to the desired content area.  Once placed, the Form Window will open up. 




Form Tab


Once the Form Window opens, you'll find yourself on the Form Tab.  This is where you will create and customize your form.  It consists of three areas:  The Control area, the Form area, and the Settings area.

Controls Area


The Controls area is where you will select what information will be gathered by your form.  It consists of three sub-tabs: Basic, Advanced, and Existing.


Basis Controls


The Basic sub-tab holds the most common elements you may want to add to your form.

  • Text: Add a field that will contain basic text on one line.
  • Text Area: Add a text area that will accept basic text over multiple lines.
  • Static text: Place a message without an interactive field.
  • Number: Add a field that will only accept numbers.
  • Select: Add a select option field (also known as a pulldown or drop-down field).
  • Checkbox: Add a checkbox selection option to your form.
  • Radio: Add radio selection option to your form.  This lets a user select only one out of a group of options.
  • Divider: Add a horizontal line between your form fields.
  • Password: Add a password field. Letters typed into the password field will be obscured.
  • Submit: Place a submit button so that the user can submit their entries.

To add a field,  click and drag the field tab and place it into the Form area.  You will see the field placed within the Form area.

Form Field example


You can re-order any of the fields within the form by simply clicking and dragging the fields within the Form area into the order you would like them displayed.

To remove a field, click the trash icon in the right corner of the form field.    Deleted fields are saved in the "Existing" sub-tab.

Advanced Controls


The Advanced sub-tab holds special fields that combine multiple functionality into one field, or which have special validation.

  • Date: Place a date selection field.
  • Email: Place a field that is formatted specifically to receive an email address.
  • Email Confirm: Place a field that requires confirmation of an email address.
  • Name: Place fields to collect First and Last Names.
  • Full Name: Place fields to collect First, Middle and Last Names.
  • US Phone: Place a form specifically formatted for phone numbers.
  • US Address: Place a form specifically formatted for addresses. Note: the state field is a pulldown with a list of U.S. states.
  • Password Confirm: Place 2 obscured password fields. One is a confirmation field, and checks to make sure it's contents are the same as the first field.
  • Upload Form: Place a field to upload and submit documents directly from your website.  Please scroll to the bottom for more information about the Upload Form feature.
  • Captcha: Place a graphic with 2 words that the user needs validate in order to submit the form. A great way to prevent automated spam.
  • Opt-In: Create a check box that is tied to a mailing list. If the user also enters an email address, they will receive a confirmation email, verifying that they want to join that mailing list.

 

Existing Fields


This is where any deleted fields will be stored. Note: Only fields deleted from a previously saved version of your form will appear here.  Fields deleted while creating a new form will not appear.




When you drag a new field into an existing form, you are also adding a new field to the database where your form responses are stored. This can be problematic if you are trying to restore a field that you used to track, as you would have to manually go through and sort the data.  When you drag an existing field back into your form from this tab, it's data will populate in the same column that is originally used within the database, meaning your responses over time will be much easier to understand.

Form Area


The Form area is where you will place and organize the fields for your form.

Form Area

To add a field,  click and drag the field tab and place it into the Form area.  You will see the field placed within the Form area.

Form Field example


You can re-order any of the fields within the form by simply clicking and dragging the fields within the Form area into the order you would like them displayed.

To remove a field, click the trash icon in the right corner of the form field.    Deleted fields are saved in the "Existing" sub-tab.

Settings Area


 The Settings area is where you can customize the information about your form and the information being gathered.

Form Settings area

To customize the settings for your form, select the top box within the Form area and the settings will be listed in the Settings area.   Here you will be able to enter such settings such as Form Name and Receiver Email (this is the email address that will receive notifications about new forms being submitted).

To adjust the settings of individual fields, select the field in the Form area (the selected field will be highlighted in yellow), and the settings for that field will be displayed in the Settings area.


When you are finished setting up your form, click 'Save Changes' to save the form and publish it to your website.  

Advanced Tab


The Advanced tab allows you to customize how the form is displayed within the content area.




Container Settings pertain to how the image is displayed within the content area.


  • Display: This determines on what devices the form will be displayed.
    • All Devices: The form will be displayed when viewed on all devices.
    • Full Version: The form will ONLY be displayed when website is viewed with a computer.
    • Mobile Version: The form will ONLY be displayed when website is viewed with a mobile device.

  • Align: Align the form alignment to left, center, or right inside it's containing content area.

  • Class: Assign a CSS class to the form, allowing you advanced control over how it is displayed.

  • Title: The title, more commonly known as a tool tip, is text that appears when you hover over the form. You can place instructions or other helpful content in this field.

Special Actions pertain to already existing forms.

  • Place a Form: Place a copy of an existing form that has already been created. Note: Regardless of how many times a form is placed, the data will always be collected in the same database, accessed from the Form tab found in the Dashboard.
  • Copy a Form: Create a copy of the current form, including all fields and configurations.

Managing Your Form Data


You can view and download the data submitted through your forms by visiting the Form tab within your Dashboard.

Dashboard location screenshot



Here you will see all of the forms created within your site and have the option to view the data collected from them.



  • Clicking the paper icon will copy the form and name the copied form to the original name plus the word copy.
  • View Data: Click on the link and you'll be brought to a tabular view of all information submitted to the form.
  • CSV Export: Clicking this link will download a CSV(comma separated value) to your computer.  CSV files can easily be viewed in tools such as Excel or any other spreadsheet program which provide easy reading for CSV files. 

 

Here is the view from the "View Data" link.  It will list the data from left to right with the submission date on the very left.  If there is a need to export the data, you can click the "CSV Export" link in the upper right hand corner.


If you would like to create a new form, select 'Create New Form' and the Form Window will open up. You can create the form and save it to be placed onto your site at a later time.


Adding The Upload Form Feature


The Form Element features a simple-to-deploy file-sharing solution that enables people to upload and submit documents to you directly from your website.

 

Go through the steps outlined above to place your form.  Click and drag the desired fields into the Field area.  At minimum you need to include the File Upload and the Submit options. Using the Captcha element in conjunction with a form is always a good idea to minimize the risk of site spamming.

Enter the settings for the form by selecting the default field at the top of the Form area, then enter an email address into the "Receiver Email" field so that you or someone from your staff receives email alerts when files have been uploaded.  If you would like to send a confirmation email to confirm the form submission, click the 'Edit Email' link at the bottom of the Setting area. 

Make sure to click 'Save Changes' to apply your selections.

 Form_Email_gallery

If you entered a Receiver Email among the form settings, you will receive an email confirmation when the upload has been filed on the server. You will then be able to access the uploaded documents by clicking on the link contained within the email you receive.

If you did not activate a Receiver Email, you will need to manually check your File Manager for the arrival of any new files.

Form Element Tutorial