Qualascend Engineering

Qualascend Engineering

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

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

Hussain Fakhruddin's photo
Hussain Fakhruddin
·Aug 25, 2019·

2 min read

Subscribe to our newsletter and never miss any upcoming articles

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!

 
Share this