How to Add a Horizontal Mailchimp Form to Your Site

July 28, 2016

This post may contain affiliate links, which means I will receive compensation if you click through and make a purchase.

How to Add a Horizontal Mailchimp Form to Your Site

Adding opt-in forms to your website is a great way to grow your email list. And one of my favorite places to add them is right below the header of a site. But the only problem is that space is at a premium. Adding a standard opt-in form takes up a ton of space above the fold.

The solution is to take that form and make it horizontal, thus saving you room. Now I don’t know why Mailchimp doesn’t offer this by default, but lucky for you, it’s really not that difficult to customize yourself. All it takes is a little bit of CSS and some tweaking of the HTML embed code provided.

Here’s a preview of what we’re starting out with and what the finished product will look like. Now keep in mind that the general styling of the form fields will be taken from your theme’s stylesheet, so your form will look different.

horizontal-form-before-after

1. Setup Form

To access your form, login to your Mailchimp account, then click on your list, followed by signup forms. Before we grab the embed code, you’ll want to make sure that the form is setup to your liking. Go ahead and click on general forms. There you’ll see the fields that will be displayed on your form. Delete or add fields as necessary.

Sidenote: I usually just keep first name and email.

2. Grab the Embed Code & Add to Site

Now go back to signup forms and click on embedded forms, then naked. Uncheck include form title and show required field indicators. Copy your embed form and head over to your WordPress dashboard to paste it on your site.

Sidenote: Because this tutorial is showing you how to add a horizontal Mailchimp form, I’d suggest adding it to a full width widget area. It’s not really going to look the best if you add it to a narrow sidebar.

3. Customize Embed Code

With the code is in place, we’re now going to customize the embed code a bit before we style it. First things first, the Mailchimp code displays the name after the email address. I don’t know about you, but I think it’s more intuitive to have the name first.

Find this bit of code:


Then cut it and add it before this bit of code:


So that part of your embed code should look like this (we just swapped those two divs):


Now that we’ve reordered the fields, we’re going to add placeholder text. Placeholder text adds text to the fields so people know what information to add to what field. Find id="mce-FNAME" and add placeholder="name" right after it. Do the same for id="mce-EMAIL", but replace name with email. Those chunks of code should now look like this:


Before we start styling, let’s wrap the entire code in a div named horizontal-mailchimp, so that you can add other Mailchimp forms to your site without them being affected. And let’s also add a call to action to tell people what they’re signing up for.


Sign up for my newsletter!

/* Your embed code here */

At this point, your code should look like this, in it’s entirety:


/* DO NOT copy and paste this code for your own site. It won't link to your mailing list! */

Sign up for my newsletter!

Due to a recent WordPress update, copying and pasting your Mailchimp code as is, will result in the submit button being pushed to a new line. In order to get it to display properly, find this line of code in your Mailchimp embed code and delete it:


4. Style Your Form

So now your form has been added to your site, but it doesn’t look anywhere near what we’re going for. Time to add some CSS to style your form! Either open up your theme’s stylesheet (Appearance > Editor) or go to the custom CSS section of your theme (location varies).

The whole purpose of this post is to add a horizontal Mailchimp form to your site, so let’s go ahead and make this form horizontal and hide those pesky labels above the fields.

Add the following to your theme’s CSS:


/* puts Mailchimp fields in a row */
.horizontal-mailchimp .mc-field-group,
.horizontal-mailchimp .clear {
     display: inline-block;
}

/* hides the field labels */
.horizontal-mailchimp label {
     display: block;
     height: 1px;
     text-indent: -9999px;
}

Okay, it’s looking a lot better, but could still use some improvement. Let’s center the entire form, add a colored background, and add some margins/padding:


.horizontal-mailchimp {
     background: #eee;
     margin: 20px auto;
     padding: 20px;
     text-align: center;
}

We’re just about done! The form looks good, but if viewed on a mobile device, it won’t look quite as nice. We’ll have to add a media query to stack the form on smaller devices.


@media only screen and (max-width: 768px) {

     /* stacks the form fields and makes them full width */
     .horizontal-mailchimp .mc-field-group,
     .horizontal-mailchimp .clear,
     .horizontal-mailchimp input {
          display: block;
          width: 100%;
     }

     /* adds spacing below form fields */
     .horizontal-mailchimp .mc-field-group {
          margin-bottom: 5px;
     }
		
}

And there you have it, a horizontal Mailchimp form for your WordPress blog! All together the CSS should look like this:


.horizontal-mailchimp .mc-field-group,
.horizontal-mailchimp .clear {
     display: inline-block;
}

.horizontal-mailchimp label {
     display: block;
     height: 1px;
     text-indent: -9999px;
}

.horizontal-mailchimp {
     background: #eee;
     margin: 20px auto;
     padding: 20px;
     text-align: center;
}

@media only screen and (max-width: 768px) {

     .horizontal-mailchimp .mc-field-group,
     .horizontal-mailchimp .clear,
     .horizontal-mailchimp input {
          display: block;
          width: 100%;
     }

     .horizontal-mailchimp .mc-field-group {
          margin-bottom: 5px;
     }
		
}

Need some development help?

