How to Add a Horizontal Mailchimp Form • AK Brown

I have been trying for THE LONGEST to create an inline horizontal opt-in form for Mailchimp. If you’re not aware, Mailchimp doesn’t give you the option to create an inline form directly in their form builder, which means you have to do some custom coding to get this done.

Now, I have some coding background, but the tutorials I’ve encountered literally made my head spin and I said fuck it. That’s when I resorted to using 3rd party sites like Convertful to create inline horizontal forms for Mailchimp. Don’t get me wrong, I LOOOOOOOOVE Convertful, but I’m making a conscious effort to eliminate as many 3rd party apps and sites as I can, which meant mastering the code needed for my form, and guys…I DID IT!

I finally figured out how to create an inline horizontal Mailchimp form. Best of all, I was able to understand the coding enough to where I can show you how to create your own in just 3 easy steps! Below is the code needed to create your form, you just need to change two pieces of the code, add in your CSS to your theme and BOOM-done!

<div class="horizontal-mailchimp">
     <h2>Sign up for freebies!</h2>
     <!-- Begin MailChimp Signup Form -->
     <div id="mc_embed_signup">
          <form action="https://werejustbloggers.us12.list-manage.com/subscribe/post?u=b38348e963ae415366792ad09&id=71e8555b1d
" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
          <div id="mc_embed_signup_scroll">
               <div class="mc-field-group">
                    <label for="mce-FNAME">First Name </label>
                    <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="name">
               </div>
               <div class="mc-field-group">
                    <label for="mce-EMAIL">Email Address </label>
                    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="email">
               </div>
               <div id="mce-responses" class="clear">
                    <div class="response" id="mce-error-response" style="display:none"></div>
                    <div class="response" id="mce-success-response" style="display:none"></div>
               </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
               <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_b38348e963ae415366792ad09_71e8555b1d" tabindex="-1" value=""></div>
               <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
          </div>
          </form>
     </div>
     <!--End mc_embed_signup-->
</div>

STEP 1: Find this section of coding in your Mailchimp embed form and replace:

STEP 2: Find this section of coding in your mailchimp embed form and replace:

STEP 3: Add the below CSS code into your theme and voila!

.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;
     }
		
}

I hope this helps anyone reading this, because I know I jumped for joy when I mastered this code! Don’t forget! Join my newsletter for more blogging tips and freebies!