What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Problem with Iframe publish code

    Asked by arkhosxx on March 22, 2017 at 05:42 PM

    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

     

    Screenshot
  • Profile Image
    JotForm Support

    Answered by jonathan on March 22, 2017 at 10:38 PM

    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.

  • Profile Image

    Answered by arkhosxx on March 23, 2017 at 07:21 AM

    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.

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 23, 2017 at 10:01 AM

    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" onload="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.

  • Profile Image

    Answered by arkhosxx on March 23, 2017 at 10:10 AM

    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.

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 23, 2017 at 11:59 AM

    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.

     

    body {
    margin: 0px;
  • Profile Image

    Answered by arkhosxx on March 23, 2017 at 12:07 PM

    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

     

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 23, 2017 at 02:57 PM

    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" onload="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!

  • Profile Image

    Answered by sleeykersx on March 23, 2017 at 03:34 PM

    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 

  • Profile Image
    JotForm Support

    Answered by jonathan on March 23, 2017 at 04:48 PM

    I checked the website and I see the problem as well. The form 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.

  • Profile Image

    Answered by arkhosxx on March 23, 2017 at 05:40 PM

    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

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 23, 2017 at 10:46 PM

    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" onload="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.

     

     

     

  • Profile Image

    Answered by arkhosxx on March 24, 2017 at 06:42 AM

    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.

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 24, 2017 at 08:52 AM

    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.

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 24, 2017 at 09:56 AM

    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" onload="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.

  • Profile Image

    Answered by arkhosxx on March 24, 2017 at 10:18 AM

    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?

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 24, 2017 at 11:31 AM

    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:

    ::-webkit-scrollbar { display: none; }

    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.