Building Forms with Formstack and React

by Amanda Huang, Software Engineer @ Resilia

Building out a simple form to collect customer information seems straightforward enough to implement. But throw in dozens of questions, conditional logic, and wanting to give business stakeholders the ability to edit the form with ease and suddenly you can feel the scope creep intensifying.

Resilia engineering faced this challenge when building out our questionnaire feature which is designed to help organizations form their nonprofit and apply for tax exemption. We knew we wanted the flexibility to have our own custom user interface and experience, but wanted to lean on a third party tool to create the forms and store the submissions. Using React and Formstack we were able to build out a feature which has the look and feel of the rest of our app without storing any data about forms, logic, or submissions in our backend. We simply need to store a reference to the customer’s Formstack submission ID, allowing us to take advantage of Formstack’s robust approach to data security and privacy.

Building Out the Form in Formstack

We built out forms in Formstack in a specific structure which provided standardization, but also built in some flexibility to include additional configuration that can be easily added to. Each question in Formstack has three elements:

1) Section (to group together fields)

2) One or more input fields (e.g. text, dropdown, radio). These are the actual questions we want the customer to respond to.

3) Embed Code field (JSON which stores additional data or configuration we need to correctly render questions)

Referencing the Form

We chose to store the Formstack form ID as an environment variable so we can have different versions of the form for development and production. This provides for a better developer experience and less chance of breaking production, but we also needed to create a process to make sure that any changes to the form during development are also applied to the production version of the form during deployment.

Integrating with Formstack

We used the following endpoints to interact with Formstack:

• GET form `/form/:id`: Getting the form questions
• POST submission `/form/:id/submission` Creating a new submission
• GET submission `/submission/:id` Getting an existing submission
• PUT submission `/submission/:id` Updating an existing submission

There’s maybe nothing more frustrating than entering field after field into an online form, just to have them get erased without warning and set you back to square one. Avoiding that experience was table stakes in ensuring a quick and painless onboarding for nonprofits.

We decided to post back to Formstack after each question to persist customer responses, minimizing the chance of lost responses and creating an experience that allows customers to easily jump between questions and even complete the form in multiple sessions.

Data Security and Formatting

Formstack has the added benefit of offering data encryption for their forms which should be used if you’re collecting any sensitive information. It can be easily set up in Formstack and you’ll just need to pass your `oauth_token` when you make Formstack calls.

Since Formstack’s get form response object doesn’t nest input fields within a section, we found it helpful to create a function to restructure the data as an array of sections, where each section has a subfields array of the input fields and a metadata field to store the JSON from the Embed Code field.

React Component Structure

With the data now in a more usable format, we set up our React component structure like so:

These components can now be reused throughout our app whenever we want to set up a new feature that requires collecting customer inputs.

The end result with our styling applied:

Our nonprofit customers now have access to this feature designed to give them a seamless experience that is easy to navigate and provides context and tips at each step to help them successfully form their nonprofit. This implementation also provides our Customer Success team the flexibility to alter the questionnaire as filing requirements change without Engineering support, saving time for both teams.