Creating a Contact Form Without a Server

Harry 4 min read
Creating a contact form without a server image
Photo by Miles Burke / Unsplash
Table of Contents

Starting with the problem.

Nothing is more infuriating than having to spin up a server and write up some backend code for the simple sake of handling a contact form.

Take this form for example. All we're asking for is a name, email, and the user's query. It can easily be hosted on a static hosting provider for absolutely nothing - the problem is, how do you actually save form submissions?

<form method="POST">
	<input name='name' type='text'>
	<input name='email' type='email'>
	<input name='query' type='text'>

Those who know a bit about backend coding will have no problem spinning up a Digital Ocean droplet or an AWS Lambda script. However, now you're investing more time into this solution than you really need to.

It's a nuisance I have faced several times and so I built to handle it for me. This article will show you how to set up your contact forms using Formie as your form's backend.

Formie - Your Modern Form Companion
Host your own forms without any servers, and let Formie handle your form backend with validation and email forwarding.

At a glance, Formie offers the following features:

  • Form validation, requiring users to submit relevant data.
  • Process and store uploaded images and files.
  • Get notified by email every time a new form submission is received.
  • Hosted form solution
  • Integrations and webhooks, and more.

Setting up the "backend"

The first thing to do is go ahead and get set up with a free Formie account. You can register a new account using an email address, or quickly log in using Github.

Once on your dashboard, go ahead and click "Create new form".

Formie: Creating a new form

You will be asked to give your form a name. Optionally, you can pick a Form Template to get going quicker. This will preconfigure a few things to get you going quicker.

Formie: Selecting a form template

Right away you should be greeted by your form's dashboard with a single submission inside to show you how things look.

Formie: Showing new form submissions

As I have created my form using the contact form template. Clicking on the "Setup Instructions" will give me the minimum HTML I need to plop on my frontend website for things to start working.

Formie: Showing setup instructions

To explain the code. It's just your bog standard HTML form. There's a field for an email address, and a textarea for somebody to enter their query. There's also a hidden input field containing a success page URL - Formie will pick this up and redirect the user to this page after successfully handling the submission. Though a redirect is optional if you choose to handle this yourself through JavaScript.

The real "magic" happens on the action attribute of the form. This instructs the form to submit its data to Formie.

Nevertheless, copy and paste this code into your webpage and you're all set up for handling form submissions. 🎉

The Form Builder

The form builder tab is where you can define your form's validation rules.

Formie: Showing the form builder

Since your rendered HTML form is open to tampering, anybody can freely work around your frontend's validation and start spamming you with nonsense. This is why it's always a good idea to validate server side.

For every field in your form, it must be defined here otherwise it will be ignored when stored.

Formie is about making life easy, so as you flesh out your fields. The "Setup Instructions" will output the HTML as defined by your rules. All you need to do is copy and paste, and tweak it to your liking.


We quickly covered how to create a contact form without a server by using Formie which takes a lot of the hassle out of managing your own backend.

For those who are seeking to get more out of Formie, I'm running a special promotion for those who read my blog. Use the code HARRKBLOG25 when subscribing to a paid plan to receive 25% off your first subscription.

This can be taken further by adding file/image uploads to the form, CAPTCHA, or even integrations. There's more planned down the line, too.

If you have trouble or something isn't quite hitting your requirements. Feel free to reach out at any time.


Harrk Blog

Programming nonsense, tutorials, and random musings about games and technology.

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to Harrk Blog.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.