Creating Forms

Introduction

Forms allow your Web site visitors (or end-users) to enter and submit data to you. Forms can be used to gather email addresses for contact lists, present visitors with a survey, create order forms, and more. The following tutoral will explain how to create and add forms to your pages.

You may find it helpful to view this sample form while reading through the tutorial. Each of the form elements detailed below are listed in parentheses on the sample form.

ATTENTION SENATE CLIENTS: Policy states our forms are not allowed to store visitor data. Any form you create will be UNABLE to perform a data export. Instead, you will need to add a Notification Email or CMS Email form action (see Step #3) to your form.

Steps to Creating a Form

Step 1 - Complete the "Add Form" Form

Place your mouse cursor over the "Warehouse" tab, located in the top menu of your HillTop Dashboard. From the drop-down menu, click on the "Forms" link. This will bring you to a page that lists the existing forms stored in your Warehouse, if any.

Forms Menu Link

Next, click the "Add new form" link, located in the right margin.

Add New Form Link 

After clicking the "Add new Form" link, you will enter the preliminary information for your new form, as shown in the image below. After you have completed the fields, click the "Submit" button.

Title: The title of your form.

Name: This field wil auto-complete, based on your title. This field should be left to the default setting. However, if this field is edited, no spaces or special characters should be used.

Content: This field is used to enter a message that will appear above the form, once it has been added to a page. This section is optional and can include intro paragraphs/instructions for visitors filling out the form/etc.

Thank You: The information in this field will appear on the page once the visitor has submitted the form (Ex. "Thank you, your information has been received.")

Abstract: This field is optional and used to enter a short description of your form. This information will not appear to visitors, and is for internal reference.

Is Active: This setting determines whether the form is available for use on your site.

Permissions: Use this field to give access to additional HillTop users, if they will need permission to view, edit, or own the form.

Create new form

Clicking the "Submit" button will take you to the form editor. Here you will add the fields that collect data from visitors (ex. name, email, selecting a topic/issue). 

Return to Top
Step 2 - Add Form Fields

To begin adding Form Fields, click the "Add new field" link, located in the sidebar menu on the right of the page.

Add form field

 

After clicking the link, you will be forwarded to the first of two Form Field settings pages. First, select the type of Form Field you will be creating from the "Form Field" drop-down. The available field types are explained in the "Form Field Types" section below.

First, complete the "Title" field. The title is an internal identifier, for labelling your fields in the form editor. The title should be based on the information that will be entered by a visitor (or displayed by the Form Field, if it is not used to collect information). For example, a field that asks for a visitor's first name could be titled "First Name."

The "Is Saved" option determines whether or not any data entered into the Form Field will be saved in the database, and can later be exported. If the data entered into this field should be saved, such as names, phone numbers, or other pertinent information, select "Yes." If the data does not need to be saved, this option can be set to "No."

If the "Is Saved" option is set to "Yes," the "Name" field becomes available. The "Name" field is also used internally, for actions such as exporting data. The name you enter should be short and reflect the purpose of the Form Field. Using spaces or special characters is not recommended. As an example, the name for a field that collects a visitor's home phone number could be "homephone," or "HomePhone."

The "Is Active" setting determines whether this field will appear on the completed form. Inactive Form Fields will not be avilable for website visitors to fill out, but can still be edited within HillTop.

Add text form field

Form Field Types

  • Text: Allows visitors to submit a single line of text, such as their name or email address.

  • Textarea: This is a larger, multi-line text field, used for comments or messages.

  • Select: This option will create a drop-down menu with options for visitors to select from. Only one option can be selected - if multiple selections should be an option, see "Checkbox List."

  • Checkbox list: This creates a list of separate items, with checkboxes next to each item.  Multiple items can be selected in this field.

  • Radio list: This option creates a vertical list of options, with radio buttons for selection. Only one item can be selected.

  • Multi-radio: Similar to the radio list, but options are displayed horizontally. Only one item can be selected.

  • Content: This field allows you to enter text that will be displayed on the form, such as instructions for a specific section of the form. The information added here can be edited as if it were a standard Text Block or the "Content" field of a news post.

  • Horizontal rule: This adds a horizontal line, and can be used to separate sections of your form.

  • Fieldset: This options allows you to add subheadings/subtitles to the form, above or between the fillable form fields. 

  • Hidden: This is a hidden field, not visible to your visitors, that can contain a static value needed by the form. This is useful if you need the form to submit information that the visitor submitting the form should not be able to change.

  • Placeholder: (developer use only)

  • Param: (developer use only)

Once you have selected a Form Field type and entered the "Title" (and, if saved, the "Name"), click the "Submit" button. The form will then expand to show more fields and options, which are specific to the chosen Form Field type (Text, Radio Button, Hidden, etc.). The expanded form will be different for each Form Field option. The image below dispays the expanded form for the "Text" Form Field:

  • Label: The text entered here will be displayed on the public form, above (or to the left of) the fillable portion. For example - if a "Text" Form Field is being created to collect the first name of visitors, and "First Name:" is entered here, the visitor will see "First Name:" displayed above or next to the fillable portion.

  • Is Required: Selecting "Yes" will not allow the form to be submitted if this field is left blank. Selecing "No" will make the field optional, and allow submissions if left blank.

  • Values: This field is only appears for "multuple choice" type Form Fields, such as a "Select" or "Checkbox List" field. Each set of left and right-hand fields, separated by an "equals sign," is known as an "item." Additional items can be added to the Values list by clicking the "Add Item" button. The added "items" will be the field's selectable choices.

    The text entered in the left-hand field of an item is displayed to visitors on the public form, similar to the "Label." If this item is selected by the visitor, the text in its right-hand field will be recorded amd saved in the database or sent in a notification email. In most cases, the left and right hand text should be the same (Ex. 'Mr. = Mr.' for a selectable option in a field for selecting a title/prefix).

  •  Error Text: This field is optional. Text entered here will be used as a customized error message, for instances when a "required" field is left blank, or the field is otherwise completed incorrectly by the visitor. Leaving this field blank will display the default error message. 

  • Default Value: This field is optional, and sets a default/pre-selected value for multiple choice fields. The default value must match the left-hand text of one of the available "items." 

  • Tip: This field is optional. The text entered here will be displayed directly below a fillable field, such as special instructions for the current field. 

    *Fields not listed above are for developer use.

Once you have entered your information in the expanded fields, click the "Submit" button to create your field and return to the form editor. To edit fields after you have created them, click the pencil next to the field's title. Note that you cannot change the type of the Form Field after it has been created, for example you cannot change a "Text" field into a "Textarea," or a "Radio List" field into a "Checkbox List."

To see a sample form with the different types of fields and options, click Sample Form. Once you have created all the necessary fields for your form, you will add Form Actions, as described in the next step.

Return to Top
Step 3 - Add Form Actions

Once your fields have been created, Form Actions can be added. Form Actions take the pieces of information entered into your Form Fields by visitors (ex. Name or Email Address) and apply automated tasks, such as sending notifications with the submitted information to an office email address.

To begin adding a form action, click the "Add new action" link, located in the right margin.

Add form action

 

Similar to the Form Fields, adding a Form Action is a two-step process.  In the first section, you will choose which Form Action to include from a drop-down menu, and select whether it is active. After clicking the "Submit" button, the form will expand to provide fields and options specific to the selected action. Available Form Actions are described below.

Thank You Email Form Action

  • Thank-You Email: This sends a "Thank you" email message to the visitor who submitted the form (a fillable email address field is necessary for this action and should be set as a "Required" field).

    On the expanded form, you will select the field that contains the visitor's email address from a menu, then add a subject for the "Thank you" message, and the message itself.

    • HillTop uses an optional templating system for generating Thank You emails. You can use the notation ${FormFieldNameHere} in the message or subject line to display the information that was entered in that field by the visitor. Note that the field's "Name" must be used, vs. the Title or Label, and any fields used for this purpose should have their "Required" option set to "Yes."

      For example, if you have a field named "firstname," entering ${firstname} will display the text entered in this field: "Greetings ${firstname}," would be converted to "Greetings John," if the visitor entered "John" in the "firstname" field.

  • Notification Email: This Form Action will prompt you for an email address ("To Address") and a subject line. Upon submission, it will send the completed form (a list of the form fields and the information entered by the visitor) to the email address(es) in the "To Address" field. Note, this action will only send the information from the fields where the "Is Saved" option is set to "Yes."

  • CMS Email: This action is designed forward each submission's data to your Constituent Services vendor for routing/storage in their system. Please contact [email protected] if your form should send the information to a Constituent Services vendor, and we will work with them to integrate the form with their system.

  • Form Script: If you are familiar with JavaScript/jQuery, this action can be used to add a custom script to the form.

  • reCAPTCHA: This action adds a "Not a Robot" checkbox for screening spam submissions. A reCaptcha account for the site is necessary for this action. Please contact [email protected] to add this feature, if it is not already enabled. If a reCaptcha checkbox is already present on any other forms, this action can be added without issue.

All Form Actions not listed are for developer purposes. Custom form actions can also be added to your HillTop site, if needed. Contact [email protected] to request a custom action for your site.

Once you have added the appropriate Form Actions, your form is complete and can be added to any of your pages.

Return to Top
Optional - Reorder Form Fields

The fields you have added will be displayed on the public page in the order they appear in the Form Editor. To rearrange the order, first mouse over the field you wish to move. Your cursor should now be replaced with a "four arrow" icon.

You can now click and drag the field vertically, to select a new position. Once the field has been placed into its new position, the public form will automatically be updated to reflect this change.

Return to Top
Finish - Add the Form to a Page

To add your completed form to a Web page, first click the "Pages" link, located in the top menu of your HillTop Dashboard. Next, edit the page you wish to add the form to, by clicking the Edit button (pencil icon) to the left of the page title. This will bring you to the page's content editor.

If you will be creating a new page for your form, see Creating a New Page.

In the content editor, click the "Forms" link, located in the right sidebar under the "Add Content" heading.

Add form link

 

Clicking the link will add a Form Group to your page. Next, click the "New Form" button, located at the bottom of the Form Group. This will bring up the "Add Form Instace" window. Here, click the "Select a Template" menu button, which will display the list of the forms in the Warehouse.

Select the appropriate form from the drop-down menu, then enter a title for the form in the "Title" field (Note: this title is an internal designation, and will not appear on the page). After entering the title, click the "Submit" button to add your form to the page. 

Add Form Instance window

Note: Any other Content Elements on the page will continue to be displayed after the form has been submitted. For this reason, it is recommended that the form be the only content on the page.

Return to Top
Exporting Form Information - US House of Representatives Only

All data submitted by visitors is stored on your site's database.  You can retrieve this information by using the export function.

To use the export function, first mouse over the "Warehouse" link, located in the menu at the top of your HillTop Dashboard, then click on "Forms" in the drop-down menu. This will bring you to a page that lists the site's forms. Locate the form you wish to export, then click the Edit button (pencil icon) to the left of the title.

In the form editor, there will be "From" and "To" fields, located under the "Export Records" heading in the right sidebar. The "From" and "To" fields allow you to limit the exported data by entering a date range (mm/dd/yyyy), and only exporting the data submitted during that time. Leave these fields blank to export all submitted data.

Next, click either the HTML or CSV button. The HTML button will produce a readable web page, while the CSV button will create a download prompt for a .csv file, which can be converted into a spreadsheet file (ex. using the MS Office Suite's Excel application).

Return to Top