Build a Jamstack subscription form with Netlify forms and Fauna - Part 2

Hey there 👋! Welcome to part-2 of the tutorial. I hope you enjoyed part-1 in building a Jamstack form using Netlify Forms. This article will learn about storing the form data into the Fauna data store.

Here is the link to part-1 of the tutorial: Build a Jamstack subscription form with Netlify forms and Fauna - Part 1

Recap

So far, we have

• Created a Subscription page using HTML and CSS. The highlight of the page was a form with a few input fields and a button.
• Enabled the form to get parsed by the Netlify Forms for tracking and storing any submissions.
• Understood the in-built Spam filter feature of Netlify Forms. We have also added extra protection by adding a honey-pot field.
• Finally, enabled notifications such that we get e-mails when some users submit the form.

Exciting! Let us take it forward to integrate the Fauna to store the form data. Like before, you can refer to the source code from this repository,

atapas / jamstack-subscription-form

Let's build a subscription form with the Jamstack concept using Netlify Forms, Functions, and Fauna data-store.

jamstack-subscription-form

Let's build a subscription form using the Jamstack concept. Netlify comes with the form handling capability that allows you to achieve the power of Jamstack for form handling.

With this project, we will build a simple(yet powerful) Subscription form and submit it using the Netlify forms capability. We will use the Netlify Functions to handle the form data and store it in a serverless data store called Fauna.

Want to Motivate?

Have you found this project helpful? You can give a star(⭐) to let me know, you care.

Many Thanks to all the Stargazers who has supported this project with stars(⭐)

How to run this project?

• Clone this repository and change the directory to jamstack-subscription-form.
• Install netlify-cli. Use this link to create an account with Netlify and install the CLI tool.
• Create an account with Fauna. Create a database. Upload the schema and get the…

View on GitHub

Set up the Fauna Data Store

Fauna is a secured transactional database available to access using the cloud API and GraphQL. It is flexible and straightforward to get started with an easy learning curve. To get started, we have first to create a database. After that, we need to supply a schema file to create the collection and documents for data.

Create a Schema File

Create a folder with the name db at the root of the project folder. Create a schema file called schema.gql inside the db folder with the following content,

type Entry {
  fullName: String!
  email: String!
  frequency: String!
}

type Query {
  allEntries: [Entry!]!
}

It is a GraphQL file. We have defined a type, Entry, to map each of the form fields to the document properties in the database. We also define a query to return the list of entries that collect multiple form submissions.

Set up Database

If you don't have an account with Fauna, you can register from here. Login to the Fauna dashboard and create a new database. Provide a database name and save.

Click on the Security option at the left panel of your database configuration. Next, create the server key to access the database.

Please select the Role as Server. In addition, you can optionally provide a key name.

Please take a backup of the generated key into a file. We will use it soon.

Import the Schema

Let us now import the schema to create collections and documents in the database. First, click on the GraphQL option from the left menu of the database configuration page. It will open up a playground asking you to import schema. Next, click on the IMPORT SCHEMA button and upload the schema.gql file.

You will see a GraphQL code editor opens up to try out queries.

Netlify Function to Store the Form Data

Now, we will write the code to store the subscription form data in the database. Create a file called .env at the root of the project folder with the following entry,

FAUNA_API_SECRET=<FAUNA_SERVER_ACCESS_KEY>

Please replace the <FAUNA_SERVER_ACCESS_KEY> with the key you have created while setting up the database.

You must mention the .env file entry in your project's .gitignore file. It will make sure there is no accidental commit and push of the .env file to the git repository.

Netlify Functions

Netlify Functions are serverless lambda functions managed by Netlify. We can trigger a Netlify Function when certain Netlify events occur. For example, when a form submission is verified, the event submission-created will occur, triggering a Netlify Function.

Create a folder functions at the root of the project folder. We will place all the Netlify function related code inside this folder. At this point, the project directory structure may look like this,

