Form Builder Technical Guide

Overview

Adding a Form Builder block to a page will allow for easy development of contact forms that can be customized to collect the information you require from visitors to your website.

Form Implementation

In the first section of the Form Builder block you can specify important information about the email that will be generated upon submission of this form.  Most notably, you must declare an email address as the recipient any submitted form.

  • Email Form to: This is a required field. This text field will contain the email of the individual receiving the form. In the event this form should be sent to multiple people, you can separate email addresses with a comma.
  • From Email Address Field: If one of your Form Elements (see below) is a text input box requesting the user’s email address, you can enter the Name of that Form Element here. This is an optional field which, if filled, will replace the default “From” address.
  • Subject Field: This optional text field can be used to override the default subject of the generated email. By default this value will be “[web form] form default”.
  • Thanks Text: This optional text field is for a message that will be seen by the user after the form is submitted. Typically, this is a simple confirmation that lets the user know the email has sent.
  • Thanks Redirect:  This optional text field is for a URL that the user will be directed to after submit. if left empty the user will see the thanks message above.

Form Element

A Form is comprised of a series of Form Elements. You can create new Form Elements by clicking on the small plus symbol in the upper left corner of the containing body. To remove a Form Element click on the minus symbol adjacent to the plus symbol.  Each individual input field you would like to add to your form will be represented as a separate Form Element.

Type

This is a required field. Type can also be very helpful when you need to control what options are available to your user and what responses you receive when the form is submitted.  For example, a Dropdown may be useful for reducing spelling errors or allow for more consistent information.

There are several type options to choose from for each Form Element:

  • Text: This option will create a single-line text field which accepts any typed user input.
  • Text Area: The Text Area option creates a large text body that can be used by the user to compose a message or other, potentially lengthy input.
  • Dropdown: The Dropdown type creates a list of items for the user to choose from, and the user will only be able to choose from one item in the list.
  • Checkbox: This option will create a list of items for the user to choose from. Multiple items can be checked at the same time using the Checkbox option. If you would like to restrict input to one item, the Radio Set or Dropdown option is recommended.
  • Radio Set: Radio Buttons are very similar to Checkboxes, but unlike Checkboxes a user can only select one of the available responses.
  • Heading: If you have a long or complicated form, you may choose to section off parts of the form using the Heading option. This will add a bolded text heading to your Form and requires no input from your user submitting the form.
  • Message: A Message displays text to the user, often instructions or related information, and requires no input from your user submitting the form. If you have a long or complicated form you may choose to give the user information in this way, but this is rarely necessary.
  • Date: This allows the user to supply a date input by selecting a month, day, and year from generated dropdown options.
  • Time: This allows the user to supply a time input by selecting an hour and minute generated dropdown options along with specifying am/pm.

Name

This is a required field. This field will hold the Name or ID of each Form Element.  This Name will display to the left of the input field is important for providing context about what information you’re asking the user to enter.

Required

Checking “Required” will make this specific Form Element mandatory to be filled out before the form can be submitted by your user.

Form Element>> Dropdown/Checkbox/Radio Options

When this option is clicked a dropdown will appear that will allow you to add multiple options for the Dropdown, Checkbox, or Radio Set lists. Adding more options is much like adding a new form element; simply click on the small plus symbol and a new list item can be added. Similarly by clicking on the minus symbol you can remove any unwanted list items easily.

Form Element>> Advanced Options

These are the advanced options available for each Form Element.

  • Help Text: This field can be filled with some helpful text to explain to your user what they will be required to do with this specific element.
  • CSS Class: If you desire a custom CSS modification for this Form Element you can add the specific CSS class in this field.

Advanced Options

These are the advanced options available for the Form Builder.  These options allow for more customization options such as CSS styling or overwriting the Form ID, but do not require any changes in order for Form Builder to function.

  • Unique Form IDThis is a required field, but the default value is usually sufficient. This is the ID associated with the form being built. This will help each form that you create to be defined from one another by their unique ID's.
  • Secure Data: If you require sensitive information from your users, selecting the "Secure Data" option will encrypt the data as it is submitted by sending the data using SSL. Rather than receiving the data in the body of an email, you will receive a notification of a new data submission. Note: Credit card info should never be gathered.
  • Require Authentication: Checking this option will require users to log in with their university NetID and password before filling out this form.
  • Show Clear Form Button: When you check this option, a useful button will be added to your form that will clear the form of any text when your user clicks it.
  • Form Wrapping class: This field will put a class in the wrapping div element for the form.

Advanced Options: Adding Channel Sets

  • CSS Class for Add New Question Set Button
  • CSS Class used to group questions into Question Sets
  • Heading Text for Question Set

These options allow a user to add additional channel sets on a form. For further information check out the adding channel sets page.

Advanced Options >> Acceptable Referrers

This field points to the server that the form will be published to. Example format: "staging.example.umt.edu" or "example.umt.edu".

Advanced Options >> Add Payment

These are the advanced options for adding a payment option to your form. You will need an account through TransFirst in order to complete the payment portion of the form builder.

Notes

Since Form Builder requires the use of PHP scripts to function, Form Builder will not function within Cascade.  Instead, you should see a table which represents a summary of the Form Builder Block information.  Once published, the Form should display properly. 

Trouble Shooting

In the event you published Form is not working properly, the most likely culprit is a PHP issue.  Please refer to the “Technical Requirements” section below.

Technical Requirements

Form Builder requires the use of PHP scripts so the publishing destination server must run PHP. For the form builder to be published, the file extension needs to be set to .php. If needed, you can modify the file extension under Administration >> Configuration Sets and change the field for file extension to .php. If this option is not available to you, please contact your web administrator.