How to get User leads in Google Sheet using NoCodeAPI and Divjoy

#react #divjoy #frontend #contact

Disclaimer: This blog requires premium access to divjoy.com. You can buy your slot at a discounted price on https://divjoy.com/?promo=nocodeapi.

Let’s start building our app.

Requirements

NoCodeAPI Google Sheet or Airtable Endpoint
Divjoy Access

Step 1 : Link your data

Go to marketplace of nocodeapi.
Choose either airtable or google sheet to link your app data.

Setup Airtable : Go to Google Sheet API to link your sheet data with nocodeapi's endpoint

Setup Google Sheet : Go to Airtable API to link your airtable data with nocodeapi's endpoint

Step 2 : Select Divjoy layout

Go to the https://divjoy.com
Scroll down to Choose your stack
Go to More Options and under Contact Form chose Google Sheets

Go to Layouts and chose the first layout

Step 3 : Export your Code to CodeSandBox

After you chose your layout you will reach the Build your components page.
On the right top, click on Export Code button

You will need to buy divjoy's life time access bucket to extract your code. Use nocodeapi as promotion code to find discounted price. Or click here.
Make the payment to proceed further in tutorial.

Click on Export to </> CodeSandbox button
Divjoy will create your code and you can export it to CodeSandbox now.
Click on Open my CodeSandbox button to open your code in CodeSandbox.

Step 4 : Edit `.env` in CodeSandbox

You will see CodeSandBox playground loaded with divjoy project.

In the right side of your codesandbox you can see the browser in action. Go to the bottom of this browser and select Contact.

You can see the contact form. We are going to make two changes to .env file to make contact form functional.
On the left panel, find .env file and edit it.
add REACT_APP_SHEETS_ENDPOINT with your NoCodeAPI Google Sheet endpoint,

REACT_APP_SHEETS_TAB_ID with the Sheet Tab name,

& click Save.

Step 5 : Test your Contact Form

Fill in the details of your contact form and click submit
You should find a success message on top of your form. And the credentials should be uploading in your connected google sheet.

If it all worked — you have your Google Sheet integration functioning!

How ?

Divjoy has created a simple POST endpoint inside Utils folder > Contact.js file. Once you click the form submit button, a POST request is sent to NoCodeAPI’s URL containing array of submitted data. As soon as NoCodeAPI stores your message in Google Sheet it responds with Ok message. Divjoy reads the response and give you a Message submitted successfully message.

Video Tutorial

Watch this tutorial in action here. 👇

Some important links:

Find us on telegram

If you are facing any issues, contact us here on telegram. We will get you boarded.

Thank you for reading. Happy Coding!✌️

DEV Community