Why my form is not mobile responsive?

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

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

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" onDISABLEDload="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)" onDISABLEDload="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)" onDISABLEDload="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)" onDISABLEDload="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)" onDISABLEDload="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?

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" onDISABLEDload="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 

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!