Form Fields I

TABLE OF CONTENTS

• Adding an Electronic Signature to a Form, and integrating with Documents
• Checkbox Fields
• Radio Button Fields
• Phone Number Fields
• Rating Fields
• Read-Only Fields
• Email Address Fields
• Address Fields
• Credit Card Field
• Matrix Fields
• Setting up Sections with Formstack Forms
• Date-Time Fields
• Add the Date/Time field 
• Format the Date/Time field

Adding an Electronic Signature to a Form, and integrating with Documents

Electronic signatures allow your end users to sign your form – either with their mouse or finger on an iPad/smartphone – their John Hancock directly onto the form.

Yup. Now you can securely capture signatures for contracts, legal documents, and other forms in which you need a physical autograph.

Our Signature Field in action!

How does it work?

It’s easy! You just go to your field options on the left-hand sidebar, scroll down to “Signature,” drop it into your form, and it’ll be automatically added. Once you publish your online form, you’ll see that your users can sign their name, clear it if they aren’t happy, and continue to submit the form with ease.

What are some of the most popular ways you can use it?

Glad you asked! Here are some of the most popular for electronic signature forms online are the following:

• General Contracts
• Terms of Service Agreements
• Contests
• Petitions
• Incident Reporting
• HR forms

How are signatures stored in my account?

The signatures will be stored as image file uploads. Depending on the type of plan you have, you’ll want to keep track of your storage limits.

How to pass files (ex. Signatures) between Forms + Docs seamlessly without cloud storage?

Here’s where Formstack Documents (formerly WebMerge) comes in, folks. Formstack Documents is an awesome integration that allows you to export your forms and create a clean document or PDF from it. Essentially, you could have customers, employees, etc. fill out a Formstack form, sign their name, and that data will be automatically sent to your Formstack Documents account where you can either print out the document or save it to your computer as a PDF file for future reference. 

To learn how Forms can share images with Documents, navigate to the How to pass a signature from Forms to Documents without cloud storage article.

Does it work on my mobile device?

Of course! Android, iPhone and iPad signature capturing are essential to timely campaigns where you need to push out petitions quickly. Especially now with election season upon us, you can upload your petition or survey on an iPad and collect public support on the go. 

Android and iPad devices will allow you to collect signatures through the Formstack app. With iPhones, what I would suggest (until it’s updated) is to pull up the form link on your browser, save it as a bookmark, and then use the signature field that way.

NOTE: Formstack Mobile reached the End of Engineering on July 27, 2023. You can continue using the product if you are a Formstack Mobile customer prior to this date. View more information in Formstack’s End of Life Policy. 

Checkbox Fields

Checkbox fields are used when you have several options on a field and want to give users the ability to select one or more of those options. If you want a field where the user can only select one option, you should use a Radio Button field instead.

Adding a Checkbox Field to Your Form 

To add a Checkbox field to your form, click the Checkbox button on the left side of the Build screen and drag and drop it onto your form.

The "Edit Field" window (shown below) will appear on the left side of the screen when your Checkbox field is selected. The label should be the question/statement you want to show up on the form. You must have a label, but you can choose to hide the label on the form by selecting "Hide Label" in the "Field Options" section.

Adding Checkbox Options 

To add your options, scroll down to the "Options" section, and type each option in a separate box. Options can be words or numbers. In the below example, the options on the field are White, Red, Blue, and Green. To add a new option, click the plus sign next to the last option. To remove an option, click the red minus sign. To rearrange your options, click and hold to the right of the green plus sign and drag up or down. 

Please Note - It's also possible to create a list that can be used across all active forms by utilizing our Smart list feature. Once you've created a list, you'll have two choices: The first choice is to "Select Smart list to Copy" if you just want to only copy the options over. The second choice is the "Link to Smart List" option if you want to select a list that will be automatically updated whenever you make changes to the Smart list itself. For more information on how this feature works, including uploading, maintaining or building your first Smart List, check out this article.

You can also add a "Check All" option or an "Other" option by selecting the appropriate boxes at the bottom of the field-spe

