Customize Form I

Modified on Wed, 2 Oct at 3:56 PM

TABLE OF CONTENTS



Survey


Easily create and gather sentiment data with Surveys —a Formstack Forms solution that displays one question at a time to the submitters.
 

Create a survey

Step 1: From your Form Dashboard, select + Create Form and choose Survey from the options.

Screen_Shot_2019-08-07_at_1.13.32_PM.png 

Step 2: Select Next Step to create a blank survey or choose a template to quickly get started.

Screen Shot 2023-07-24 at 4.00.15 PM.png


Step 3: Drag and drop desired fields into the builder. Page breaks are automatically included after each field is added.

NOTE: You can turn a form into a survey from Form Builder > Form Extras > toggle on One Question at a Time.

 

Welcome and submission messages 

Welcome and submission messages are automatically added to your Formstack survey when you add your first field. These greetings come with default messaging but may be customized. View more on customizing welcome and submission messages

 

Preview surveys

Review the one question at a time survey from the Preview dropdown to view as a live form (opened on a new tab), formatted on a smartphone (portrait orientation), or tablet (landscape orientation).
 

 

Embed surveys

Forms with the Survey setting enabled (or one question at a time) are restricted to iFrame embed. 



Using Routing Logic to Display Different Submission Messages Based on Form Responses

Here we will explain how to use Routing Logic to create different messaging that will be seen once the Form is submitted.  A different message will display depending on how the end user answers the questions on the Form to provide a more customized user experience.

First, you will want to build your Form with all necessary fields.  The Routing Logic tool can only be activated with Dropdown List, Checkbox, Number, Event fields and Radio button fields, so be sure the field/question you would like to use and the filter criteria are in one of these formats.


image.png

 

 

Next, go into your Form > Settings > Emails & Actions > Add a Submission Message.  This will populate a window where you can create your first custom message, redirect to an external URL, or display the default message.  


image.png


Once the Message is created and saved, you will return to the Emails & Actions screen to add Routing Logic. In this example, we wanted to display an address to send a check when the end user selected Check in the form.


image.png

 

To set-up, multiple Submit Actions, click on Add a Submission Message. Here we have created a custom message when 'check' is selected and a default message when 'credit card' is selected.  



Auto-Fill a Form Using the Form URL


It can be useful to provide a link to your Form that automatically inserts data into the form. For example, you may want to create unique referral numbers in a contact form used across multiple platforms. This can be done by creating a pre-fill on a hidden, read-only field. Here's how! 
 

1. Create a contact form and referral field

Create a form to capture a referral number to know which site your customer came from, and add a hidden, short answer field to the top of your Contact Form.

Screen_Shot_2019-06-18_at_10.11.28_AM.png Next, copy the created form's URL from the Publish tab to start the query string.

 

2. Add a query string to URL

After you have created the form and referral field, add a query string to your published form's URL to specify the created field name and the number you want to be associated with that field.

To add a query string to your form's URL:

  1. Start with a question mark (?) then add the field name in lowercase
  2. Add an equal sign (=) then the value you would like the field to be populated with
  3. If there is more than one field you would like to be auto-filled then add an ampersand (&) and repeat:

 

Writing field names

Field names and subfield names, like first or last name, are written differently in a query string:

  • If the field name is two words, connect them with an underscore (ex: referral_number)

    • ?referral_number=123456

Screen Shot 2022-07-05 at 10.50.34 AM.png

 

  • If you want to auto-fill a field with subfields, like a full name, connect the words with a hyphen (ex: name-first)
    • ?name-first=Jane&name-last=Smith

Screen Shot 2022-07-05 at 10.53.33 AM.pngNote: See more here on pre-populating field types. 


 

Distribute the form link using the query with different referral numbers for each website. Moving forward you can audit under Submissions to see the referral numbers and know which sites your visitors came from. 



Custom Identifier

Custom Identifiers are a great way to mark unique fields on your form that can be referenced later. Some examples of customer identifiers may be an email address, employee ID, invoice number, student ID, a patient record number, order ID, or account number.

Setting Up Your Custom Identifier

