Problem with Iframe publish code

Good night to you ..

When I export to an HTML page, placing IFRAME. It does not stay full screen. I do not know what happens, that the form is disproportionate with the screen and when we change the page it zooms.

It zooms when we change pages.

What can I do in these cases?

If you prefer, I can give you the address to check.

Thank you.

Follow the pictures below.

I thank you

Please share to us the URL of your website where the actual form was embedded.

It will help us identify what could be the caused of issue if we can check it on the live form.

We will wait for your response.

Follow Link to analyze: http://martixsolutions.com.br/pesquisa/

It is worth noting that the same is not found in every resolution, and that when we change pages or enter some options it zooms

If you need to test do put the question a: 8064 and question two: 3091, so you will see that it zooms

I await

Thank you in advance.

I checked the site you provided (http://martixsolutions.com.br/pesquisa/) and I was able to encounter the issue you are reporting.

Can you try to re-embed your form using this iFrame embed code?

<iframe id="JotFormIFrame-70793509010654" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformz.com/70793509010654" frameborder="0" style="width: 100%; height: 613px; border: none;" scrolling="yes"> </iframe>

Remove the script code on the old iFrame embed code and just use the iFrame code above.

The zoom has actually been corrected ... But the form still does not occupy 100% of the screen that is open. It is small and does not adjust the resolution of the monitor.

If you view the site now, it remains unresolved for the monitor..... 

In this case can you fix it?

Thanks in advance.

Hi there,

Do you mean the form is not occupying the white spaces in the corners of the page as shown below?

In that case, the problem is actually on the page. You can add the following CSS code to the CSS of your page.

Good afternoon..

The same thing still persists. When I put it in the iframe it stays this way and so does not contain 100% of the browser resolution.

Does not occupy 100% of browser resolution

This happens when placing in iframe

As far as I could check this is due to how the form is embedded, so if you can add a CSS in your website to adjust the form, please try this code:

#JotFormIFrame-70793509010654{

    width: 102%!important;

    margin-top: -1%;

    margin-left: -1%;

}

Also, re-embed your iFrame and increase the height to be 762px. Here is the code:

<iframe id="JotFormIFrame-70793509010654" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformz.com/70793509010654" frameborder="0" style="width:100%; height:9053px; border:none;" scrolling="no"> </iframe>

And it should look like this:

Let us know how that worked for you.

Thank you!

Infelizmente, não funcionou muito, e no caso, houve um problema maior. Neste caso, ele tem um fundo enorme.

Como você pode ver na imagem abaixo ou no link: http://martixsolutions.com.br/pesquisa/

aguardo

Obrigado 

I checked the https://www.jotformz.com/form/70793509010654 was not being displayed on the website properly.

Upon investigating further on the source code of the website page, I noted that the html page actually have an invalid or incorrect web page structure.

The proper basic structure of a web page should have html, head, and body elements on it.

Please see this guide also http://www.wikihow.com/Create-a-Simple-Web-Page-with-HTML

Please try constructing first the  proper web page and then you can embed the form using its default embed code.

Let us know if still did not work.

I checked the site's HTML code. I found some errors, and I did the correction.

But the problem mentioned above still persists.

You could check for me, what could be wrong yet?

Because this form is for the company that we are going to present, so it is possible to buy.   

Link: http://martixsolutions.com.br/pesquisa/

I am anxiously waiting

Thank you

Hi,

Now that you did the correction on your website. Please re-embed your form in your website and adjust the height of the iframe into 762px and width into 103%.

iframe id="JotFormIFrame-70793509010654" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformz.com/70793509010654" frameborder="0" style="width:103%; height:762px; border:none;" scrolling="no"> </iframe>

Please also inject this custom CSS on your form:

iframe#JotFormIFrame-70793509010654 {

    margin-top: -10px;

    margin-left: -20px;

}

Hope this helps.
Regards.

Unfortunately it still has not resolved. How can they check the address.

I believe that the backgound is not adjusting because it is attributed to a px, in case it would have to be independent of the resolution adjust.

Where are these problems occurring

As you can see in the image below, it on page 2 does not allow scrolling.

I did the test by downloading the source code and it was correct.

But with iframe, it does not work.

If it is possible to verify what may be happening as soon as possible, thank you very much.

Following: Changed HTML, Changed CSS everything as it was passed and still persists with the background and form problem if you adjust the resolution of the monitors.

I am currently investigating the issue. Please provide me some time to further investigate the issue. I will get back to you as soon as I get a result.

Regards.

As per checking your HTML code, it seems that you have not added the style to your HTML. The width of the iFrame is still set to 100% and the CSS code for the iFrame is missing.

Can you try this HTML code and see if this will help fix the issue?

<html>

<head>

<title>Pesquisa de Clima Organizacional</title>

<meta charset="utf-8">

<style>

iframe#JotFormIFrame-70793509010654 {

   margin-top: -10px;

   margin-left: -20px;

   margin-bottom: -10px;

}

</style>

</head>

<body>

<iframe id="JotFormIFrame-70793509010654" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformz.com/70793509010654" frameborder="0" style="width:102%; height:762px; border:none;" scrolling="yes"></iframe>

</body>

</html>

I have set the width of the iFrame to 102% and added the CSS code in the HTML code.

Hi! Chriistian

Now he was more correct. But on the second page it shows with 2 sidebars

Another question, the background is a little enlarged.

Can this be fixed?

The scrollbar appears since the background is fixed and the form is scrolling on top of it. And since the form is long that's why the scrolling.

You can try this CSS to hide the scrollbar:

More about that you can read here: https://css-tricks.com/forums/topic/hide-vertical-scrollbar-but-still-scrollable/ 

Regarding the background you can insert this CSS in your Custom CSS field:

.supernova {

background-size:1600px!important;

}

That will scale the image, just adjust the number to fits your needs.

Let us know if you have any further questions.