Badge Webflow Award Winner 2023

How to connect Gmail with Webflow?

Associating your Gmail address with Webflow is a way to optimize the user experience of your visitors. Send automatic emails after someone has contacted you from your site, send personalized responses based on requests, choose a dedicated email address for each contact form, etc. Start automating your site and reduce these repetitive tasks by connecting Gmail and Webflow! ⚡

Published on 
4/11/2021
-
Amended on 
27/3/2023
-
5 min
Blue computer with Gmail module and Webflow module next to a red envelope

Connecting your Gmail address with your Webflow site is not only to receive a contact form notification! The goal is to improve the user experience of your site by automating your various emails simply and quickly.

For example, you will be able to classify in Gmail the different notifications you receive from Webflow, send automatic emails, personalize the answers to your prospects and customers, use email templates, send e-commerce order summaries, etc.

The idea will be on the one hand to relieve you of this repetitive task which consists in confirming the good reception of an email, and on the other hand to improve your response time since it will be here instantaneous and personalized! 🤩

Prerequisites

  • You have a G Suite account: follow this tutorial and in 5 minutes you will be connected 😍 How to know if you have a G Suite account? Very simple, if the domain name of your email is @gmail.com then you don't have a business address.
  • You don't have a G Suite account: This will be more complex in this case but it is possible (🚨 be aware that Google security may sometimes disconnect your account from Integromat). You will need to create Google API access with OAuth on the Google Cloud Platform to do this. To get your OAuth client, and thus have your "Client ID" and "Client Secret" needed for Integromat login, follow this tutorial to connect Integromat and Gmail with the OAuth Client.

In this tutorial the idea is to send an automatic email to a prospect who contacts you from your Webflow contact form. We will use the Integromat automation tool to automate your Webflow site.

1 - Add a Webflow module

Start by connecting a new Webflow module to Integromat. Here we will choose a "Watch Event" trigger which is an instant trigger. The aim is to trigger the workflow instantly when a new form is received.

New Webflow module in the Integromat interface
New Webflow module

2 - Activate the Webflow webhook

The objective is to start by sending the data to the webhook. To do this, right click and then click on 'Run this module only' to run the webhook. Then go and fill in your web contact form from your site.

Launching the Webflow trigger in the Integromat interface
Trigger Webflow

3 - Add a Gmail module

Add a new Gmail module to create a new connection. To do this, first find the Gmail module in your Integromat interface and then do the following:

  • Click on "Send an email" to select the action of sending an email after receiving a Webflow form.
  • Click "add" to add your first Gmail connection to Integromat.
  • Rename your new connection
  • Click on "Continue".
Adding a Gmail module to Integromat
New Gmail module

4 - Login to your new account

A new window should open, in which you can select your Gmail account or enter your login details:

  • Select or enter your Gmail address
  • Select your password
  • Allow the Integromat application to access your Gmail account
Gmail account interface in Integromat
New Gmail account

5 - Set up the Gmail module

Once you have logged in, you will be able to set up the various fields of the Gmail module in Integromat.

  • To: add the Webflow tag containing the contact's email address.
  • Subject: add the Object of your mail. You can for example personalise it by adding a "company" "name" or "first name" tag.
  • Content: write the content of your email and personalise it for example by adding the tags "name" "first name" "company".
    Tips 💡
    you can use HTML to further customize your emails, for example by creating paragraphs, formatting sentences (bold, italic), adding ink links, etc.
  • Attachments: if necessary, add one or more files to be sent as attachments.
Setting up the Gmail module with tags in Integromat
Adding Webflow tags


Tips 💡 Check the "Show advanced settings" box to access the advanced features of the Gmail module. You will be able to add people to copy the mail if needed

Ready to take your website to the next level?

Improve your online visibility thanks to Digidop's experience, excellence and reactivity!

Stay in touch with Digidop news!