To establish your Custom Identifier field you'll want to open the Form Extras settings on your form by clicking the "Form Extras" button on the top toolbar in your form builder. Using the drop-down you can see any field on your form that can be used as a Custom Identifier. Custom Identifiers can only be set from email fields, phone number fields, numeric fields, or short answer fields. If you want to keep track of a submission record based on the email address entered in the entry step of a workflow, select that email field as the 'Custom Identifier'. If you want to use an account number to track a submission, a number or short answer field could be selected.

Screenshot_2019-06-26_15.42.29.png

Viewing the Custom Identifier

Once your Custom Identifier has been set up you'll be able to see and access it in several places around Formstack.

Submission Table
If your Custom Identifier is set up before you start to collect submissions, you will be able to see it as the first field in the submission table. If you set up the Custom Identifier after you have collected submissions on your form you will need to edit your Table Settings in order to see it on the submission table.

Screenshot_2019-06-26_15.50.01.png


Email Settings


You Custom Identifier can also be sent in emails subject lines or copy as extra information. Go to your form's email settings and drag the Custom ID extra into your form's subject line. This can be extremely helpful to inform users on the submission information they're receiving or helping users identify what Workflow they're being assigned to.


Screen_Shot_2019-03-14_at_9.51.57_AM.png


Workspace


If you have access to the Workflows add-on or are participating in a workflow process, Custom Identifiers can been seen in Workspace. Under the Workflow form, you will see the Customer Identifier next to the Workflow submission number. In the image below, the email field was set up as the Custom Identifier on the form.


Screen_Shot_2019-03-14_at_9.52.36_AM.png




Granting Prefill Mapping Access to Subaccounts


Please Note

The Prefill Mapping feature is currently in beta and not currently available to all users at this time

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.


1. Navigate to your Account Profile page and select Form Authentication.


agencycreate1.png


2. 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.


agencycreate2.png


3. 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. 


agencycreate3.png


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. 




Delay Integrations Until Payment is Completed


When using an Off-Form payment processor such as PayPal Standard, users will be redirected to those sites to complete the payment process.  Once the user submits the Form, we cannot force them to complete the payment, however, you can omit and delay your integrations from running if the payment fails or returns as incomplete.

You can also delay your other third-party integrations from running until payment has been completed.  For example, if you do not want to add a user to your mailing list or CRM until the payment is successful.


Note: The option to only send Notification & Confirmation Emails and run 3rd party integrations when payment is made is not available on all payment processors.  This feature is only available when using payment processors that redirect the end user to the payment site upon submission. 


To set this up, go into your Form > Settings > click on your Payment integration.  Scroll to the Email Options heading and check the box to "Only run 3rd party integrations when payment is made."  Once this has been enabled the third-party integrations set up on your form will only be triggered after payment is complete.


 

Delaying Notification & Confirmation Emails


In addition to delaying your Integrations from running until payment has processed, you can also choose to delay the Notification emails that go to you and your team as well as the Confirmation email that goes to the submitter until the payment has been made.  Once these options are enabled, no emails when be sent unless the payment is successful; if the payment fails, then no messages will be sent out.


 


Event Field Seat Management


The Event Field allows you to manage the number of tickets available in the Submissions of a form. If someone submits a form and accidentally selects too many tickets to an event, it is now possible to correct the data and the number of available tickets will be reflected on the form.  In this example, the Event field will start with 20 tickets available.

Screen_Shot_2019-06-19_at_10.31.50_AM.png

Then, the form is submitted with five tickets being selected on the form.

Screen_Shot_2019-06-19_at_10.35.50_AM.png The five tickets that were submitted on the form will be subtracted from the total ticket count and this is reflected in the form builder.

Screen_Shot_2019-06-19_at_10.37.56_AM.png

If you find out that there was a mistake in the number of tickets the user meant to select, you can edit the number of tickets submitted in the submissions of the form and the correction will be reflected on Build page of the form.

 After changing the number of tickets selected from five to two, the new total number of tickets remaining is displayed for the Event field in the form builder.

Screen_Shot_2019-06-19_at_10.39.59_AM.png



Getting Started - 5 Quick Ways to Personalize Your Forms

New to Forms and want to get ramped up quickly? Check out five quick ways to personalize your forms! 


1. Customize your colors and fonts to match your branding. 

You can even make a master template that can be applied to multiple forms! Check out our article here

 

2. Insert your logo or brand graphics

