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:
| import Head from 'next/head' | |
| export default function Home() { | |
| return ( | |
| <> | |
| <Head> | |
| <title>Static Forms</title> | |
| <meta name='description' content='Forms for Static Websites' /> | |
| <link rel='icon' href='/favicon.ico' /> | |
| </Head> | |
| <main className='container'> | |
| <h1 className='fw-light text-center text-lg-start mt-4 mb-0'> | |
| Best Programming Tools | |
| </h1> | |
| <hr className='mt-2 mb-5' /> | |
| {/* form */} | |
| <div className='container px-5 my-5'> | |
| <div className='row justify-content-center'> | |
| <div className='col-lg-8'> | |
| <div className='card border-0 rounded-3 shadow-lg'> | |
| <div className='card-body p-4'> | |
| <div className='text-center'> | |
| <div className='h1 fw-light'>Form</div> | |
| <p className='mb-4 text-muted'> | |
| This form is handled by{' '} | |
| <a href='http://fabform.io'>FabForm</a> | |
| </p> | |
| </div> | |
| <form | |
| id='contactForm' | |
| > | |
| {/* Name Input */} | |
| <div className='form-floating mb-3'> | |
| <input | |
| className='form-control' | |
| id='name' | |
| name='name' | |
| type='text' | |
| placeholder='Name' | |
| /> | |
| <label htmlFor='name'>Name</label> | |
| </div> | |
| {/* best programming Language */} | |
| <div className='form-floating mb-3'> | |
| <input | |
| className='form-control' | |
| id='bestProgrammingLanguage' | |
| name='bestProgrammingLanguage' | |
| type='text' | |
| placeholder='Best Programming Language' | |
| /> | |
| <label htmlFor='bestProgrammingLanguage'> | |
| Best Programming Language | |
| </label> | |
| </div> | |
| {/* best Framework */} | |
| <div className='form-floating mb-3'> | |
| <input | |
| className='form-control' | |
| id='bestFramework' | |
| name='bestFramework' | |
| type='text' | |
| placeholder='Best Framework' | |
| /> | |
| <label htmlFor='bestFramework'>Best Framework</label> | |
| </div> | |
| {/* Submit button */} | |
| <div className='d-grid'> | |
| <button | |
| className='btn btn-primary btn-lg' | |
| id='submitButton' | |
| type='submit' | |
| > | |
| Submit | |
| </button> | |
| </div> | |
| </form> | |
| {/* End of contact form */} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </> | |
| ) | |
| } |
Run the local server to view the changes made:
npm run dev
Open your browser and go to http://localhost:3000/:
After setting up the dummy form, head over to https://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 https://app.fabform.io/forms to create an endpoint for your form.
Once the endpoint is created, you will be redirected to https://app.fabform.io/forms, where all your endpoints are listed:
To edit your endpoint, click on it, and click on the settings icon on the right side of the page:
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.comas an editor to the google sheet document linked.
Click save after adding all the details needed.
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:
| ;<form id='contactForm' action='https://fabform.io/f/G1fiFX-' method='post'> | |
| {/* Name Input */} | |
| <div className='form-floating mb-3'> | |
| <input | |
| className='form-control' | |
| id='name' | |
| name='name' | |
| type='text' | |
| placeholder='Name' | |
| /> | |
| <label htmlFor='name'>Name</label> | |
| </div> | |
| {/* best programming Language */} | |
| <div className='form-floating mb-3'> | |
| <input | |
| className='form-control' | |
| id='bestProgrammingLanguage' | |
| name='bestProgrammingLanguage' | |
| type='text' | |
| placeholder='Best Programming Language' | |
| /> | |
| <label htmlFor='bestProgrammingLanguage'>Best Programming Language</label> | |
| </div> | |
| {/* best Framework */} | |
| <div className='form-floating mb-3'> | |
| <input | |
| className='form-control' | |
| id='bestFramework' | |
| name='bestFramework' | |
| type='text' | |
| placeholder='Best Framework' | |
| /> | |
| <label htmlFor='bestFramework'>Best Framework</label> | |
| </div> | |
| {/* Submit button */} | |
| <div className='d-grid'> | |
| <button className='btn btn-primary btn-lg' id='submitButton' type='submit'> | |
| Submit | |
| </button> | |
| </div> | |
| </form> |
Run the development server to test the form now. After submitting, check the Google Sheet document for any changes:
The response updates on your Google Sheet as shown:
Conclusion
The post demonstrates how to add functionality to a form on a static web application with fewer configurations using FabForm.
Top comments (0)