How Do I Link a Webflow Form to an Email?

by

Webflow is a powerful website builder that allows you to create stunning websites without writing a single line of code. One of the key features of Webflow is its ability to create forms and collect user information. In this tutorial, we will learn how to link a Webflow form to an email using HTML.

Step 1: Create a Webflow form
The first step is to create a form in Webflow. To do this, log in to your Webflow account and open the project where you want to add the form. Navigate to the page where you want the form to be placed and drag and drop the Form block from the Add panel.

Note: Make sure you have added all the necessary form fields like name, email, message, etc.

Step 2: Set up your email service provider
To link your Webflow form with an email service provider (ESP), you need to set up integration between Webflow and your chosen ESP. There are several popular ESPs like Mailchimp, SendGrid, and Zapier.

  • Mailchimp:
    • Create a new list or use an existing list in Mailchimp.
    • Go to your Mailchimp account and navigate to Lists > Your List > Signup forms > Embedded forms.
    • Select “Copy/paste” option and copy the HTML code provided by Mailchimp.
  • SendGrid:
    • Create an account on SendGrid if you don’t have one already.
    • Navigate to Settings > API Keys in SendGrid.
    • Create a new API Key with full access permissions.
  • Zapier:
    • Create an account on Zapier if you don’t have one already.
    • Create a new Zap and select Webflow as the trigger app.
    • Follow the instructions to set up the email integration with your desired ESP.

Step 3: Add custom code to your Webflow form
Once you have set up your ESP integration, it’s time to add custom HTML code to your Webflow form. To do this, go back to your Webflow project and open the page where the form is located.

Note: We will be using the HTML embed element in Webflow to add custom code.

For Mailchimp integration:

  1. Add an HTML embed element inside your Webflow form block.
  2. Paste the copied Mailchimp HTML code inside the embed element.

For SendGrid integration:

  1. Add an HTML embed element inside your Webflow form block.
  2. Paste the following custom code inside the embed element:

    3. “`html


    “`

  3. Replace “YOUR_SENDGRID_API_KEY” with your SendGrid API key.
  4. Replace “YOUR_EMAIL_ADDRESS” with the email address where you want to receive form submissions.
  5. Replace “SENDER_EMAIL_ADDRESS” with the email address that will be shown as the sender of the email.

For Zapier integration:

  1. Add an HTML embed element inside your Webflow form block.
  2. Paste the following custom code inside the embed element:

    3. “`html

    “`

  3. Replace “https://hooks.com/hooks/catch/123456/abcdef/” with your Zapier webhook URL.

Step 4: Test your Webflow form
Finally, it’s time to test your Webflow form and see if it’s correctly linked to your email service provider.

  • Publish your Webflow project to a live website.
  • Fill out the form fields and submit the form.
  • Check your email inbox to see if you have received the form submission email.

Congratulations! You have successfully linked your Webflow form to an email service provider using HTML. Now you can collect user information and receive form submissions directly in your email inbox.