[Support request] Make MailChimp Embedded Form Match Theme

Home Forums Support [Support request] Make MailChimp Embedded Form Match Theme

Home Forums Support Make MailChimp Embedded Form Match Theme

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #959310
    Linda

    Hi Support,

    I’m trying to make an embedded MailChimp sign up form match our GP theme button colours.

    The initial code from MailChimp is on this page.

    In case this is more helpful, here is the actual code for that form:

    <!-- 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:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
    	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
    </style>
    <div id="mc_embed_signup">
    <form action="https://mygoforthegreen.us5.list-manage.com/subscribe/post?u=472649cfd326106f27acf8a83&id=c89680e79a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
        <div id="mc_embed_signup_scroll">
    	<h2>Get My Tips</h2>
    <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
    <div class="mc-field-group">
    	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
    </label>
    	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    </div>
    <div class="mc-field-group">
    	<label for="mce-FNAME">First Name  <span class="asterisk">*</span>
    </label>
    	<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
    </div>
    <div class="mc-field-group">
    	<label for="mce-LNAME">Last Name </label>
    	<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
    </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_472649cfd326106f27acf8a83_c89680e79a" tabindex="-1" value=""></div>
        <div class="clear"><input type="submit" value="Get My Tips" name="subscribe" id="mc-embedded-subscribe" class="button"></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';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
    <!--End mc_embed_signup-->

    I’ve managed to change its label from Subscribe to Get My Tips, but would like to be able to:

      – make the fill in blanks shorter
      – enlarge height of button
      – make button orange (hover: green) as in theme

    Is this possible in a way that would work with GP and on mobile?

    Any suggestions or redirection links much appreciated!!

    Linda

    #959418
    Leo
    Staff
    Customer Support

    Hi there,

    Have you checked with the plugin support first?

    Where can I see the form in your site?

    #959429
    Linda

    Hi Leo,

    Sorry, I’d been working on it in draft and forgot to update the page before contacting you. The link in my first message will now take you to the page with the embedded form.

    Yes, I’ve been in touch with MailChimp. Their support referred me to articles I’d already researched, but they don’t tell me what to put where.

    However, I realize this is not exactly a GP theme issue: it’s MailChimp’s issue that their form doesn’t adopt my theme’s styles. If I need to try elsewhere, I understand … just let me know. You guys are great so I don’t want to overstep!!

    Linda

    #959483
    Leo
    Staff
    Customer Support

    I’m still not seeing where the MailChimp form is on the page you linked.

    Their support referred me to articles I’d already researched, but they don’t tell me what to put where.

    Maybe try to follow up with them to get more details?

    We really need to be careful how much support we provide for other plugins and suggest the right approach (check with plugin support, use browser inspect etc).

    #959542
    Linda

    I understand, Leo, and you’ve already been very generous with suggestions about a number of items not exactly GP caused! 🙂

    Here’s the link: https://new.mygoforthegreen.com/get-my-tips-2/.

    Can you please copy and paste to see it. I can’t seem to make it appear using the link option above. Duh.

    I realize I hadn’t changed the first link so it still went to the Preview page. Sorry.

    I’ll keep bugging MailChimp and working with the Inspector … both positive suggestions.

    Thanks for your suggestions!

    Linda

    #959552
    Leo
    Staff
    Customer Support

    Have you tried the code I showed in the screen capture here?
    https://generatepress.com/forums/topic/style-mailchimp-form/#post-955469

    #959585
    Linda

    Not yet, Leo, but I sure will. Thank you. Will post results.

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