Embeed iframe on HTML Field doesn’t works

Hello @memcaliber

Hope you’re doing well today! Thank you for reaching out to us.

Indeed the iframe is being sanitized if added to the HTML field in Forminator, we do have a bug report related to this issue and the developers are already working on the fix. However, as of now, I cannot confirm any ETA as to when the fix will be released.

Meanwhile, you can use the below custom snippet that would render the iframe within the form on the front end.

<?php

if ( ! function_exists( 'wpmudev_forminator_enable_iframe' ) ) {

	function wpmudev_forminator_enable_iframe() {

		$form_exists = has_shortcode( get_the_content(), 'forminator_form' );
		if ( $form_exists ) {
			?>
        <script type="text/javascript">
        (($, d) => {
            $(d).ready(function() {
                $("#forminator-module-33 #html-1").html('ADD_IFRAME_HERE');
            });
        })(jQuery, document);
        </script>
<?php
		}
	}
	add_action(
		'wp_footer',
		'wpmudev_forminator_enable_iframe',
		10
	);
}

In the above snippet, you will need to make a couple of changes as mentioned below:

– Update the #forminator-module-33 with your form ID (e.g. #forminator-module-XX where XX is your form ID)
– Replace #html-1 with the HTML field ID from your form.
– Add the iframe snippet where it mentions ADD_IFRAME_HERE

You can add the custom snippet as a mu-plugin inside the /wp-content/mu-plugins/ directory. You can refer to the below guide on how you can add a mu-plugin.

https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins
and

Must Use Plugins

Kind Regards,
Saurabh

Hi @memcaliber,

i have a question about ID of my form, on image bellow.. is that the ID?

Correct, what you have shared in the screenshot is the form ID.

I don’t think I can “inject” code into ID #html like the scenario above.
is this caused by elementor?
because when I try to do console.log() in the javascript area, console.log is read fine in the browser console

I’m not sure whether you understand the issue raised in the above context. The suggestion in our previous response is to add a custom code as a mu-plugins and update the code with your form ID.

Based on the screenshot the form ID is 1049, so the following line will change from:

$("#forminator-module-33 #html-1").html('ADD_IFRAME_HERE');

To:

$("#forminator-module-1049 #html-1").html('ADD_IFRAME_HERE');

Is that you have made the changes?

The “Add_IFRAME_HERE” is where you add your iframe ie:

$("#forminator-module-1049 #html-1").html('<iframe src="URL-to-your-site"></iframe>');

I did give a quick test and it does work fine by replacing the HTML field in forminator by the iframe code which is added in the above line.

The above should work fine irrespective of Elementor.

Could you please share the page URL where you have added the form and also share the final code after the mentioned changes?

Looking forward to your response.

Kind Regards,

Nithin

Hi @memcaliber,

I can confirm the code works on my site when tested, so as mentioned in the previous response we’ll need access to the page and also the final code which you have added after the suggested changes.

If you don’t want to share the URL or the code publicly, then please send us an email to [email protected] with the information using this template:

Subject: "ATTN: WPMU DEV support - wp.org"

Message: Ticket URL

Looking forward to your response.

Kind Regards,

Nithin