56 thoughts on “How to Add a Horizontal Mailchimp Form to Your Site”

  1. Hi Allyssa

    Thank you for this post. I haven’t signed up with Mailchimp yet, but I’ve bookmarked this page for when I do.

    I love that you set it out step -by -step with graphics.

    Kind regards.

    Riv

  2. thank you! This is just what I was looking for and very much needed! A quick question, is there a way to make the “sign up” line inline with the forms? I hope that made sense 🙂 Thanks again!

    1. Hi Kristy. Yes, you can make the sign up line inline with the form. I would add a div (with a class of form-heading) around the h2 of the form heading, give it a width, and float it to the left. Then give the form a width and float that to the right and it should work.

      So something like this:

      .horizontal-mailchimp .form-heading {
           width: 200px;
           float: left;
      }
      
      .horizontal-mailchimp #mc_embed_signup {
           width: 700px;
           float: right;
      }
      

      You’ll have to play with the widths to get them to display how you want, but that should do the trick 🙂

  3. Hi there! Thanks for your post. Can’t seem to get the boxes to align horizontally. I am just copying what you had for the style exactly to the bottom of my theme’s CSS on Weebly. Any idea? Also what’s up with the text that Mailchimp says I should move to my header? Can I just leave it?

    1. I’m not familiar with Weebly, so I’m not sure what the problem is. If Mailchimp says to move the text, I would. Off the top of my head, I can’t remember what text that is, but if they’re asking you to move some to the header, I’m guessing it’s a script of some sort, and that would work best in the header.

      1. Thanks for your reply, Allyssa. Unfortunately, it didn’t quite work on my site, but I was able to get it working by adding a margin like this:

        .horizontal-mailchimp .mc-field-group,
        .horizontal-mailchimp .clear {
        display: inline-block;
        margin-right: 5px;
        }

  4. Hi Allyssa,

    I’ve followed all the steps and the form is looking quite good, but the submit button isn’t working properly. once you make click it open a new tab and nothing happens.

    I’ve just pasted the code from mailchimp and made your changes, I didn’t touch anything about the submit button.

    Thanks in advance!

    1. Hi Hector. Sorry it’s not working. It could be another plugin (or even your theme) interfering with the code. You can try disabling your plugins one at a time to see if the submit button will work. If it does work, then the last plugin deactivated was the likely culprit.

  5. Hello Allyssa!

    Great tutorial here! I tried a bunch a plugins but this actually worked a lot better and looked so much cleaner!

    I did have two questions.

    1. The submit button for some reason didn’t go on the horizontal line with both input options, it remained below. Any advice here?

    2. Once you hit the submit button it takes you to the mailchimp page. Anyway to make it just display successful message as a opposed to sending you to the mailchimp page?

    You can see it here at hfd.marketing

    1. Hi Terrell. To get the submit button to display inline, you’ll have to play with the margins. You might also have to reduce the size of the text fields as that might be causing the button to be bumped down.

      To change the sign up thank you page, you’ll have to go in and edit your form. Click on the ‘forms and response emails’ drop down and select ‘signup thank you page.’ There you can enter a URL of your own for subscribers to be redirected to.

    2. Hi! I had the same problem with button, which didn’t go horizontal and it solved by simply removing and placing the form code right after content code. Thank you Alyssa for working solution!

  6. Hey, I tried putting the CSS in my custom css, however the form isn’t going horizontal. Does this not work with Divi theme?

    1. I’m not too familiar with Divi, but it should work. You just might need put !important after the lines as the theme might be overriding the customizations. You can do that like this:

      .horizontal-mailchimp .clear {
           display: inline-block !important;
      }
      

      Just add the !important line after each of the lines in the code. If it doesn’t work, then it just might not be compatible or you might need to target different classes.

  7. Hey Allyssa!

    Thank you so much for this – so helpful…definitely bookmarking you!!

    So, quick (hopefully) question:
    I got everything to work great, but am wondering if theres a way to include the last name, and shorten that and the first name box? …so it would look sort of like: [_first_] [_last_] [_____ email_____] [_submit_]

    Does that make any sense? :[]

    Thanks for any help you can offer – you’ve already helped me enormously!
    (Just wish I had found your blog before the 5 others I tried first – ha!)

    thx!
    t

    1. You definitely can. You’ll need to make sure that the last name box is enabled in Mailchimp. The code then would automatically have the last name field included. Then you’ll have to play with the widths and alignment of each box so that they line up nicely.

  8. Hi Allyssa ,
    Not matter what, I can´t this make work for me.

    this is my html code , I am using siteorigin and pagebuilder plugin

    Sign up for my newsletter!

    Nombre

    Tu Mejor Correo

    ———————————————————————————————————————
    And this is the code I add to my .css file
    /* puts Mailchimp fields in a row */
    .horizontal-mailchimp .mc-field-group,
    .horizontal-mailchimp .clear {
    display: inline-block;
    }

    /* hides the field labels */
    .horizontal-mailchimp label {
    display: block;
    height: 1px;
    text-indent: -9999px;
    }
    .horizontal-mailchimp {
    background: #eee;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    }
    @media only screen and (max-width: 768px) {

    /* stacks the form fields and makes them full width */
    .horizontal-mailchimp .mc-field-group,
    .horizontal-mailchimp .clear,
    .horizontal-mailchimp input {
    display: block;
    width: 100%;
    }

    /* adds spacing below form fields */
    .horizontal-mailchimp .mc-field-group {
    margin-bottom: 5px;
    }

    }
    But I don´t know what happen my theme don´t recognize the CSS code is like nothing happened

    thanks for the advice…

  9. Hi Alyssa! For some reason my “Subscribe” button isn’t aligning with the input….Do you have any idea why? My code is exactly the same as yours, I don’t understand why the Subscribe button keeps showing up at the bottom.

    Thank you!

    1. I have a feeling it might have to do with your theme. There might be styles already defined that the subscribe button is inheriting. You would have to counteract the styling by adding styling specific to that button. But what I would try first is adding !important to the display: inline-block line, like so: display: inline-block !important;

      1. Thanks, Allyssa! I tried that but it didn’t work either. I had the same feeling, I thought it had something to do with my theme but I tested with other themes and it wasn’t working either. I tested on a single html file on my computer and it works. I have no idea why this is isn’t working on WordPress, maybe it was already in the CSS files of the themes I teste like you said… But anyway, I used the float:left and made it work. Thanks for your help!

        1. I figured it out! It’s because of the new WordPress update. Remove this line from your Mailchimp code:

          That comment in the code ends up adding a paragraph between the email box and the submit button, which ends up pushing it to a new line. Removing it pushes the button back up.

          1. Holy shit, I would never think of that!!! Thank you so much, Allyssa! Your post helped me a lot 🙂

          2. Hi Allyssa,

            I’m happy you posted this explanation as well since when you mentioned it above in the code, I wondered whether you were throwing in a little chuckle for us… after all, how could a comment in the code mess things up? haha! Now I know.

            Thanks a lot for this article/tut. Going to try it out because I don’t know what the heck else to do!
            Take care,
            ~Kitty

  10. This is great – thank you.
    I just wonder whether it’s possible to have a mixed of horizontal and vertical.

    Like that:
    [ Email ]
    [ FName ] [ LName ]
    [ Phone ] [ submit button ]

    Thanks for any help.
    Christoph

  11. Hi there,

    I’ve been styling forms for about 6 months now so I’m fortunate I came across your site. I’m trying to style a mailchimp form and I just about have it right. Two things I need assistance with.
    1-Aligning the submit button properly.
    2-Making my phone and drop down fields wider.

    I do know there are two forms currently on the page. I was using the css on the old form to style the new one.

    Thank you for any guidance you can offer.

  12. This seems like a great tutorial! However I can’t get the submit button to push up even after removing that line, that says not to remove it. I also stylized my form to the way I want after watching another tutorial. I’m bookmarking this though and maybe I’ll refer back to it later for my site or when I work on another person’s.

    Thank you for sharing this though! There’s not many people giving in depth detail like this.

  13. Over a year later, but this blog post just saved me SO much stress, Allyssa! That dumb line that drops the Submit button to a new line is a new one to me, and it makes nooooo sense. Thank goodness you wrote this post!!

  14. Hi there Allyssa,

    I’ve had success creating a 2 column CF7 form but I recently switched to mail chimp. I styled the form but cannot get the form to go 2 column.

    Thanks

  15. Fantastic, thank you SO much Allyssa!! This made my day, no, my WEEK! I’ve been scratching my head for so long trying to figure this out! Fortunately, my theme has post CSS option so I can create different boxes for every post. Best free CTA option out there, thanks!! Best wishes from Norway, Rie Aleksandra

  16. I’m not sure what I’m doing wrong, but I can’t get it to go horizontal. All of the other CSS is doing what it should but the form is still in its original layout…

  17. Hi Allyssa, thanks so much for this. I have followed your instructions but still cannot get the button inline with the boxes, it is underneath rather than beside. I deleted the line of code that you suggest but it still hasn’t made a difference. Any ideas? Thanks, Gemma

    1. It could be that the boxes are too wide for your content area, which is pushing the button down. I would try playing with the widths of the fields and the button and see if that works.

    1. This is the most clear and comprehensive one so far, thank you very much! Could you please lead how can i add a form into footer as the same horizontal?

  18. Hey Allyssa, Thanks for this great guide! I was wondering how you got your field blocks to be thicker like that and your button to be styled like that? Is that something that the form just picked up from the CSS you already had on your site dictating things like forms and buttons?

  19. This was really helpful! Thanks!

    There are some more things I would like to do, though. The name and e-mail fields below this comment box leave the “name” and “e-mail” text above the boxes for entering those items. When I take away the part from your code that removes those text items altogether they end up next to the boxes.

    The boxes also end up very small and not very good looking. Can you point me to somewhere that shows me how to change the style of the boxes and surrounding text?

    Thanks!

    1. I found an easier solution to my problem.

      In a field I was able to add “display: inline-block” to both fields to make them get in line:

      First Name

      Email Address

      I did also set a custom width, but I do not know if that is necessary.

      /Martin

Leave a Comment

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