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

    How to make forms responsive?

    Asked by Dimar on September 06, 2014 at 03:38 AM

    (smartphone and tablet) :)

     

    Greetings!

    smartphone
  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 06, 2014 at 08:38 AM

    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!

  • Profile Image

    Answered by Dimar on September 06, 2014 at 10:56 AM

    Hello!

    Thanks, did not know about it.

    In Iframe I take it like a phone.

    Any solution ??

  • Profile Image
    JotForm Support

    Answered by Welvin on September 06, 2014 at 02:29 PM

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

    Thank you!

  • Profile Image

    Answered by Dimar on September 06, 2014 at 07:55 PM

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

     

  • Profile Image
    JotForm Support

    Answered by Welvin on September 07, 2014 at 02:46 AM

    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!

  • Profile Image

    Answered by Dimar on September 07, 2014 at 02:57 AM

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

     

    Try the iFrame option.

  • Profile Image
    JotForm Support

    Answered by Welvin on September 07, 2014 at 03:59 AM

    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!

  • Profile Image

    Answered by Dimar on September 07, 2014 at 11:39 AM

    See screenshots:

     

    result in firefox and chrome:

     

  • Profile Image

    Answered by BaneD on September 07, 2014 at 04:04 PM

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

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 07, 2014 at 07:36 PM

    @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!