Customizing Your Checkbox Fields

 If you want one of your Checkbox options to be checked by default when users view your form, type that option exactly the same way in the "Default Value" area. For this example, we've typed "Green" as the paint option that we'd like the Form to default to. 

Additionally, you can choose vertical or horizontal layouts for your options. If you want to save space on your form, a horizontal list is a good option. 

Using the Advanced Options Editor

You can also import options from a CSV file or use a saved list or smart list of options depending on your plan type. Check out our Saved List & Smart List docs for more information. To import options from a CSV file, open the Advanced Options Editor and drag and drop your file into the editor as shown below.

Additionally, if want to use Checkbox fields in calculations and assign dollar values to your options, you can select "Use Separate Values" under "List Options." In this example, the user is picking paint colors to use. The person filling out the form only sees the labels, not the values, as values are only used behind the scenes for calculations and third-party integrations. You can read more about separate values and in our help page on Calculations . Once you're finished with making changes on this page, it's important to click the "Save Options" button on the top right to finalize things. 

Note: At this time, it is not possible to limit the number of checkboxes someone can click per field. It's also not possible to automatically number the checkboxes. You can include numbers manually in the option boxes (e.g., 1. Red).

Radio Button Fields

Radio Button fields are used for fields that have several options, but you only want users to be able to select one of those options. If you want users to be able to select multiple options, you should use a Checkbox field instead.

Adding a Radio Button Field to Your Form

To add a Radio Button field to your form, drag and drop it onto the form.

The "Field Editor" will appear when the Radio Button field is selected. The label should be the question/statement you want to show up on the form. A label is required, but you can hide it by selecting "Hide Label" in the "Field Options" section.

Adding Radio Button Options

 To add your options, scroll down to the "Options" section, and type each option in a separate box. Options can be words or numbers. In the below example, the options on the field are Vanilla, Chocolate, Cookie Dough, and Rocky Road.

To add a new option, click the plus sign next to the last option. To remove an option, click the red minus sign. To rearrange your options, click and hold to the right of the green plus sign and drag up or down. 

Please Note - It's possible to create a list that can be used across all active forms by utilizing our Smart list feature. Once you've created a list, you'll have two choices: The first choice is to "Select Smart list to Copy" if you just want to only copy the options over. The second choice is the "Link to Smart List" option if you want to select a list that will be automatically updated whenever you make changes to the Smart list itself. For more information on how this feature works, including uploading, maintaining or building your first Smart List, check out this article.

You can also add an "Other" option by selecting the appropriate box under "Field Options."

Setting a default Value

If you want one of your Checkbox options to be checked by default when users view your form, type that option exactly the same way in the "Default Value" area. In our example below, we want this field to default to Vanilla.

Using the Advanced Options Editor

You can also import options from a CSV file or use a saved list of options. Check out our Saved Lists help doc for more information on using a saved list. To import options from a CSV file, open the Advanced Options Editor and drag and drop your file into the editor. 

Additionally, if you want to use Radio Button fields in calculations and assign dollar values to your options, you can select "Use Separate Values" under "List Options." In the values column, add a value for each option. The person filling out the form only sees the labels, not the values, as values are only used behind the scenes for calculations and third-party integrations. You can read more about separate values in our help doc on Calculations.

The values for a field must be "unique." Thus, to have more than one value of "1," you will need to make the values 1, 1.0, 1.00, 1.000, and so on.

Once you're finished with making all the necesarry changes you'd like to include on your form, make sure to click the "Save Options" button on the top right. 

Note: If you would like to customize the appearance of your Radio Button fields (e.g., change the label color), you can do so using the field's unique ID and the Advanced CSS Editor. For more information on how to do this, please visit our help doc section here .

Phone Number Fields

Phone Number fields are used to collect phone numbers and validate that the proper format has been used for the phone number.

To add a Phone Number field to your form, click on the Phone Number field in the Form Builder Tools and drag it over to your form.

Accepting Phone Numbers from Different Countries

You can set the phone number field to accept phone numbers from specific countries. We have most countries in the country list. If you want to allow phone number from multiple countries, choose "None" as your phone number format. With all but "None" we check the formatting for the number and if it is not correct it will give an error to your users.

