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

    Issue with Form Display on Mobile Devices

    Asked by impactodiseno on May 14, 2014 at 06:38 PM

    The website is made on XARA PRO 10 and the form is not working properly on mobile devices

    Page URL:
    http://www.disenoimpacto.com/contacto.htm

  • Profile Image

    Answered by impactodiseno on May 14, 2014 at 08:22 PM

    Anyone who can help me out? 

  • Profile Image

    Answered by bob on May 15, 2014 at 01:02 AM

    Injecting custom css can adjust the form with mobile device.

    Form width is a big fact as it should be adjust with mobile screen. Know the importance of form width in the given link below.

    http://www.jotform.com/help/35-The-Importance-of-Form-Widths

    Could you please give us the URL of the form which you need to display in mobile device.  

     

    Thank You

  • Profile Image

    Answered by impactodiseno on May 15, 2014 at 09:09 AM

    Sure, i have the same problem in two websites: www.disenoimpacto.com/contacto and http://www.tracergps.com/landingpage .. 

     

    Thank you

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on May 15, 2014 at 12:34 PM

    First of all, we do recommend to use the iFrame code

    We also do recommend to add this code in your HTML page, before the </head> tag.

    <style>
    iframe, iframe#JotFormIFrame { height:500px !important; }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />


    Then add this code in your form styles (use this guide)

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen

    and (max-device-width: 320px)

    and (max-device-width : 100%) {

    iframe, .form-all {

    width: 100%!important;

    height:500px !important; } }

  • Profile Image

    Answered by impactodiseno on May 15, 2014 at 12:48 PM

    Didn't work! now its even worst because i cant see it on any computer! 

  • Profile Image
    JotForm Support

    Answered by Mike_T on May 15, 2014 at 03:59 PM

    The issue seems to be related to the layout of your page. The page height is not long enough to fit the full form, so that the Submit button is not visible on the mobile devices.

    Can you try to increase the height of the page? You have several divs, so it is probably that you will need to increase it in different places.

    Thank you.

  • Profile Image

    Answered by impactodiseno on May 15, 2014 at 06:17 PM

    I dont understand. Remember that im using Xara Designer. For computers, it displays great. The problem is the form isnt  auto-adjusting right in mobile devices

  • Profile Image

    Answered by Cesar on May 16, 2014 at 12:08 AM

    I do see that you are still using the script embed code. We do recommend to use the iFrame code to facilitate the form rendered on a mobile device. It appears that the problem appears to be on the height value of the div where the form is on.

    https://shots.jotform.com/cesar/screens/xrxri.png

    If the code is not viewable through the application you are building this site on. You may need to open your webpage's source code on a text editor and modify the div's height value through there. 

    Thank you.


  • Profile Image

    Answered by impactodiseno on May 16, 2014 at 09:46 AM

    When using the iframe, i cant even see the send button from the computer. I always use the xara's embed code for JotForm. I algo tried placing custom height values as you told me, but it makes no diference

  • Profile Image
    JotForm Support

    Answered by TitusN on May 16, 2014 at 01:46 PM

    Hello,

    I think we need to break down the issue so that we can move forward towards a solution that works well for you.

    Let's approach the solution from two perspectives:

    1. Making the form responsive:

     - Please shring all the fields on the form as shown:

    If any of the fields end up on the same horizontal line due to the shrinking, just move them to the next:

    After doing this - most of your fields should resize when the width shrinks. Please view this test form on your mobile device and see what I mean: http://form.jotformpro.com/form/41355410952955 - the captcha field is a little wide, but that can be deat with later.

    2. Put the newly updated form on your website:

     - Begin with the Xara code:

    After you have done this - there might be some issues still - and thats OK - we can deal with each at a time so that we can fix the issue conclusively.

    If this method presents additional issues, please respond with the following:

    1. The URL where the updated form has been placed

    2. The mobile device you tested with so that we can also see what you see

    Then, we will address each display issue one at a time.

    Unfortunately - with a blend of different solutions working together (Jotform & Xara Code), there are always some teething issues - never a one-fix-all approach - but all can be addressed and fixed. 

    Looking forward to your response.

  • Profile Image

    Answered by impactodiseno on May 17, 2014 at 02:44 PM

    Hi, sorry i took too much time. It seems to be working fine, i tested it from  my Samsung S2. Check it out and tell me what u think: www.disenoimpacto.com 

    I had to expand the jotform ifram in the xara program, since it wasnt display the "send" button.