Announcing Formsort’s new user interface (UI) library

A seamless user experience is just as essential for our customers (you) as it is for your end users. That’s why we’ve redesigned our set of existing UI components to make your form building process as intuitive as possible.

Up until this point, our team at Formsort has been utilizing the rich collection of Material UI components with some level of customization. As a primer, Material UI components are React-based design components in the Material library that are specifically created for web developers to use when designing their websites. They form the foundation of a website’s design – from colors and fonts to icons and shapes – and reduce the need for everyone having to create them from scratch.  

As we've grown as a business, our studio has created UI interactions that are so specialized that relying on off-the-shelf components could result in a suboptimal user experience. As a result, we've spent the last few months redesigning our UI library, building on top of the existing Material UI components and creating new ones.

Getting these interactions right and having them as reusable components ensures that our customers have a pleasant and consistent experience when building flows. It also speeds up your design and implementation process. For example, now when you choose a background color, you will see the color hex code and a bigger color swatch. 

Our goal is to develop a robust design system to optimize your flow building experience. We’ve started with the most urgent UX areas identified internally and by our customers, including interactions related to:

Improving our color picker tool. Inconsistent colors can leave a poor first impression with customers. We’ve updated our color picker tool's interface to make it easier to choose and display your color of choice. 


Standardizing the display of optional properties. Editing the content and style of forms can get quite complex. To make this a less overwhelming experience, we are only showing options and properties when relevant. For example, we’ve standardized how we display and group optional properties using a component we call the Toggle accordion. Now, you will always see which option will trigger and enable more options. You will also find it easier to understand the relationship between them.


Since we already had a working version of our UI library, our redesign process started with looking at what we have today and creating a series of components to improve the flow building UX. We followed the atomic design approach: first we defined our most basic building blocks (e.g. colors, fonts, shapes are atoms) molecules (e.g. dropdown lists) and finally organisms (e.g. dialogs). Building up from a repertoire of high-quality standalone, portable, reusable building blocks ensures that end customers’ flow building experience is consistent and intuitive.

Even small details like alignment, wording, fonts, and scale can have a large impact on the flow building experience. Our UI library components are created with accessibility in mind e.g. taking into account color contrast, text legibility and non-mouse interactions (like keyboard interactions).  

We aim to keep our library minimal and responsive to user needs. We are not creating components just for the sake of having them. We are optimizing our resource allocation by only developing the highest-impact components. 

Exploring and creating the components proved to be a great opportunity to review how Formsort works on the interaction level. When doing the exploration work on a new or existing component, we meticulously look at all the places in Formsort Studio where such an interaction takes place. We discuss all the use-cases and edge-cases, making sure we create solutions that cover everything and are future-proof. We aim to create components that can potentially combine existing, similar patterns: when similar functionality is presented with different interactions across the UI, it's a good chance for us to come up with a single solution. The resulting consistency makes the lives of our users easier and saves future implementation and design resources for us.

Our engineering and design teams work closely to make sure we get everything right e.g. from the technical and accessibility perspectives. We continue to use Material UI as a base for our components with a rich customization. As new components become available in the UI library, we phase out and replace all the old instances across the Formsort Studio interface.  We use Figma for exploration and design, Storybook to showcase and document the components that are ready, and Chromatic to detect visual regression. 

At this point, around 80% of everything you see in the Studio has been updated with new UI library components. Changes range from the most basic building blocks like buttons and checkboxes to more specific interactive elements like a color picker or an image uploader. 

We’re still in the beginning phases of our UI library. Its expansion and maintenance will be an ongoing journey. Eventually, it will evolve into a well-rounded design system that covers a lot more than the atoms, molecules and organisms we have today. As we continue building the UI library, look out for more updates! 

Learn more about our ongoing improvements and how Formsort can build better forms for you. 

Optimizing your form building experience with our new UI library

If you're on AWS, this article will show you an easy way to set up an authenticated webhook target that can scale using Lambda function URLs. While they don't provide nearly the breadth of the features that come with API Gateway, function URLs are simple and trivial to roll out. Used in conjunction with Formsort's signed webhook requests, we can also make them secure.

We'll primarily build out the code for our Lambda handler in this post, but you'll find everything you need to quickly deploy this using the AWS Serverless Application Model in this project. While we use Python, all of this can be ported to the Lambda runtime of your choice.

We chose to have our Lambda publish to an SQS queue for this because they are simple and scaleable consumption targets for other parts of your system. This makes them a great way to get started, because your initial bottleneck will be concurrent Lambda invocations. Default concurrency as of the time of this writing is 1000 invocations per account per region! This gives you great throughput capabilities for inbound answers very early on and can subsequently be increased through a support request with AWS.

