[Support request] Mailchimp Signup Form in Page Header

[Vincenzo Quarta]

Hi,
I’m trying to insert a Mailchimp Signup Form in page header.
I’m using ‘naked form code’ and custom CSS by Simple CSS but customizations (background, button, etc.) don’t work.
Thank you for reply.
Vinz

[Leo]

Hi there,

How are you inserting it? Using shortcode?

[Vincenzo Quarta]

Hi Leo,
I insert this code in Page Header

<div id="mc_embed_signup">
    <form action="//heyimcat.us8.list-manage.com/subscribe/post?u=0b5586be71b0fee16a03f5684&id=e41ec18eab" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">

        <!-- Text Input Field -->
        <div class="mc-field-group"><input type="email" placeholder="Your Email" name="EMAIL" class="required email" id="mce-EMAIL"></div>
        <!-- /Text Input Field -->

        <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;"><input type="text" name="b_0b5586be71b0fee16a03f5684_e41ec18eab" tabindex="-1" value=""></div>

        <!-- Submit Button -->
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        <!-- /Submit Button -->
        </div>
    </form>
</div>

and this one in Simple CSS

#mc_embed_signup { border: none; text-align: center; width: 100%; } /* Signup form container */

.mc-field-group { display: inline-block; } /* positions input field horizontally */

#mce-EMAIL { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1em; border: 2px solid #ABB0B2 ; color: #343434; background-color: #fff; padding: .7em 9em .7em 1em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: inline-block; margin: 0; } /* Input Styles */

.clear { display: inline-block; } /* positions button horizontally in line with input */

.button { font-family: 'Helvetica Neue', Helvetica,  Arial, sans-serif; font-size: 1em; letter-spacing: .03em; color: #fff; background-color: #2386C8 ; padding: .7em 2em; border: 2px solid #2386C8 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: inline-block; margin: 0; } /* Button Styles */

:-webkit-input-placeholder { color: #ABB0B2 ; } /* WebKit browsers */ 
:-moz-placeholder { color: #ABB0B2 ; } /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #ABB0B2 ; } /* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #ABB0B2 ; } /* Internet Explorer 10+ */

@media (max-width: 768px) { /* positions input field and button underneath each other with 100% width for tablet and mobile */
  
.mc-field-group { display: block; max-width: 100%; }
#mce-EMAIL { padding: .7em 0 .7em 1em; width: 96%; margin: 0; }
.clear { display: block; width: 100% }
.button { width: 100%; margin: .5em 0 0 0; }
  
}

but this is the result

instead of this

[Leo]

If you insert the code in normal content does it show up correctly?

[Vincenzo Quarta]

No,
also in post, page or section is the same result

[Leo]

Why did you think this is not the correct result?

Have you contacted MailChimp? They should be more familiar with their HTML and CSS.

[Author]

Posts