Adding Forms To Static Websites Using FabForm

Adding Forms To Static Websites Using FabForm

How to use FabForm to create static website forms

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.

Prerequisites

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

Demo

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 fabform.io to create an account and follow the steps below to make the form collect data.

Using FabForm

After creating a free account, head to app.fabform.io/forms to create an endpoint for your form.

Creating an endpoint

Once the endpoint is created, you will be redirected to app.fabform.io/forms, 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 fabform@fabform.iam.gserviceaccount.com 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:

<form
  id='contactForm'
  action='https://fabform.io/f/{form_id}'
  method='post'
>
</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

Conclusion

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