As a reminder, here are the parts of the event generated from a Lambda function URL that we care about that will be passed to your handler:

{
    "headers": {
        "x-formsort-signature": "fooXvb2luxtOgquxGbazmpYFsvu_VOduxqlEwN0Wbar",
    },
    "body": "{\\"answers\\": {\\"confirm\\": true}, \\"responder_uuid\\": \\"xxxxxxx-2009-4151-a206-80f2739ec3ec\\", \\"variant_label\\": \\"main\\", \\"variant_uuid\\": \\"xxxxxxxxx-82c2-4d94-9e53-1f4c918be198\\", \\"finalized\\": true}"
}


import boto3
import os

SQS_QUEUE_URL = os.getenv("SQS_QUEUE_URL")

def handler(event, context):

    # Send Message to Queue
    sqs = boto3.resource("sqs")
    answers_queue = sqs.Queue(SQS_QUEUE_URL)
    answers_queue.send_message(MessageBody=event["body"])
    return {
        "statusCode": 200,
        "body": "success"
    }


You can easily use this code snippet creating a Lambda function in the console. If you're doing this from scratch, you'll also want to setup an SQS queue and use that Queue URL in the above SQS_QUEUE_URL environment variable. The referenced project in the introduction will provision this queue for you automatically using CloudFormation and expose it as an export.

After your Lambda function URL is up and running, let's test it out with Formsort. I'm going to go into my integrations page for a sample flow and set up a webhook:

Try sending some test submissions. If you go to your SQS queue afterwards and do some polling, you should see them populate:

If this is looking good - congratulations! You now have a webhook that can scale in AWS for your Formsort answers. This is a great place to start, but next, we'll add signature verification to only allow requests originating from Formsort to be allowed to populate your queue.

You can reference how you can perform signature verification with Python in our docs here. Here is what it's doing overall:

import base64
import hashlib
import hmac
import os

def hmac_sign(signing_key, original_request_body):
    key = signing_key.encode("utf8")
    message = original_request_body.encode("utf8")
    return (
        base64.urlsafe_b64encode(
            hmac.new(key, message, hashlib.sha256).digest())
            .rstrip(b"=")
            .decode("utf8")
    )


That's going to take in the signature passed in by the x-formsort-signature headers along with the body of the request. Working this into our handler and the signing key pulled from our integration, our code now looks like this:

SQS_QUEUE_URL = os.getenv("SQS_QUEUE_URL")
SIGNING_KEY = os.getenv("SIGNING_KEY", "your-signing-key")

FORBIDDEN = {"statusCode": 401, "body": "forbidden"}
SUCCESSFUL = {"statusCode": 200, "body": "successful"}

def handler(event, context):

    # Verify Signature
    if not event["headers"].get("x-formsort-signature"):
        return FORBIDDEN
    signature = hmac_sign(SIGNING_KEY, event["body"])
    if signature != event["headers"]["x-formsort-signature"]:
        return FORBIDDEN

    # Send Message to Queue
    sqs = boto3.resource("sqs")
    answers_queue = sqs.Queue(SQS_QUEUE_URL)
    answers_queue.send_message(MessageBody=event["body"])
    return SUCCESSFUL


Let's test this out in our Formsort integration again. If we disable signing, it should fail:

AWS Lambda function URLs are a great way to get started using Formsort webhooks if you're on AWS. They give a simple, scaleable method to consume responder answers, while providing a ton of flexibility for downstream processing.

Want to learn more? Check out our docs or chat with our team.

How to use Lambda function URLs to quickly get up and running with Formsort in your AWS environment.

Creating secure, serverless webhook targets on AWS

It takes a lot of planning and investment to get a potential customer to your website, culminating in a crucial moment: a purchase of your company’s product or a signup for your service. Since the average form abandonment rate is 68%, a high-quality onboarding experience is often the difference between a potential customer converting, or abandoning you entirely for your competition. 

Creating the best onboarding experience for your customers begins with accepting that beyond reaching a baseline quality level, there is no single checklist to follow or one-size-fits-all solution for improving onboarding flows. I’ve seen the same experiment, performed in similar companies in the same industry result in opposite outcomes. Instead, you should plan for iteration, experimentation, and taking a few risks over time in order to learn and build the optimal flow for your product.

I’ve been a part of various product teams (Google, Better.com) for over 10 years – and have worked with dozens of companies on their onboarding as CEO and head of product at Formsort. Let me share a few strategies about what's worked. 

The common wisdom is that reducing the number of clicks is the best way to convert new users to a product or website. 

