magnific popup missing form - Support | Kriesi.at

Tagged: iframe, Magnific popup, sender form

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
March 16, 2025 at 6:20 pm #1479484
Munford
Participant
on the page below I have 2 links called TILMELD DIG VORES NYHEDSBREV.
The top one is in a popup made with the enfold magnific popup code:
```
function inline_popup_enabler(){ ?>
    <script>
    (function($){
      $(window).load(function() {
          $('.inline_popup').magnificPopup({
            type:'inline',
            midClick: true 
          });
      });
    })(jQuery);
    </script>
<?php }
add_action('wp_footer', 'inline_popup_enabler');
```
I am then using “mfg-hide” in a color section containing some text and a sender.net widget with a signup form. The popup works but the form is not showing up.

The one on the bottom (which is a footer page) is done using an iframe and you can see the form widget there. It’s the same widget I uses in the tops ection. I also tried adding a code block to that top color section with the javascript I got off the sender page for the form.
It’s this and they told me to put all the code together in a code block, but that doesn’t work either:
```
<script>
  (function (s, e, n, d, er) {
    s['Sender'] = er;
    s[er] = s[er] || function () {
      (s[er].q = s[er].q || []).push(arguments)
    }, s[er].l = 1 * new Date();
    var a = e.createElement(n),
        m = e.getElementsByTagName(n)[0];
    a.async = 1;
    a.src = d;
    m.parentNode.insertBefore(a, m)
  })(window, document, 'script', 'https://cdn.sender.net/accounts_resources/universal.js', 'sender');
  sender('4f4c8522254761')
</script>

<div style="text-align: left" class="sender-form-field" data-sender-form-id="m8a4fv8kegj7l6vonkw"></div>
```
Can you take a look? I like the top popup better but need the form to show up.

Thanks
Nancy
- This topic was modified 1 week, 5 days ago by Munford.
March 17, 2025 at 12:03 pm #1479530

Munford
Participant

I also noticed that if I set the page with the magnific to be the footer, then when I click on the popup text it scrolls back up to the top of the page.

March 22, 2025 at 6:38 pm #1479918

Mike
Moderator

Hi,
When I test your script iframe “header” “body” tags are empty, so the iframe is not loading.
I don’t know why. I don’t see any errors.

Best regards,
Mike

March 25, 2025 at 10:41 am #1480121

Munford
Participant

could you take a look at the page? I can’t find any errors and it should work in the popup either as a widget or code, right?

March 25, 2025 at 1:32 pm #1480132
Guenni007
Participant
please remember that ( this is definitly not the trouble with your scripts – but just to mention )
```
$(window).load(function() {
```
is deprecated since jQuery 3.x

you had to use now:
```
$(window).on('load', function(){
```
March 25, 2025 at 2:56 pm #1480136
Munford
Participant
I don’t write or read php/java script so… not sure.
Shouldn’t the widget I have on the popup work fine? It works in the iframe in the footer text link.
- This reply was modified 3 days, 18 hours ago by Munford.
March 25, 2025 at 5:26 pm #1480153

Munford
Participant

Another question about the popup link in an iframe in my footer – can that be centered on the page? I have some css that is making it 50% width but it’s aligned left. see attached popup that is off center.

March 26, 2025 at 4:51 am #1480177
Ismael
Moderator
Hi!

Thank you for the update.

Try adjusting the margin of the iframe container to align it to the center.
```
#top .mfp-iframe-scaler {
    width: 60%;
    margin: 0 auto;
}
```
View post on imgur.com

Cheers!
Ismael
March 26, 2025 at 8:59 am #1480187

Munford
Participant

thanks Ismael.
Could you take a look at the problem with the magnific popup on that page? I have a widget that is not showing up with a sender.net form in it. I prefer the look of that popup to the iframeif possible.
thanks
Nancy

March 26, 2025 at 9:21 am #1480190
Guenni007
Participant
on the magnificPopup script you have that trigger class: inline_popup – did you set it on a parent-element of the button?
The button itself got an ID to open – did you think of to give the target that ID – f.e. on your div:
```
<div id="target-ID" style="text-align: left" class="sender-form-field" data-sender-form-id="m8a4fv8kegj7l6vonkw"></div>
```
March 26, 2025 at 10:07 am #1480192