There are two easy ways! Learn our methods here

  • Add it to your form with a description area
  • Put it in your form's theme as a header

 

3. Change your submission message or action

Our Submit Actions article covers the basics.

  • Customize your the submission message to thank your users for submitting
  • Change your submission message to redirect them to another website or form and take the next action

 

4. Customize your email message

Personalized confirmation emails make for a more connected experience. 

 

5. Embed your form on your website

Every form has multiple methods for embedding your form to suit your needs.

There are even more ways to make Forms your own but this is a great starting point! Looking for more ways to learn? Consider our free, self-guided product certification program, Formstack Tracks! 



How to Modify the Submit Button

Whether you want to change the text of the submit button or use a different image entirely, this is possible using Formstack.

 

Changing the Text of the Submit Button


 The Submit Button text and styling can be updated quickly and easily in the Form Builder. In this section, navigate to the Submit Button at the bottom of your form. Click on it to bring up the editor on the left (under the Fields tab) and type in the new Submit Button label - this will update in real time.


Submitb.gif

 

Then, click on Style next to Build, hover your mouse on the active theme and click on Edit to edit the styling. From here, go to Advanced Styles to edit the submit button. You can edit the padding around the button, the background color, border color, and width, as well as font type (based on option from the selected font in theme), size, and color. After you make the changes be sure to scroll to the top of the theme editor and click on Save Changes.


 

Use Your Own Image for the Submit Button


Using your own image for the submit button isn't quite as easy as changing the text of the button, but it is possible.  To do this, you will have to add a few lines of CSS to your Formstack style template or to the page where you have the Form embedded.  This is a quick solution, even if you aren't familiar with CSS.


 You'll need to create a Custom Theme in order to edit the styling of the Submit Button.


Just click away from the Submit Button and go back to the Themes Library. Click "Create Theme" and rename the Theme by clicking on the pencil icon next to "Untitled Theme" then type in your Theme name. You can also choose an existing Custom Theme by clicking "Apply" on the Custom Theme you would want to use in your Themes Library. Then, click to "Open the Advanced Code Editor". 



Inside the CSS Editor, you want to paste in the CSS shown below to customize the Submit Button image:  



