Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Kyle Cash / Last Updated March 2, 2023

How To Style Mailchimp Forms in WordPress [2 Methods!]

Looking to style Mailchimp forms in WordPress? This guide will show you that styling a Mailchimp signup form can be easy! Here’s how to do it.

How to Style Mailchimp Forms in WordPress

Approximate read time: 5.5 minutes

Tired of trying to find an easy way to style your Mailchimp form in WordPress?

We understand. You search and search but don’t find many options. Especially ones that don’t expect you to know how to code.

And that’s frustrating.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

But it doesn’t have to be. In fact, designing your Mailchimp form’s style can be fun.

So, this post will show you two ways to style your Mailchimp embed form: with Mailchimp and Formidable Forms.

Let’s get started.

  • How to style forms with Mailchimp
    • 1. How to style forms with Mailchimp
      • 2. Style your forms with a form builder

      How to style Mailchimp forms in WordPress

      Mailchimp’s forms look great but are a bit basic.

      And customizing them to match your site is an excellent way to make them stand out.

      So, there are three ways to style your Mailchimp form in WordPress:

      1. Using Mailchimp styling
      2. Use a form builder

      Since both work, we’ll show you how to do each.

      1. How to style forms with Mailchimp

      Styling Mailchimp’s forms using their method can be complicated.

      And that’s because you’ll need to know at least some code to start. If you don’t, things may get confusing very quickly. So we recommend this method to people confident in their coding abilities.

      To start customizing your form, head to your Mailchimp account and go to Audience → Signup forms → Embedded forms.

      Feel free to customize your form fields by adding an email address, first name, or last name field.

      Once you’re finished, click Continue.

      Next, you’ll see a piece of HTML code you can copy and paste to your site to show your form.

      Embedded form code

      If you want to customize the look of this form, that means customizing your form’s code.

      But, sometimes, you have to use Mailchimp’s CSS hooks. And Mailchimp has over 30 of them, like mc-embedded-subscribe-form or mc-embed signup.

      Mailchimp CSS Hooks

      If you’re comfortable enough with CSS and using these hooks, there’s a lot you can do with your forms. 

      Customize input fields, your submit button, and any form actions are possible by pasting this code into an editor and changing it.

      Change your form’s background color

      To change your form’s background, you must target the <div id=”mc_embed_signup”> code.

      So, in your style section, you’ll see a piece of code:

      Background code

      You can change this code to adjust your form’s background. For example, you can change the background: #fff to background: #000 to change the background to black.

      Mailchimp Background Form Example

      But now the text isn’t visible anymore. So you can add color: #fff to change it to white.

      Mailchimp form with white text

      Now, your form looks even better!

      Feel free to play around with the customization to see if you can match your WordPress site!

      Customizing your submit button

      Now, let’s see how to change your submit button.

      So, you need to target the <input type=”submit”>. But we’ll need to do it differently from your form background.

      Head to your <style> section, and add some code for your Mailchimp form style overrides:

      Signup form button code

      This will set your button background to white and your text to black.

      Mailchimp submit button example

      And now your form is starting to come together!

      You can continue customizing your form by targeting CSS hooks like the mc-field-groups and the <input type=”email”> code.

      But if you want an easier way to style your Mailchimp forms, check out the method below.

      2. Style your forms with a form builder

      Using custom CSS is great for giving you control over your form’s design.

      If you know how to code.

      But if you want a much simpler option, we suggest Formidable Forms.

      Formidable is WordPress's most advanced form builder, making customizing your form a breeze. Whether it's a contact form or a Mailchimp popup, Formidable has you covered.

      Plus, with its Mailchimp integration and a great Visual Form Styler, it’s the perfect Mailchimp contact form builder.

      So, get Formidable installed and activated, then we’ll get started.

       Get Your Mailchimp Form Styler!

      And there are only a couple of steps to get it done:

      1. Connect Mailchimp and Formidable
      2. Create your form
      3. Customize the design
      4. Display your form
      Formidable Forms pro plans

      1. Connect Mailchimp and Formidable

      In your WordPress dashboard, go to Formidable → Add-Ons, find the Mailchimp add-on, and install and activate it.

      Mailchimp add-on

      Next, go to Formidable → Global Settings → Mailchimp.

      You can enter your Mailchimp API key to connect to your Mailchimp account.

      Mailchimp API key

      Now that your Mailchimp account is connected, it’s time to create your form!

      2. Create your form

      To start creating your form, go to Formidable → Forms, and click Add New.

      Next, choose from one of Formidable’s many templates or a Blank Form to start from scratch.

      Then, name your form and click Create.

      The plugin will take you to its drag and drop form builder, where you can begin creating your form.

      Formidable's drag and drop builder

      Feel free to customize the form by adding email, name, and text fields to fit your needs.

      Once finished, click Update to save your changes, head to Settings → Actions & Notifications, and click Mailchimp.

      Mailchimp form action

      A Mailchimp action will appear below, and you can customize your Mailchimp settings.

      Mailchimp form action settings

      Once you have them set, click Update to save your changes. Now, adding a Mailchimp subscriber to your email list is as simple as them filling out your form.

      Now, it’s time to customize your form. So, let’s head to the Style tab.

      3. Customize the design

      Formidable’s Visual Form Styler makes customizing a beautiful form easy for anyone.

      No need to code or use CSS Hooks. Simply click and adjust the settings in the sidebar.

      So, you’ll see a few options in Formidable's Style tab.

      Formidable Style tab

      You can select one of Formidable’s premade design templates to save time or begin styling your own.

      To customize one, click the three dots on the template and click Edit. 

      Formidable design template

      In Formidable’s Styler, you can customize your form to fit your needs.

      Change font sizes, border radius, colors — anything you see, you can customize.

      Formidable's Visual Form Styler

      You can get creative with your form and make it unique to your website. 

      For example, here’s a form we created for a test website we use!

      Example form

      Formidable’s Styler makes it easy for you, whether a beginner or an expert.

      So, play around with the settings and make the form your own.

      Just make sure you click Update when you’re finished to save your changes.

      Now, let’s get that form displayed.

      4. Display your form

      First, head to the post or page where you want to add your Mailchimp form.

      Next, add a new WordPress block, then search for the Formidable Forms block and add it.

      Formidable WordPress block

      Then, choose your form from the dropdown menu, and you’ll see your form.

      Last, click Update to save the changes, and your form is live!

      We told you Formidable’s the best for easy forms for Mailchimp!

      With just a few simple steps, you have your custom form ready. 

      No code, no hassle — just easy form building.

       Get Your Mailchimp Form Styler!

      How will you style Mailchimp forms in WordPress?

      Customizing your Mailchimp signup form in WordPress is the best way to make your forms stand out.

      And today, you learned two different ways to customize embedded forms for Mailchimp — using code and using Formidable Forms. Which one you choose will depend on your comfort with code, although we recommend Formidable even if you’re an experienced coder.

      If you’re still wondering why Formidable is the best choice, check out this post on why it’s the best Mailchimp signup form WordPress plugin.

      You won’t be disappointed 😉.

      If you’re ready to start, head to our pricing page and snag one of our excellent plans.

      Last, follow us on Facebook, Twitter, and YouTube for more great Mailchimp tips and tricks!

      Read more about Mailchimp and Formidable!

      • How to Add a Mailchimp Popup to WordPress How to Add a Mailchimp Popup to WordPress [Two Easy Ways!]
        Read More
        How to Make a Mailchimp Popup in WordPress How To Make a Mailchimp Popup in WordPress (An Easy Guide)
        Read More
        You Need This Mailchimp Signup Form WordPress Plugin Now
        Read More

      Did you know that Formidable Forms is one of the fastest WordPress form builder plugins available today? If you're not already using it, get started with our free plugin or the full-featured pro version!

      Using WordPress and want to get Formidable Forms for free?

      Get Formidable Forms Lite Now

      This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Get Email Updates

      Popular Resources

        • How to Create a Searchable Database on a WordPress Site
        • Create a WordPress Custom Calculator: Easy, Powerful Results
        • How to Create a Fitness Tracker in WordPress
        • Formidable Views: The Best WordPress Custom Application Plugin
        • How To Require Email To Download Files in WordPress
        • How to Create Conditional Drop Down Lists in WordPress Forms
        • Best Gravity Forms Alternative for WordPress: Formidable Forms vs. Gravity Forms
        • How to Make a Quiz in WordPress
        • WPForms Alternative: Formidable Forms vs. WPForms Compared

      Take on bigger projects Right Now

      Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

      Get the most advanced WordPress form plugin and the only form builder with integrated Views.

      Get Formidable Forms Now

      Resources

      • Community
      • Affiliates
      • Contact
      • Free Online Form Builder

      Top Features

      • Application Builder
      • Calculator Forms
      • Surveys & Polls
      • Quiz Maker
      • Form Templates
      • Application Templates
      • Directories
      • Donation Plugin

      Company

      • About Us
      • Giving Back
      • Careers
      • Newsletter
      • WP Tasty
      • Nutrifox

      Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
      Privacy Policy | Terms of Service | Sitemap

      Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews