The Webhooks feature in CodeDesign’s Data Hub allows you to automate processes and connect with external tools in real time. One powerful use case is setting up an automatic email response when someone submits a form on your website. By integrating CodeDesign with Zapier, you can trigger a Gmail response to the user instantly—saving time and improving user engagement.
In this guide, we’ll walk through the steps to set up this automation using Webhooks, Zapier, and Gmail. We've put together a detailed video guide as well that runs in detail through the same process.
Step 1: Capturing Form Data in CodeDesign’s Data Hub
Whenever a visitor submits a form on your website, the data is stored in CodeDesign’s Data Hub. But with Webhooks, you can push this data to external services like Zapier in real time. Here’s how:
Submit a test form – Ensure your website has a working form. Enter test data and submit it.
Verify data storage – Check if the data appears in the Data Hub within CodeDesign.
Step 2: Setting Up a Webhook in Zapier
To automate the process, we need to send the form data from CodeDesign to Zapier using Webhooks.
Log in to Zapier and create a new Zap.
Choose Webhooks as the trigger – Select "Webhooks by Zapier" as the trigger app.
Set trigger event to "Catch Hook" – This will generate a unique Webhook URL. Copy it.
Integrate Webhook with CodeDesign – In CodeDesign, navigate to the Data workspace, paste the Webhook URL in the Webhooks tab, and save the changes.
Publish your website – This ensures the integration is active.
Step 3: Testing the Webhook Connection
Now, test if Zapier is receiving the data:
Submit a new form with test details (e.g., name, email, and message).
Go back to Zapier and click "Test Trigger" – The submitted form data should appear.
If the test is successful, Zapier is now correctly receiving data from CodeDesign via Webhooks.
Step 4: Setting Up the Gmail Action
Now that Zapier is receiving form submissions, we’ll configure an automatic email response.
Select "Gmail" as the action app in Zapier.
Choose "Send Email" as the action event – This will allow us to send an automated email.
Connect a Gmail account – Log in to your Gmail and grant permissions to Zapier.
Set up the email details:
Recipient – Select the email field from the submitted form data.
Sender Email – Choose the connected Gmail account.
Sender Name – Use your preferred name
Subject – Set it as "Thank you for reaching out."
Message – Personalize it with the user’s name using dynamic data. Use the '+' button to add variable data from the form input for name.
Test the email action – Click "Test Step" and verify that the email is sent successfully.
Step 5: Final Testing and Publishing the Zap
Rename your Zap and publish it.
Submit another test form – Use a different email and name to check if the automation works.
Verify the email response – The user should receive an automated thank-you message instantly.
Conclusion
With this simple Webhook and Zapier integration, you can automatically send personalized email responses whenever someone submits a form on your website. This not only enhances communication but also streamlines your workflow without manual intervention.
For further customization, you can style emails with HTML, add attachments, or trigger additional actions like CRM updates.
Need help? Reach out via the CodeDesign support chat or forums—we’re happy to assist! 🚀