Search…

X3 Photo Gallery Support Forums

Search…
 
joeflahive
Topic Author
Posts: 1
Joined: 20 Sep 2019, 00:37

Iframe embedding external contact form

20 Sep 2019, 12:50

Having an issue loading an embedded a contact form.  A white rectangle flashes before the form loads.

https://joeflahive.com/booking/

Here's the embedded code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ ... pt><iframe src="https://hello.dubsado.com:443/public/fo ... 5f6033ae65" frameborder="0" style="width:1px; min-width:100%;"></iframe><script type="text/javascript">setTimeout(function(){iFrameResize({checkOrigin: false, heightCalculationMethod: "taggedElement"});}, 30)</script>
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Iframe embedding external contact form

20 Sep 2019, 23:26

joeflahive wrote:Having an issue loading an embedded a contact form.  A white rectangle flashes before the form loads.
https://joeflahive.com/booking/
Yes I can see that. What is happening is that your iframe src is loading, and the actual form (page content) appears before the stylesheet (CSS) is loaded. Before the stylesheet is loaded, your form is therefore un-styled, and once the CSS is loaded, the form will "flash" as styles are applied. In your case, the FOUC (flash of unstyled content) becomes very clear because it changes from white to transparent background (in which case, the dark background from X3 shows).

Unfortunately, X3 has no control over content that is loaded into iframes from other websites. I was a bit surprised that CSS was loading AFTER the form appears, but this could be a feature of the form (many reasons it would do that). Is this a 3rd party form service? Perhaps you need to post in their support. X3 does not control that flash of styles as CSS is loaded into the iframe.

The form itself after loaded seems to work fine though, no?