Newsletter/Subscribe Bar with Mailchimp javascript.

[buckycore]

I don’t know if this out side the scope of Support, but I might as well ask. I’m using Mailchimp embedded short code with the Newsletter/Subscribe Bar. So far so good, but I want to have the UX pattern of having the input fields replaced with the jquery standard “thank you and check your inbox” after they’ve subscribed. I see that Mailchip provides a line of Javascript which provides at least the message portion. That’s fine for now. However It places the message at the bottom of the inputs and it’s not visible in your bar.

I put the JS line in the short code area of the newletter bar. I tried putting it in the custom JS area, but that didn’t work. If you have any recomended resource I can look at, that’s great. I’m experienced (as I’m actually a .NET developer) yet cautious, as I know themes and WordPress aren’t like building things from scratch. . If it’s a matter of some simple CSS modification, that’s fine too.

I’m providing the Mailchip code, and feel free to submit emails to my list: It’s a dummy one for testing which i’ll delete anything you submit right away.

*Mail chimp JS*
<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>

[Rui Guerreiro – SUPPORT]

Hi,

Try this custom css. Add it to the custom css option in the theme options.

#sf-newsletter-bar #mce-responses{
    display: block;
    position: absolute;
    top: -50px;
    width: 70%;
}

You can add additional css rules to it. It looks like this
https://www.dropbox.com/s/7u7rxcnkhjkxp7x/Screenshot%202016-04-06%2014.43.20.png?dl=0

Hope it helps.

-Rui

[buckycore]

Thank you so much! I’ll try this in a bit and get back to you

[buckycore]

It works sometimes, but other times it doesn’t. I was using a test page just to play with formatting, but something is wrong now. It doesn’t show up. I did a hard refresh as well.

Here’s the test page just to show you in contrast to the subscription bar.

http://featheredoutlaw.com/test/

[buckycore]

Sorry, I removed that test page just to see if having divs with the same ids was causing any problems.

[buckycore]

Last one. I figured it out. The message divs had inline styles with display set to none. I removed that in my test page, but saw it was still there in the subscription bar short code. All is working fine now.

[Mohammad – SUPPORT]

Hi,
I am glad that you managed to resolve the issue.
Thanks
Mohammad

[adriboixet]

Hi buckycore, I’m trying to do the same, how to display the message in the newsletter bar?

Thanks!!

[David Martin – Support]

Just replied: http://www.swiftideas.com/forums/topic/newsletter-response/

Thanks.

[nordicmuse]

Good Evening,

I have set up a mailchimp account and I now have a signup form URL for my newsletter. How do I update this?

Thanks

Jenny

[Rui Guerreiro – SUPPORT]

Hi,

Check here the documentation. you need to change the url on the form by your mailchimp url.

http://www.swiftideas.com/knowledgebase/replicate-the-newsletter-bar-form/

-Rui