Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Support request] Mailchimp Signup Form in Page Header

Home Forums Support Mailchimp Signup Form in Page Header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #395991
    vincenzoquarta

    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

    GP Premium 1.4.3
    #396069
    Leo
    Staff
    Customer Support

    Hi there,

    How are you inserting it? Using shortcode?

    #396459
    vincenzoquarta

    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

    #396686
    Leo
    Staff
    Customer Support

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

    #396796
    vincenzoquarta

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

    #396879
    Leo
    Staff
    Customer Support

    Why did you think this is not the correct result?

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.