While cutting clicks may be effective for optimizing for micro-interactions like shopping carts or logins, counterintuitively, at my last company (better.com), we found that in the mortgage application, increasing the flow length with supporting content can improve conversion in a statistically-significant way. We showed users reasons why information was being collected in the form, added informational steps that served the user (instead of focusing on what they provided to us), and gave context on what to expect on every step.

We even added psychographic questions (such as "How are you feeling about this process"?) that weren’t truly essential to signing up for better.com on a data level, but instead served to build an emotional connection between the user.

Treat your sign-up flow like a conversation

Adding "filler" steps and content is effective because it mirrors real-world conversations, where both sides partake in providing information, even if the process itself is asymmetrical (such as a conversation with a medical professional). 

A flow is a digitized conversation whose primary goal is the exchange of data, but also exists to build trust and establish a relationship. Treat the form as a two-way dialog: there is knowledge and information to exchange both ways.

Use conversational language. Approach your questions and prompts as an informal interview or coffee chat. Take your flow and read it out loud, then read it out loud again (on a Zoom call is fine, or even in the mirror). Have a second and third pair of eyes and ears on your form and onboarding copy to ensure it’s as natural and easy to understand as possible.

Does it sound like something you'd actually say out loud? Or do you sound like a robot? Feeling rude or harsh? Act on those feelings, and remember, there is a human on the other side filling in your form, so make sure that you treat them with the respect they deserve.

Take a look at some great examples of informational steps from Agency, Lexie Hearing, and Allara Health (a Formsort customer). Each of these examples extends the form length but can increase overall conversion by providing context and educational information to the responder.

Just like a poor phone connection or a noisy background can ruin a conversation, take care to remove the possibility of death by a thousand cuts by bugs and glitches. If your flow isn't converting, it should be because of the content or targeting (which you can improve through iteration and experimentation), and not because the keyboard has disappeared or a button doesn't work.

Many flows end up with numerous small bugs and glitches when they’re not polished and regularly tested. Any single one of these issues is not usually by itself a show-stopper, but these little details add up to a flow that is filled with friction:

Email validation might not work properly.

Toggling between questions and changing responses is impossible or broken.

Users aren’t able to abandon the form and return to it.

Your layout looks busted on an older phone.

The list goes on – there are hundreds of these kinds of things.

Pay attention to these edge cases and details to remove roadblocks for users converting.

If you can only do one thing, then my number one tactical piece of advice is: say no to scrolling. Luckily, this is low-hanging fruit from a technical perspective. Put each step of the form on a single, mobile-friendly page to focus users on the single most important next question at hand, allow spotting validation errors easier, and put navigation one tap away at all times.

As an example, check out how Capsule and Curex collect email addresses in a single step of their flows.

Accept that people are busy and mistakes happen

People don't live their lives on one device, so you need to offer your experience seamlessly across devices. Whether users are onboarding from a cell phone,  tablet, or desktop, the flow should be just as usable and easy to use. Better yet, should users return to the onboarding flow on different devices, ensure that their progress is not lost. You can easily enable this on Formsort by passing the responder UUID between devices.

Don’t punish the user for not having an answer immediately. Especially if you're asking for something private or hard-to-find (think: uploading a specific piece of paperwork), potential customers might not know an answer immediately. Often they will put a placeholder response but feel inclined to go back and provide a different response later.

Just how verbal conversations can take turns, forms are rarely followed absolutely linearly, so don’t punish the user for wanting to backtrack. Ensure navigation is seamless and that there are few points of no return beyond which changes cannot be made.

Never make the user re-enter data. Entering the same information twice is one of the most frustrating experiences, yet is surprisingly common. This is especially true if you are being asked to start over again from the beginning. Ensure you support autocompletion, and that responder's answers persist across sessions and navigation. 

If you can, skip collecting low-value information outright or obtain it from a third party, obviating the need for error-prone manual data entry in the first place. 

To pre-fill a responder’s information, Formsort supports 3 different ways to send data into a form: via URL parameters, by reading from (and writing to) cookies, and by POSTing values from another form. If they reload, all their answers will be right there, waiting for them to continue when they are ready.

You can also check out how other companies approach repeating inputs in our Fineflows gallery.

Even a seamless, conversational form requires motivation to complete. After all, we'd all rather be doing other things than data entry.

To create incentives, reward the users frequently. Take this beyond the information and acknowledgment mentioned previously– remind users what they’re receiving at the end of the flow. Show them that it’s worthwhile to finish onboarding, and include text that’s encouraging to them. Give tangible rewards along the way, such as discounts, or any interesting new information you gathered along the way, such as a credit score from a credit report or an estimate for an amount they may save by using your product.

