Formstack

Custom calculations in Formstack Forms

How to run a custom function in your Formstack Forms when a user submits a form.

Background

Before digging in, this tutorial does require javascript. It's nothing crazy - so if you're comfortable writing some simple logic functions, you should be good. The majority of the time we build online forms we just need to move submitted data from Tool A to Tool B.

For example, a user signs up to receive your white paper and then you email it to them (I know this is a ridiculous example because no one actually downloads white papers, but bear with me...). In this case, a form to collects their name, email address, company info, job role, etc. — and then you probably pass that information to your CRM or email platform. There is no data manipulation, calculation or logic. Just simply moving data from one point to another.

In our experience, this is the majority of use cases that involve online forms (save pricing calculators on eCommerce sites).

But what if you need to do something a bit more advanced — say calculate or manipulate the information? What if you need logic inside of your calculation? One option is to pass the data to an intermediate source (think Airtable or Google Sheets), run your calculations there, and then continue the transfer to your destination. Or since you might be using Zapier for the initial data transfer, you could do the manipulation inside of Zapier. This can get a little messy though...

Here's a solution to help keep things a bit more tidy. This isn't perfect for every use case, but it's good to have in your back pocket.

Tutorial Situation

So we're all on the same page, let's make up a situation where for our tutorial...

You have an event where people get a free swag when they sign up. However, not everyone gets free swag — they need to meet one of the following criteria:

They buy a VIP ticket
They register 5 or more people
Have attended the event in the past

Yes, in this example people could cheat their way around #3... stop being such a downer.

Solution

First, build your registration form in Formstack From.
For each input that isn't a text, number or dropdown field (i.e. check boxes, radio buttons, etc) include a hidden input. (Checkbox: "Attended in Past" & Input: "Attended in Past Hidden"). This makes it easier to grab the values with our javascript.
Using the features native to Formstack, set the values of your hidden fields based on the inputs in the visible fields. (Value of "Attended in Past Hidden" is determined by the value of "Attended in Past")
Add a text input for your new output data (the data you calculate). This is usually hidden, unless you want users to see the results.
‍In our case the field would be something like, "Receive Swag?"... and the values will insert with code will be True / False
Add an embed block element to your form and use the following code as the scaffolding for your function:
Note: this looks like a lot... but it's only a lot because I have included so many comments to explain everything

Jump to the 9:45 mark in the video above to get a walk through of these code snippets.

Javascript snippet for Formstack embed block:

‍

Javascript snippet with more comments:

The Result

Now, when your users submit their data, you will perform a custom calculation that inserts the calculated data into your output field. This new data can be passed along with the rest of the data.

Custom calculations in Formstack Forms

More tutorials

Make an SVG image accessible

Why I don't build popups in Webflow (and where I do)

Take your 404 page to the next level

Automatically update copyright year on your website