Munford
Participant

I didn’t write that script but got it from Sender.net with the form I built there.
I don’t really understand javascript myself…
I gave the color section with the widget and code an ID “popup” and “mfp-hide” custom class,
then my link is: <p style=”text-align: left;”>TILMELD DIG NYHEDSBREVET</p>.
should I change the script code?

March 27, 2025 at 4:46 am #1480228
Ismael
Moderator
Hi,

Thank you for the update.

Try to remove the sender script from the color section or code block, leave the div container, then replace the inline_popup_enabler with this code.
```
function inline_popup_enabler(){ ?>
    <script>
    (function($){
        $(window).on('load', function() {
            $('.inline_popup').magnificPopup({
                type: 'inline',
                midClick: true,
                callbacks: {
                    open: function() {
                        (function (s, e, n, d, er) {
                            s['Sender'] = er;
                            s[er] = s[er] || function () {
                                (s[er].q = s[er].q || []).push(arguments);
                            }, s[er].l = 1 * new Date();
                            var a = e.createElement(n),
                                m = e.getElementsByTagName(n)[0];
                            a.async = 1;
                            a.src = d;
                            m.parentNode.insertBefore(a, m);
                        })(window, document, 'script', 'https://cdn.sender.net/accounts_resources/universal.js', 'sender');
                        
                        sender('4f4c8522254761');
                    }
                }
            });
        });
    })(jQuery);
    </script>
<?php }
add_action('wp_footer', 'inline_popup_enabler');
```
Let us know the result.

— https://dimsemenov.com/plugins/magnific-popup/documentation.html#api

Best regards,
Ismael
March 27, 2025 at 12:16 pm #1480267

Munford
Participant

OK now my code block is just:
<div style=”text-align: left” class=”sender-form-field” data-sender-form-id=”m8a4fv8kegj7l6vonkw”></div>
and I added the sender code to my functions.php but the form is still not there.

March 27, 2025 at 6:06 pm #1480281

Guenni007
Participant

did you try ismaels code?
in your div there is no id – only a data-sender-form-id thats why i ask.

but: you see on ismaels code the callback – so this might be work as expected.
maybe a delegate : ‘a’,

is missing – just try first the code above.

March 27, 2025 at 6:36 pm #1480282

Munford
Participant

yes I added Ismael’s code and then only that div is in the code block.
That was what sender.net says to use.
I can’t write or really read javascript

March 28, 2025 at 5:35 am #1480307

Ismael
Moderator

Hi,

It works when we disable the Sender.net email marketing plugin. This plugin registers and initializes the same script, which conflicts with the callback function in the lightbox popup. Do you need this plugin?

View post on imgur.com

Best regards,
Ismael

March 28, 2025 at 9:57 am #1480327
Munford
Participant
The form shows up without the plugin, but it makes the page scroll to the top when I open it.
I see a problem also if I click on the link and then close it, if I click on it again the form doesn’t show up.
```
/*sizing for popup tilmeld form*/
@media only screen and (min-width: 768px) { 
#top .mfp-inline-holder .mfp-content {
width: 50%!important;
}}

/*@media only screen and (max-width: 768px) { 
#top .mfp-iframe-scaler {
    height: 90vh;
}}*/
@media only screen and (min-width: 768px) { 
#top .mfp-iframe-scaler {
    width: 60%;
    margin: 0 auto;
}}
```
Is there a way to center align the form in the popup if I wanted the whole thing centered?

View post on imgur.com

or else make the popup narrower so it doesn’t look like this on larger screens?

View post on imgur.com

The plugin is what was giving me the widget that I use in the iframe link in the active footer, which is disabled now.
thanks for the help
Nancy
- This reply was modified 21 hours, 14 minutes ago by Munford.
- This reply was modified 21 hours, 5 minutes ago by Munford.
- This reply was modified 20 hours, 45 minutes ago by Munford.
- This reply was modified 20 hours, 44 minutes ago by Munford.
- This reply was modified 20 hours, 18 minutes ago by Munford.
- This reply was modified 20 hours, 16 minutes ago by Munford.
Author

Posts

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.