Elements are the customizable parts that make up a Form. They include the questions that appear on the Form in addition to explanatory text, verification that the submitter of the form is human, formatting and some automatically generated data. This procedure will start with general instructions. A complete list of elements is below.
This procedure assumes that a Form Component has already been created. We recommend that you add initial Form elements with the Wizard, then use these procedures to make changes to them.
Preparing to Edit
To start adding questions you display the Form Elements window:
- Click the Edit button at the top of any Form view.
- Or, if you are a Site Manager, you may visit the Form Manager in the Site Manager tools and click the Elements link next to the Form you are interested in.
Once the Form Elements window is displayed, click the link in the Type column next to the Element you want to edit. The Form Element Editor window appears.
Element Types
Here is a quick list of the types of Elements available in a Form. Visit Question Element Common Properties to see the similarities between them, or click the name of any element to jump to unique properties for that element.
- List: A multiple-choice question.
- Text: A short answer question (up to 255 characters).
- Memo: An essay question (unlimited text).
- File: A question asking the user to upload a file.
- Location Map: A Google Map including points or overlays to illustrate a geography.
- Location: A question asking the user to provide a point on a Location Map in the Form.
- Description: Static text included in the Form for explanations, introductions, instructions, etc.
- Group: A grouping of elements that can have a background color or other formatting.
- Verification: Adds a simple verification question to exclude robot submissions.
- Google reCaptcha: Adds a Google reCaptcha widget that provides more stringent verification that a human is submitting the form (than the Verification element).
- ID: Adds a unique ID number to each form submission. This ID is only visible in the Form results and in downloaded data.
- IP Address: Saves the IP Address of the user submitting the form. This is useful if you need to test whether one person is repeatedly submitting the form. The IP Address is only visible in the Form results and in downloaded data. There are no additional properties available for the IP Address element.
Question Element Common Properties
The elements that ask users to provide data are called the question elements. They include the List, Text, Memo, File and Location elements. Here are the common properties for all question elements.
Name (required): A simple reference name for this element. This name is also used as the field name (or column header) in data that are viewed in the Form results or downloaded. Keep this name simple: Do not include punctuation and keep it short.
Type (required): You should never need to change this option.
Prompt: The question that you are asking the user to answer. Include any punctuation you wish to include (such as a colon or question mark).
Help Text: Add text in this box to help the user answer the question. If provided, a question mark icon will appear on the Form that the user can tap or click to display the help text.
Default Value: Type a default answer to the question. The user may change this answer, but the question will appear with this answer already provided.
Display Style: If Over/Under is selected, the Prompt will appear above the interactive parts of the question. If Side by Side is selected, the Prompt will appear to the left of the interactive parts of the question.
Required Text: Add a message here that will appear if the user does not provide an answer to this question. For example, “Please provide your address.”. On some websites, the Prompt will be given a different format if the answer is required.
Response Text: Text added here will appear in place of the interactive parts of the question when the form is displayed in Data Verification and Summary views, and optionally in the emails sent by the Form Component. Usually, there are special words you can add to this text that will be replaced by the user-provided data. For example, if you had a Text element with the prompt “How are you?”, and the Response Text for that was “You answered: [VALUE]”, the user that typed “Fine” as an answer would see “You answered: Fine” when the Response Text is displayed.
Do not show response text if question is not answered: Check this box if you would like nothing displayed in the response view if the user does not answer this question. This is only valid for questions that do not have Required Text.
Repeat prompt when displaying response text: Check this box to display the Prompt in the response view. If this is not checked, then only the Response Text will be displayed in the response view.
Element Access: This will only appear to Site Managers. Allows the Form editor to specify access rights to this question. This way, you could allow anyone to fill out a Form, but add a question that only logged-in staff can see, for example a List element that lets someone check a box that a request has been reviewed, or a Text element allowing office staff to comment on an entry.
List Element Properties
Data Type: The values associated with List options can be stored as Text, Integer numbers or Decimal numbers. This only makes a difference if you intend on downloading your data and analyzing it later and want to ensure that the data meets your needs. You must provide Values in the Options that conform to this setting (see Options below).
Layout: This setting determines how the Options are presented visually to the user and how users can interact with the options.
- Radio Vertical: The Options are shown in a list, each with a radio button, so that only one option may be chosen.
- Radio Horizontal: The Options are shown next to one another, left to right. Again, only one option may be chosen. This layout is often used to present Likert Scale questions, where each option is assigned a numeric value along a scale (for example, between 1, meaning Highly Disagree to 5, meaning Highly Agree).
- Checkbox Vertical: The Options are shown in a list, each with a checkbox, so that any number of options may be chosen.
- Dropdown Single: The Options are shown in a dropdown list so that only one option may be chosen.
- List Single: The Options are shown in a scrolling list so that only one option may be chosen. The number of options displayed at one time is specified in the List Height value, below.
- List Multiple: The Options are shown in a scrolling list, but several may be chosen by holding the Ctrl key while choosing (on desktop computers). The number of options displayed at one time is specified in the List Height value, below.
List Height: If List Single or List Multiple layout is chosen, determines the number of options shown in the list at one time. The user can scroll to additional options, if necessary.
Randomize order of options: Check this box to have the Options appear in a random order each time someone loads the Form. This helps reduce order bias.
Do not show text during edit: Check this box to not display the Text part of the Options when the Form is in edit view. This is used solely for Radio Horizontal layouts and allows you to show a series of questions with the same value scale without repeating the scale for each question.
Options: Click Add New Option to add options for this list. Value is the value stored in the database. Text is what the user sees in order to choose the option. Use the Order numbers to re-order the Options. As an example of Options, you may have Values of 1, 2, 3 and 4 for Text of Very Uninterested, Uninterested, Somewhat Interested and Very Interested. You cannot include any formatting in the Text field.
Text Element Properties
Data Type: Determines what type of information can be typed into the Text box.
- Text: Up to 255 characters of any type are entered in the box.
- Email: Only properly formatted email addresses are accepted.
- URL: Only properly formatted website addresses, including the protocol string, such as https://, are accepted.
- Integer: Only non-decimal numbers are accepted. If a decimal is added, it is removed when the value is saved.
- Decimal: Any number will be accepted.
- Date: Only dates of the format mm/dd/yyyy are accepted. A date picker (showing the current month, but with links to move to subsequent months) appears when this field gets focus.
- Time: Only times of the format hh:mm AM|PM are accepted.
- Phone: Only phone numbers of the format nnn-nnn-nnnn are accepted. If you would like to accept phone numbers with international country codes or extension numbers, just set Data Type to Text.
- Currency: Only decimal numbers are accepted. The text box is preceded by a $ sign.
Box Size: Enter a width in characters. Note that on most responsive websites, text boxes will be displayed at 100% width of the area available, ignoring this setting.
Max Text Length: Enter the maximum number of characters a user can type into this field.
Check to disallow AutoFill in browsers that support AutoFill: Sometimes you may not want the user’s browser to save the value of a field for later use. If so, check this box.
Memo Element Properties
Columns: The width of the text edit box in characters. This value is ignored on responsive websites, and most browsers allow the user to resize text edit boxes, so do not put much faith in this value.
Rows: The height of the text edit box in lines. Most browsers allow the user to resize text edit boxes, so do not put much faith in this value.
Maximum Text Length: The maximum number of characters that can be typed into this box. Add the letter w after the number, e.g. 30w, to limit the number of words. Note that this is only checked when the user submits the Form.
Allow Formatting: We encourage you to not allow formatting for security purposes (leave this set to None). However, in a controlled environment, you could allow users to add formatting. Set this to Simple to allow very basic editing (bold, italic, links, etc.). Set this to System Default to use the same text edit box that all editors of the website use.
File Element Properties
File Types: Type the file extensions of the files you want to accept here. Extensions should all be lower case and separated by commas with no spaces. For example, typing jpg,jpeg,png would limit the files you accept to only pictures.
Box Size: The width of the box in characters. Ignored on responsive websites.
Location Map Element Properties
Do not show on Results view: If you use your map only for illustration and not input, you can check this box to not display the map when Form Results are displayed.
Introductory Text: Enter some text to be shown above the map.
Map View: Click Define the Map View to open the Location Map Definition window. See Use Location Map Properties for more information.
Location Element Properties
A Location element uses any Location Map previously defined in the Form as a way to input map locations.
Location Type: Only Points are currently supported.
Title: Type a prompt to ask for a Title for this Location. Leave blank to not ask for a Title.
Text: Type a prompt to ask for a Text description of this Location. Leave blank to not ask for Text.
Picture: Type a prompt to ask the user to upload a picture of or about this Location. Leave blank to not ask for a Picture.
Link: Type a prompt to ask for a Link. Leave blank to not ask for a link.
Show all approved responses after editing: Check this box to display all other approved locations of this type on the Location map in the response view after the user submits the Form. This is to immediately see what locations other users provided.
Description Element Properties
A Description element allows you to put text into the form. This is not an interactive element and does not ask the user for any information.
Description: Text that will appear on all views of this Form.
Edit Only: Text that will appear on the Form only during the Edit phase.
Response Only: Text that will appear on the Form only during the Response phase.
Record Display Only: Text that will appear on the Form only during browsing or record views.
Group Element Properties
Group elements allow you to group elements in the form and give them a different visual setting.
Style: CSS style code to be applied to the Group box. Generally, this is just background color, padding and maybe borders. Use the button next to the box for an interface to specify some CSS options.
Show: Choose one option to determine when this Group should be shown: Always, Only During Edit, Only During Response, Only During Display.
Verification Element Properties
A Verification Element presents the user with a simple random question. The question is text based so should be easy for a human to answer but difficult for a robot.
Help Text: Customize a statement that will appear when a help icon is clicked near the Verification element.
Google ReCaptcha Element Properties
To use Google ReCaptcha, you must visit the Google reCaptcha website to register this domain and obtain a Site Key and a Secret Key. Copy and paste the keys on the properties form.
ID Element Properties
The ID Element generates a unique number associated with each Form submission. This can give you a traceable number to make it easy for you and the user to refer to a submission. For example, if you have a permit form on your website, this element could generate the permit number.
Prompt: Type some text to precede the ID number when it is shown in display views or in emails.
Number of Digits: Select the number of digits you want for the ID number.
Start At: Enter the number of the first ID you would like to use. ID numbers will be automatically incremented by 1 each time the form is submitted.