Integrating Webflow with Google Contacts Using Pabbly Connect

Learn how to integrate Webflow with Google Contacts using Pabbly Connect through webhooks. Step-by-step guide on setting up the connection for seamless automation. Master proven automation processes with practical implementation examples and strategic recommendations you can apply immediately in your workflow.

Watch Step By Step Video Tutorial Below

1. Setting Up Webflow Webhook with Pabbly Connect

To integrate Webflow with Google Contacts, we need to set up a webhook using Pabbly Connect. First, log into your Pabbly Connect account and select Webflow as the trigger application. This is crucial for capturing form submissions from your Webflow website.

After selecting Webflow, choose the trigger event as ‘New Form Submission.’ This allows you to capture data whenever a new form is filled out on your website. You will then receive a webhook URL from Pabbly Connect that will be used to connect to your Webflow account.

2. Connecting Webflow to Pabbly Connect

Next, we will connect Webflow to Pabbly Connect. Log into your Webflow account and navigate to your project settings. Here, you will find the option for ‘Apps and Integrations’ on the left sidebar.

• Click on ‘Add Webhook’ to create a new webhook.
• Select the trigger type as ‘Form Submission’ since we are capturing form responses.
• Paste the webhook URL from Pabbly Connect into the designated field.

After saving the webhook, ensure that you publish your site to activate the connection. This step is essential for Pabbly Connect to start receiving data from your Webflow forms.

3. Testing the Integration with Pabbly Connect

Now that the webhook is set up, it’s time to test the integration. Go back to your Webflow site and fill out the form with dummy data. This will simulate a real form submission, allowing Pabbly Connect to capture the response.

Once you submit the form, return to Pabbly Connect to check if the data has been received. You should see the details like first name, last name, email, and phone number captured successfully.

4. Setting Up Google Contacts Action in Pabbly Connect

After testing the integration, the next step is to set up Google Contacts as the action application in Pabbly Connect. This means that every time there is a new form submission, a new contact will be created automatically in Google Contacts.

In Pabbly Connect, select Google Contacts as the action application and choose the action event as ‘Create Contact.’ You will need to map the fields from the Webflow form to the corresponding fields in Google Contacts to ensure the data flows correctly.

• Map the first name from Webflow to the first name field in Google Contacts.
• Map the last name accordingly.
• Ensure the email and phone number fields are also mapped correctly.

Once the mapping is complete, save the action step. This setup ensures that every new form submission creates a new contact in your Google Contacts account seamlessly through Pabbly Connect.

5. Finalizing the Integration and Publishing

Finally, after setting up the action for Google Contacts, it’s time to finalize and publish your integration in Pabbly Connect. Check all the steps to ensure everything is configured correctly.

Once confirmed, click on the ‘Publish’ button in Pabbly Connect to activate the integration. This will allow the automation to run live, ensuring that each new form submission on your Webflow site is captured and sent to Google Contacts automatically.

With this setup, you have successfully integrated Webflow with Google Contacts using Pabbly Connect. Now, every time a user submits a form on your website, their information will be automatically added to your Google Contacts, streamlining your workflow and enhancing productivity.

Conclusion

In this tutorial, we explored how to integrate Webflow with Google Contacts using Pabbly Connect. By setting up webhooks and automating the contact creation process, you can enhance your business efficiency and ensure seamless data management.