Adding Forms To Static Websites Using FabForm

Adding Forms To Static Websites Using FabForm

How to use FabForm to create static website forms

Chris Achinga
·Aug 4, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Prerequisites
  • Demo
  • Creating a Static site
  • Using FabForm
  • Conclusion

Static websites are known for a minimum to zero functionalities. Initially, one has to write a lot of code to be able to collect data from users through forms. This post will guide you on how to add forms to a static website without creating a server-side application for your website.

You will be using FabForm. FabForm allows you to add form functionalities to a static website with a simple setup procedure.


  • FabForm Account - Create a free account here
  • A static Webpage


You can find the live demo on Codesandbox:

Source code available on GitHub

Creating a Static site

You can skip this step if you already have a static site. You will set up a simple NextJS site that asks for the user's best programming language and JavaScript framework.

To create a NextJS project, run the following command on your terminal:

npm create-next-app best-language

You will style the page using Bootstrap. Install it by running:

npm install bootstrap@5.2.0

Once the installation is complete, open the index.js file and paste the code below:

Run the local server to view the changes made:

npm run dev

Open your browser and go to http://localhost:3000/:

simple form

After setting up the dummy form, head over to to create an account and follow the steps below to make the form collect data.

Using FabForm

After creating a free account, head to to create an endpoint for your form.

Creating an endpoint

Once the endpoint is created, you will be redirected to, where all your endpoints are listed:

FabForm Endpoints

To edit your endpoint, click on it, and click on the settings icon on the right side of the page:

endpoint settings

Enter a targeted email where you will be notified for every response. You can add the sheet ID on the endpoint settings if you need to have the responses in a Google Sheet.

Note: Add as an editor to the google sheet document linked.

Click save after adding all the details needed.

Screenshot from 2022-08-05 00-49-23.png

The last step is to add an action attribute to your form:


Replace the {form_id} with your endpoint ID.

For the demo, I will showcase and use my endpoint id in the form:

Run the development server to test the form now. After submitting, check the Google Sheet document for any changes:

Screenshot from 2022-08-05 01-23-15.png

The response updates on your Google Sheet as shown:

Screenshot from 2022-08-05 01-24-03.png


The post demonstrates how to add functionality to a form on a static web application with fewer configurations using FabForm.

Share this