.fsSubmit input {

background: url(http://www.YOUR_URL_HERE.png) no-repeat scroll 0 0 transparent !important;

border:medium none !important;

height: 100px !important;

margin: 0 !important;

padding: 0 !important;

width: 300px !important;

text-indent: -9999px !important;

}



We stick the "important" tags in there to ensure that we override the inline CSS. Also, you will want to replace "http://www.YOUR_URL_HERE.png"" with a link to your submit button image. You may need to adjust the height (height:100px;) and width (width:300px;) to the dimensions of your image. Here's the submit button I'm going to use:


So my CSS inside the Advanced CSS Editor will look like this: 


After you have completed this be sure to scroll to the top of the theme editing section and click save changes to make the code changes stick. And the new Submit Button should now be added to the form:


 

Remove the Submit Button 


To remove or hide the Submit button, add the below code to the page where you embedded the Form or to a style template:

.fsSubmit input.fsSubmitButton {display:none;} 

OR just remove the URL from the custom Submit Button code from the CSS editor.


Left Align the Submit Button


This is also done with CSS:

.fsPagination {

margin:25px 0 0 22px;

text-align:left;

}



Prefill Mapping


Please Note

The Prefill Mapping feature is currently in beta and not currently available to all users at this time

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. 

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

prefill1.png

2. Select Add Form Authentication. Give your new form authentication a name and select your provider type. You can choose from: 

Google SSO

  • LDAP 
  • Active Directory 
  • SAME 2.0 
  • CAS
  • FSID

prefill2.png


3. Formstack will automatically pull in a stock list of 14 data fields from your SSO provider. If you need to pull in more information, account admins have the ability to create custom fields to pull additional data fields from your data source.


prefill3.png


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


4. Once you’ve set up your Form Authentication, navigate to the Prefill Mapping tab. Select Create Prefill Mapping. 


prefill4.png


5. Give your prefill mapping a name and choose the Form Authentication you just created.


prefill5.png


6. Once you’ve selected your Form Authentication details, a list of fields from your SSO-provider will appear. Next, you’ll map these fields to Saved Fields you’ve already created. 

prefill6.png


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.


7. As needed, grant or revoke user access to your new Prefill Mapping.


prefill7.png


Note: Account admins have access to all Prefill Mappings. 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.

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


prefill8.png


9. Now you’re ready to build your first form with Field Prefill. Start your new form as you normally would by selecting Create and choosing Form, Survey, or Workflow. 


prefill9.png


10. Move the Form Prefill toggle to Enabled and choose the mapping you built earlier. 


prefill11.png

11. Build your form using the Saved Fields you added to your prefill mapping. You are also able to add fields without field prefill to your form. Standard fields will not be pre-populated for the end user. 


prefill10.png


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 and move the Field Prefill toggle to the off position. 



Adding Scrollable Text to Your Form

Sometimes you want to add several paragraphs of text to a form, such as terms and conditions, but you don't want it to take up an entire page.  You can easily add a section of scrollable text to your form without having to use code. To do this, you can use a Long Answer field.


Screen_Shot_2019-06-13_at_8.06.10_PM.png


Just follow these steps:


1. Click on the Long Answer field option in the Form Builder Tools on the left and drag it over to your form in the spot you'd like to add it to.

2. Check to make the field "Read-Only"

3. Appropriately label your field

4. Adjust the width and height of your field as necessary - I suggest just changing the height to about 5 rows high

5. Paste your text into the Default Value field



Saved Lists

You can easily create a list that can be saved and used again in future fields on one form or in a completely different form within the same account. Saved Lists are shared across all users in an account. If you're on a Teams or higher tiered plan, this feature has been replaced by our Smart Lists feature. Smart Lists is a dynamic way to update all of your lists across all of your forms. 


Creating a Saved List


To create a "Saved List", first add a Checkbox, Dropdown List, or Radio Button field to your form. You can either type the list first in the simple options editor or just click to open the "Advanced Options Editor" and type them there.



 You can also import your options to the field via a CSV file inside the "Advanced Options Editor". After you have added your options, click to "save these options to a list". A pop-up will appear so that you can name your list.


 


 Now, you have a Saved List of options that you can pull into another Checkbox, Dropdown List, or Radio Button field on that form or another form in your account.

 

Accessing & Using a Saved List


First, add a Checkbox, Dropdown List, or Radio Button field to your form. Then, inside the "Advanced Options Editor", select the Saved List that you would like to use from the "Saved Lists" dropdown in the top right corner of the editor.



 Once you select the list, the options will automatically populate in the field.

 

Editing & Updating a Saved List


If you want to use a saved set of options as a starting point, but need to make a few tweaks, you can still select the Saved List from the editor and then edit the options as necessary. Unless you save over the existing Saved List, the options will only be edited in that instance alone on that field. 


If you want to make permanent changes to the list, pull up the Saved List and edit the necessary options. Then, click to "Save it" and those options will now be saved in that list and on that specific field. This does not edit/update other instances of this list across other fields/forms. You'll need to go into other fields using this list and manually select the new Saved List to update that instance.



You can also Rename and Delete Lists in this editor as well. Deleting a "Saved List" deletes the options on that field specifically and the list itself from the Saved Lists options. It does not delete the list from other fields that were using the Saved List.

Please Note: 
Larger lists may take a longer time to load and if your form has additional complexity, like a very large amount of logic built in, it may impact the performance of the form. 

If you're upgrading to a higher tiered plan, all of your Saved Lists will automatically become Smart Lists



How to Add Images for Checkbox or Radio Buttons

Are you looking for a way for your users to select images on your form rather than text? Formstack makes it easy to add images as selection options to Radio Button and Checkbox fields.

First, you will need to drag a Radio Button or Checkbox field onto your form. Then select your field and open the Advanced Options Editor under the Field-Specific section on the left.


Screenshot 2024-01-25 at 11.19.45 AM.png


 

Once in the Advanced Options Editor, you will need to select the "Use Images" checkbox under the List Options. Once the checkbox is selected you'll see another column appear on the left hand side. This is where you can drag and drop, or upload from your computer, the images you want to appear in your form.


Screenshot 2024-01-25 at 11.22.03 AM.png 

After your images have been uploaded, you'll want to set the Image Dimensions on the right. Under the size dropdown, you have the option to choose if you'd like to go with custom measurements or if you'd like to keep with the original images dimensions. If you chose to go with a custom dimension, you'll need to type a specific pixel size to constrain your images, or choose to just define one dimension (height or width) by leaving the undefined dimension input blank. Next, you'll want to select whether you want your images to be laid out vertically down the form or horizontally across the form. After that, you have the option to select where your text labels will appear in relation to your images. Labels are not required, but you can have them appear above, below, or to the left of your images. Finally, select the "Save Options" button in the top right-hand corner to save your field.


Screenshot 2024-01-25 at 11.43.15 AM.png


 

When you're back in the form builder you will see placeholder image for the images you've uploaded and the text labels below them. In order to make your form load faster, we do not render your images in the form builder. You can see how your images will display in the Style tab or by viewing your form.


Screenshot 2024-01-25 at 11.47.43 AM.png


When users open your form they will see your images on the form. A drop shadow will appear when you hover over an image, and a green border and checkmark icon will appear when an image is selected. There is no way to alter these colours.


Screenshot 2024-01-25 at 11.50.34 AM.png



Once a user submits their form, the label of the image selected will appear in your submission table. 


Screenshot 2024-01-25 at 11.52.29 AM.png
 

Some additional notes:

  • Images are restricted to 2 megs per image.
  • Image options cannot be saved as a list.
  • An image placement holder will appear when no image has been uploaded.



Using HTML Tags in the Labels of Your Formstack Form

Formstack allows the use of HTML in the form field labels and supporting text. While this behavior was supported in the past, it was more of a workaround and not officially a feature. With the most current version of of our form engine, V4 Live Forms, we now officially support the following tags and attributes.

Note 

  • HTML tags will only work on form field labels and supporting text. They will not work on option labels.
  • Any other tags used, not listed on this page, will not be rendered on the form. This is due to enhanced security purposes.


Here is a general how to for adding HTML tags into the form labels and supporting text on a Formstack form.
 

  • Highlight the field you want to add HTML on.


Screenshot 2024-02-05 at 3.35.11 PM.png

 

  • Add the HTML tags you want to in front of the words in the label or the supporting text. The tags will be shown in the form builder view, but as soon as you view the "Live Form", the tags will be replaced with the expected behavior for those tags.


Screenshot 2024-02-05 at 3.36.42 PM.png

 

 

  • Here is what an unformatted form would look like when viewing the "Live Form"

Screenshot 2024-02-05 at 3.36.02 PM.png

  • Here is what a form formatted with HTML tags would look like. Notice that the label and the supporting text are both BOLD and BIG compared to the rest of the text on the form. 

Screenshot 2024-02-05 at 3.36.29 PM.png

Here is the list of the supported HTML tags and attributes you can use on your Formstack form. 

 

HTML Tags

  • <a>: Defines a hyperlink.
  • <abbr>: Indicates an abbreviation or acronym.
  • <acronym>: Specifies an acronym.
  • <address>: Defines contact information for the author or owner of a document.
  • <area>: Defines an area inside an image map.
  • <b>: Renders text in bold without extra importance.
  • <big>: Makes the text larger.
  • <blockquote>: Indicates a section that is quoted from another source.
  • <br>: Inserts a line break.
  • <caption>: Defines a table caption.
  • <center>: Centers the content inside (deprecated).
  • <cite>: Represents the title of a work.
  • <code>: Displays its content in a monospaced font.
  • <col>: Specifies column properties for each column within a <colgroup> element.
  • <colgroup>: Specifies a group of one or more columns in a table for formatting.
  • <dd>: Describes an item in a description list.
  • <del>: Indicates text that has been deleted from a document.
  • <dfn>: Indicates a defining instance of a term.
  • <div>: Defines a division or section in a document.
  • <dl>: Defines a description list.
  • <dt>: Defines a term/name in a description list.
  • <em>: Emphasizes text.
  • <font>: Specifies the font face, size, and color of text (deprecated).
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Define HTML headings.
  • <hr>: Represents a thematic break.
  • <i>: Renders text in italic.
  • <img>: Embeds an image.
  • <ins>: Indicates text that has been inserted into a document.
  • <li>: Defines a list item.
  • <map>: Defines an image map.
  • <ol>: Defines an ordered list.
  • <p>: Defines a paragraph.
  • <pre>: Defines preformatted text.
  • <q>: Defines a short quotation.
  • <s>: Renders text with a line through it (deprecated).
  • <samp>: Indicates sample output from a computer program.
  • <small>: Renders text in a smaller size.
  • <span>: Groups inline-elements in a document.
  • <strike>: Renders text with a strikethrough (deprecated).
  • <strong>: Indicates that its contents have strong importance.
  • <style>: Contains style information for a document.
  • <sub>: Defines subscripted text.
  • <sup>: Defines superscripted text.
  • <table>: Defines a table.
  • <tbody>: Groups the body content in a table.
  • <td>: Defines a cell in a table.
  • <tfoot>: Groups the footer content in a table.
  • <th>: Defines a header cell in a table.
  • <thead>: Groups the header content in a table.
  • <tr>: Defines a row in a table.
  • <tt>: Renders text in teletype or a monospaced font.
  • <u>: Underlines text.
  • <ul>: Defines an unordered list.
  • <var>: Indicates a variable in a programming context.


HTML Attributes

  • abbr: Specifies a shorter version of the content in a <th> element.
  • accesskey: Specifies a shortcut key to activate/focus an element.
  • align: Specifies the alignment of the content (deprecated).
  • alt: Provides alternative text for an image.
  • axis: Categorizes cells in a table.
  • bgcolor: Specifies the background color of an element (deprecated).
  • border: Sets the border around table cells (deprecated).
  • cellpadding: Specifies the space between the cell wall and its contents in a table (deprecated).
  • cellspacing: Specifies the space between cells in a table (deprecated).
  • char: Aligns the content of a cell to a character.
  • charoff: Sets the number of characters the content will be offset from the character specified by the char attribute.
  • charset: Specifies the character encoding.
  • cite: Specifies a URL to a document that explains the quote or change.
  • class: Specifies one or more class names for an element.
  • color: Specifies the color of text (deprecated).
  • colspan: Specifies the number of columns a cell should span.
  • compact: Used to reduce the size of the list markup (deprecated).
  • coords: Specifies the coordinates of an area in an image map.
  • datetime: Specifies the date and time.
  • dir: Specifies the text direction.
  • face: Specifies the font face



Creating Calculations

Self-calculating form fields are handy for order forms or anywhere that you might need to compute a value based on what users select on your form. In this article, we will take you through how to use a calculation field to easily automate sum totals and dates, but we also have a video at the bottom that takes you through how to accomplish this if you prefer that format. 

 

To create a calculating form field, first, create a Short Answer or Number field, then look for the Calculation option underneath the Field Specific area to the left when you have your field selected.  Click on the Calculation option and decide if you want to use a Date or Numeric calculation. Under the Default Value(Calculation) option you will see a drop-down list of fields, numbers, and mathematical symbols that you can use to set up the calculation.

 

Screen_Shot_2020-05-14_at_2.38.55_PM.png

 

Select a field from your form and use the operator buttons underneath to create an equation. If you need some help with understanding our calculator, we've got a great article that walks you through it here. In the example below, we've created a calculation that includes the sub-total and tax from other field values.

 

Screen_Shot_2020-05-14_at_3.06.28_PM.png

 

Using Separate Values


When using select lists, checkboxes and radio buttons, you can check the box that says "Use separate values" under the advanced option editor option pictured below.  This allows you to add a number or text values to each option in the field.  This can be used in many different ways, but here is one example:

 

Say you wanted an order form where people could order different types Back to the Future props. You could add a select list field called "What prop would you like to purchase?" to your form with multiple prop options. Click on the field, then on the "Advanced Options Editor" button in the left column. Check the box that says "Use separate values" and assign a number value to each option, i.e. 5 for "Hoverboard"; $20 for "Flux Capacitor" and so on.

 

Screen_Shot_2020-05-14_at_3.18.25_PM.png

  

When you insert this field into a calculation, it will insert $5 into the calculation when the user chooses "Hoverboard"; $20 into the calculations with the user chooses "Flux Capacitor", etc.

 

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.

 

Notes: 

  • You will see an error when using option values that are the same, such as setting two different items as both being $5.  This is because option values must be unique.  To get around this, you can set one item to $2, one to $2.0, one to $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 be different, such as 2, 3, 4, etc. for the Email Logic to successfully distinguish the Values.
     


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article