How to make forms responsive?

(smartphone and tablet) :)

Greetings!

Hello Dimar,

I am not sure if I have understood your question correctly.

Do you want to make your form responsive? You should actually add "Mobile Responsive" widget in your form. This widget will ensure that the width of your form fields are adjusted automatically to fit based on the screen size and display without any horizontal scroll.

Hope this helps.

Do get back to us if you have any questions.

Thank you!

Hello!

Thanks, did not know about it.

In Iframe I take it like a phone.

Any solution ??

I'm sorry, but I don't quite understand your last reply. Can you please explain further?

Thank you!

The form is in an iframe within a prestashop. Form fields are extended.

What is the webpage URL? We'll check that for you. So far the form looks fine here when I view it using the direct URL.

Also, based on your screenshot, I think you're using Firefox on WinXP. Am I right? 

Thank you!

Excuse me, I had removed. Check again, please.

Try the iFrame option.

Still, it's fine here using the form direct URL. I'm asking if you could give us the Prestashop page where the form is embedded. This way, we can check it.

Thank you!

See screenshots:

result in firefox and chrome:

Hi Dimar,

I would like to let you know that once you click on preview on the screen that you have uploaded screenshot of, you are seeing a smaller window inside of the iframe. If you go directly to the form like this: http://www.jotformz.com/form/42430048549656 you can see that the form background color will expand to fill out all of the remains of the window.

If you use the embed code and change it, like so (replace 100% with 150%):

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/42495897145368" frameborder="0" style="width:150%; height:1642px; border:none;" scrolling="no"></iframe>
<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

You will see more of the colored background shown in the page where you embed it. If you are not sure how it would look like iI suggest uploading it to your Prestashop and taking a look at it. If something is not right let us know here and someone will surely find a solution to make it look great :)

I hope that helps

@Dimar

I would suggest to embed the iframe embed code to your page (if you prefer to use iframe embed code) and then let us know the website URL so we can check the form here. The iframe preview on the form builder is executed inside a div container with a fixed width that's why the form renders the mobile layout. However, it is most likely different when you embed the iframe code to your website specially if you will paste it inside div container with a minimum width of 600px.

If you need further clarification, let us know here.

Regards!