[tats86Participant]

Hi I created a popup form on Mailchimp and would like to add it to my site’s homepage.

Where should I embed the code provided by mailchimp? I’ve been looking for the answer but nthing definite. The Mailchimp addon doesn’t seem to allow the creation of popup forms. Am I correct?

Also, is there a way to have the popup show up when a certain % of a blog is read, if so, how?

My website is aimetamarque.com

Thank you!

[RahulModerator]

Hi there,

Thanks for writing in. All embed code should be placed before </body>. Please follow this:

Because this requires a template change, I’d advise that you set up a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Then add this code at your child theme’s functions.php

add_action('wp_footer','footer_embed_codes', 999);

function footer_embed_codes() {?>PASTE YOUR SCRIPT CODE<?php }

Hope this helps.

[tats86Participant]

Thank you! It works. The only this is that the close button seems to appear behind the sidebar. Is there a way to have the popup window appear in front of all elements? Thanks!

[RahulModerator]

Hey There,

Glad it worked out for you. It loads just fine for me. Can you please share a screenshot so I can look into it further?

Thanks

[tats86Participant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Thank you for the screenshots.
Upon checking, the popup form is not responsive. It has definite 980px width. This will cause overflow on smaller screens. See attached screenshot. Please check in with the developer about this.

Hope this helps.

[tats86Participant]

Ok thanks I’ll check with them!

[ChristianModerator]

You’re welcome. 🙂

[Kim gParticipant]

I followed this code in my functions.php in my child theme.

The pop-up appears, however I have 2 issues:

1. The popup falls behind the header. See image:
https://softballsoul.com/wp-content/uploads/2016/07/image1.png

2. on mobile it doesn’t show up but it creates a lot of white space on the right of every page but home page. See image:
https://softballsoul.com/wp-content/uploads/2016/07/Image2.png

I will attach login information in private reply below.

https://softballsoul.com/

[Kim gParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Kim,

1. You can add this under Custom > Edit Global CSS in the Customizer.

.mc-modal {
    z-index: 99999;
}

2. Can’t seem to replicate this issue on my end. Can you send a wider screenshot so we can see the space you are referring to clearly.

Thanks

[Kim gParticipant]

1. Did not do anything- the popup is still appearing behind the header. Tested on chrome, safari and firefox.

2. As I mentioned the home page is fine. Please, on your mobile device go to:
https://softballsoul.com/about-us/ . It should not scroll left and right at all. Scroll to the right and you will see lots of white space. Made you a video of it on phone:

Also made you a video of it on iPad:

3. On ipad the close button is inaccessbible:
https://softballsoul.com/wp-content/uploads/2016/07/IMG_0087.png

Please advise and thanks,
Kim

[RadModerator]

Hi there,

1. Please change it to this,

.masthead {
position: relative;
    z-index: 1000;
}

2. This as well,

.site {
overflow: scroll;
}

3. And this one,

.mc-modal {
    top: 15% !important;
}

Hope these helps.

[Kim gParticipant]

1. Great, than you! fixed!

2. The website is still scrolling left to right with lots of white space:
As I mentioned the home page is fine. Please, on your mobile device go to:
https://softballsoul.com/about-us/ . It should not scroll left and right at all. Scroll to the right and you will see lots of white space.

see videos above.

3. fixed! thanks again.

So what remains is the white space to the right issue. Look forward to getting this final piece resolved.

Kim

[JadeModerator]

Hi Kim,

Please try to add this code in the customizer:

.site {
    overflow: scroll;
    overflow-x: hidden;
}

Hope this helps.

[Author]

Posts