Demonstrate progress to show users where they’re at in the onboarding process. This makes it easy to see the light at the end of the tunnel and understand how much longer they need to invest in onboarding. It also gives an overview of what to expect as they go through the flow, and how far they’ve come– making them less inclined to abandon onboarding. 

Just like a subway map omits irrelevant details of geography, your progress bar should be an indicative guide to your flow. If you have lots of steps, strongly consider grouping them into sections (like Formsort's grouping feature allows) and only showing group-level progress. 

A good example is Kindbody’s or Nurx's progress bar (see below), where the order of events is clear and I know what to expect.

Designing the best onboarding flow is a fluid process. 

Again, there’s no silver bullet or golden rule for designing the best onboarding process. Instead, maintain a flexible, user-driven mindset to improve your conversion. 

Understand how your onboarding flow is currently performing, what the bottlenecks are, and what sticking points have a high drop-off rate. Communicate this to everyone involved, and follow up with continuous testing and evaluation. 

A fast iteration process and tight feedback loop on your onboarding flow begins with the right tooling. Thankfully, we've built a lot of what we know into Formsort. We make the building, testing and measurement process seamless for your entire team. 

The next time your product or marketing team has an onboarding flow idea but is blocked on engineering resources, give Formsort a try. Learn more about our product through our documentation, or talk to our team.

Our CEO and Head of Product, Fil, breaks down best practices for your onboarding flow.

Optimizing your sign-up flow: tips from a product manager

Clinical trials / clinical research organization (CRO)

Vial is an SF-based healthcare startup reimagining the clinical trials industry by creating best-in-class study management and CRO services. Their CTMS, VialConnect, enables clinics to streamline workflows and execute trials more efficiently. In addition, their recently launched Oncology CRO was built to deliver a superior CRO experience for oncology sponsors.

As Vial ramped up its marketing efforts in 2021, the team needed to develop a secure sign-up flow that would pipe participant information back into its Clinical Trial Management System, or CTMS. Vial chose Formsort to power the sign-up flows across all of its landing pages. 

Since using Formsort, Vial has increased form completion rates by 30%, reduced engineering costs, and shortened its form building timeline from weeks to 1-2 days. Vial’s product and marketing teams now design, iterate and ship their sign-up flows inside Formsort - without involving their developers.

Client challenges: Team needed to build a patient recruitment flow, but off-the-shelf solutions lacked design flexibility and critical integrations

Patient recruitment is a critical part of the clinical trial process, but is challenging due to low patient population awareness and lengthy qualification processes. In late 2021 the Vial team began investing in D2C marketing campaigns to address the awareness barrier, but they still needed an efficient way to qualify these leads for upcoming trials.

The Vial team knew they wanted to leverage form software to solve this problem, and looked for a tool that could mirror their engineering team’s capabilities. Many off-the-shelf solutions lacked the styling and testing capabilities they needed, and did not integrate with their tech stack: BigQuery, Google Analytics, Google Tag Manager, and their internal CTMS.

Vial came across Formsort’s offering and realized it satisfied all of their requirements. Implementation took less than one week, allowing the team to get live quickly.

Formsort solutions: Rapid experimentation, engineering-friendly integrations, and powerful marketing analytics

According to Khunal Parkash, a Business Operations Manager at Vial, Formsort helped Vial “reimagine what they ask prospective clinical trial participants”. Initially the Vial team started off with a long flow (30-40 questions) with complex decision trees that captured a responder’s detailed medical history. As the team reviewed the funnel, they realized these lengthy flows were negatively impacting completion rates.

The Vial team was able to rapidly iterate on its sign-up flow by leveraging Formsort's custom “theme” feature. Once they customized all of their form components and saved a theme, the team could rapidly modify content while maintaining a custom-engineered level of quality. Editing and deploying these new flow variants took just a few hours and required no engineering involvement, whereas a home-grown process would have taken anywhere from a couple of days to weeks.

Sign-up flow data needed to be analyzed by different teams across Vial, and these teams use different tools. The engineering team needed to receive data in BigQuery, the marketing team needed to review campaign analytics in Google Analytics, and the product team needed to receive data in the CTMS to enable follow-up calls with leads. Formsort’s native integrations with BigQuery, Google Tag Manager and Google Analytics enabled the first two use cases, while Webhooks allowed the team to send data to their internal CTMS.

“Formsort has made it incredibly easy for our product teams to spin up forms without wasting engineering time. Data is simple, readable, and flows exactly where it needs to go with minimal complexity,” said Tina Jiang, a Senior Product Manager at Vial.

Formsort’s analytics features helped Vial’s marketing team analyze funnel performance and identify areas for improvement. Additionally, enabling UTM parameters allowed the marketing team to keep track of campaign referrals and performance. “Formsort makes it easier for marketers like myself to get clear line of sight into our funnel”, said Steve Baek, Head of Marketing at Vial. 

By shortening its form from 30-40 questions to a simpler flow, Vial increased its sign-up completion rate by 30%.

Vial has experimented with over 10 variants of their intake flow, each of which take just a few hours of design time and are shipped in 1-2 days. By enabling this faster experimentation process, Formsort has helped the team reimagine their customer journey, replacing their initially complicated flow with a short, frictionless user experience.

Vial’s product and marketing teams can now launch new, highly customizable forms in days, without dipping into engineering resources. “Formsort, with its engineering-friendly focus, enables custom solutions that protect customer data while reducing engineering costs and complexity”, said Khunal Parkash, a Business Operations Manager at Vial. 

Co-founder & CEO

Formsort has built the best form builder full stop. Every feature we can dream up they have natively in the platform. By choosing Formsort, our product managers and marketers have focused on building what makes Vial special. Not only are we given this technical advantage, the Formsort team there feels like an extension of our own.

Want to see how Formsort can help your business? Get started today!

Learn how Vial increased form completion rates and accelerated experimentation timelines with Formsort

How Vial increased clinical trial sign-ups by 30%

If you’re building custom forms, you need to build backend systems that can collect and process results as they are being filled out by responders. As companies grow their audience and gain the ability to leverage more and more insight from their responders (both from their answers and their journey through the flow), responder data volume grows in step. 

If you’re an engineer, you need to ensure that these services have high uptime and can scale with user traffic. Otherwise you risk losing your most precious commodity: data.

Building out this important infrastructure is undifferentiated heavy lifting that doesn’t directly add value to a brand’s products or services. It can also be incredibly expensive due to the engineering skill sets required to do it well.

While Formsort gives users a powerful form builder, we also act as a service that can scale globally to collect both responder answers and their behavior as they move through a flow. Formsort also gives tools to connect that data into the services and platforms through our integrations.

Why is this problem important for engineers?

The problem of scale: Building public web services to ingest form results becomes more and more difficult as your audience and flow responders grows.

The problem of cost: Engineers want the quickest path to empower their company with data by getting it into the platforms of their choice without having to build out custom infrastructure.

The problem of reliability: Engineers also want a service that is fault tolerant and that can still deliver the data when their own systems or services go down.

Formsort has built a global, serverless and event-driven service that can collect flow data at whatever level of granularity customers need. We leverage AWS and  built out a micro-service architecture that is fault-tolerant, reliable, and can scale with your traffic, empowering our clients to hone in on what is most important to them in a flow, while decreasing the level of effort for their engineering teams to deliver.

Want to see how a responder’s answers change as they progress step by step? We provide partial submissions to give you those snapshots. Want to see what a particular answer was when the responder fills it out? We provide savepoints. Just interested in seeing the end result when a responder has completed your flow? We give you finalized answers.

Additionally, we provide integrations that allow you to pick the right tool for the job. Partial submissions tend to generate a large amount of traffic, since they are collected on every step. This is perfect for a data warehouse integration like BigQuery. Final submissions tend to happen less frequently, but are more important in terms of how customers act on them, making them perfect for a webhook integration that gives customers maximum control over how they are processed.

It’s also important that if a customer’s services go down, that we have a way to deliver their data after an outage occurs. We have built out an automated recovery system for answer delivery that ensures that even if a customer's integrations are unavailable for a period of time, we can still deliver those answers through retries in the future to prevent data loss.

Check out our integrations to understand backend destinations we support. You can also sign up for a quick call with our team to learn more. 

How Formsort helps you collect data at scale with global infrastructure, flexible integrations, and a fault-tolerant delivery system

A well designed form is an important way to convert site visitors into customers. However, form abandonment is a persistent problem: over 80% of users abandon an online form after starting to fill it out (source). Most websites only store data when a form is submitted, so when forms are abandoned they lose all of the data entered in partial form responses, along with the potential customers.

The good news: if you can access the data from these partial form responses, you can identify and re-engage these leads.  For example, if you collect a user’s email address early on in the flow, you can follow up with them post-drop off with personalized outreach: email reminders, sign-up incentives, etc. Almost 20% of users will return to complete an abandoned form if the company reaches out (source). 

It’s pretty clear that partial form responses contain valuable insights for your team, but not all form builders let you receive this data. Oftentimes form builders just send you responses from users who complete and submit the form. Formsort lets you customize your data capture and returning responder styles, so your team can recover information from leads how you want it, when you want it. 

How to retrieve partial form response data with Formsort

Depending on your specific data collection needs and storage capacity, you can configure the frequency for receiving form data. We offer four options:

Receive data at the end: you will only receive answers for flows that have been completed and submitted.

Receive data at customizable savepoints: you will receive answers after the user completes any step marked as a savepoint, or when the user finalizes the entire flow.

Receive data at every step: you will receive answers at the completion of every step of the flow.

Receive data once someone abandons or completes (debounced): This is the most extensible option and the route we recommend to most teams. For more details, read our article on debounced submissions.

For more details, read our documentation on submission frequency.

Having to restart a long online form is a universal frustration – how do you make it as easy as possible for users to return and hit submit? Let’s say you collected the user’s contact information, sent them a sign-up reminder email, and they returned to your sign-up flow within 3 weeks of their first attempt. With Formsort’s software you can choose where this user will  be placed in the flow. We offer four options, and our team will work with you to determine which option fits your needs:

Start at beginning, discard answers (but keep it tied to the same UUID)

For more details, read our documentation on returning responder behavior. 

Each partial response submission contains all answers collected up to the current step as  entered by the responder. We store these partial submissions as S3 object versions, meaning that all entries in a form field will be saved, each as an object version. The submission system processes notifications and sends them to the appropriate integrations. Everything is 100% server-less, scalable and event driven.

Sign up for a quick call to learn more about our partial response features and best practices for dealing with form abandonment.

How to use Formsort’s partial form response and returning responder features to fight form abandonment and convert visitors into customers

At Formsort, we allow our form builders to write short snippets of code for one of our core distinguishing features:

The only difference between these two types of variables are their data source: calculated variables only use other variables as their input, whereas API variables make an API request (via HTTP) and use its response as the input. Both support no-code or low-code options such as selecting a field from a JSON response but eventually, one needs the real powers (and curses) of a Turing-complete language. We provide a tightly controlled and validated TypeScript environment through the famous Monaco editor that also powers the extremely popular VS Code editor for input. We run this custom code in a sandbox when we need to run it, let it be in Studio (the form designer), or Flow (the actual form itself).

Interestingly, I have worked at many companies which relied on safe code execution on third-party environments. This kind of code will break the host environment it is running on unless there is some sandboxing as the host environment rapidly changes due to product changes. Back in the day, the canonical solution for sandboxing untrusted or unsafe JavaScript code was using iframes. Iframes essentially allow you to have an isolated page inside another web page with a communication port to exchange messages in between. However, they were initially invented for a different purpose: to embed external content on your page safely, such as those YouTube or Twitter embeds. Our method for using them for safe code execution was essentially a hack:

Load some broker code and wait until it loads

Process the messages and respond with the results

This approach was not meant for safe code execution and had many caveats. Iframes may fail to load, and for security reasons it is very hard to detect when they do. Same for messages getting lost or ignored. All those lines, especially dashed ones in the diagram above are potential silent failures. Moreover, they can still block the page as the custom, unsafe code is still executed in the same “thread” (work pipeline) that the main page runs on. They also inherit the security rules from the parent page when used in code execution mode (sourceless iframes), limiting our options for enforcing strict security requirements on our services while still allowing unsafe code to be executed in them.

In the past years, web standards have evolved and now have a dedicated construct for this called Workers. The main benefits are:

They have no visual/DOM component as they are meant for code execution

They execute the code in an isolated environment with no access to the DOM

They have a good API to control and observe for code execution

They are supported across many browsers, including IE 10 and old versions of Safari

Despite these benefits, we initially perceived a major downside to Workers: you have to have a dedicated script to be loaded in them. Turns out, that’s not the case thanks to another new-comer called “blob URLs”. Blob URLs allow one to construct the execution script on the fly. This essentially gives us a safe eval: we can generate a blob URL from a code string and set it as the Worker’s URL that runs it in a completely isolated environment. 

Given these, we decided to overhaul our dynamic variable calculation code to use web workers when they are available. The results were quite encouraging:

A distinct drop of error events from dynamic variables

Detailed error logs when there is an error so we can fix it or ping our customers about them

Here’s some sample code to demonstrate how we use them:

https://gist.github.com/BYK/0de123458375fea91011146de88b442a

Want to learn more? Sign up to chat with our team.

Why Formsort uses WebWorkers for safe code execution

Running untrusted code safely in browsers

Form Health helps individuals reach their health goals through a medical weight loss plan. It pairs individuals with a board-certified doctor and Registered Dietitian to create a personalized plan combining FDA-approved medications, sustainable nutrition, physical activity, and behavior change support.

In order to build these personalized plans, Form Health needs to collect sensitive information from prospects in a trustworthy and HIPAA-compliant way. To do this, in 2021 Form Health’s VP of Engineering started using Formsort to power its “Am I a candidate?” eligibility quiz. 

Over a year later, Form Health runs 10+ critical onboarding and post-onboarding forms on Formsort: onboarding, check-in surveys, contact forms, provider referrals, and more.

By building on Formsort, Form Health has saved thousands of engineering hours, translating into hundreds of thousands of dollars saved. Moreover, their engineering team has empowered their product and marketing teams to build, ship and test their own experiments.

Client challenges: Form changes on their existing stack had long lead times, and more basic form builders lacked the customization and integrations the team needed

When Jeremy Weiskotten joined Form Health as VP of Engineering, the team was using Wordpress for their website and sign-up flow. Every time the team wanted to make a small change to the sign-up flow, they needed to submit a ticket and get it prioritized. This led to long lead times: one month to get prioritization, and another month to make the change.

Jeremy decided to explore other options. Like many engineers, he didn’t want to own this form and didn’t want to be a bottleneck for PMs and marketers’ growth experiments. Jeremy evaluated more basic form builders but struggled to find a tool that was fully customizable, HIPAA-compliant, and had the integrations he needed.

Formsort solutions: Highly customizable forms, flexible deployment, and support for multiple form use cases

The eligibility form is the first point of contact between Form Health and its prospects, so it needs to be aligned to the company’s design system. Formsort’s team was very hands-on in the early stages and built Form Health a proof-of-concept (POC) according to their styling and logic needs. The POC included a fully customizable layout - with backgrounds and button styles tailored to Form Health’s brand - and complex calculations such as state eligibility and BMI. 

Once Jeremy saw the key capabilities, he knew Formsort would help Form Health’s team achieve greater control over UX without depending on in-house engineering.

Form deployment on web and native mobile app

Form Health has a web and mobile app, so it was important to find a form software that worked across different devices. Formsort’s flexible deployment options allowed Form Health to embed their eligibility form inside their webpage. Formsort’s redirect feature allowed Form Health to seamlessly integrate their forms into their native mobile app.

Form Health needed a way to quickly test and iterate on multiple versions of a form to evaluate conversion optimization. All of this was done on Formsort. Once the team designed their first flow variant, they were able to save it as a theme and make iterative changes for future versions. After they developed several variants, they were able to split traffic across them and compare conversion. 

If they needed additional analytics, they set up a native integration with their marketing analytics tool of choice (Optimizely, Amplitude, Google Tag Manager, etc.).

Form Health has built and shipped over 30 form variants on Formsort, and Formsort’s team has supported them at every step. According to Jeremy there’s been “great support from the C-suite all the way down to customer success and support engineering”.

Formsort initially solved a pain point for engineering. Now it helps Form Health’s PMs quickly design and launch growth experiments. In one instance, Formsort helped the Form Health team build a form in a few days, while the internal build would have taken one month. 

Faster testing timelines are due to Formsort’s theme feature, in-house analytics and integrations. “The analytics we get [are] pretty much out of the box through the native integrations. We integrate with tools like Amplitude and our own data warehouse, so we can spot issues in our funnel sooner.”

By removing engineers from the critical path, Jeremy’s team saved countless hours of form building time, translating into hundreds of thousands of dollars saved. Instead of attending to form change tickets, the engineering team has been able to redirect their energy to net new feature development, allowing his team to focus on their unique problems.

Scalably building 10+ forms across the user journey

As Form Health was rapidly expanding, they were running into some issues with their CRM workflow and needed a way to seamlessly collect customers’ PHI data after the onboarding phase. They were previously using several tools to handle these follow-up data collection steps, leading to a disjointed process. 

Formsort’s “theme” feature allowed Form Health to quickly spin up new forms for these use cases in their design system. Form Health has expanded from its initial form use case - eligibility and onboarding - to 10+ flows across the user journey. Form Health now uses Formsort to run its check-in surveys and consolidate a significant amount of its PHI data collection: contact form, cancelation form, and most recently provider referrals. With Formsort, they can seamlessly collect this information in one tool.

VP of Engineering

We use Formsort because we can ship changes so much faster, often without engineering effort. Empowering others to make changes and try new ideas faster makes our team and product better. It's a huge advantage.

Want to see how Formsort can help your business? Sign up here.

Learn how Form Health generated hundreds of thousands of dollars of engineering cost savings by building its most important patient flows on Formsort

How Form Health saved thousands of engineering hours with Formsort

Given the number of form building solutions out there, teams often ask us, “How is Formsort different from a more basic form builder? How do I know if it’s right for me?” 

Formsort helps PMs and marketers build highly complex, customizable funnels that increase conversion by 20-45%. Our studio lets you build secure forms with advanced logic; customize the design to match your brand’s look and feel; and integrate your form with your backend and favorite analytics tools (Segment, Fullstory, Google Analytics, etc.). Formsort’s the closest equivalent to custom engineering on the market - without, of course, the dependencies on internal engineering.

Basic form builders like Typeform and Jotform are great for simple use cases like waitlist sign-ups. They’re a step above Google forms, but you’ll hit a ceiling pretty quickly. Many Typeform and Jotform users graduate to Formsort once they’re ready to take greater control over their form’s style, logic and testing capabilities.

Read on to learn more about each tool and decide which one is right for you.

How does Formsort compare to Typeform and Jotform?

Formsort’s theme editor gives you full control over your flow design and ensures your forms align with your brand’s design system. You can customize your layout, upload custom logos and fonts, and tailor the look of form components like progress bars and buttons. Once you’ve created a form, you can save it as a theme and iterate on it for future form use cases.

Typeform and Jotform have more guardrails in place, with pre-set layout options and fewer customizable components. For example, Typeform only allows one question per page, while Formsort lets you add multiple questions and customize the layout. Jotform does allow multiple questions per page, but it falls short in other areas (e.g. you can’t customize buttons / progress bars). 

See an example of a form built on Formsort by Candid, and how that form would look on Typeform and Jotform.

                                                The same form built on Typeform. Stock images from Typeform. 

                                                                         The same form built on Jotform.

Form validation: Formsort’s address and email question types will auto-confirm whether data inputs are valid. Address questions can leverage either Google or USPS data. Typeform and Jotform offer basic address validation via widgets, but don’t leverage a native integration.

Variable types: Formsort offers many types of variables that Typeform and Jotform do not: API variables, calculated variables, external variables and custom question types. There’s no limit to the types of questions you can ask your customers. 

Logic: Formsort’s advanced logic means you have full control over the customer journey in your flows. You can incorporate conditional formatting that tailors a user’s experience as they progress through the form. Typeform and Jotform are limited to basic “if, then” logic, which limits your control over the customer journey.

Formsort doesn’t store your data for the long term. We have native integrations with BigQuery, Redshift, PostgreSQL and more, so you can securely store customer data in your own database.

Formsort offers multiple ways to pass data into forms. This avoids repetition and personalizes the responder's experience by pre-filling form answers. Jotform only lets you pass data via URL parameters, and Typeform doesn’t let you pass through any data at all. 

Formsort lets you access returning responder data and lets you choose how often you save data throughout the flow (at every step of the flow, upon completion, etc.). Jotform will send you returning responder data, but doesn’t let you choose the save points. Typeform doesn’t let you access returning responder data.

Both Formsort and Jotform offer split testing so you can experiment with multiple versions of a form and see which one results in the best conversation rate. Typeform doesn’t have this capability. 

In case you need more advanced testing capabilities, Formsort has native integrations with several popular CDP and analytics tools like Segment, Google Analytics, Optimizely, Amplitude, etc. 

Formsort offers all of its customers high-touch support. We understand the form building journey can be taxing and requires multiple iterations. Our team is there for you every step of the way. Typeform and Jotform limit support to their enterprise customers.

See table below for a more detailed comparison of each tool.

You’re creating a simple, one-off form like a waitlist sign-up.

You’re just getting started and don’t need branded flows, form validation or advanced logic.

You aren’t investing in performance marketing, and conversion rates aren’t top of mind for your team.

You’re investing in marketing and want to optimize conversion rates. 

Sort of a blog

Introducing Formsort’s UI Library

Creating secure, serverless webhook targets on AWS

Optimizing your sign-up flow: tips from a product manager

How Vial increased clinical trial sign-ups by 30%

Scaling with Formsort

Leveraging partial form responses

Running untrusted code safely in browsers

How Form Health saved thousands of engineering hours with Formsort

Formsort vs. Typeform and Jotform

Best practices for designing a client intake form

Using sidebars in customer onboarding funnels

New: capture partial form fills with debounced submit

Don't build your user journey on survey builders

How Candid increased sales by 30% with better patient onboarding

Low code or custom code? A product manager’s guide to tradeoffs

Form deployment options

Pitfalls of building your own form flows

Passing data into flows

Finding answers inside of Redshift JSON columns