Is it possible for the height to be automatic?

Hello @klingbeil

It applies the automatic height to the iframes too, but when you insert the shortcode as follows:

[CP_CALCULATED_FIELDS id="5" iframe="1"]

Best regards.

I understood that part, no problem there. Does it automatically adjust the height without entering the height value in the iframe code we shared? So how do we implement it in the sharing code below?

<iframe src="https://www.domain.com/?cff-form=5" style="width:100%; height:820px; overflow: hidden; border: none;" scrolling="no"></iframe>

Hello @klingbeil

You can try with a a piece of code similar to:

<iframe src="https://www.domain.com/?cff-form=5" style="width:100%; height:820px; overflow: hidden; border: none;" scrolling="no" onload="this.width=this.contentWindow.document.body.scrollWidth;this.height=this.contentWindow.document.body.scrollHeight+40;this.style.minHeight='auto';"></iframe>

However, the previous code would work depending the source (where the form is ) and destination (where the iframe is inserted) domains.

Best regards.

Now here height:820px; There is still a height value. I tried something to make the height automatic, but it didn’t work.

height:820px; I can’t find how to adjust the height without it. This expression is mentioned in the code you gave.

By the way, this code did not work. The iframe does not come, but the height does. The iframe content is not loading.

<iframe src="https://www.domain.com/?cff-form=5" style="width:100%; height:820px; overflow: hidden; border: none;" scrolling="no" onload="this.width=this.contentWindow.document.body.scrollWidth;this.height=this.contentWindow.document.body.scrollHeight+40;this.style.minHeight='auto';"></iframe>

Hello @klingbeil

Please check the points described below:

First, you must enter your website’s domain, I assume that https://www.domain.com is not your domain.

Second, you must tick the checkbox in the troubleshoots area, accessible through the “Calculated Fields Form > Troubleshoots Area & General Settings” menu option, to allow accessing the forms directly.

Finally, you must ensure your server allows your website pages to be loaded into iframe tags in external domains (If you don’t know how to configure it in your server, please ask your hosting provider).

Best regards.

Now I guess I didn’t explain the problem fully. If I do not specify a higher value within the iframe, the forms appear corrupted on sites that use it. Naturally, I need to adjust the exact size to keep it in shape. Instead of adjusting the distribution for each form, it is my responsibility to set automatic forms on the sites used with the iframe code I shared. Which js I didn’t manage to merge. There must be a way.

Hello @klingbeil

The method I recommended previously is valid if both the page where you insert the iframe tag, and the URL you load into the iframe belong to the same domain. Otherwise, the browser’s security rules will prevent the page code can access the DOM of the iframe content, and you will get an error similar to the following one in the browser’s console:

Uncaught DOMException: Failed to read a named property ‘document’ from ‘Window’: Blocked a frame with origin “ABC” from accessing a cross-origin frame.
at HTMLIFrameElement.onload (XYZ)

If the page and the iframe content belong to different domains, you must include the iframe tag and a script block on the page. The script block must implement an event listener for the message event that will adjust the iframe height when it receives the height from the form. Also, the form must send a “postMessage” to the parent with the form height.

If you need a custom coding service to implement both the code to include in the pages and forms, do not hesitate to contact us directly through the plugin website:

https://cff.dwbooster.com/customization

Bet regards.

For example, we gave the height value; 800px, but when the website using it adds this, there is no problem in the desktop version. But there is a big gap in the mobile version. So we can’t figure this out. Yes, it is available on our own site, it automatically adjusts the height very well. However, when the opposite site is added, unfortunately it is not fully sufficient and we cannot find a solution. In this case, unfortunately, we lose value as a brand. It would be great if a solution to this situation could be found.

Hello @klingbeil,

As we described in the previous entry, to embed the form in third-party websites’ domains and adjust the iframe tags dynamically, you must include the iframe tag with an additional script block (not only the iframe). The script block must implement an event listener for the message event that will adjust the iframe height when it receives the height from the form. So, the form must send a “postMessage” to the parent with the form height.

If you need us to implement this code for you, do not hesitate to contact us through the plugin website:

https://cff.dwbooster.com/customization

Bet regards.

I sent a message. This problem is a general problem, but if it is solved, I am ready to pay a reasonable fee.

Hello @klingbeil,

Thank you very much we will respond to your email from our website. However, it is not a general problem. The main purpose of the plugin is to generate forms for a WordPress based website, not to distribute the form to third party domains.

Best regards.