Adding Fields to your Form

The elements available in Forms Manager can be combined in any number of combinations to create highly flexible and versatile forms. In this article, we'll go over each of the various form elements and the options available to customize how they work.

Element Libraries

The form elements are broken up into four element libraries. The four libraries are accessible from the dropdown menu at the upper right of the Build & Edit tab in Forms Manager.

  • Standard Elements are basic features for entering text and making selections.
  • Grouped Elements are simply a collection of standard elements, pre-formatted and arranged together to collate common information, such as a user's full name, or mailing address info.
  • Layout Elements do not collect information, but create organizational categories and logical divisions which help make a longer form easier for users to follow.
  • Saved Elements are elements from any of the three above categories which users have customized and saved previously.

To include any element in a form, find the element in the Element Library on the right side of the Forms Manager screen. Every element has a blue "handle" along its left-hand edge. Click-and-drag on the handle to move the element to the center of the screen. A green dotted line will appear to indicate where on your form the element will be placed. Move the cursor around until the dotted line matches the spot where you'd like to place the element, and release the mouse button. Once an element has been placed, you will see two icons appear to the left of the element name whenever the mouse cursor is hovered over it. The red X icon will delete the element, while the yellow pencil icon will bring up a new screen where you can customize the various features of that element.

Below, we will review each of the customization options available for the various form elements. The first element, the Text Field, is among the most versatile; many of the most common customization options which are available for all form elements can be applied to the Text Field. Accordingly, those common options will be examined in the Text Field section. Thereafter, each element description will only contain information on customization options which are unique to that element.

