How to Handle Forms on Your Jamstack Website?

We (Jamstack developers) have all been there. You are creating static websites and everything is great. You can already see the instant page loads, performance skyrocketing, and green statistics bars filling up. But then, just when you start your first form, you come to the realization:

Wait. There's no backend. Where do I store my data? Where do I submit the form? What do I do?

OK so, maybe not all of us, but it is certainly true in my case. I learned this rather obvious consequence of using Jamstack just a minute before I tried to create a simple form, with no server-side code you cannot handle the forms the-old-way.

So what is the solution to that problem?

Maybe Jamstack is not so good as we all claim it to be? I mean, if you have to find compromises and create workarounds for each restriction imposed by Jamstack is it even worth it?

My favorite answer - it depends.

Handling Forms

If you are using the Jamstack approach as a black-boxy solution to your performance problems, then you will find problems and you will be looking for workarounds because Jamstack is not a sticker you can slap on your project to improve its speed.

You shouldn't think of it as a tool that turns dynamic back-end functionalities into performance, but as a reevaluation of responsibilities (sound very serious). What should or could be taken care of on the front-end and what should be delegated to some other software? Does your app have to handle everything, including form submissions, data storage, etc.? Or it can be delegated to other solutions (yours or an external one).

Having said that, how should you handle forms on your static website? It depends.

For most use cases, the answer is quite disappointing, handle form submissions somewhere else. There are many services that will take care of your data, store it, show you statistics, integrate with other services, and do much more, depending on your needs. Since there is really a lot of providers that offer similar, or literally the same thing, I divide them into 4 groups:

• Simple solutions
• Advanced solutions
• One-goal solutions
• Custom solutions

Let’s see what separates them.

Simple solutions

Examples: Basin, Form2chat, FieldGoal, etc.

By simple solutions I mean software that offers very basic form-handling functionality e.g. data storage, management, notifications, statistics - basically everything you need to deal with simple forms, but nothing fancy like payments or advanced analytics.

Integration with those could not be easier ie. you just change your form's action attribute to the endpoint provided by the service and you are ready to receive your submissions.

// FieldGoal
<form action="<https://fieldgoal.io/f/tGhtN>" method="POST">
...
</form>

//Basin
<form action="<https://usebasin.com/f/1a2b3c4d5e6f>" method="POST">
...
</form>

// Formcarry
<form action="<https://formcarry.com/s/XXXXXX>" method="POST">
...
</form>

Advantages and disadvantages

• Easy setup, basically everything is handled for you.
• Convenience costs - extra functionalities and requirements are woven into the pricing plans. If you have a specific need or your form will be used a lot, pricing can become an important concern.
• Hard to choose the best solution among many similar services. At first look, many of them offer the same thing.

Advanced solutions

Examples: Wuffo, Kwes, JotForm

The line between simple solutions described above and the services that I throw onto the advanced pile is blurry. Here I've chosen services that offer more than just basic data manipulation. Form builders, templates, payments management, extended integration, data validation, are just some examples of things that could be handled for you, in addition to simple form data storage. You can automate workflows, customize forms behavior, import and export data, handle multiple languages, etc.

When it comes to integration, well, it gets a bit complicated with these. Sometimes you need to wrap your form in additional divs and add specific classes, properties, or names. If you want to use the service's validation you need to learn how rules are constructed and applied. Often you need to append an external script to your website (which may be a valid concern if you are very focused on page load time).

Advantages and disadvantages

• You don't have to implement everything on your own - if you don't want to hassle with payments integration you can configure it in the dashboard. A lot of functionalities that would require very specific knowledge (e.g. security) get handled for you.
• Integration gets more complicated, requires more setup than simple action parameter change.
• More functionalities equal to more costs. The pricing varies, depending on your needs.

One-goal solutions

Examples: Google Forms, SurveyMonkey.

There are a few services that offer something different than others. They still take care of your submissions (so they fall into the category of tools that "handle forms on your static website"), but they focus on specific functionality or role.

For example, Google Forms can be integrated into your website very easily. The "Google look" may be a disadvantage (if you want everything on your website to have a consistent design) or an advantage (if you need a simple and friendly form builder for a non-techy person).

The decision here depends on what you really need - a clean form builder, surveys with advanced conditional logic, or a tool that will be able to handle a quiz (or an exam) and automatically sends emails with results.

Custom solutions

Examples: serverless functions - AWS lambdas, Netlify functions, etc.

