Customize Forms II

TABLE OF CONTENTS

• How to hide the Submit button on a Formstack Form
• Embedding HTML, Videos, Maps, and Widgets into Forms using an embed code field
• Saved Fields
• Pre-Populate Form Fields
• Pre-populating form fields overview
• Pre-populating field types
• Sending Form Data to Another URL
• Fillable Table Alternative
• Build an Add-Item Form
• Building Multi-Column Forms
• Getting Started with Field Prefill
• Changing the Language of a Form
• Date-Time Field Calculations
• Date-Time Field Logic
• Calculation Builder
• Adding a Logo to Your Form
• Adding Tables to your Forms
• Automatic Form Deactivation
• Discount Codes
• Smart Lists Overview
• Set up your Smart List
• Add Smart Lists to a form
• Getting Started with Formstack Forms
• Separate Values
• Pre-Population URL Building with Excel
• Using Google Fonts

Now available is the ability create calculations using Date/Time fields. This is useful if needing to calculate such things as the number of days between two dates entered into your form or someone's age using just their birthdate.

To get started, add a Number or Short Answer field to your form and the fields you'll be using to create your calculation. Number and Short Answer fields can be found in the Basic Fields section of the builder, while Date/Time fields are found in the Advanced Fields section:

Next, click the Number (or Short Answer) field, go to the field options along the left of the page, scroll down to the Default Value box, and click Use Date Calculation. This will convert the area into the date calculation builder. There are three different dropdowns that will appear: Value 1, Value 2, and 'Expected result in'.

The first two dropdowns will be set to either be the current date or a Date/Time field added to the form. The third dropdown determines what value the result will be calculated as: days, months, or years.

Calculating Age

To calculate someone's age using only their birthdate, set one Date/Time field to collect that date and set that field to be Value 2. Set Value 1 to be the current date and finally set the expected result to be in years.

Calculating Time Between Dates

If you need to calculate the number of days between two dates entered into the form (for example checking into and out of a hotel), this can be done by adding two Date/Time fields to the form and setting them to be Value 1 and Value 2. 

How to hide the Submit button on a Formstack Form

The Submit Button is included on all Formstack Forms by default. There is not an option to remove the Submit Button; however, you can choose to hide it on the Form if you'd like, making the "Form" an informational web page/landing page rather than a page that requires/expects action. To do this, you will need to add some CSS code to a Custom Theme. Don't worry, it's easy!

First, you'll need a Custom Theme to work with. You can create or edit a Custom Theme inside the Form Builder by selecting the style tab on the top left of the page.

Inside the style section, you have the option to create a new theme by selecting the "Create Theme" button. If you already have a Custom Theme applied, you can hover over that theme and choose the "Make a copy" option to create a new version of your Custom Theme that would only be applied to that specific form. If you're okay with using that theme, go ahead and skip to the next step.

**Note: If you choose to edit the current Theme, these changes will affect all forms that have that Theme applied.

If you don't have a Custom Theme applied, you will not see the "Edit" button while hovering over the theme. If this is a brand new form, a default theme from our library will be applied that you can make a copy of for editing purposes.

Once you're happy with the theme you've created, you'll want to scroll down to the bottom of the editing options until you see a section called "Advanced Code Editor".

On the CSS editor, you'll just need the CSS code below:

.fsSubmitButton {display:none;}

The css will take effect on the preview and you'll be able to see that the button is now hidden. Remember to save your changes at the top and activate for the CSS to take effect on your form.

Embedding HTML, Videos, Maps, and Widgets into Forms using an embed code field

A powerful feature of Formstack that many people don't take advantage of is the ability to place HTML into your forms. Now, just because you don't know HTML, doesn't mean you can't use this feature. Many websites give you embed codes for videos, maps, and widgets that you can place on your own site.  These embed codes will work on your forms as well if inserted correctly.
 

The possible uses are endless, but one likely scenario is an RSVP form that includes a map to your location. Another would be a form that includes a YouTube video and asks you to answer several questions about the video. A third possible use would be including a widget in a holiday-themed form. For example, you might want to throw a flash widget of some dancing, singing elves onto your Christmas pitch-in dinner sign-up form. Let's walk through the steps of the YouTube example.
 

The first step for embedding a YouTube video on your form is to go to the page for the video you want and look for the embed code (found by clicking on Share > Embed under the video). Go ahead and copy this code.

Next, log into Formstack and start building your form. Click and drag the Embed Code field onto your form. Paste your video embed code from YouTube into the Embed Code box on the left and you're done!

Now, if you want to embed anything else in your forms, such as a widget or map, it works exactly the same way. You grab the embed code and paste it into an Embed Code field on your form (in plain text view).
 

Note: While Formstack provides the ability to add custom code to your forms via the Embed Code field, we're unable to directly support the code itself, at most our support team can check if you've hit a character limit and can be contacted here. If needing assistance developing custom code or widgets please consider reaching out to our third party Certified Formstack experts to bring your custom projects to life. 

Saved Fields

We’ve made form building even easier! 

Save form fields to easily drag and drop, like a dropdown with your store locations, into future form builds. 

Step 1: In the Form Builder, drag and drop a field into the form.

Step 2: Customize the field including areas like the field name, placeholder text, or drop-down options.

Step 3: Under the field settings, select Save Field, provide a unique name, and click Save.

Who can use Saved Fields?

Admin and Standard Form users, with permission to create forms, may use saved fields created by any user within the organization. 

Who can manage Saved Fields?

There is currently no "edit" function for saved fields. 

Note: Deleting a field from the Saved Fields section does not delete the field from your forms. 

Pre-Populate Form Fields

Pre-populate form fields to eliminate having to fill out the same information twice for your form submitters. This is a go-to with use cases like: 

1. Copying contact information from one form to another so that you can attribute a second form to the same person without them having to fill out all the information again.
2. Sending out unique form URLs so that you can attribute a form to a certain club member.
3. Creating a string of forms where different people fill out different sections.

Note - This process should only be used when looking to pass non sensitive information. PII and PHI data should not be passed via URL query string as it can leave the sensitive data exposed. Please refer to THIS guide if you need a breakdown on what is considered sensitive data. Also take a look at THIS guide that talks through how to properly set up your form to collect sensitive data and make sure you are not violating terms of service. 

