Contents

Form Builder Plugin

The Form Builder plugin is a powerful tool to generate forms for use on your site. This application has a host of useful functions, and will allow your Association to have a one-stop-shop for all your form building needs. The Form Builder plugin provides a form tool that can require users to fill out specific fields, and can use regular expressions to require users to provide valid information. It also provides security through the use of Captcha boxes and the ability to provide User Session information for each form submission. It has client-side validation as well as server-side validation through the use of “required fields” and regular expressions, as well as AJAX callbacks and custom validation.

Follow Along with these Video Tutorials

Overview

Use Cases

Form Settings

Let's start with the Form Settings. Upon the user completing the form, you may set a “completion page”, which redirects the user to a page within the site. This can be navigated to using the Website Tree. There is also a default Form Completion message, which can be edited using the WYSIWYG editor to suit your needs in communicating to your users after they've completed the form.

You are capable of setting up an e-mail to receive all the form responses; this e-mail will receive the user's form responses.  There is also the option to send the user's session information, which can provide their name, Member ID, and e-mail, along with a great deal of other information.

General Form Components

Text Box

A Text box includes the following fields:

 
  •  Columns—The size of the text box, width-wise
  • Rows—The number of rows of text the box will contain. Only comes into play in a Multiline Text Mode

  • Text Mode—How your text box will record text. Includes:

    • Single—A single line of text shown

    • Multiline—multiple lines of text shown

    • Password—any text typed is obscured by dots, like a typical password field. If the “Regular Expression” field is set to a phrase, this password field can be used as an actual password that is required for the completion of the form. Useful for forms that have a very targeted audience , preventing unwanted participants from completing the form.

    • WYSIWYG—uses a very simple WYSIWYG editor to enter text.

    • CMSWYSIWYG—uses the CMS WYSIWYG editor to enter text; this can only be used by CMS users, and so is inappropriate for most forms and should not be used regularly.

  • Required—this radio button allows you to make the field required for completion of the form, or optional and able to be left blank when the form is submitted.

  • Regular Expression—allows the form creator to set a “correct” answer for the text box; regular expressions can be used to prevent the entry of symbols, to require the correct formatting of links, etc. It is also possible to set this box to a specific text answer, to be used as a password. If the regular expression requirements are not met, the text in the “Regular Expression Text” box will appear.

  • Required Text—appears if the field is toggled as Required and the user leaves it blank

  • Regular Expression Text—appears if there is a requirement in the “Regular Expression” box and it is not matched by the user.


Radio Button Box

A Radio Button box can also be inserted. A user can label the radio button box, determine whether it is required, and alter the text displayed if the field is required and the user leaves it blank when they submit the form.

The radio buttons may be added using the “Add new row” button, a plus sign. They may be edited by checking the box next to the row, and clicking the “edit selected row” button, a pencil. Rows may be selected and then deleted, using the “delete selected row” button, a trash can. A search of the records may be performed using the “find records” button, a magnifying glass. And the grid of radio buttons may be refreshed using the “refresh grid” button, a set of arrows. The text and values of the radio buttons must be added in the order desired; when you add a radio button, it will appear above the previous radio button.

The radio buttons can be set to have a textual message that appears next to the button, as well as a value assigned to that textual message. This is the html value that is seen by the creator of the test; a value must be assigned to the record, or it will appear to the form as having no content, and so not register as selected if the user selects that radio button.  The "Value" field will be automatically assigned upon saving the radio button box, if there is no value assigned already.  


 

Captcha Box

The Captcha box is available to prevent bots from using your form. It randomly generates a set of characters for your user to type in to verify they are indeed a person and not a bot. The Captcha box can be reloaded if the user cannot make out the distorted text, and the reload text can be altered to instruct the user if desired. The label can be changed, and the Captcha can be made required or optional. The Required Text will display if the field is left blank and the Captcha is set as required, and the Enter Code Text is used to instruct the user as to what is required of them for use of the Captcha.

Link Box

This box allows a user to provide a link.  It creates a box wherein a link can be placed by the user.  The Link Target field is the target attribute in html anchor tags.  The "_blank" opens in a new window, and "_current" opens it in the same window.  The maximum length and the size of the text box (columns) can be set, along with a label to instruct users as to what kind of link to include.  This field can be required or optional, and has a default Regular Expression that only allows text to be entered in link form.  

Check Box

This simple component allows you to add a check box to your form, with the ability to make it required (potentially used for indicating a user has read and understands an agreement), or optional.

Drop-Down Box

This box displays multiple options for a user to select, much like the Radio Button box. A form can have a set number of columns and rows, and can have an option selected by default if desired (using the numbers 1, 2, 3 etc. to determine which option should be selected b default). If not, the -1 that is the default entry for this box will serve to prevent the box from selecting an option by default.  The List Mode can either be a single line of text, or multiple lines of text with the Multiline option.

Adding, editing, deleting, searching and refreshing are all done in the same way as the Radio Button box. The Drop Down box can be labeled, can have a set width or height (or can be left to the default values), and can be set as required or optional. 



The drop-down selections can be set to have a textual message that appears in the drop-down menu, as well as a value assigned to that textual message. This is the html value that is seen by the creator of the test; a value must be assigned to the record, or it will appear to the form as having no content, and so not register as selected if the user selects that option from the drop-down menu.  The "Value" field will be automatically populated from the "Text" field upon saving the drop-down box if there is no value assigned to a box.

Upload Box

Here you can provide your users with a place to upload files.  You can click browse to open the File Browser, and select a file within a folder to select that folder to direct all uploaded files to.  You can use the File Storage drop-down choose to have files stored in your selected file folder on the server, or have the file attached to an e-mail that staff receives.  The File Storage prefix is a way to name the uploaded files a recognizable name.   The upload box automatically renames any files uploaded to a randomly generated number, then prepends the prefix onto the file.  If the prefix is "Filea", the name of a jpeg uploaded would be "Filea_12345.jpg".  You can label the upload box, to provide instructions to your users, and determine whether the field is required or not, as well as providing text to inform your users the field is required.  

Date/Time box

Date/Time box: This box allows you to know what date, time or date and time a user completed the form, or allow them to enter a date or time that is informative to you in some way regarding the topic of the form. The width of the text box can be set using the Columns setting, and you can choose what Data Entry Mode you'd like your users to provide you; date, time, or date/time. You can label the Date/Time box, and make this field required or optional. This box will automatically bring up a calendar if the Date or Date/Time settings are chosen, for increased ease of choosing a date for your users.

Display Settings

In the Display section, two display settings can be added.

Separator

A Separator can be added, creating a line that will separate portions of your form. This should be placed where you want the separation to occur, and using the drag-and-drop function can achieve this styling after you've added all the boxes you'd like to add.

HTML

HTML can also be added for additional customization; this option brings up the WYSIWYG editor, and html can be inserted in your form. You can use this to add instructional text to your form, or for visual styling.

Final Thoughts

Overall, the Form Builder plugin is a powerful form creation tool.  The Form Builder plugin allows the form results to be e-mailed to a set contact, providing a way for segments of your user base to contact someone with questions, to provide information regarding themselves, their work, interests and activities, and a way to track and process individual order forms, among other options.  The uses of the Form Builder plugin are many and varied, and all highly useful.