How To Add Embed Mailchimp Forms in WordPress Without Plugins?

There's a simple way to add and embed Mailchimp forms in your WordPress website without plugins, we'll share a simple guide & tutorial on it

By Claudio Pires
Updated on June 18, 2024
How To Add Embed Mailchimp Forms in WordPress Without Plugins?

There’s a simple way to add and embed Mailchimp forms in your WordPress website without plugins, In this article, we’ll share a simple guide about how to do it. So, you can apply the signup MailChimp form to your WordPress blog or website to collect names. You are growing your mailing list without using a plugin.

Why Avoid Plugins?

Before we dive into the steps, let’s quickly address why you might want to avoid plugins:

  1. Performance: Plugins can slow down your website, impacting user experience and SEO rankings.
  2. Security: Each plugin adds a potential security vulnerability to your site.
  3. Simplicity: Managing fewer plugins can simplify your website maintenance.

Add Embed Mailchimp Forms in WordPress Without Plugins?

The benefits of having your form are that you can create a different Mailchimp signup form for each of your lists if you have one for a contact form, one for your landing page, or one for your newsletter. The only other way to do this is to use more than one plugin; Truly good, right?

In addition, adding a form directly to your website allows people to sign up without leaving your website, and the form can be styled to fit the styles of your website if you know some CSS, for example. As a result, a good way to embed Mailchimp in WordPress

Access MailChimp Form Creator Page

  • Firstly, log in to your MailChimp dashboard on your account.
  • Secondly, in your MailChimp Dashboard on the left, choose Lists.
  • You’ll see all the lists you have in your MailChimp account. If you don’t have any lists yet, you will need to create one by clicking the ”Create List” button in the upper right-hand corner.
  • Hover your mouse over the down arrow on the far right of the list you want to use for the signup; choose Signup forms.
  • Finally, the next are three choices. You use the General form to choose the fields (email, first name, last name, etc.) for your form and edit all the confirmation and thank you pages. For your blog newsletter, choose the Embedded Forms button to embed Mailchimp in WordPress sites following this guide & tutorial.

Generate Your Form: Embed Mailchimp in WordPress

You can choose any of the three form types—Classic, Slim, or Naked. You can use Classic for this tutorial; the advantage is that you get JavaScript, so if someone gets an error while completing the form, they will still be on your website form rather than going to the full-page signup form page from the General form section.

Moreover, if you uncheck the box to include a title with your form, you can use the widget title to title your form. You can choose to show all fields or only the required fields. For this tutorial, I’m using a form that asks for email and first name to embed Mailchimp in WordPress.

In addition, uncheck interest group fields and required field indicators. You would only keep these if you had a form with many areas. Leave the form width empty so that the form will fill the width allowed in your widget. Now select all the code from the box—copy/paste onto your site.

Add the From On Your WordPress Website

After getting the form codes on MailChimp, you can add it to any location of your WordPress website. Firstly, you can add it as a widget. Under the WordPress Dashboard, Appearance, Widgets, you can post the codes in the ‘text or the ‘Custom HTML’ widgets.

Secondly, you can embed your MailChimp signup form in your footer using the widget in the same way.

Finally, you can add your email signup form to pages using the native WordPress editor elements. Custom HTML is perfect for posting the codes. Embed Mailchimp in WordPress sites following this guide & tutorial.

Style Your Form (Optional) to Embed Mailchimp WordPress

While Mailchimp’s form builder allows for some customization, you might want to style the form further to match your site’s design. You can achieve this by adding custom CSS.

  1. Locate the Form ID/Class: Inspect the form on your website to find the form’s ID or class.
  2. Add Custom CSS:
    • Navigate to ‘Appearance’ > ‘Customize’ > ‘Additional CSS’.
    • Add your custom CSS targeting the form’s ID or class.
  3. Save Changes:
    • Save your custom CSS changes.

SEO Tips for Embedding Mailchimp Forms

Embedding Mailchimp forms directly into your site without plugins can help with SEO in several ways:

  1. Faster Loading Times: With fewer plugins, your site loads faster, a positive ranking factor.
  2. Improved User Experience: A faster, cleaner site keeps users engaged, reducing bounce rates.
  3. Cleaner Code: Directly embedding forms avoids the additional code overhead that plugins can introduce.

Troubleshooting Common Issues

Form Not Displaying

  • Check Embed Code: Ensure you copy the entire embed code from Mailchimp.
  • Check HTML Tags: Verify that you placed the code correctly within the HTML structure.

Form Display Issues

  • CSS Conflicts: Inspect the form using browser developer tools to identify any CSS conflicts with your theme.
  • Mobile Responsiveness: Ensure your form is responsive and displays correctly on different devices.

Conclusion

Adding Mailchimp forms to your WordPress site without plugins is a straightforward process that can enhance your site’s performance and security. By following the steps outlined above, you can seamlessly integrate your email marketing efforts with your WordPress site, capturing leads effectively while maintaining a lightweight and fast website.

Remember, the key to a successful integration is ensuring that the form is user-friendly, visually appealing, and strategically placed to maximize conversions. Happy embedding!

By following these steps, you’ll not only enhance your website’s functionality but also improve your SEO, making it easier for users to find your content and subscribe to your mailing list.

Claudio Pires

Claudio Pires is the co-founder of Visualmodo, a renowned company in web development and design. With over 15 years of experience, Claudio has honed his skills in content creation, web development support, and senior web designer. A trilingual expert fluent in English, Portuguese, and Spanish, he brings a global perspective to his work. Beyond his professional endeavors, Claudio is an active YouTuber, sharing his insights and expertise with a broader audience. Based in Brazil, Claudio continues to push the boundaries of web design and digital content, making him a pivotal figure in the industry.