If you are looking for an easy way to pre-fill forms and create a secure end to end form based solution, check out our Workflows add-on. This can help take the guess work out of URL query string, secure the data being passed, and will allow you to easily blend our products together in a single flow.

Pre-populating form fields overview

To pre-populate form fields, take the URL for the form and add information to it. When the web page is loaded, the form will then also automatically load information into certain fields. 
 

Gather data for the URL

To assemble the URL, you will need the following information:

1. URL of the form you want to pre-populate
2. The field labels that you want to populate
3. The information you want to populate the fields with

Tip: Copy/paste the needed information into a word processor to easily view and assemble the URL 

1.  The URL of the form you want to populate

In order to find the URL to the form you want to populate, log into Formstack and open the Publish page of the form. Then copy the form URL. 

2. The field labels that you want to populate

Decide which fields you would like to be populated on the form. Then copy the field labels into your word processor for assembly later. Any misspellings will cause the field to not populate.

In this example, the fields are: “Name2” and “Email2." 

Any spaces in the field label should be replaced with an underscore; for example, “Your Email2” should be replaced with “Your_Email2” since web addresses are not allowed to have spaces in them. 

3. The information that you want to populate the fields with

There are two different ways to get this information:

1. If you know the exact information you want to populate
2. If you want to fill the information from another form

If you know the exact information you want to populate like a field that you want to be the same for every submission or if you're sending out a person-specific URL, then type exactly what you would like to be filled in within your word processor document.

 
Like the field label, it’s important to type it as you want it and to replace any spaces with underscores.

For this example, we’ll call the answers: “Formstack Support” and “support@formstack.com”

If you want to fill the information from another form like if you are directing a person from one form to another and don't want them to have to fill out duplicate information or if you're creating a multi-stage form where different persons fill out different parts, then do the following: 

Step 1: Go to the Form where you want the information to be pulled from.

Step 2: Copy the needed Field IDs. You can find the field ID, by selecting it in the Builder mode and copying the ID from the URL:

Assemble the URL

You may build your custom URL now that you have gathered the needed information. 

Please note: If you'll be attempting to pass data that will likely contain spaces or line breaks (for example - Short or Long Answer fields, Checkbox, or Radio buttons), this will break the URLs we're about to construct. There's no way around this unfortunately as spaces will break any URL. We encourage you to only pre-populate form fields from a previous form only if they will not contain spaces. If you're building a pre-populated URL manually, you can use the "%20" character to be a space in your data.

The basics

You will use the options you found above and put them into your URL in the following sequence: 

(Form URL)?(First Field Label)=(First Information to Fill or Merge Field)&(Next Field Label)=(Next Information to Fill or Merge Field)

For example

• If you know the information:

https://formstackhq.formstack.com/forms/prepopulatingformfields?name2-first=Formstack&name2-last=Support&Email2=support@formstack.com

With the link completed, you can send it out to your submitters to use.

• If you are populating from another form:

https://formstackhq.formstack.com/forms/prepopulatingformfields?name2-first={$79264263-first}&name2-last={$79264263-last}&Email2={$79264267}

There are 3 symbols that you will use to distinguish information:

1. ? - goes in between the second form URL and the first field name from the second form that you are trying to populate. You will not use this symbol again
2. = - goes in between each field name from the second form and the information you want to fill that field in with (whether you type it manually or want to use info from another form). You will use this for each field that you want to pre-populate
3. & - goes in between each of the field info and the next field name that you want to populate. You will use this for every set of fields that you want to populate

After you have the link finished, you need to decide how best to use it, which will depend on your situation. There are a few options:

• You can add the link to a Confirmation Email within the custom message
• You can add the link to a Notification Email within a custom message
• You can display the link on a Submit Action Thank You Page
• You can redirect the user to that link as a Submit Action

What if I don’t want my submitters to know this is happening?

You can easily mark any of these fields hidden so that your submitters don’t even see the fields that you are populating. For more information on how to do that, check out our Hidden Fields Support Doc

What if I don’t want my submitters to be able to edit the information?

You can easily mark any of these fields read-only so that, even if the submitter can see the field, they cannot edit it. For more information on how to do that, check out our Read-Only Fields Support Doc

Pre-populating field types

• Sub-fields populating
• name field options include

• name
• name-first
• name-last
• date/time fields can have each part populated, also. As an example, we can populate that field to be January 10, 2014 PM as &datetime=January%2010%202014%
• Address fields can be pre-populated as
  • address-address
  • address-address2
  • address-city
  • address-state
  • address-zip
  • address-country
• Multiple options on a checkbox field can be populated by separating each option with a new line, which is encoded in the URL string as "%0A” similar to the date
• If you are pre-populating a password-protected form, it’s important that you also include the password in the pre-populated URL so that the form can get past the password to populate the form.
• We do not currently support pre-populating embed forms

When you are done with the setup, distribute your custom URL, rather than the one under Publish, to have the information prefilled. 

Sending Form Data to Another URL

After a user submits a form, they can be redirected to an external URL.

You can add a redirect if you are on a paid plan in the Settings > Emails & Actions tab. Click to add a new Submission Message and select "Redirect to a custom URL". 

 

Then, paste in the URL you'd like to redirect to. This can be to another Formstack form or an external site. To pass submitted form data through the URL, check the "Append Submitted Data to URL" option under the URL. If you are redirecting to a Formstack form, all of the fields with the same field names as contained in the first form will be pre-populated with the previously submitted data when the user is redirected to that second form.


Note - "Append submitted data to a URL" will not be available on certain plans, ie. (Legacy HIPAA Plans and New Healthcare Plans). This process should only be used when looking to pass non sensitive information. PII and PHI data should not be passed via URL query string as it can leave the sensitive data exposed. Please refer to THIS guide if you need a breakdown on what is considered sensitive data. Also take a look at THIS guide that talks through how to properly set up your form to collect sensitive data and make sure you are not violating terms of service.

For example, if the redirect URL is: 

https://www.test.formstack.com/forms/my_fun_form

And the submitted data is appended to the URL, the final URL might look something like this if the form consists of fields labeled "Address":

https://www.test.formstack.com/forms/my_fun_form?address-address=234+Happy+Trails&address-city=Funville&address-state=IN&address-zip=45674

Note:  Internet Explorer limits URL size to around 2,000 characters, so if you get an error in IE, but not Firefox when appending all the data on your form, you are probably over that character limit.  In that case, you would want to create a custom redirect URL passing on only the needed fields instead of all the fields. It would look something this:

https://www.test.formstack.com/forms/my_fun_form?name={$name}

Interested in creating a form with pre-filled fields? Click here to learn more about pre-populating form fields!

Fillable Table Alternative

If you are converting data from a paper or PDF form to an online form with Formstack you may see something like this and not know what to do:

With Formstack you can create columns, but you can only add up to four. If you want to collect data in an online form for a fillable table you can use Sections and conditional logic to collect that information in a way that's easy for your users.  

In order to collect this information, you can create a Section that matches each row in your fillable table. Each column would be a field.

Using the example above our Section could look like this:  
 

This allows you to select the size of the area where the user can enter information. We can note, that there is a "Do you have another resource to add?". This is an "Add Item" option. When the user clicks "No" they continue on with the form. When the user clicks "Yes" they will see another Section asking them for the same information.

This allows the user to only see the fields they need to fill out, instead of all of the fields available.
 

How does this show in your submissions? This breaks down the data so it's easier to segment by type and can be sent to other integrations.

View of a single submission:
 

View from the main Submission screen:
 

Build an Add-Item Form

There are two common methods for building a form that allows users to add more fields:
 

1. Using a Dropdown List field to let users choose how many line items they need
2. Using a Radio Button field to let users decide if they would like to add another item

This type of form setup is useful in cases where the end user may be registering multiple people for an event or ordering several items. In the examples below, we use a registration form, but the logic and methodology may be applied to any form type.
 

Method #1: Using a Dropdown List Field to Let Users Choose How Many Line Items They Need

Step 1: The first method for creating this type of form environment is to ask the end user how many registrants they would like to add. In most cases, you will do this via a required Dropdown List field that contains quantity options. Below, you can see that we've included a required Dropdown List field that asks "How many people would you like to register?" and gives options of 1–10.
 

Step 2: Next, add a Section field to the form for the first registrant and include any necessary fields under this Section (i.e., Name, Phone Number, Email Address, etc.). When all necessary fields have been added, click on the Section field and choose "Logic" to add Conditional Logic. The Conditional Logic you add should dictate that the Section field should display if ANY number 1–10 of the registrants have been selected from the original Dropdown List field. With the Logic applied to the Section, it will automatically be applied to all fields under the Section. Below is an example of what the correct Logic should look like.

Step 3: The last step is to create additional Sections for each potential registrant. The quickest way to do this is to first save the Section you have already created by clicking on the Section field and selecting "Save this section" at the bottom of the field options. 
 

Saving the section keeps the Logic you've set in tact. Now to create additional Sections, simply find your saved section in the "Saved Sections" area of the builder, click and drag it onto your form, and make any necessary tweaks to the headings, fields, and Logic.
 

Proceed to add Sections until you have created as many Sections on the form as you would like to provide the end users. When building the form, you may notice it is rather long; however, these fields will be hidden by Logic until the end user needs them.
 

Method #2: Using a Radio Button Field to Let Users Decide If They Would Like to Add Another Item

Step 1: With this second method, you first want to build out your form with fields and items as needed (such as the Registrant 1 Section and fields shown below). Once this is done, you want to add a required Radio Button field to the form that asks users if they would like to add another registrant/item.
 

If users choose "No," they will continue with the form and submission. If users choose "Yes," another Section will appear for them to fill out. To quickly add the second set of fields to your form, click on your first Section header, select the Copy button, and copy the Section headers and fields to create a new Section.
 

After the second Section has been added, click on the Section heading to add Conditional Logic. The Logic should dictate that the second Section will only appear on the form if the question about adding another registrant has been answered as "Yes."
 

Continue to make copies of your Sections until you have all the necessary Sections added. Then add/edit the Logic in these Sections so they only appear if the prior field is answered as "Yes," indicating the user needs to add another line.  

Helpful Hint: If you need to include several additional Sections, it may be easiest for you to save your original Section so that any Conditional Logic you have set remains in tact. To save the Section and use it multiple times, follow the steps outlined under Method #1 above.

Once you've completed all steps, your form should do this:

Building Multi-Column Forms

By default, Formstack forms take up one column.  However, you can change this by clicking on the Form Extras tab at the top of your screen when on the Build tab of the form. Under layout, you can choose the number of columns you want your form to have. You can have anywhere from one to four columns on your form.

Sections & Multi-Column Forms

If you want part of your form to have three columns and part of it to have four columns, this can be done, even if you have your form set up as one or two columns by default. The way you can do this is with Sections.