If you plan to accept Phone Numbers from multiple Countries, we recommend using a short answer field instead of a phone number field to avoid any auto-formatting that may invalidate phone numbers from certain countries.

This is what a phone number field looks like on a form.

Validating Phone Numbers 

The Format option will allow you to force the Field to format according to the following options:

1. National: The same format as if you were dialing a number in-country (e.g., 800-555-5555)
2. International: For example, +1 800 555 5555
3. User Specified: This option essentially includes no formatting at all.  The Form User can simply enter any formatting (e.g., 800555-5555) and the field will accept the input as-is.

Rating Fields

If you're wanting to collect feedback with your forms and surveys, make sure you drag and drop the new rating field onto your forms. You're in charge of the field and can determine the icon image, the number of icons the user can evaluate on, and advanced options like adding half ranking. Use this new field when collecting customer feedback, evaluating the success of an event, or calculating a net promoter score (NPS).

Adding a Rating Field to Your Form

To add a Rating field to your form, click the Rating button on the left side of the Build screen and drag and drop it onto your form.
 

The "Field Settings" window (shown below) will appear on the left side of the screen when your Rating field is selected. The label should be the question/statement you want the user to evaluate You must have a label, but you can choose to hide the label on the form by selecting "Hide Label" in the "Field Options" section.

Customize Rating Field

To customize your Rating Field scroll down to the Field-Specific options section. In this section, you are able to select if you want the icons to be stars or hearts. You can also select how many icons you want to appear on the field. You can have any number from 1 - 10 icons appear in the field. Note: The Rating Field color will default to the color of your labels, but you can change the color and size of your icons by editing your theme in style mode. You'll find the setting under Advanced Styles > Advanced Fields. 

You are also able to add advanced options, such as adding a N/A to the end of the field. Adding N/A allows your customers to opt-out of submitting a rating.
 

Advanced Rating Field Abilities

Logic

You are able to set up conditional logic based on the response a user provides on your rating field.

Calculations

Using the rating you get in your calculations and perform advanced analysis like calculation CSAT and NPS scores.

Field Limitations

There are some limitations to the Rating field. You can find a list of them below.

• Advanced PDFs will show only the numeric value of the field and not the icons
• Not available for charting in submissions
• Not able to alter advanced settings to save additional values

Read-Only Fields

Read-only fields will be displayed on the form, however, the user will not be able to type anything into these fields.  They are useful for displaying default values or totals that you don't want the user to be able to edit but that you still want them to see. One example would be a total field on an order form, which would allow the user to see the total but not manually edit it to avoid charges.

Email Address Fields

Email Fields look and act the same as a Short Answer Field, except users must enter a valid email address when filling out the form.  By adding an Email Address Field to your form, you can utilize the Confirmation Email functionality to automatically send messages back to users that fill out the form.

To add an Email Address Field to your form, click on the Email Field in the Form Builder Tools section on the left-hand side of the screen and drag it over to the appropriate place on your form. 

The label for the field is set to "Email" by default, but you can change that if you like.  

This is what the field will look like on a form.  If a user tries to type in anything other than an email address into an Email Field, they will receive an error.

To ensure that a user is typing in a valid email address, you can click the "Validate" checkbox in the Email Field Editor on the left-hand side of the screen. However, you cannot restrict the usage of particular email sources.

Please Note: Only one email address is allowed per field. Please add multiple Email Address Fields to allow for more than one address.

Email Validation

To add two email fields that validate against each other, check the validate checkbox on your confirmation email field.  The email validation will not actually confirm that the email address entered is valid, rather these fields check to be sure both email addresses match and that they contain domain data (@ and .com, .net, .org, etc.).

Address Fields

Address Fields let you collect all the parts of an address (street, city, state, zip, etc.) in a single field.  They also validate that the user has used a correct address format.  To add an Address field to your form, click the Address Field in the Form Builder Tools and drag it over to your form.

The available address formats are U.S., Canada, U.K., Australia and Other.

Tip: The second line of the address field is optional even when the field is set as a required field.

