Build a Jamstack subscription form with Netlify forms and Fauna - Part 1
Tags: jamstack, javascript, html, netlify
Published: 2021-05-14 09:42:49

What are a few things you wish for as a software/solution/product developer? In case you are thinking to answer, your list may contain some of these,

- It is fun when we have to do less to achieve more.
- It is more worthy when we have to pay less to build something great.
- It is relaxing when we don't have to worry much about the security, patching, upgrading, and maintaining many libraries.

In a nutshell, we are happy and confident developers when we have support for these three pillars of software development and delivery,

![Jamstack Pillars - Speed Cost Security](https://cdn.hashnode.com/res/hashnode/image/upload/v1620701304536/vYFlcvLTa.png?border=1,CCCCCC&auto=compress)

`Jamstack` is a web development architecture that helps us achieve these with client-side JavaScript, reusable APIs, and prebuilt Markup. In this article, we will see the usage of the Jamstack architecture to build a super-fast, low-cost, easily maintainable `Subscription Form`.

> You will be able to follow this article and build the subscription form without any prior knowledge to Jamstack. Of course, it would help if you had a basic understanding of `HTML` and `JavaScript`. However, if you are looking for an in-depth understanding of Jamstack, this series may help you: [Jamstack for All](https://blog.greenroots.info/series/jamstack-for-all).

To keep it simple and focused, let's split the topic into two articles. It is `part - 1` to get things working with Netlify Forms. In `part - 2`, we will learn about the functions and data store.

> At any point in time, you can access the source code from here: [https://github.com/atapas/jamstack-subscription-form](https://github.com/atapas/jamstack-subscription-form)

Alright, now relax and enjoy the article 🧘‍♀️.

# Subscription Form
Let's take a simple subscription form that asks a user to subscribe to a newsletter by providing the following details,

- Full Name
- E-mail address
- Frequency to get the newsletter(daily, weekly)

Once the user fill-up the form and submits it, we show the user a success page with a note of thanks. We will develop it using basic HTML and CSS.

![form.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620571808013/Y4EShkCdr.png?border=1,CCCCCC&auto=compress)

But that's not all. What about the nuisances of handling the form data? What about an e-mail notification every time someone subscribes? How about storing the data in a store? What are the options of performing some analytics on top of the stored data? 

Right, there are many essential and exciting use-cases involved in the form handling.  We will use the `Netlify Forms` for better form handling. We will also use `Fauna` as a data store to store the information of the subscribers. The Fauna part is optional for a simple form handling like this, but I was greedy to try it out and found it super cool.

# Create a Form using HTML and CSS
Let us now create the subscription form using `HTML` and `CSS`. First, create a project folder with the name of your choice(something like `jamstack-subscription-form`). Then, open a command prompt/terminal window and change the directory to the project folder. 

Initiate a node project using the following command,

```shell
npm init
```
Provide the required details and create the `package.json` file. Here is a sample package.json file, 

```json
{
  "name": "jamstack-subscription-form",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Tapas Adhikary",
  "license": "MIT"
}
```
Create a folder called `src` at the root of the project folder. Now, create two empty files, `index.js` and `index.css` respectively, inside the `src` folder. At this stage, your folder structure should look like this,

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620569860875/C-jT700L4.png?border=1,CCCCCC&auto=compress)

Let's add the HTML part now. Copy the below code to the `index.html` file. It has the code to,
- Link to the `index.css` file.
- HTML structure to have a form with required input fields and a button.
- Other HTML elements to show a header, paragraph to explain the purpose of the page.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Monthly Bytes</title>
</head>
<body>
    <header>
        <h1>Monthly Bytes</h1>
    </header>
    <div class="content">
        <p>Please fill-up the form below to subscribe to our <b>M</b>onthly <b>B</b>ytes newsletter.
            We send you the quality content every month.</p>
        <form action="/success" method="POST" name="subscription">
            <label for="fullName">Full name</label>
            <input 
                type="text" 
                name="fullName" 
                id="fullName" 
                placeholder="We want to know your name" />

            <label for="email">E-mail</label>
            <input 
                type="email" 
                name="email" 
                id="email" 
                placeholder="Tell us your e-mail id" />

            <div>
                <h2>I want to get it</h2>
                <label>
                    <input 
                        type="radio" 
                        name="frequency" 
                        value="daily" checked> Daily
                </label>
                <label>
                    <input 
                        type="radio" 
                        name="frequency" 
                        value="weekly"> Weekly
                </label>
            </div>

            <button type="submit">Subscribe</button>
        </form>
    </div>
</body>
</html>
```
Now we are ready to load and run this HTML file in the browser. If you are using an editor like `VS Code`, you can use the extensions(like Live Server) to run it. Alternatively, use this command from the root of the project folder to run the app and see the index.html rendered in the browser. 

```shell
npx serve src/
```
You can now access the app @[http://localhost:5000](http://localhost:5000).

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620570473567/fzaynIZ1X.png?border=1,CCCCCC&auto=compress)

As you see, the page has all the required elements, but it misses the styles. Let us now add a few styles to make the page look better. Copy the below CSS styles to the `index.css` file.

```css
body {
    margin:0;
    padding:0;
}
header {
    background-color:  #e351ad;
    color: #FFFFFF;
    padding: 0.4rem;
}
.content {
    padding: 7px;
}
h1 {
    margin:0;
}
h2 {
    margin: 2rem 0 0.5rem 0;
}
p {
    padding: 0 0 0 0.4rem;
    font-size: 1.2rem;
}
form {
    display: flex;
    flex-flow: column wrap;
    max-width: 410px;
    margin: 0 auto;
}
label {
    margin-top: 0.6rem;
    margin-bottom: 0.2rem;
    font-size: 1.3rem;
}
input {
    font-size: 1rem;
    padding: 0.5rem;
}
input[type="radio"] {
    width: 17px;
    height: 17px;
}
button {
    margin: 1rem auto;
    padding: 5px;
    border-radius: 4px;
    border-color: #9a00ff;
    background-color: #9a00ff;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 2rem;
    cursor: pointer;
}
```
Now you should see the browser tab refreshes to load the latest app with the style changes. Looks better, huh?

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620571063700/y2qFPlXKA.png?border=1,CCCCCC&auto=compress)

# Create a Success page
Now it's time to create a success page to thank our subscribers with a message. First, create a file called `success.html` inside the `src` folder with the following content.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Success</title>
</head>
<body>
   <div class="success">
       Hey, Thanks for subscribing. You are awesome!
   </div>
</body>
</html>
```
Also, add the following style to the `index.css` page to make the message look better.

```css
.success{
    margin: 2rem auto;
    width: 90%;
    border: 3px solid #e351ad;
    padding: 10px;
    background-color: #e351ad;
    border-radius: 10px;
    color: #FFF;
    font-size: 2.5rem;
}
```
Great! Now try out the subscription form. Once you fill up the details and hit the `Subscribe` button, we will see a success page.

![demo_1.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1620708456549/yi9yokj3e.gif?border=1,CCCCCC&auto=compress)

Please note, we have not done many form validations here. That's purely intentional and out of the scope of the article. However, I encourage you to include it as you wish.

At this stage, please create a repository in your favorite Git provider(like GitHub) and push the source code done so far. Here is mine, [https://github.com/atapas/jamstack-subscription-form](https://github.com/atapas/jamstack-subscription-form)

# Set up Netlify
We have a working subscription form, but we are not doing anything with the form data yet. Next, we will use the `Netlify Form` to perform all the heavy lifting to handle data and perform actions using it. Before that, let us set up `Netlify` to use.

[Netlify](https://www.netlify.com/) is a powerful serverless platform to build, deploy web applications with all the advantages of CI/CD and scalable hosting. It has a Git-based workflow that keeps your code changes integrated continuously with the deployment. In addition, the services like functions, forms are there to use instantly without having them built in-house.

[Create an account](https://app.netlify.com/signup) with Netlify and log in. Now click on the button to create a new site from Git.

![1_netlify.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620572256286/lwNYja6VX.png?border=1,CCCCCC&auto=compress)

Select your Git provider.

![2_netlify.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620572266507/C5m4eiAsD.png?border=1,CCCCCC&auto=compress)

Now, select the project you want to deploy to Netlify. In this case, it is the `jamstack-subscription-form` project.

![3_netlify.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620572276031/MVs7zRX_Z.png?border=1,CCCCCC&auto=compress)

In the setting window, provide the base directory as `src` and click on the `Deploy site` button.  

![4_netlify.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620572289768/PP1BmSMdu.png?border=1,CCCCCC&auto=compress)

It will take a few seconds and make your site available to use. Now you can access the subscription form using a URL provided by Netlify.

## Netlify Forms
Netlify's built-in form handling is enabled for your account by default. However, we need to make a couple of changes in our form for netlify to recognize and parse it correctly.
- Add `data-netlify="true"` or a `netlify` attribute to the `<form>` tag. It will enable form submissions in your Netlify site admin panel.
- You must have a `name` attribute for your form. It determines the form name to show in the netlify interface.

So, let's edit our subscription form to include `data-netlify="true"`. Also, notice the form name is `subscription`.

```html
<form 
   action="/success" 
   method="POST" 
   name="subscription" 
   data-netlify="true">
```
That's it. Now push your changes to the source code repository. You will see the build started in Netlify. Once the build is over and your recent changes are published, please access the app(using the app URL provided by Netlify) in the browser. Now fill in the form details and submit it.

Browse to the `Forms` tab from the Netlify interface.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620723018913/hXg3_aq56.png?border=1,CCCCCC&auto=compress)

You will see an entry with the form name. In our case, it is `subscription` under the `Active forms` section.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620723106093/w7Ro4a30A.png?border=1,CCCCCC&auto=compress)

Click on it to see the form data we have submitted a while back. You can find the form data and a few valuable options like `Download as CSV`, `Mark as spam`.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620724435971/mYXXokxo6.png?border=1,CCCCCC&auto=compress)

## Handling Spam Filters
Netlify uses [Akismet](https://akismet.com/) to provide spam filters for all your form submissions. The integration with Akismet, the industry leader in spam detection, is enabled by default. However, we can add a `honeypot field`, a `reCAPTCHA 2`, or both for extra protection. Let us see an example of adding a honeypot field.

A `honeypot field` is a hidden form field that a bot will fill up along with other fields in the form. As humans can not see this field, we can safely reject the submission that has the honeypot field filled up. We can add the `netlify-honeypot` attribute to our `<form>` with the name of our hidden field. 

Let's add a hidden field anywhere inside the form. Add a `<p>` tag and an `<input>` text field inside it with the name `bot-field`. Also, add a class called `hidden` to the `<p>` element to hide it.

```html
<p class="hidden">
   <label>Don’t fill this out if you’re human: 
        <input name="bot-field" />
   </label>
</p>
```
Next, add `netlify-honeypot="bot-field"` to the form. Now the `<form>` has following attributes,

```html
<form 
    action="/success" 
    method="POST" 
    name="subscription" 
    data-netlify="true" 
    netlify-honeypot="bot-field">
```
Last, add the CSS style for the class `hidden` in the `index.css` file,

```css
.hidden{
    display: none;
}
```
That's it. We have enabled the extra protection with the `honeypot field`.

## Enable Notifications
We can enable notifications such that when a form is submitted, we get an email, a notification in the slack channel, or an external service of our choice. Let's enable the e-mail notification for our subscription form.

Click on the `Settings and usage` button inside the `Forms` tab.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620727271225/1WpNEDV80.png?border=1,CCCCCC&auto=compress)

Go to the `Form notifications` section and click on the `Add notification` menu.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620727382015/Imiu-IpVZ.png?border=1,CCCCCC&auto=compress)

Select the `Email notification` option. Then, please fill-up the details with an e-mail address, form name, and save it.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620727899040/GOYcCZ4X2.png?border=1,CCCCCC&auto=compress)

That's all. Whenever someone fills up the subscription form and submits it, you will receive an email notification on the configured e-mail id. Here is a sample e-mail,

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620727635177/ZYxu32vAT.png?border=1,CCCCCC&auto=compress)

# What's Next?
Thank you for reading so far. I hope you enjoyed following it and made the subscription form working with `Netlify Forms`. In the next part, we will use `Fauna` to store the form data. We will also see the `Netlify Function` play an important role there.

Please feel free to clone/fork the repository and try it out. Then, stay tuned for part 2.

{% github atapas/jamstack-subscription-form %}

Here are a few additional reads you may find helpful,
- [Netlify Forms - Official documentation](https://docs.netlify.com/forms/setup/)
- [Jamstack for All - The series](https://blog.greenroots.info/series/jamstack-for-all)

<hr />
If you enjoyed this article or found it helpful, let's connect. You can find me on [Twitter(@tapasadhikary)](https://twitter.com/tapasadhikary) sharing thoughts, tips, and code practices. 

Do you know, you can support my work by sponsoring me? Please [check this out](https://blog.greenroots.info/sponsor).