HTML iframes reload on every field change

Hi @codimex

I hope you’re well today!

I tested it and I can confirm that issue. You’re also right that it’s about iframe in general – it doesn’t matter if you load Google Map into it or any other content.

It seems to be related to part of the JS that’s integral to Forminator and I’m afraid there’s no way to change that currently in plugin/plugin settings but I did some more research and came up with a possible workaround.

It seems to be working perfectly fine on my end so I think you could give it a try. I’ll refer to the form that you shared as example:

1. edit the “{html-1}” field where you have map code and remove entire iframe/map HTML from it so it would be “empty” – but keep the field in the form along with its label

2. create an empty file with a .php extension (e.g. “forminator-inject-gmap.php”) and copy this code into it:

<?php 

function forminator_append_gmap() {
	
	?>
    <script type="text/javascript">
    jQuery(function($) {
		
	$('#html-1').append('YOUR_IFRAME_HTML_HERE');
	
	});
	</script>
	<?php
}

add_action( 'wp_footer', 'forminator_append_gmap', 99 );

3. Note the #html-1 selector – if you keep the “html-1” field on form, you don’t have to change it; if you want to put map in other location you may need to find and adjust CSS ID of the field after which the map should be “injected”.

4. the YOUR_IFRAME_HTML_HERE string should be replaced with the entire IFRAME HTML tag that loads the map – the very same that you previously used inside HTML field.

5. upload the file into /wp-content/mu-plugins folder on your server and it should work out of the box.

Best regards,
Adam

JUST WOW WOW WOW!!!!! Such an impressive, detailed and tailored answer. You really rock, guys. This feels like a Premium support.

I just came home and I can’t wait to try this workaround (first, I need to feed the cat… she’s staring at me right now). Allow me to take my time to get into these instructions properly, and let me back to you with my feedback.

Big, big thank you in advance.

Ok, the cat is fed, the workaround is implemented. It works! But, unfortunately, the map I’m working on is a little complex (it’s not an iframe, but an async defer script with markers that the user can drag). I’ve written all my code in a shortcode, but I suspect shortcodes can’t be executed on php.

BUT, your code has opened me new ways to explore to solve that (maybe inserting a snippet using header/footer plugin, maybe using append after the form…), and that’s what I’m going to do. I guess this one goes from this point beyond your scope of support, and today’s a big one with the new promising update. Thank you! Thank you! Thank you!

Hi @codimex

You are welcome.

If it is a shortcode you can try the solution shared on https://www.ads-software.com/support/topic/including-a-shortcode-into-html-field/

It has some limitations for example if it includes another form in the shortcode as you can see on the thread.

Best Regards
Patrick Freitas

Thank you again! Yes, I was able to include shortcodes in a HTML field using a similar method, but still, the map reloads itself on every field change, which, on the other hand, makes perfect sense because HTML fields are to reflect other fields’ changes. I’ll perform a deeper research (maybe blocking only iframes to be reloaded) and I’ll post a solution back here, if I come up with it.

Feel free to mark this as resolved. Thank you!!!

Hi @codimex

Yes, it is because the HTML can accept macros like {field-id} and will update on the fly.

We are marking it as resolved, feel free to ping us any time you need.
Best Regards
Patrick Freitas