Add a new Section to your form (leave it blank if you don't want users to actually see it) and choose the number of columns for that section from the drop-down "Columns" menu. Now, any fields you place under that section will be displayed in the number of columns you chose. To end this effect or create a "stacked" look with your columns, add a second section to the part of your form you want to display a different number of columns on. Each new section on your form can display whatever number of columns you would like, allowing you to have 1-column, 2-column, 3-column, and 4-column sections all on the same form.

Expand Fields Across Columns

Let's say you have a three-column section, but you only need two fields, a name and an email field on the first row of the section. You can expand the name field to fill multiple columns with a click of a button. Click on the field you'd like to edit, then choose how many columns you'd like the field to span by clicking on the "Column Span" dropdown list.

Getting Started with Field Prefill

A Quickstart Guide to Formstack’s Prefill Mapping Add-On 

At Formstack, we’re dedicated to simplifying data management. We’re excited to share our Field Prefill add-on which helps you to make better use of the data you already have while providing a better experience for your end users. 

Please note this feature is only available as an add-on at this time. If you'd like to discuss adding this feature to your account, you can reach out to your account manager or contact our sales team here. 

Our Field Prefill add-on combines the power of your SSO provider with Formstack’s Saved Fields feature to allow users to pre-populate forms with existing data. This help article will review how to get started with Field Prefill, from form authentication to granting user access. 

Field Prefill Mapping Overview

Step 1 - Setting up your SSO provider

With Formstack’s Field Prefill add-on, organizations leveraging Single Sign-On (SSO) can pre-populate an end user’s form using data stored in their SSO provider. This ensures data is consistent, systems are in sync, forms are easier to complete, and everyone is happy! 

In this article, we’re going to walk through how to map fields from your SSO provider to your Formstack form. 

Get started by logging in to your Formstack Forms account. Navigate to your Account Profile page and select Form Authentication.

• Google SSO
• SAML 2.0 
• CAS
• FSID

Note: At present, Google SSO only pulls in name and email fields. Custom Fields are not currently available for these SSO providers. 

Step 2 - Setting up your Prefill Mapping 

Note - Part of this section will ask you to use saved fields for mapping information from your SSO provider. We'd recommend checking out this article first if you haven't already created the saved fields that you'd be using on your form.

Once you’ve set up your Form Authentication, navigate to the Prefill Mapping tab that can be found by selecting the profile tab on the top right.

From this page, select Prefill Mapping on the left and then Create Prefill Mapping over on the right. 

As a reminder, you can check out this help article to learn more about setting up Saved Fields  and then continue reading below. 

Note: For fields that may capture sensitive information or personal health data, make sure to use the dropdown to update your security settings and turn on data encryption. 

Note: Account admins have access to all Prefill Mappings. 

Note: As an account admin on a Parent account, you can grant access to the subaccounts on the Subaccount Access tab. Learn more about granting subaccount access in this help article.

Once you’ve mapped your fields and reviewed your user access settings, move your mapping from Inactive to Active. 

Step 3 - Creating a Form with Field Prefill

Navigate over to Form Extras on the top right and move the Form Prefill toggle to Enabled and choose the mapping you built earlier. 

Note: If at any point you decide you don’t want to use Field Prefill on your form, head over to the Form Extras tab on the right and move the Field Prefill toggle to the off position. 

Granting Prefill Mapping Access to Subaccounts

On agency parent accounts, account admins have the ability to provision subaccounts with access to Field Prefill mappings. This will allow subaccounts to view and use the prefilled fields on their forms without allowing them to make edits. 

Let’s look at how you can set it up.

Navigate to your Account Profile page and select Form Authentication.

On the Form Authentication page, select Edit Form Authentication. The subaccount access container should be visible at the bottom of the page. Account admins on a parent account have the option to either grant access to individual users one at a time or grant access to all subaccounts at once.

 

Once you've updated your Form Authentication, navigate to the Field Prefill page, and select Edit Prefill Mapping. Select the subaccount access tab. You can either grant access to subaccounts one at a time or all at once. 

 

Note: Subaccounts can only be given permission if they already have access to the data source that is being used.

Subaccounts with inherited access will now see a pill on the Saved Fields in their account that are mapped to Field Prefill Mappings in the parent account. 

Child accounts can then add these fields to their form and manipulate them on their form as needed. 

Changing the Language of a Form

Pack your bags and go international with your forms!

Formstack allows you to translate all standard field labels and buttons provided by Formstack into 36 different languages including:

Afrikaans, Albanian, Arabic, Bulgarian, Chinese, Chinese (Traditional), Croatian, Czech, Danish, Dutch, English, Finnish, French, German, Greek, Hebrew, Hungarian, Icelandic, Indonesian, Italian, Japanese, Kazakh, Korean, Norwegian (Bokmål),Polish, Portuguese, Romanian, Russian, Slovak, Slovenian, Spanish, Swedish, Thai, Turkish,  Vietnamese, and Welsh. 
 

To set the Form language, go to the Forms > Settings > General tab. You will see an option to change the language there.

Naming the Fields in the Target Language

Anything you change or create (custom questions, button name, etc.) needs to be added in the appropriate language, as we have no way of translating the custom text.

If you manually change the name of your submit button, you will need to put that in the appropriate language as well. To edit the button name, go to Forms > Build.  Click on the Submit Button in your Form and enter the new Submit text.  Click off of the field to save your changes.

Multi-Language Forms

Besides changing the default language of a form, you can also change the language of a single field while the rest of your form remains in the language you originally set. This could be helpful if you wanted to create a bilingual form. 

 To set the language of a specific field click on the field, then choose a different language from the "Field Language" menu on the left.

Date-Time Field Calculations

Now available is the ability create calculations using Date/Time fields. This is useful if needing to calculate such things as the number of days between two dates entered into your form or someone's age using just their birthdate.

To get started, add a Number or Short Answer field to your form and the fields you'll be using to create your calculation. Number and Short Answer fields can be found in the Basic Fields section of the builder, while Date/Time fields are found in the Advanced Fields section:

Next, click the Number (or Short Answer) field, go to the field options along the left of the page, scroll down to the Default Value box, and click Use Date Calculation. This will convert the area into the date calculation builder. There are three different dropdowns that will appear: Value 1, Value 2, and 'Expected result in'.

The first two dropdowns will be set to either be the current date or a Date/Time field added to the form. The third dropdown determines what value the result will be calculated as: days, months, or years.

Calculating Age

To calculate someone's age using only their birthdate, set one Date/Time field to collect that date and set that field to be Value 2. Set Value 1 to be the current date and finally set the expected result to be in years.

Calculating Time Between Dates

If you need to calculate the number of days between two dates entered into the form (for example checking into and out of a hotel), this can be done by adding two Date/Time fields to the form and setting them to be Value 1 and Value 2. 

How do I change the width of my Form?

Note: The method below can be applied to Standard and Workflow Forms

The width of the Form can be adjusted by adding CSS to a custom Theme and apply that Theme to your Form. In order to add CSS to a custom Theme go to the form you want to edit and then click on then click on the Build tab, followed by the Themes tab (left side above the field options). Click the “Edit Theme” button to edit an existing theme or click "Create New Theme" to create a new one.

Next, click the “Advanced Code Editor” and then the CSS button and add the code below to adjust the Form width: 

Example: .fsBody .fsForm {width:800px;}

In the example above, the Form was set to 800 pixels wide, however, you may need to play around with the pixels until you get to an appropriate size.

Survey

When using our Survey feature, you'd want to use a slightly different code to ensure optimal appearance on mobile devices and tablets:

.fsBody .fsForm {max-width:800px;} 

Allowing Users to Save & Resume Forms

The Save & Resume feature allows end-users to save a partially completed form and come back at a later date/time to complete and submit.

Note: If you're using a combination of an older version of our form builder & file upload/signature fields, end users will NOT be able to have their files saved to the form until the form is submitted to the database. If you'd like your end users to have the ability to upload their files & signatures fields in the event that they need to save their form, please check out this article for updating your form version and this article for making sure you're using the most current version of our file upload field. 

Turning Save & Resume On/Off

You can turn this feature on/off by going into the Form > Builder > Form Extras (located on the right side as seen below) > Save and Resume.  In this window, toggle the "Save & Resume" option. You may also toggle the "Progress Indicator" option if you would like to show users where they are in the process of completing the form.

With this feature enabled, the end user will be able to save their partially-completed form by capturing the unique form URL. They may also choose to have this link emailed to them. When they are ready to revisit the form, they will simply click or paste the unique form URL into a browser, and the form will reload with any fields that had already been filled in. If they make any changes to the form, they will want to re-save and resend the form URL to themselves.

The link for saving a form can be found at the bottom of the live form. 

The user will have 30 days to return and finish filling out the form, after which time their data will be lost. This timer is reset every time the user re-saves the form. Once a Save and Resume link is made to finish the form and then click 'Submit', then the link will no longer be active.

Save & Resume on forms with Data Encryption

If Data Encryption is enabled on your form you can still utilize the Save & Resume feature, however, your submitters will have to set up a password when creating their link. They will have to remember this password in order to get back into their form to complete it and there is no way to recover or reset this password once they have chosen it. Forgetting or losing the password will require submitters to start the submission over from the beginning.

Save & Resume FAQs:
 

What if my form is encrypted?

If form encryption is turned on for a form, the user will need to create a temporary password when they click "Save and Return Later". That password will need to be entered by that user each time they come back to the form URL.

Note: This password is not the same password as the encryption password set up on the form in Settings > Security. The encryption password set up on the form is just for viewing submissions in the Forms application. Not for the individual end users save and resume link

If someone loses the link to their partially completed form, can Formstack resend this to them? 

A: At this time we do not have the ability to resend the links of partially completed forms.

Can I view forms that have not been submitted or check the status of these forms?

A: No, the partially completed forms and data are not visible until the form has been submitted to the database.

Do I need to save and send myself the link each time I work on the form?

A: Yes, if you fill out the form more, be sure you save and send yourself the updated URL link to the partially completed form, as this new link will contain the most recent changes.

If my form is embedded, will the Save & Resume link redirect them back to the embedded form? 

A: At this time the Save & Resume function must send returning Users to a Formstack-hosted link where they can access their previously filled in form data.

Can I change the Sender's Email or Name on my save and resume link?

A: No, Currently we do not provide a feature that will allow you to change the name or email address of the sender. This information is pulled from the account.

 Example:

If the Form Creator is James Gold, the save and resume link will state that the email is from James Gold.

Can I customize my save and resume link?

 A: No, links are not customizable.

Is it possible to extend the 30 day limitation for save and resume links?

A: Not at this time, but the current work around for someone taking the form is to go back into the form, make one change and then hit save and resume again; effectively giving a fresh new 30 days link.

How do event fields work with save & resume?

A: Event fields do not retain the quantity value while the submission is saved.  This is so that your inventory is not locked for 30 days in the case that the submitter does not return or chooses not to complete the submission.

Can I use a save & resume link associated with a disabled form? 

A: No, a disabled form will prevent the link from working. 

Date-Time Field Logic

Formstack Forms offer the ability to base conditional logic rules off of a Date/Time field on your form. This gives you the option to show/hide specific fields based on a date, date range, or period of time. Follow this link if you need a quick refresher on Conditional Logic.

To begin, you'll need a Date field already on your form from which to base your logic rule. Then click on the field you'd like to show/hide with logic. Select the "Logic" button at the top of the field settings and begin to set up your rule based on your Date field.
 

Adding Logic Rules

From there you can select your Date field and the condition for which it should be shown/hidden. The eight logic options for the Date field are shown below.

If you choose your condition to be either "is between" or "is not between," you'll receive two date conditions. One for the beginning and end date of the rule.

If you choose your condition to be either "is within" or "is not within," you'll receive a selection to set the number of Days, Months, or Years from today's date.

• Due to the way in which store submissions, Date/Time field logic will not work with a Date field formatted with a 2-digit year. (i.e. - 12/31/18 or 31/12/18) You'll need to use a 4-digit year format for logic to work properly.

Calculation Builder

Creating calculations on your Form is easy with Formstack! Here's a overview of making the most of our calculation builder:

Visual distinction between fields and operators in the calculation

 Fields are dark grey and operators and numbers are a lighter grey for more contrast between the two elements.

Drag and drop calculation elements

Forget one little operator in the middle of a giant calculation? Need to move a few elements around? No need to erase half (or all) of your calculation! The calculation builder supports the dragging and dropping of elements!

Selectable calculation elements to specifically target deletion/editing of existing numbers in the calculation.

Did you just finish a ginormous calculation and realize you have two plus signs right in the middle of it? Now you can click on the extra plus sign and hit the "Delete" arrow icon to remove it!

Need to change that 2 to a 20? Click on the number element, then add the zero!

Expanded keyboard support (including cursor entry point with keyboard arrows, and ‘C’ to clear the calculation)

Move around your calculation with your keyboard arrows and edit number elements with your keyboard keys. You can even press the 'C' key to clear your entire calculation.

See Changes Live

Label changes (and deletions) on other fields in the form involved in the calculation will reflect in the calculation without having to reload the builder… if you had ‘Field A + 123’ in your calculation, and changed the name of ‘Field A’ to ‘New Field A’, the calculation would reflect that change (where previously it would not) and show ‘New Field A + 123’

Date/Time Field Calculations

Date/Time fields can now be used in the creation of calculations! For a full walkthrough on how to create these kinds of calculations, our full walkthrough can be found here.

Important notes

• It is backward compatible with the previous calculation format… users won’t need to do anything to start using the new calculation builder.

Adding a Logo to Your Form

With Formstack, it is easy to add an image to brand your forms. In this article, we will review the two ways you can add a logo to your form to give your form the style it needs: Description Field Option or Theme Option . 

Description Field Option

You can add an image or logo directly to the top of your form through the Description field. The benefit of adding a logo to the Description field is that the logo will appear when embedding the form via the Javascript embed method.

To add an image to a Description field, click on the "mountain" icon when editing the field and select the image you'd like to upload. Place the Description field towards the top of the form and you'll have a logo!
 

Theme Option

You can also style your form with default themes and custom themes by editing the header. Please note that header images do not display when embedding forms into websites using the javascript embed code method. 

To add a Header via the Theme, click "Style" in the upper left corner of the builder, hover your mouse to the active theme and click on "Edit". Then go to Advanced Styles > General and click on "Upload Image" beside Form Header to add a header to your form.
 

From here, click on "choose a file" to find an image on your computer or drag and drop a file in to the dotted lined square. You can then resize the image or change the alignment of the image on the form. If you want to remove the image, you can click the red "x" icon.
 

Adding Tables to your Forms

You can now add Tables to your Description Area! These are not fillable tables but are a good way to display information on your Forms that would previously be placed directly into Description Areas or Sections and then formatted manually.

Inserting Table to Section or Description Area

To add a Table to your Form, you'll first want to add a Description Area to the part of the Form where you'd like your table to be. Then click the Description Area and the sidebar options will appear on the right and then you'll want to select the "Edit Description Area" to continue on to the next step(as shown below):

Entering Text

On this page, you'll want to select the insert table icon from the menu as shown below and then choose how many columns and rows are needed and then clicking again to insert the table on the description area, you'll see an empty table appear. From here you can input the text as needed, formatting the font using the toolbar and clicking into each cell of the table that needs to be adjusted.  You can also click the Table icon again if needing to add/delete columns and/or rows.

Advanced Editing

If you'd like to make some more advanced edits or formatting to your Tables and have knowledge of HTML, you can edit the code directly to do so. Locate the source code icon on the toolbar and the field switches to an advanced editor where you can view and change the code directly:

You can also apply CSS to the Theme of your Form to further edit your Tables. For example, Tables by default don't appear with a border and the text isn't center aligned, which are both formatting features that are commonly preferred when adding tables. If your Theme has this CSS applied to it:

.fsBody table {text-align: center;}

.fsBody table {

         border-color: black;

         border-style: solid;

         border-width: 2px;

}

.fsBody table td {

         border-color: black;

     border-style: solid;

     border-width: 2px;

}

Then your Table will go from appearing like this:

To this:

Further details about styling your Forms using CSS and how that can be added to your Themes can be found here.

Automatic Form Deactivation

One of the greatest advantages in running any time-sensitive contest or promotion is the ability to control how long a form can be viewed. With our deactivation feature, you can now set a form to expire on a certain time and date. You can find the deactivation feature within your form's admin area in the Settings Tab.

At the bottom section of the General settings under Form Status, you will see a drop-down menu with three options: Enable, Conditional & Archive. If you're looking to setup a time or condition for the form to expire, you'll want to choose the Conditional option. 

Form Deactivation Based on Date/Time:

Under the Activation Schedule section you can toggle when to enable/disable the form and fill out the date & time on when you'd like to activate or disable a form. You can format the date in multiple ways such as:

• November 28 2024
• Nov, 28 2024 AM
• 2 months from now

(All times Eastern Standard Time (US))

Note: It is not currently possible to set a form to automatically reactivate, but you can adjust the times as needed at any point. 

Form Deactivation Based on Number of Submissions:

Under the Disable Settings section, Just as you can deactivate a form based on a time or date, you can also limit a form based on the number of submissions. This might be great for contests, promotions, events with limited seating, and so on. Setting this feature up is similar to the deactivation based on date and time. To do so, select "after number of submissions" and insert a value. Changes will save automatically.

Discount Codes

The Discount Code plugin is for those who would like to add a coupon code to their Formstack order forms.  Before adding this plugin, you will need a Short Answer field on your form to use as your coupon code field and a Number field on your form used to calculate your Total. To add these fields to your form, click on the field on the left Form Builder Toolbar and drag it over to the appropriate spot on your form.

To add the plugin, click on Settings > Plugins and then click the Add button next to Discount Codes.

Click 'Settings' next to the plugin and you'll be directed to the Discount Code plugin settings page where you can map your Discount Code and Total fields and set your Discount codes.

These codes are CASE-SENSITIVE. To avoid confusion, it might be a good idea to add both the lower and uppercase versions of the code. Also, make sure you don't accidentally add any extra spaces, which would also be included.

You can choose to set the code to take a percent (%) or flat dollar amount (- -) off.

Optionally, you may also enter an Expiration Date and the number of times the Code may be used.  The "Expires On" option will allow you to set a Date at which time the individual Discount Code will expire and will on longer be active for discount deductions.  The "Uses Left" setting will allow you to limit the number of times this Code can be used by your Submitters before the code becomes inactive. If you leave these blank the codes will be able to be used unlimited times until you remove them from the list.

You can set multiple codes that give different percentages or flat rates off of your total so that you can give different codes to different users. To add multiple codes, simply click the green plus symbol. As you add the codes, they will automatically save. When editing a discount code, make sure you hit the enter key to trigger the save action.

Note: At this time, there is no way to bulk upload discount codes.

When your users fill out your form, they can type their Discount Code into the Short Answer field you created for that purpose and click "Apply Discount".  When typed correctly, the discount will be applied, your total will change, and text will appear below the Total field indicating the discount.

If you want to remove the Discount Code plugin, go to Settings > Plugins and click "Remove" or switch the plugin to 'OFF'.

Alternatively, click the red minus symbol next to the Discount Code plugin when on the main form Plugins page.

Notes:

• If you don't map the required fields in the Discount Code plugin, you will not be able to turn the integration to 'ON'.
• Codes are case-sensitive.
• Make sure you don't accidentally add an unintentional space to the end of your code. If you do, this WILL be required when the code is submitted.
• If you would like to limit a code to only one use, you must set the Discount Code field on your form to "unique" - which can be done in that field's editor screen.
• You must use payment gateways in "Single Item" mode and have them set to send the "Total" over in order for the Discounted price to be sent to the payment gateway.
• Discount codes cannot be uploaded in bulk at this time.
• If offering multiple discount codes and a user stacks discount codes, each subsequent discount code will be applied to the subtotal after the preceding discount code is applied. For example, if the initial subtotal is $100 and a 20% discount is applied, the subtotal is then $80. If another discount code of 10% is applied, it will take 10% off of $80, leaving a total of $72.

   

EXPECTED BEHAVIOR
$100
-20 (DISC02 20%)
----
$ 80
- 8 (DISC01 10%)
-----
$72 Total after discount

WILL NOT BE
$100
- 20 (DISC02 20%)
- 10 (DISC01 10%)
----
$ 70 Total after discount

Smart Lists Overview

Utilize Smart Lists to manage a go-to list of field options within your account for Team Plan and higher. When a change is made within the Smart List, this change is automatically reflected across your account to save you time and manual updating. 

Let's get started! Check out our video or detailed instructions below

Set up your Smart List

Step 1: Navigate to Smart Lists. Select your avatar (Profile) and choose Smart List from the dropdown options.

Step 2: Click Create Smart List. 
 

Step 3: Customize Smart List. From the "Edit Smart List" page, complete the following:

• Name your Smart List
• Use Separate values: Users can display a label with a different value associated with it.
• Use Images: Images will take place of the label.
  • Note: Images can be uploaded and used with radio buttons and checkboxes only.

Step 4: Add options to the Smart List. This can be done by:

• Manually Upload: Input data into the table. In this section, you can upload images (if applicable) and add, delete, reorder, and export as needed. 

or 

• Bulk Upload: Drag and drop a .CSV file (maximum 128 KB file size for upload) and choose to keep or skip the first row. Skipping the first row of data allows you to pick whether or not the headers on the CSV will be used as a row of information. 
  • Note: Uploading a .CSV will replace any existing options in the current Smart List. Export the current data to not lose information. More on this can be found here. 

Important note: There’s a limit of 10,000 options that can be used in conjunction with a short answer text field or a searchable dropdown field. 1000 options is the limit for radio buttons, checkboxes, and non searchable dropdown fields. There's a warning that will be displayed if you try and upload a list that exceeds this minimum number. For more information on creating a searchable field with a dropdown list, check out this article.

Step 5: Customize who has access to the Smart List. Toggle to the User Access tab and add or revoke access as needed. Account admins have access to edit all Smart Lists, while standard users can be given permission to edit a Smart List. All users can view all Lists.

Step 6: Review Smart Lists in forms. Once a Smart List has been added to a form, the Linked Forms tab will populate to those with access. Here you may view and unlink. Unlinking the form will copy the Smart List data to capture the field options.

Add Smart Lists to a form

Once your smart list has been created, begin to capture lists of field options across your standard forms! 

Step 1: From the Form Builder, choose a compatible field (dropdown, short answer, radio buttons, or checkboxes).


Step 2: With the field element selected, choose from Create Custom List or Link to Smart List from the Field Options panel. 

 

Creating a custom list will only copy the list. Users can still add, delete, and reorder options without affecting the original Smart List.

However, if you choose Link to Smart List, the field will automatically update with the selected Smart List. Options are disabled and can’t be added to, deleted, or reordered. Utilize the Open Smart List Editor to manage direct edits to the Smart List.

If the Smart list has more than 10 options, the first 10 options are displayed and this message is shown: “There are {number} other options not currently being displayed. To view all the options, visit the Advanced Options Editor.” From the Advanced Options Editor, you have the same functionalities (Create Custom List and Link to Smart List).

Frequently Asked Questions

Is it possible to create a searchable database using smart lists? 
 

Utilizing the short answer field for your smart list will give you the option to search for any of the options you have on your smart list. For example, let's say you created a smart list for your internal team to select their employee ID. Once you've selected your short answer field and connected the smart list with all of the ID's, the short answer field will suggest related ID numbers as you type them in.
 

I'd like to create a list that includes the name and email for each manager we'd like to include in a workflow. The form taker would select the name of the manager the form submission is meant to be routed or emailed to and would ensure the email is never misspelt. 
 

The best way to go about this is utilizing the "Use separate values" feature while configuring and customizing your smart list as described above in the "Set up your smart list" section. The label can be the name of the manager and the value can be the email.

I'd like to use a smart list that has 10,000 options, but what happens if I use a non-searchable field with that list?

If you use a non-searchable field(i.e: radio button, checkbox), only the first 1000 options will be used from that smart list. If you'd like to use all 10,000 options, we'd recommend using a short answer field or dropdown list with the searchable option enabled. 

Getting Started with Formstack Forms

Building your Form  

To begin, login to your Formstack Forms account and click "Create" from the Home or Forms tab.

Tip: If you'd like to organize your forms by folder, check out this article for more information. 

Note: If you do not see this button you may not have permission to create forms. Please contact your account admin so he or she can adjust your permissions settings.

Next, you will have the option to choose the type of Form that you're looking to create. The Form option allows you to collect as much data as possible on one or more pages while the Survey form type is meant for collecting sentiment data and is limited to 1 field per page.

Tip: You can always change the Form type from Form to Survey under the Form extras tab while on the builder, but the option to generate a Form based on a prompt with AI is only available on this step at this time. If you don't see the option to generate a Form with AI, please check out this article for more information on enabling this feature. 
 

After you've selected your Form type, you'll have the option to name your form & add a URL. The form URL will automatically populate with the form name. If you've chosen the Form or survey option, you can edit any of our dozens of templates or choose to start with a blank form.

Tip: The URL can be changed at any time after the Form has been created from the Share tab. While the sub-domain can also be updated with instructions from this article on the URL settings. It's important to update any existing links to avoid errors if you do make changes to the URL. 

After you've chosen the format of your form, you'll be taken to the form builder. Use Formstack’s drag-and-drop builder to pull fields from the menu on the left onto your form on the right.

Tip: Easily mark fields as required, add sections for organizing your form or configure conditional logic for showing or hiding fields based on conditions. 
 

Learn More: Check out this Article for more information on configuring your fields.  
 

Customize the look of Your Form with a Theme

You can customize the look and feel of your form by adding your logo and brand colors.

To create your first theme, navigate to the Build tab on the form you’d like to customize. Select Style in the upper left hand corner. You can create a new theme by selecting the Create Theme button or apply an existing theme to your form.
 

In your new theme, start by giving your theme a name. You'll see Quick Styles at the top, which are easy, quick edits. Open up the Advanced Styles tab to unleash all the theme options you can customize.

Tip: Check out this article for more information on customizing the look and feel of your form 
 

Once you’re happy with your Theme, it's time to save! Choose to Save, Save as New, or Save and Activate the theme. Save and Activate will save your new theme and set it as the Active theme on your Form.

Tip: One thing to keep in mind is that Themes only apply to forms that are hosted by Formstack. If you're embedding a form on your own website, it will include the styling you applied to your form via your custom Theme, but will not include styling outside of the form box and may be affected by the styling of the web page where you've embedded. In this case, you may need to alter the CSS on your Theme. You can do this in the Advanced Code Editor inside the Theme Builder.
 

Form Settings

Click the Settings tab to gain access to a number of different features, including:

-General Settings(Set the name of a form, the language and adjust the Form status for something like potentially setting submission limits).
-Emails & Actions on submissions for setting confirmations emails for end users and notification emails for internal stakeholders.
-Welcome & Submission Messages that would appear on a form.
-Adding an extra layer of encryption through the Security settings page.
-The ability to setup User Access and determine who should be working on the Form.
-Setting up one of our many Integrations. Here's a full list for reference.

Sharing your Form

Click the Share tab to find the link to your form (the Hosted URL) and the embed code needed to place the form on your website. The Quick Start menu provides the link to your Form and also the JavaScript Embed Code, which can both be quickly and easily copied by clicking the 'COPY' buttons. You can also access Lightbox and iFrame embed codes by navigating to the Website Embed section.

Managing Submissions

Submissions are captured when a Formstack Form is completed and submitted. The data is stored within the forms database and accessible from the forms submission table to view and manage. For more information on viewing & managing your submissions, check out this article. 

Separate Values

If needing your fields' options to display one thing to your submitters and have another value associated with it then you can do that using separate values. This is useful when needing to calculate totals but display something other than a number to the submitter or if you need the ability to store one value in the Submission while showing another to the submitter.

If for example, you were creating an order form to sell tacos then you could add a select list field called "What kind of tacos would you like?" and add in each option you want to be available. Select the field, scroll to the field options on the left, then click the 'Advanced Options Editor' button.

A box will appear with a checkbox at the bottom right that is labeled "Use separate values". You can check that and you'll then be able to assign a value for each label. 
 

Notes:

- If needing multiple options to have the same numeric value, you'll need to differentiate them by adding decimals to them that won't change the value. For example, if you need multiple options to be worth 2 then you can use the values of 2, 2.0, 2.00, etc. While these are all technically the same number, 2, the form builder sees them as unique values and will allow you to use them.

- When you opt to use separate values, you have the option to save just labels, values, or both in your database. Whatever is saved will be displayed in the Notification/Confirmation Emails as well. For example, if the values are purely for calculation and you just need the label saved and displayed in the emails, you'll need to either opt to save labels AND values (both) or just labels if you don’t need the values.

- If you intend to use Email Logic for Confirmation or Notification Emails, based on the field Values you will need to ensure that each Value is different.  For example, Values of 2, 2.0, 2.00, etc. will be seen as "2" by the Email Logic so any message with these Values will be sent.  To prevent this from happening each Value will need to different, such as 2, 3, 4, etc. for the Email Logic to successfully distinguish the Values.

Helpful Links:

Creating Calculations for creating self-calculating form fields that are handy for order forms or anywhere that you might need to compute a value based on what users select on your form. 

Pre-Population URL Building with Excel

If you're looking to put together a number of pre-populated form links, we wanted to give you a way to do this more easily with Microsoft Excel. We'll be using a formula to pull in pre-existing data from cells as variables in the URL. We'll combine all of this to let Excel automatically create a unique URL for each row of data.

Check out this article if you need a quick refresher on using Pre-Population with Formstack. 

The formula below is what exists in cell D6. You can also see this in the formula bar in the below screenshot.

=$D$1&"?city="&A6&"&state="&B6&"&weather="&C6

Now, let's break down the formula piece by piece.

=$D$1&"?city="&A6&"&state="&B6&"&weather="&C6


=$D$1

This bit stars by referencing the URL of our form in cell D1. We want to lock this referenced form URL, so to do this, we use dollar signs in the formula. The dollar signs in "$D$1" lock both the column and row for the formula.

&"?city="&A6

Next, text within &""& is referenced literally in our Excel formula. The text we have within &""& is ?city=. This is then attached to the end of our form URL from the step above. Outside and after the &""&, we have the cell reference of A6. This cell reference will drop in the city we want to populate from the row. In the case of this URL in cell D6, it will populate with "Gary" as the city. As we drag the formula down, that cell reference will change since it is not locked.

&"&state="&B6

This bit works the same as the previous part of the formula. We're referencing literal text we want to place in the URL string as well as a cell with data. This cell, B6, contains the state we want to reference and populate. Notice here between variables we also separate them with an ampersand in the literal string.

&"&weather="&C6

Again, this bit works the same as the previous part of the formula. We're referencing literal text we want to place in the URL string as well as a cell with data. The cell C6 has the the weather input we want to populate.

https://subdomain.formstack.com/forms/hello?city=Gary&state=Indiana&weather=windy

The pieces all combine to give us an output of a finished pre-population URL that's specific to this row of data. Once you drag the formula down through your spreadsheet of data, the formula adapts to reference the proper cells. Your pre-populated URLs are then created!

The result is a link that populates the form data when visited.

 Note: If you'd like to populate a Date field from Excel, the cells should be formatted as 'Text' fields and the date format should be the full month, day, and year (for standard date formats), ie. January 1, 2024. 

Using Google Fonts

With Google Fonts you can create a form with a unique look. We do offer a few different font options but Google Fonts offers many other options that are also free. 

What you would want to do is go to Google Fonts and find the font that matches the look you want. When you find the font you want to use from their list of fonts you would click on the "+" symbol on the upper right hand of the selected font. Once the "+" is clicked you will notice a grey box comes up at the bottom of the page, this will show the font you chose then just click on the grey box to open up the window for the selected font. 

On that window, you'll see "EMBED" and "CUSTOMIZE" tab. With "CUSTOMIZE", you will be given the option depending on the font to select Languages and to choose how it looks, different fonts offer different options that might be larger sizes, bold, italics, etc. Just make sure the options you want have a check next to them. Once done selecting how your font would look like, go to the "Embed" tab and copy the URL that appears, in our test case it will look like this: 

<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">

From here you will go to your form and add an embed field to the form and paste in the URL we just copied, this provides the form with the information to pull in the font.

Note: When using the embed code you would need to add a piece of text before or after it with at least one character (like a period) to make sure the code sticks.

Once you have the embed code in you would next need to edit the CSS for the form. For information on how to edit the CSS click here.  

In the "Advanced Code Editor" you would click on the fields of text you would like to edit and paste in the CSS code that is provided in step 4 of the Google font page, in this example it would be:

font-family: 'Indie Flower', cursive;
 

After you add in the CSS you can see how it looks by clicking on "preview" in the upper right corner of the builder. When you do this you should be able to see all the font changes and if you missed a field you will be able to see there.