If you want full power and customizability over your forms or don't want to hassle with 3rd party solutions you can do it yourself. Instead of submitting data to some external service, you can send it to your own piece of software, and then do whatever needs to be done.

How does it work? In short, you create a piece of code that gets triggered on each form submission. The setup looks different for different solutions - you can create your own REST API that takes care of your submissions or use a service that simplifies that process. Keep in mind that the above solution is just a "proxy", a code fragment that transforms the form's data and sends it somewhere else. You won't magically store it "inside" the function. If you want to do that you still need to create and manage a database yourself (or use an external service to do that for you).

Advantages and disadvantages

• Almost free (it depends on usage).
• Full flexibility.
• Useful when you want to integrate with a bunch of other existing services (email notifications, analytics, other APIs), and don't want to add another service into the stack (or change the current one).
• You need to do almost everything by yourself. That includes security, handling edge-cases, bugs, etc., which may be troublesome. Very often you still need to use external software anyway.
• Requires advanced or specific knowledge regarding the setup and chosen solutions.

So, what should you choose for your website?

It depends? Yeah, pretty much. I can’t make a decision for you because I don't know what you need. It depends on the form's size, how many of them are there, specific needs you might have, requirements, constraints, extra integrations, etc. The list goes on.

In general, for simple forms choose simple solutions. Don't use (and overpay) for advanced services if you are using it only as data storage, for forms that get submitted every now and then. Don't implement everything on your own (or use multiple external services that each does its own thing) if there is one that already does exactly what you need. Don't look for another service if you can do it with tools you already use (for example, if you use Netlify as CI/CD there is a good reason to use Netlify forms and/or Netlify functions to handle your submissions if that is enough of course).

To help you make a decision easier I’ve made a summary of the most popular services, with their pricing and the thing that makes the service different from other solutions. There is no reason to list all features for every service, because almost all of them, even the simplest ones, have email notifications, spam protection, data export and management, integration with Zapier, etc.

How do we do it?

It won't come as a surprise if I say that at Bejamas we try to avoid unnecessary integrations with external services unless there are specific requirements or constraints. For example, very often, we use Netlify as CI/CD, the first thing I suggest is its solution - Netlify forms. It requires almost no extra configuration and works instantly.

However, most projects aren't so simple and Netlify-forms is not enough. In that case, most of the time I use Netlify functions as a "container" for AWS's serverless Lambda functions that work out of the box. The advantage of this approach is that everything is in one place. No additional external software (and payments!), configuration, remembering passwords, dealing with errors, etc.

What’s the setup for projects where we don’t use Netlify? Well, the answer is almost the same. If chosen CI/CD does not have native solutions for form handling, we create our own AWS Lambdas. Of course, everything depends on project needs.

Ok, we've talked about form submission, but what about everything else that happens before? How to handle form's state, validate fields, what to do with sensitive data, etc.? Again, it depends, but it is much harder to give advice here.

The world of Jamstack is so complex there is no simple answer to that. Besides, some of the solutions described above can handle forms behavior for you, along with field validation, conditional logic, and so on. In short, there is no single library, service, or software that could be a picklock for all use cases (if it existed we would have no job!).

Final Word

I know the answer is not satisfying, but that's our reality (yeah, sounds depressing). That's why I say it depends when it comes to the decision on software choice (and not only for form-handling TBH). Among so many new services, libraries, and plugins it is hard to choose something without knowing the requirements first.

The static label that goes with the Jamstack web development approach makes a lot of people wonder how do you handle dynamic elements (forms, search, comments, etc.). The level of surprise and awe you get from people when they understand how things work and the benefits for their businesses is just as fun as finding the right solutions for them.

There is no one correct answer on how to handle forms on your static website.

We can help you with finding the best solution for your business. Actually, we can help you with much more than form handling. Let’s talk.

Further Reading

In case you are interested in Jamstack and forms more check out the following links. Helped me a lot.5 Ways to Handle Forms on Your Static Site - https://forestry.io/blog/5-ways-to-handle-forms-on-your-static-site/Form Handling with the Jamstack and Netlify - https://www.netlify.com/blog/2017/09/19/form-handling-with-the-Jamstack-and-netlify/https://www.netlify.com/blog/2017/09/19/form-handling-with-the-Jamstack-and-netlify/Approaches to add dynamic content to statically generated sites (JAMStack) - https://hasura.io/blog/approaches-to-add-dynamic-content-statically-generated-sites-jamstack/