How to get User leads in Google Sheet using NoCodeAPI and Divjoy
Tags: react, divjoy, frontend, contact
Published: 2021-03-17 19:25:40

Disclaimer: This blog requires premium access to divjoy.com. You can buy your slot at a discounted price on [https://divjoy.com/?promo=nocodeapi](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](https://nocodeapi.com/marketplace).
- Choose either airtable or google sheet to link your app data.

![image](https://nocodeapi.com/static/d62654eb6c837e3ad4ee04a05c9f88d2/321ea/marketplace.png)

- Setup Airtable : Go to [Google Sheet API](https://nocodeapi.com/google-sheets-ap) to link your sheet data with nocodeapi's endpoint

**OR**

- Setup Google Sheet : Go to [Airtable API](https://nocodeapi.com/airtable-ap) to link your airtable data with nocodeapi's endpoint

### Step 2 : Select Divjoy layout

- Go to the [https://divjoy.com](https://divjoy.com)
- Scroll down to `Choose your stack`
- Go to `More Options` and under Contact Form chose `Google Sheets`

![divjoyChoseStack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09xyn1h6rrfdvloi3kri.png)

- Go to `Layouts` and chose the first layout

![divjoyFirstLayout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1q0h2kwr1e8lvudpfqmz.png)
￼

### 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

![divjoyBuildPage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thoksbrjztoave748qar.png)

- 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](https://divjoy.com/?promo=nocodeapi).
- Make the payment to proceed further in tutorial.

![Screenshot 2021-03-18 at 12.17.09 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27oqd8xcqjedr1metj9p.png) 

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

![divjoyExportCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ccu1q820b24kxleyu7cb.png)

### Step 4 : Edit `.env` in CodeSandbox

- You will see CodeSandBox playground loaded with divjoy project.

![projectCodeSandbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwox9fqud1shqvwuabhm.png)

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

![projectContact](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8847rg0z7yypl1iklzx.png)

- 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, 

![codesandbox_nocodeapi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmhmkwc14dietiktgyq7.png)￼

- `REACT_APP_SHEETS_TAB_ID` with the Sheet Tab name, 

![codesandbox_sheetTab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fbrv9ommdyibpqnbjf3.png)￼

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

![contactFormSubmit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blsk8iycwoxhcb2nh6jp.png)

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

![divjoy_how](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23a8ix5gclrntjpk2gvm.png)￼

### Video Tutorial

Watch this tutorial in action here. 👇

{% youtube EQbacfIN3Is %}

### Some important links:

- <a href="https://divjoy.com/?promo=nocodeapi" target="_blank">Divjoy discount Offer: https://divjoy.com/?promo=nocodeapi</a>
- <a href="https://www.notion.so/Divjoy-Google-Sheets-Guide-6fae5b1aa26c4925b352e45a55729334" target="_blank">Divjoy Google Sheets Guide</a>
- <a href="https://www.notion.so/Divjoy-Airtable-Guide-91f6049c69df4601af711209710bf1f0" target="_blank">Divjoy Airtable Guide</a>

### Find us on telegram

If you are facing any issues, contact us [here](https://t.me/NoCodeAPI) on telegram. We will get you boarded. 

Thank you for reading. Happy Coding!✌️