How Do I Add a Subscription to Webflow?

Adding a subscription to your Webflow website is a great way to engage with your audience and keep them updated with the latest content, products, or services. In this tutorial, we will walk you through the steps to add a subscription feature to your Webflow site using Mailchimp.

Step 1: Sign up for Mailchimp

If you don’t have a Mailchimp account yet, head over to their website and sign up for a free account. Once you’re signed in, navigate to the “Audience” tab and click on “Create Audience” to set up your mailing list.

Step 2: Generate an API Key

In order to integrate Mailchimp with Webflow, you’ll need an API key. To generate one, go to your Mailchimp account settings and click on “Extras” > “API keys”. Click on “Create A Key” and copy the generated key.

Step 3: Add the HTML Embed Code

In your Webflow project, navigate to the page where you want to add the subscription form. Drag and drop an HTML Embed element onto the page. Double-click on it to open the code editor.

Note: If you want to place the subscription form in multiple pages of your website, it’s recommended to create a symbol in Webflow that contains the HTML Embed element. This way, any changes made to the symbol will reflect across all instances of it on different pages.

Paste the following code inside the code editor:

<form action="https://YOUR_USERNAME.us7.list-manage.com/subscribe/post?u=YOUR_U&amp;id=YOUR_ID" method="post">
    <input type="email" name="EMAIL" placeholder="Enter your email" required />
    <input type="submit" value="Subscribe" />
</form>

Make sure to replace “YOUR_USERNAME”, “YOUR_U”, and “YOUR_ID” with your own Mailchimp details. The action URL can be found in the Mailchimp form embed code.

Step 4: Style the Subscription Form

Now that we have added the subscription form, we can style it to match your website’s design. You can use Webflow’s built-in styling options or add custom CSS styles to further customize the form’s appearance.

Using Webflow Styling Options

To style the form using Webflow’s options, select the HTML Embed element and navigate to the Styles panel on the right-hand side. Here, you can change the font, colors, alignment, and other visual aspects of the form.

Adding Custom CSS Styles

If you want more control over the styling, you can add custom CSS styles. To do this, navigate to your project settings in Webflow and click on “Custom Code”. In the “Head Code” section, add a style tag and write your CSS rules Targeting the subscription form elements.

<style>
    /* Example custom styles */
    .my-subscription-form input[type="email"] {
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 4px;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .my-subscription-form input[type="submit"] {
        background-color: #333;
        color: #fff;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
    }
</style>

Remember to replace “my-subscription-form” with the appropriate class or ID of your HTML Embed element.

Step 5: Test and Publish

Before publishing your website, it’s essential to test the subscription form. Fill in your email address and submit the form to check if you receive a confirmation email from Mailchimp.

If everything is working as expected, go ahead and publish your Webflow site. Your visitors can now subscribe to your mailing list and stay updated with your content!

Note: It’s a good practice to provide clear information about how you will use their email address and give them the option to unsubscribe in every email you send.

Conclusion

In this tutorial, we’ve learned how to add a subscription feature to a Webflow website using Mailchimp. By following these steps, you can effectively engage with your audience and keep them informed about new updates, products, or services.

Remember to design the subscription form to match your website’s style for a seamless user experience. Happy subscribing!