Hi, I’m Sheila, a technology consultant, web designer, project manager and author. I help heart-centered business owners, the lightworkers of the world, with technology. I build websites and make technology work for them, so they can spend more time focusing on growing their business and doing what they love.

Styling a mailchimp embedded form seems pretty limited, unless you take the plunge and format it yourself! I’m always trying to find cost effective ways for small business owners to get what they need without ending up paying for more tools or more subscriptions.

My goal was to create a nice banner with a horizontal mailchimp form that was styled to look more like my site. My objective is to avoid paying the $29/month for Lead Pages or some other opt-in tool that gives me easy forms to create. The other thing that is important for me is that it must work in WordPress, Wix and Weebly as my clients use any of these three tools.

If modifing code doesn’t sound like something for you, check out my post on using Mailerlite and how easy is it to create opt-in forms with Mailerlite!

Here’s how you do it!

Step 1:  Set the Required Fields in Mailchimp to only First Name & Email Address.

  • Login to Mailchimp
  • Go to Lists
  • Click on the List you want subscribers to be added to
  • Click on Signup Forms
  • Click Form Builder
  • Select the Last Name field and Uncheck Required to the Right

Step 3: Get the information from Mailchimp for your Embedded code so that you can modify the code I’ve provided.

  • Go to Lists
  • Click on the List you want subscribers to be added to
  • Click on Signup Forms
  • Click Embedded Forms
  • Click NakedUncheck Include Form Title
  • Check Show Only Required Fields
  • Uncheck Show interest group fields
  • Uncheck Show required field indicators
  • Uncheck Show format options
  • Copy the code from the ‘Copy/paste onto your site’ box

Step 4: Modify the code from Step 2. There are 2 modifications to be made.

  • You want to modify the line that starts with <form action=“https…. and the line that starts with <div style=“position: absolute… You will replace the entire form action line with the line from your code.
  • You will simply replace the value after the name= for the 2nd line.

Step 5: Create a Thank You Page in your website tool that you will redirect people to when they have signed up.

I would recommend a generic Thank You page that lets them know they will be getting an email from you with the details. Note the URL of this page.

Step 6: Modify Mailchimp to point to the Thank you Page.

  • Login to Mailchimp
  • Go to Lists
  • Click on the List you want subscribers to be Added to
  • Click on Signup Forms
  • Click Form Builder
  • Select Confirmation thank you page from the drop down
  • Paste the URL of your thank you page into the box that says ‘Instead of showing this …’ and click Save

Add Mailchimp Form to WordPress

In order to create a nice banner, you need to be using a form builder that allows you to create a section and then a row.

  • Edit the page where you want to add the banner.
  • Simply create a section and a row
  • Leave room on the left for an image of your opt-in and some text
  • Then put the code from Step 4 above to insert the form
  • Find the location in your theme that allows you to put custom CSS (It’s usually in theme options or a theme customizer)
  • Copy the custom CSS from Step 5 above and paste it into your theme area for custom CSS
  • Save your page
  • Test it!

Add Mailchimip Form to Weebly

  • Weebly requires that you make your CSS code a style sheet and add it to the header code of the page.
  • Edit the page where you want to add the banner.
  • Drag <Ebed Code> building block to your page
  • Copy and Paste the code from Step 4 above into the Edit Custom HTML
  • Add a Title and Text and Picture where you want it
  • Click Pages while you are on the page you are editing
  • Click SEO Settings
  • Copy the custom CSS from Step 5 above and paste it into HEADER CODE
  • Publish the site
  • Test It!

Add Mailchimp Form to Wix

  • Wix requires that you enter the CSS and embedded form in a HTML iFrame.
  • Edit the page where you want to add the banner.
  • Drag an empty strip to create the section
  • Drag an image, header and text to format as you want
  • Drag HTML iframe from the More section under the Add Menu
  • Click Edit Code and Copy and Paste the code from Step 4
  • Drag the structure to be big enough to not create a scroll bar
  • Publish the site
  • Test It!

Step by Step Video on Formatting Mailchimp Form

My inspiration for this post came from the following sources. I’ve modified to add some additional details and format to be a cleaner banner.

https://uhurunetwork.com/customizing-mailchimp-form-design/

http://www.theblogmarket.co/customize-mailchimp-optin-form/

Let me know what questions you have in the comments below and I’ll do my best to answer them!  Good Luck!