Install node-fetch

Now, let's create a function connected to the Fauna database and interact with it using the GraphQL queries. To do that, we need to make XMLHTTPRequest(Ajax Calls) from the function. We will use a light-weight library called, node-fetch for this.

Using the command prompt, change the directory to the functions directory. Now use the following command to create the package.json file.

npm init -y

Now install node-fetch using this command,

yarn add node-fetch # or npm install node-fetch

Create the Function

Create a file named, submission-created.js under the functions directory with the following content,

const fetch = require("node-fetch");

exports.handler = async (event) => {
  const body = JSON.parse(event.body);
  const { email, fullName, frequency } = body.payload.data;

  const response = await fetch("https://graphql.fauna.com/graphql", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.FAUNA_API_SECRET}`,
    },
    body: JSON.stringify({
      query: `
        mutation($fullName: String!, $email: String!, $frequency: String!) {
            createEntry(data: { fullName: $fullName, email: $email, frequency: $frequency } {
            _id
            fullName
            email
            frequency
          }
        }      
      `,
      variables: {
        fullName,
        frequency,
        email,
      },
    }),
  })
    .then((res) => res.json())
    .catch((err) => console.error(err));

  return {
    statusCode: 302,
    headers: {
      Location: "success.html",
      "Cache-Control": "no-cache",
    },
    body: JSON.stringify({}),
  };
};

When a user submits the subscription form, Netlify will perform a form verification for spam. Once verified, it will trigger the submission-created event. Then, it will call the function automatically.

We get the form data using the body payload. Next, we make a POST call using the fetch method from node-fetch. Please notice, we use the GraphQL endpoint of Fauna and pass the required details in the query. Also, it is of type mutation and creates an Entry in the database.

Run the Function Locally

Netlify needs a particular build configuration file called netlify.toml to inform the location of the Netlify functions. Create the netlify.toml file at the root of the project folder with the following content.

[build]
  functions = "functions"

We can run the function locally before deploying to Netlify. To do that, please install the Netlify Command Line Interface(CLI) tool globally.

npm install netlify-cli -g

After installing, run the following command from the root of the project folder,

netlify dev

Now, you can access the application @localhost:8888. Fill up the form and submit it. You should see the form data entry into the Fauna database.

Rest of the Configurations & Deploy

Let us now deploy the changes to Netlify. But, first, we need a do a few simple configuration changes to make this deployment work.

• Add the following scripts section in the main package.json file(the one at the root level of the project folder)

  "scripts": {
    "functions": "cd functions && npm i && cd .."
  }

• Modify the netlify.toml file to include two more build configurations.

 [build]
  command = "npm run functions"
  publish = "src"
  functions = "functions"

Here we additionally specify the command to set up the function, set up a base publish directory.

• Now, push all the code changes to your GitHub repository.
• Browse to the Netlify Interface for the project we have created in part-1 of the tutorial.
• Browse to the Build & deploy option and open up the Environment section.

• Add the Fauna Secret Key as the environment variable.

• Trigger a Build.

That's it. We have deployed the form successfully with the Netlify function. Here is a quick demo of how the application works end-to-end.

In Summary

To Summarize,

• Created a form using HTML, CSS, and Netlify Forms.
• Enabled Spam protection using the honey-pot field.
• Enabled e-mail notifications.
• Set up a database with Fauna by uploading a GraphQL schema.
• We have utilized the Netlify Function to write the submitted and verified data to the database.
• Netlify Form submission triggers an event that enables us to trigger the function in turn.
• Everything works serverless, including the function.

---

I hope you found the article insightful. If you enjoyed this article or found it helpful, let's connect. You can find me on Twitter(@tapasadhikary) sharing thoughts, tips, and code practices.

Do you know, you can support my work by sponsoring me? Please check this out.

Comments

[irishgeoff9]

I would recommend you take a look at this jamstack forms solution.