This article for React Developers, or who learning React and wants to make NoCode react pages with divjoy online code generator.

With NoCodeAPI Google Sheet & Airtable integration you can collect form data without any backend logic.

Pre-requirements

  • NoCodeAPI Google Sheet or Airtable Endpoint
  • Divjoy Access (paid tool)

Setup Endpoints

First of all setup your Google Sheet API endpoint or Airtable to use with divjoy.

To Setup Airtable: https://nocodeapi.com/airtable-api
To Setup Google Sheet: https://nocodeapi.com/google-sheets-api

Use Divjoy

Now go to the https://divjoy.com/ and folllow these steps.

Scroll down -> Choose your stack -> Expand More Options -> In Contact Form -> Select Google Sheet or Airtable -> Scroll down -> Choose your template.

You will see the playground to build & Customize the pages.

Divjoy Build

If you click on Contact page then you will see a form with Name, Email, & Message fields. We will use Google Sheet API endpoint to collect data and push to sheet.

Divjoy Contact Form

Test Locally

Now download the code files & unzip folder to set .env variables. To test locally, all the instruction is given in the README file. Just go throught that.

Test with CodesandBox

Now click on Export Code to codesandbox to test and click on Open my CodesandBox.

You will see this this codesandbox playground with divjoy project.

Divjoy codesandbox

Steps:

  • Go to .env file and add REACT_APP_SHEETS_ENDPOINT with your NoCodeAPI Google Sheet endpoint, REACT_APP_SHEETS_TAB_ID with the Sheet Tab name, & Save.
  • Go to Contact page and test the form.

More Links:

This is all.

Watch in Action.