How to make subscribe button on same line as input box in Mailchimp embed form

Viewed 267

Right now, I have it so the subscribe button and the field for inputting email are on separate lines and the button size is small with awkward spacing in between the field and the button. I'd like to fix these issues by having the button and the input field for email on the same line. If you could just add/remove whatever needs to be done to this I would REALLY appreciate it:

My code for this Mailchimp embed form is like this right now:

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#ce3939; clear:left; font:14px Helvetica,Arial,sans-serif;  width:600px; color: white}
h2 {color: white;}
   #mc-embedded-subscribe { background-color: #930e0e !important; }
#mc-embedded-subscribe:hover { background-color:#ce3939 !important; }
</style>
<div id="mc_embed_signup">
<form action="https://pghcitypaper.us13.list-manage.com/subscribe/post?u=7bf7a7c4fa696150853fb01ba&amp;id=36c5a7a88b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
  
    <h2>Subscribe to our newsletter (or else)!</h2>

<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div hidden="true"><input type="hidden" name="tags" value="118"></div>
    <div id="mce-responses">
        <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_7bf7a7c4fa696150853fb01ba_36c5a7a88b" tabindex="-1" value=""></div>
   <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
1 Answers
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#ce3939; clear:left; font:14px Helvetica,Arial,sans-serif;  width:600px; color: white}
h2 {color: white;}
   #mc-embedded-subscribe { background-color: #930e0e !important; width: auto !important; margin: 0 0 0 20px !important; padding: 0 20px !important;}
#mc-embedded-subscribe:hover { background-color:#ce3939 !important; }
.new{display: flex; align-items: center;}
</style>
<div id="mc_embed_signup">
<form action="https://pghcitypaper.us13.list-manage.com/subscribe/post?u=7bf7a7c4fa696150853fb01ba&amp;id=36c5a7a88b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
  
    <h2>Subscribe to our newsletter (or else)!</h2>

<div class="mc-field-group">
    <div class="new">
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
    </div>
</div>
<div hidden="true"><input type="hidden" name="tags" value="118"></div>
    <div id="mce-responses">
        <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_7bf7a7c4fa696150853fb01ba_36c5a7a88b" tabindex="-1" value=""></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
Related