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.
- NoCodeAPI Google Sheet or Airtable Endpoint
- Divjoy Access
- 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
- Go to the https://divjoy.com
- Scroll down to
Choose your stack
- Go to
More Optionsand under Contact Form chose
- Go to
Layoutsand chose the first layout
- After you chose your layout you will reach the
Buildyour components page.
- On the right top, click on
- You will need to buy divjoy's life time access bucket to extract your code. Use
nocodeapias promotion code to find discounted price. Or click here.
- Make the payment to proceed further in tutorial.
- Click on
Export to </> CodeSandboxbutton
- Divjoy will create your code and you can export it to CodeSandbox now.
- Click on
Open my CodeSandboxbutton to open your code 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
- You can see the contact form. We are going to make two changes to
.envfile to make contact form functional.
- On the left panel, find
.envfile and edit it.
REACT_APP_SHEETS_ENDPOINTwith your NoCodeAPI Google Sheet endpoint,
REACT_APP_SHEETS_TAB_IDwith the Sheet Tab name,
- & click
- 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!
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.
Watch this tutorial in action here. 👇
- Divjoy discount Offer: https://divjoy.com/?promo=nocodeapi
- Divjoy Google Sheets Guide
- Divjoy Airtable Guide
If you are facing any issues, contact us here on telegram. We will get you boarded.
Thank you for reading. Happy Coding!✌️