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.
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!