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

[NextJS](https://nextjs.org/) is an amazing framework created by [Vercel](https://vercel.com/) for developing search engine friendly static and dynamic web applications using ReactJS.

Source on [Github](https://github.com/qualascend/staticforms-nextjs-zeit).

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](https://www.staticforms.xyz/) 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](https://www.staticforms.xyz)
*   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](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 action`https://api.staticforms.xyz/submit` using NodeJS `fetch` API.

#### Step 4: Deploy to Vercel

[Vercel](https://vercel.com/) 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](https://github.com/qualascend/staticforms-nextjs-zeit)

That's it!