Allowing Users from any country fill out the address field

If you would like to allow people from multiple countries to fill out your address field, you must choose "Other" as your address format. If you choose to show the Country List, you need to choose Other as your address format.

Here's what a U.S. address field will look like on your form.

Note: If none of the available address field formats work for you, you can build your own address field using short answer and select list fields.

Credit Card Field

Our new and improved credit card field makes it faster and easier for your customers to input their cardholder information and even safer for you to collect and process it.

With the release of this new field, we alerted customers that we would be discontinuing the old credit card field block in March 2019. When the old credit card field was removed, historical data collected from that field was also removed. 

Field Features

A unified, compact design

Instead of three separate fields, we’ve created one, responsive field that allows customers to enter all three pieces of cardholder data (credit card number, expiration date, and CVC) without stopping to tab or click into the next field. We still treat this field as three separate fields behind the scenes so you’ll be able to map them to the proper payment integration settings fields as usual.

We still treat this field as three separate fields behind the scenes but you’ll use the same field name for each field you map (similar to the address field) and we’ll parse the proper data from the field.

You may notice that the Card Verification Code (CVC) field is set as optional in the payment integration section. This only applies to payment integration rules wherein collecting CVC information is not always required.
For security purposes, the CVC, along with the expiration date and credit card number portion of the credit card field is always required in the live version of the form.
 

Note: When viewing the field on a narrow mobile phone screen you may see the field break into 3 fields, but auto-tabbing will still work.

Auto validation and number formatting support

This field will automatically validate the credit card number entered on the form to ensure that the number exists and is not missing any numerals.

If any issues occur, an error will display on the form. Further, the field will validate the expiration date and will display an error if the card is expired.

Card type identification support

While you are still able to control which card types you accept on your form, the field will now display the appropriate credit card brand icon based on the number the customer types into the field.
 

Security
Formstack is becoming PCI compliant and this means we need to beef up our security around collecting payments.
 

Temporarily Store Credit Card Information
Should you need the full credit card information at a later time, you will have the option to store this information up to 90-days in your submissions page so long as the form has encryption enabled and no payment processors have been added to the form. After 90-days, this information will automatically be purged from your submissions. Also note that this functionality is not available by default and to be enabled you must have an admin user on the account submit this form. The Formstack Support team will follow-up with you after submission once this feature is enabled for your account. 

The credit card field will appear as shown below when you access your submissions. To reveal the full credit card number, click to open the submission, then click the "Reveal and Process" button located under the credit card field entry.

To show the entire submission information, i.e. the full credit card information, click on the Show button.

In addition, it is no longer possible to display the full credit card information in notifications - even with an encrypted submission table. Sensitive cardholder data is now sanitized upon submission. Only the last 4 digits of the credit card and expiration date will be visible in submissions and in emails.
 

If you need to capture cardholder data for pre-authorization purposes or collect credit card information without any of the time constraints, we recommend using our Authorize.Net integration in Authorization mode or setting up a PCI Webook (enabled upon request from our Support Team) to send the full information to a PCI compliant endpoint*.

*It is the responsibility of the customer to ensure that the webhook endpoint is PCI compliant. If you fail to secure your clients’ cardholder data in a PCI compliant manner you open yourself up to major risks and devastating fines if breached.

Matrix Fields

The Matrix field is a rating or Likert scale field, which you can use in surveys and other forms where you want to allow your users to rate multiple items in a single field.

To add a Matrix field to your form, click on the Add Field button at the bottom of the Build tab of your form and then click the Matrix button.

Now, you need to come up with Row Choices (shown on the left of the Matrix field) and Column Choices (shown at the top of the Matrix field).  You can also set the field to only allow one choice per row or column or to allow multiple choices per row or column, whichever suits your purposes.

Note: If multiple rows are not needed (one choice) then the best practice is to turn the field into a radio button field rather than a Matrix. 

This is what the Matrix field will look like in an actual Form:

When you view a matrix field on the Submissions tab of your form, this is what it will look like:

When you export your data to Excel or Open Office, each row in the Matrix will have its own column in your Sheet data, as shown below: 

