Managing form submissions efficiently is essential for businesses that rely on real-time data collection. While CodeDesign Builder's Data Hub naturally stores submitted form data, manually exporting and updating CSV files can become tedious. To streamline this process, we’ve introduced a Webhooks integration that allows you to automate form data transfers to Google Sheets in real time.
With this integration, every new form submission on your website will be automatically recorded in Google Sheets, eliminating the need for manual exports. Let’s walk through how to set this up using Zapier, a popular automation platform.
Video Guide : Adding Product & Connecting to Stripe
If you prefer a video guide, we've put together a video guide that runs through the exact same demo.
Why Use Webhooks for Form Submissions?
Traditionally, form submissions are stored in the Data Hub under the Forms section. While you can export this data as a CSV file, keeping spreadsheets updated manually can be time-consuming.
By integrating webhooks with Google Sheets, you can:
Automate data transfer with zero manual effort.
Ensure real-time updates to your Google Sheets.
Improve collaboration by sharing dynamic, always-updated sheets with your team.
Step 1: Setting Up a Webhook Trigger in Zapier
To automate the process, we’ll use Zapier to connect CodeDesign Builder with Google Sheets.
1. Create a Zap in Zapier
Log in to your Zapier account (or sign up if you don’t have one).
From the dashboard, click on "Start from Scratch" and select "Zap" to create a new automation.
2. Set Up the Webhook Trigger
In the Trigger section, search for "Webhooks by Zapier" and select it.
Choose "Catch Hook" as the trigger event.
Click "Continue",
Proceed with no changes in the second step as well and click "Continue" again
Now Zapier will generate a unique Webhook URL—copy this for the next step.
Step 2: Connecting Webhooks to CodeDesign Builder
Now that we have the webhook URL, we’ll integrate it with CodeDesign Builder.
Open your CodeDesign Builder project.
Navigate to the Webhooks Integration Tab in the DataHub Workspace.
Paste the Webhook URL from Zapier.
Click "Save Changes" and publish your website.
Now, every time someone submits a form, the data will be sent to the webhook trigger that we've setup on zapuer.
Step 3: Testing the Webhook Connection
To ensure everything is set up correctly:
Go to your website and submit a test form (e.g., enter a name, email, and message).
Return to Zapier and click "Test Trigger".
If successful, the submitted data will appear in Zapier, confirming the webhook is capturing data in real time.
Step 4: Sending Data to Google Sheets
Now, let’s set up Zapier Action that will send the form data to Google Sheets automatically.
1. Select Google Sheets as the Action App
Click on "Action" in Zapier and search for "Google Sheets".
Choose "Create Spreadsheet Row" as the action event.
Sign in with your Google account and grant Zapier access.
2. Prepare Your Google Sheet
Before proceeding, create a new Google Sheet with appropriate headers:
Open Google Sheets and create a new spreadsheet.
Add column headers in the first row (e.g., Name, Email, Message).
3. Map the Data Fields
Back in Zapier:
Select the Google Drive and specific spreadsheet you just created.
Choose the correct worksheet (e.g., Sheet1).
Map the form fields to the corresponding Google Sheet columns:
Name → Name column
Email → Email column
Message → Message column
Click "Test" to verify that data appears in Google Sheets. If successful, you’ll see the test data added instantly.
Step 5: Activating the Automation
Once everything is working:
Give your Zap a name (e.g., "CodeDesign Form to Google Sheets").
Click "Publish Zap" to activate the automation.
Now, every time a form is submitted, the data will automatically be recorded in Google Sheets—no manual exports needed!
Final Test: Ensuring Everything Works
To confirm that everything is running smoothly:
Submit another test entry on your website.
Check your Google Sheet—the new entry should appear instantly in the next row.
Conclusion
With Webhooks integration, you can eliminate manual data exports and ensure real-time updates in Google Sheets. Whether you're handling customer inquiries, lead forms, or registrations, this automation saves time and enhances workflow efficiency.
If you have any questions, feel free to reach out via support chat, the CodeDesign forum, or our help center. Happy automating! 🚀