Create a Form

Access: Components>Form Manager>Build/Edit Layouts>Website Forms.

1. Creating the Form

Select the Add New Form Layout button in the bottom left corner.
Enter the Name of the form.
Select Add & Configure (the Code will be generated automatically).

2. Adding Elements

Click the Elements tab.
Choose the New Form Element button.
Select the desired Type from the drop-down menu.

See 2nd image below for a representation of each element type .
Elements will be placed in sequential order as they're added. If you need to adjust the order, choose the desired Position from the drop-down menu. This can also be adjusted later on in Section 4 - Managing Elements.
The Name is the back end reference. Simply enter this, then, by hitting the tab key or clicking off the field, it will auto-generate the next two fields.
The Caption is what displays on the public view of the form. Adjust if necessary.

Type an * after the caption if you'd like to represent this as a required field. (The asterisk does not add itself automatically.)
The Code is for the form's internal reference. Leave this at what it was originally.
Select Add & Configure.

3. Editing Elements

Elements may have different tabs and options, depending on the type of element. These are the basics:

Options Tab

Width is the length of the element's field, measured in pixels. This can be left blank and will measure approximately 200 pixels wide. You can choose to maintain width in pixels (defined amount), OR you can choose to use percentages.
- Pixels: This will remain at a defined width, meaning, if it shows up as 200 pixels on a desktop, it will show up the same width on a mobile device. If you use this option, we recommend a maximum width of 250 - this will keep your field from 'breaking' the screen on a mobile device (forcing you to horizontally scroll). Additionally, we also recommend that you adjust the width based upon the expected character input. For example, a zip code field would require a shorter width as it only needs 5 characters. For this, a good choice would be perhaps 75 or 100. In the field, enter the number only (no "px" after).
- *Recommended* Percentages: This is best suited for websites, with the main reason being their adaptability for mobile displays. Regardless of the screen size they are on (desktop, tablet, mobile), the field will retain the same width percentage. We normally recommend 100% for each field so that it may take up the entire (smaller) mobile screen, making it easier for the visitor to see and fill out. For this, enter the number, followed by the percentage sign (100%). Of course, you may adapt the width to your liking.
The Text Alignment is set to Default (left). It is highly recommended to leave the setting.
The Caption Position refers to where the caption will appear relative to the field. The default will be to the left. If you plan on changing this, do not do so on an individual element basis. Instead, adjust the Default Caption Position located on the form's Details tab (see 2nd image below).
Placeholder Text allows you to enter an example, or small piece of instruction for the the visitor. This will appear in the field. Once the field is clicked into, the text will disappear. For example, if you are looking for a specific 'date' format, you could enter "MM/DD/YYYY".

The following option settings apply to element types that offer the visitor several values to select from, such as Checkboxes, Drop-down Pickers, Radio Buttons or Picklists (see Values Tab below for instruction).

Option Direction refers to the direction that options are displayed.
Options Per Row/Col sets a limit on the number of options that display per row/column.
Default Value allows you to enter which value you would like to be selected as the default option.
Ordering determines the values' display, whether it be alphabetical, reverse alphabetical, or manual.

Values Tab

A value is a field in which you can select from a list of available choices.This will be applicable within the following element types: Checkbox, Drop-down Picker, Radio Button & Picklist.

Text refers to the option's display to the visitor. Enter this.
Value refers to the option's display in the form submission. Enter this as well.

BOTH fields are required. Just enter the same for each.
Select Add Now.
Repeat the previous steps for the remainder of the values.

Rules Tab

Rules options will vary based upon the element type.

Required forces the visitor to fill the field out, otherwise the form cannot be submitted; an error message would display. Choose Yes if applicable.
By making the field required, it will not automatically add an * to the field caption. This will need to be added manually at the end of the element's Caption field (see section 2 - Adding Elements)
You can choose a Minimum and/or Maximum amount of values (options) one can select.
DO NOT use this for the drop-down picker option or radio buttons - only checkboxes and picklists.
You can choose a Minimum and/or Maximum amount of allotted characters one can enter.
There are Character, Numeric, Credit Card and Misc. Validation restrictions available as well.

4. Managing Elements

The 'light bulb' enables you to turn an element on or off by clicking the icon.
The 'blue arrows' allow you to adjust the order of your elements
The 'diagonal arrows' icon allows you to change the element from its current element type, to that of another.
The 'paper/pencil' icon enables you to edit the element.
The 'X' icon deletes an element.

5. Creating an Action

Each form must have an associated action. The action tells the system what to do when the form is submitted. This is required for all forms, with the exception of the event registration forms, see: Creating a Form for an Event.

To create an action, follow the instructions in this article: Action Handler.

6. Cloning Elements

You have the ability to duplicate elements from other available forms. This feature will retain the same properties assigned to them from the original form, to the new form. This was designed to save time when using similar elements on multiple forms. For more information on how to use this feature, see: How to Clone Elements.

7. Adding Web Form to a Page

Once a web form is created and an action associated with it, it is time to add it to the web page, see: Add a Form to a Page.