Note: Include Row Choices in order to export the data. 

Setting up Sections with Formstack Forms

Sections are used to:

• Add explanatory text or headings to a set of fields
• Create a new page on a multi-page form
• Change the layout on some fields without changing the layout of the entire form

How to create a Section

Sections are created the same way as fields by dragging and dropping the field into the form but they can only be added to the top or bottom of the form in progress or above or below an existing section. After placing a section on the form you can drag and drop your existing fields into your new sections.
 

Then drag fields into the sections or use the Sort button to quickly move fields around. Sections are edited, copied, deleted or moved the same way as fields — click on the Section field for all the options to appear. 

To edit a section field's description text (or subtext) click on the pencil icon in the top left corner of the section. There are several layout options for Sections. Sections are used to divide forms into multiple pages and to create multi-columns forms . You can also set the label position for the fields inside of a section to top or left.

The box at the top of the sample below is what a basic Section looks like on a form. 

Conditional Logic for Sections
 

Just as you can use Conditional Logic for fields, you can also use the feature for whole sections on forms. This is perfect for long forms that may have multiple sections which all users don't have to fill out. You do not have to apply logic to every field inside of a section, just the section itself, as any logic applied to a section will also be applied to all fields within that section.
 

Copying a Section

If you want to copy a section, click your cursor on the section in the form builder and then click the copy button. This will bring up a pop-up asking you if you want to duplicate only the section header or the section headers and the fields under it. This feature is great for grouping and duplicating multiple fields on your form at one time. 

Deleting a Section
 

Be careful when deleting a section. You can delete the content of the section only or the section and all of the fields in that section. People often delete fields by accident by clicking on the wrong button. If you don't want to delete any of the fields below your section, choose "Section Header Only".

Saving a Section

Sometimes you might create a section of fields that you want to use on multiple forms. Instead of creating the same section over and over again, you can save a section. Click on Save.

The saved sections will be located under the section field. To use the saved selections, just drag and drop it in your form. 
 

Date-Time Fields

Use the Date/Time field to collect a snapshot of the date and time a form was submitted or collect past or future dates. 

Add the Date/Time field 

In the form’s builder, drag and drop (or double-click) the Date/Time field from the Advanced Fields section:

 

Format the Date/Time field

Once you have added the field to the form, the field is populated with default formatting. Select the field to populate the field-specific settings to customize over on the left.

Tip - Did you know that you can save your field settings for use with other forms. Check out our saved fields article for more info. 

Dropdown & Calendar View

This option lets you decide the visual style of your Date/Time Field. As an example, if this is a field where you're asking someone for their Date of birth, you may want to use the dropdown view option to make it easier to select the year. 

Examples of how the Dropdown & Calendar views look on a form:

Date and time format

Update the appearance of the date and time field from the Date Format and Time Format dropdowns. Here you can change configurations from 12/31/18 to 31 Dec 2018 or 11:59:59 PM to 23:59.

Note: If you do not want to capture the date or time, select None from the drop-down menu.

Year selection parameters

From the current year, choose how far in the future, or past, to allow your end-users to pick from with a minimum of 0 to default as the current year.

For example, if you only want users to request information for the current year or the upcoming three years, change the defaults to:

Exclude past dates from being picked

In addition to being able to set the range of years that can be chosen, another option is to disable all dates from being able to be submitted after you select a day, month, and year. Once a date is set, no date after that one can be selected by the user and submitted without receiving an error. To enable this, select the calendar icon from the Disable Dates Past option:

To remove the set date, select the minus sign to clear the date:

Set a default date value

In the Default Value text box, you can pre-populate the field. Some examples to type here include:
 

You can also add or subtract weeks and seconds (in 5-second intervals) or write out an exact date and time. 

Populate dates from calculations

Alternatively, you can populate a date/time field with calculations between multiple Formstack fields. Review the Date/Time Calculation article for an overview and use cases.

View field in the live form

Once the Date-Time field is added, view how this will appear for the end-user from the View Live Form button. There the field will populate with the default, if customized, date and time for the user to view or select from its dropdowns. 

---