Add a static form to your NextJs app without serverside code.

NextJS is an amazing framework created by Vercel for developing search engine friendly static and dynamic web applications using ReactJS.

Source on Github.

In this article, we’ll cover how to add a static form to your site which on submit will send an email to your address.

To add a static form we’ll use a free service called StaticForms which allows you to easily integrate your form with your email.

Following steps are required to create a static form

Create an Access Key on StaticForms
Create a NextJS app using npx
Add Bulma library for styling
Modify the index.js to add the form
Integrate the form to submit to staticforms.xyz action
Deploy to Vercel

Step 1: Create Access Key on StaticForms

Visit https://www.staticforms.xyz
Enter your email address under create access key input field and submit by clicking on the button “Create Access Key”
You will receive an email with an access key which we’ll use in our form later.

Step 2: Create a NextJS app

npx create-next-app staticforms

Step 3: Add Bulma CSS library

cd into staticforms directory cd staticform and add Bulma library for styling

npm i bulma

Install NextJS CSS plugin to use CSS library

npm i @zeit/next-css

Create in your root directory next.config.js with the following content:

// next.config.js   
const withCSS = require('@zeit/next-css')  

module.exports = withCSS({  
  cssLoaderOptions: {  
    url: false  
  }  
})

Step 5: Create the form

Modify index.js./pages/index.js under pages directory with following code.

index.js

Don’t forget to replace the access key with your own access key.

The code above uses useState react hook to manage the state. onChange event on each field keeps the contact object in the state updated. onSubmit event is used to handle the submission and the form data is posted to actionhttps://api.staticforms.xyz/submit using NodeJS fetch API.

Step 4: Deploy to Vercel

Vercel provides a super simple platform to deploy serverless applications. And it's out of the box support for NextJs makes it even easier.

First install the now platform globally

npm i -g now

And then simply type now to deploy your application to the platform.

now

Once the deployment is complete you should receive url to test your application online, something similar to [https://staticforms.hussainanjar.now.sh](https://staticforms.hussainanjar.now.sh)

You can run the now platform locally using the following command.

now dev

You can check out the repo here https://github.com/qualascend/staticforms-nextjs-zeit

That's it!

Add a static form to your NextJs app without serverside code.

Comments

More from this blog

Google Analytics 4 Vs Universal Analytics: What's The Difference

Step 1: Create Access Key on StaticForms

Step 2: Create a NextJS app

Step 3: Add Bulma CSS library

Step 5: Create the form

Step 4: Deploy to Vercel

Command Palette

Comments

More from this blog

Step 1: Create Access Key on StaticForms

Step 2: Create a NextJS app

Step 3: Add Bulma CSS library

Step 5: Create the form

Step 4: Deploy to Vercel