How to connect Gmail with Webflow?

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.

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.

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".

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

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.

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