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

    Why my form is not mobile responsive?

    Asked by timbroer on July 18, 2017 at 10:31 AM

    Hi, 

    I have problem with my form on mobile devices. A part of the form is not visible, including the send button!

    Can you help me to make this form responsive?

    Page url: https://royalbrinkman.nl/kennisbank-teeltwisseling/touw-hogedraadhaken-kiezen  

     

    Thanks in advance!

    - Cindy

  • Profile Image
    JotForm Support

    Answered by Nik_C on July 18, 2017 at 12:24 PM

    I tested your form on my phone and I was able to replicate this issue.

    Please try inserting the below CSS code in your Custom CSS Field:

    @media only screen and (max-device-width: 750px) {

      #JotFormIFrame-70461319151348 {

        height: 700px!important;

    }

    }

    If that doesn't work, then remove the above code it and re-embed your form by using this code:

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

    Let us know how it worked.

    Thank you!

  • Profile Image

    Answered by timbroer on July 19, 2017 at 04:06 AM

    I have tried two ways now.

    Way 1: https://royalbrinkman.nl/test-formulieren 

    I added the code in CSS:

    @media only screen and (max-device-width: 750px) {

      #JotFormIFrame-70461319151348 {

        height: 700px!important;

    }

    }

    And i embed the Iframe code in the backoffice (html)

    <iframe id="JotFormIFrame-71991433839367" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/71991433839367" frameborder="0" style="width:100%; height:622px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-71991433839367"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

    But the form is not responsive yet. And as you can see, there is a white space below the form.

     

    Way 2: https://royalbrinkman.nl/test-formulieren-2

    I added the code in CSS:

    @media only screen and (max-device-width: 750px) {

      #JotFormIFrame-70461319151348 {

        height: 700px!important;

    }

    }

    And i embed the embed code in the backoffice (html)

    <script type="text/javascript" src="https://form.jotformeu.com/jsform/71991433839367"></script>

    But when I click on save in the backoffice, Then a piece of html code will be added.

    <iframe title="Algemeen: Stel uw vraag aan een specialist - via Kennisbank (kopie/ test)" onload="window.parent.scrollTo(0,0)" src="" allowtransparency="true" name="71991433839367" id="71991433839367" style="width: 100%; overflow: hidden; border: none; height: 596px;" scrolling="no"></iframe><iframe title="Algemeen: Stel uw vraag aan een specialist - via Kennisbank (kopie/ test)" onload="window.parent.scrollTo(0,0)" src="" allowtransparency="true" name="71991433839367" id="71991433839367" style="width: 100%; overflow: hidden; border: none; height: 596px;" scrolling="no"></iframe><iframe title="Algemeen: Stel uw vraag aan een specialist - via Kennisbank (kopie/ test)" onload="window.parent.scrollTo(0,0)" src="" allowtransparency="true" name="71991433839367" id="71991433839367" style="width: 100%; overflow: hidden; border: none; height: 594px;" scrolling="no"></iframe><iframe title="Algemeen: Stel uw vraag aan een specialist - via Kennisbank (kopie/ test)" onload="window.parent.scrollTo(0,0)" src="" allowtransparency="true" name="71991433839367" id="71991433839367" style="width: 100%; overflow: hidden; border: none; height: 594px;" scrolling="no"></iframe>

    The form is responsive, but there is a white space below the form. It seems like the form is added again, when the text in the back office is modified. Do you know what the problem is?

  • Profile Image

    Answered by timbroer on July 19, 2017 at 04:21 AM

    Because it didn't work with the CSS code, I remove the code below

    @media only screen and (max-device-width: 750px) {

      #JotFormIFrame-70461319151348 {

        height: 700px!important;

    }

    }

    And re-embed the form by using this code:

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

    The form is responsive now, but there is a white space below the form. 

    Also when i added the below CSS code in the custom CSS field.

    .supernova {

        background : transparent;

    }

     

    .jotform-form {

        padding : 0;

     

    }

    https://royalbrinkman.nl/test-formulieren-3 

  • Profile Image
    JotForm Support

    Answered by Nik_C on July 19, 2017 at 04:35 AM

    Please try adding the below CSS in your CSS of the website, so not in the form:

    @media only screen and (min-device-width: 1024px) {

    #JotFormIFrame-70461319151348 {

        margin-bottom: -230px!important;

    }

    }

    That should move the bottom margin for screens bigger than 1024px. For phones will remain as it is, and it will be responsive.

    Could you please try and let us know if it worked.

    Thank you!