Standard Elements

  • Text Field: the Text Field is a small area where users can input a short amount of text. Below is a screenshot of the customization options available for the Text Element, and many other form elements besides. The majority of these options work the same way on any other element as they do on the Text Field, but we will only cover them once in this article.



  • General (Basic controls relating to how the Text Field acts and appears)

    • Type dropdown: Use this control to convert a Text Field to a Text Area or Email field (see below for details of each) if you decide one of those would be more appropriate.
    • Field Label: This defines the text prompt which tells the user what sort of information to enter into the field. The label position can be adjusted in the "Form Layout" section at the top of the Form Manager screen. Labels can be displayed either above or to the left of a field.
    • This field is required: Select this checkbox if the user must enter text into this field in order to submit the form.
    • Results View / Reporting Label: When viewing a report of all form responses, individual submissions will be listed as rows in a spreadsheet, while each text field, checkbox or other form element will appear as a column. This option allows you to define a specific name for the column displaying the results from each individual element.
    • Use a default value: Check this box if you want this field to be pre-filled with text when the user first opens the form. Checking the box to the left will bring up the "Default Value" field, where you can enter the pre-fill text.
    • Tooltip text: Tooltips give users a prompt about how to format the data they will type into the field. A field which is collecting a phone number might have a tooltip which reads: "(555) 123-4567". The position of the tooltip in relation to the field itself can be adjusted in the "Form Layout" section at the top of the Form Manager window. Tooltips can be positioned below a field, to the right of a field, or can be hidden until the user hovers their mouse over the field.
    • Description: A short blurb which elaborates on the Tooltip and provides the user with additional context about what information should be entered into the field. Descriptions are displayed below the field label.

  • Size Options (Used to control how many characters the Text Field will accept, and how wide the field appears on the screen)

    • Field Size: Defines the width the field will take up on the screen
    • Maximum Number of Characters: By default, Text Fields are limited to 255 characters. If you need to use more characters, use the Type Dropdown to convert this field to a Text Area.

  • Validation (Validation gives the form author the ability to limit the field to only accept certain characters, or to only accept characters which match a predetermined pattern. A field can be set to validate for common information such as a ZIP code or phone number. It is also possible to customize the validation protocol so that a field can only accept a limited set of alphanumeric and punctuation characters.)

    • Select Validation: This dropdown menu allows the form author to choose from a number of pre-set patterns. Any data entered into this field will be rejected unless it matches the pattern dictated by the Validation type.



      • Advanced Validation: Selecting the last option from the dropdown menu will bring up new menu options which allow the form author to create a new validation pattern for that particular field.



        • Accepted Values: Selecting one of these radio buttons will limit the type of input the field will accept.
          • Numbers: Only numerals (0-9) will be accepted. Selecting this option will also activate the "Validate Range of Values" control (see below)
          • Letters: Only alphanumeric characters (A-Z) will be accepted. Both lowercase and uppercase letters will work.
          • Letters & Numbers: A combination of the above two selections; disallows punctuation characters. When using Letters & Numbers it is not possible to validate a range of numeric values.
          • By Character...: Choosing this option will bring up a new menu, where the form author can specify exactly which letter, numeral and punctuation characters will be accepted by the form.
          • By Phrase...: Users completing this form will have to enter a string of letters/numbers exactly in order to submit the form. The form creator first enters the validation phrase in the "Phrase:" box when creating the field. This feature is particularly useful when using discount coupon codes in a payment form.
    • Accept Spaces: Selecting this checkbox will let users enter spaces in the field. By leaving it unchecked, users must enter an unbroken string of characters.
    • Validate Length: Checking this box will allow the form author to specify minimum and maximum lengths for the allowable text in this field.

  • Encryption and Security

    • Encrypt responses to this question: Checking this box means that email addresses entered in the form will be stored in an encrypted state when saved to the database
    • Hide user input: This feature will display any text entered into the Email Field as dots instead of letters or numbers.

  • Prefill Options

    • Prefill from: Choosing a selection (Home Email, Personal Email, School Email or Work Email) from this dropdown menu will automatically place the chosen option into the Email Field, if the user is logged in and the corresponding email address is present in their Constituent account.



  • Currency Options: Designating a field as 'Currency' means that it will be associated with a monetary transaction.
    • Use this field for currency: Clicking the "Use this field for currency" button will automatically remove the validation configuration choices, as all currency fields are automatically validated as a monetary transaction.
    • Use to display total from currency fields: Selecting this option will automatically populate this field with the total from any other element on your form which is designated as handling Currency, including selection elements such as radio buttons, checkboxes or select lists. In this way, your form can keep a running tally of items which have been selected for purchase; this is particularly useful when users are asked to choose between various item combinations with different prices.
  • Date-based conditional settings: If a start and end date are selected, this element will only be visible on the form between those dates. Outside of that date range, the field will be hidden from all users.
  • Admin-only conditional settings: if this checkbox is selected, the element will only be available to admin users
    • Email Field: This is a Text Field element with a few special configuration options available which customize how the form processes email addresses.
      • Email Fields automatically validate the format of email address: [username] @ [domain] . [top level domain (.com, .org, .edu, etc.). The email field will show an error if the entered text does not show a username followed by an @ symbol, followed by a period, followed by "com," "org," "edu," or any other valid suffix.

 

  • Date Picker: This field allows users to select a date from a pop-up calendar.
    • Date Format: this dropdown allows you to customize the date display, either Month/Day/Year (US standard) or Day/Month/Year (European standard).



  • Hidden Field: As the name implies, any content in the Hidden Field is not displayed to the user. This can be very helpful when creating a purchase form which has multiple configuration options. A common item with a baseline price can be put in a hidden field which is set to 'Currency' with a default value. In this way, users will only ever have to choose among prices for the options, without having to worry about selecting or deselecting the baseline price item.
  • Radio Buttons: A radio button provides the user with an either/or choice when only one option must be chosen. Note that form authors are not limited to a simple yes/no choice and can present the users with as many options as they wish, however, only one option may be selected. Selecting one radio button precludes the option of selecting any other choice. (The name "radio button" comes from an old-style car stereo with preset buttons which can be set to a particular station - pushing one button in makes all other buttons pop back out.) When placing Radio Buttons, Checkboxes or Select Lists, you introduce the option of using Conditional Settings (see Using Conditional Fields).


    Note: the difference between a radio button and a checkbox (see below) is that a radio button allows the user to select only one option at a time, while a checkbox allows a user to select multiple options. Make sure to use a radio button when you need a user to select "A or B or C," and a checkbox when the options can be "A and B and C."

    • Layout options
      • All on one line: Select this choice to display all of the radio button options on the same line. This is well suited for a simple yes/no choice, as trying to list too many options on one line may lead to unwanted formatting issues.
      • Each on a new line: This choice is better suited to a longer list of options.
    • List items: The choices represented by each radio button can be drawn from a preselected list, or custom generated for a particular form.
      • Preformatted option lists: Use the dropdown menu to choose a preformatted list of options. These lists can be edited from the Forms Manager Dashboard > Manage List Library button.
      • Custom option lists: Enter each list item on its own line in the text area. Button options are entered using the format: "label[value]" - whatever is inside the brackets represents the actual data that is passed into the database; whatever is outside the brackets will be the label that the user will see next to the radio button. An asterisk (*) placed at the start of a line will signify that that option will be selected by default when the user loads the form. If you create a new list that you would like to use again in a future form, click the "Save this list to the library >" link. See Working with Option Lists for more information.
      • Currency options: If you select to use radio buttons for Currency, you must ensure that the value passed into the database is a monetary value in 00.00 format.
      • Results Formatting: This dropdown menu determines how the user selections will be displayed on a report or exported list of submissions. Form authors can choose to have the report list the option label, the option value which was passed to the database (i.e., what is in brackets in the list of options), or both.
  • Checkbox: A checkbox is used when a user is asked to make a choice which can have more than one option. When multiple checkboxes are present, selecting one does not preclude selecting any other. All other options are set as with radio buttons. When placing Radio Buttons, Checkboxes or Select Lists, you introduce the option of using Conditional Settings (see Using Conditional Fields).
  • Select List: A select list functions very similarly to a set of radio buttons; the user is presented with a choice, but only one option can be selected in order to proceed. All other options are set as with radio buttons. When placing Radio Buttons, Checkboxes or Select Lists, you introduce the option of using Conditional Settings [see related article].
  • Text Area: the Text Area is similar to the Text Field, except that it has room for multiple lines to be input by the user. Use a Text Area instead of a Text Field when you are asking the user to input more than 255 characters.
  • Attach File: Use this element when you require form users to upload a data file. See Adding File Attachments to a Form for more information.

Grouped Elements

Grouped elements are simply multiple Text Fields that are arranged into logical collections in order to capture common information, such as a Name or Address. When placed on a form, the individual fields of a Grouped Element cannot then be broken up or rearranged. Available Grouped Element types are:

  • Address Block: Collects street address, city, state, region, ZIP code and country information. In the settings, the Prefill Options dropdown menu can be configured to accept information from Consituent Manager, if the form user is logged in. Addresses which can be pulled from Constituent Manager include: Home, Personal, School, Summer, Winter and Work Addresses.
  • Phone & Extension Block: the Phone block collects a phone number and extension. Prefill information can be pulled from Constituent Manager from the settings screen.
  • Name Block: Collects Prefix, First, Middle and Last Names, and Suffix data. These fields can also be prefilled using data from Constituent Manager.

Layout elements

Layout elements do not collect any data. They exist solely to assist the form author in tailoring the appearance and flow of the form on the page. Available form elements are:

  • Header: A short block of headline-formatted text. The size of the headline can be changed in the Settings menu. H1 is the largest font size, while H6 is the smallest.
  • Text block: A longer block of text formatted at standard size. Used to convey more detailed information to the reader in the middle of the form page.
  • Horizontal Rule: A horizontal line spanning the width of the form. Use the settings menu to adjust the thickness of the line in pixels, the width of the line (expressed as a percentage of the available width of the form), the horizontal alignment (left / center / right) and the shading effect.
  • Page Break: Breaks the form up into pages, and inserts buttons allowing the user to page back and forth. This is very useful for longer forms.

Saved Elements

Any element can be customized and then saved as-is for re-use, either in the same form or in another form entirely. See Using Saved Form Elements for more information.

 

Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.