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

    Mobile Friendly Issues

    Asked by kranai on March 01, 2016 at 02:30 PM

    Hi

     

    Today I added a mobile friendly pages to our website. However the2  forms I created in JotForm is giving problems during re-sizing. When I tried to insert the forms on mobile page (480 px width) by reducing its size all the fields just go "crazy"

     

    How do I ensure that forms I created can also be seen on my mobile device without any issues.

    The form in question are Contact Form in the contact tab of the website and one is feedback form on my home page at the bottom.

     

    It works without any problems on my normal desktop screen. Only problem is when u view on mobiles.

    My website is www.insight-acad.com (see home page at the bottom and contact tab)

    To view mobile friendly page just reduce your browser to half your current width and the it will automatically switch to a mobile friend view,

    You can see the problem I am describing by comparing both the views?

    Any help on this?

    rgds

    kish

     

    Mobile mobile friendly Friendly feedback form contact form problem size
  • Profile Image
    JotForm Support

    Answered by Nik_C on March 01, 2016 at 04:01 PM

    Hi,

    You can make your form responsive by going to Preferences in Form Builder and setting responsive field to YES.

    Also, you should check this option in Form designer.

    Please take a look at the following guide.

     

    This should solve your problem. 

     

    Please let me know if i can be of more assistance.

    Best regards.

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 02, 2016 at 03:13 PM

    Hi,

    I will look into your problem and as soon as i have some solution i will get back to you.

    Best regards.

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 02, 2016 at 07:12 PM

    Hi, 

    I managed to  solve your problem. You will have to inject custom CSS to your form. That means that you will need to go to Form Builder  and click on Preferences.

    There you need to find Form Styles tab and paste the following CSS:

    @media screen and (max-width: 480px){

    [data-type="control_phone"] .form-sub-label-container {

    width: 30% !important;

    }

    }

    @media screen and (max-width: 480px){

    [data-type="control_fullname"] .form-sub-label-container {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    width: 30% !important;

    }}

    This will prevent moving input fields to new rows when on mobile device. 

    Please let me know if this works for you.

    Best regards

     

  • Profile Image

    Answered by kranai on March 03, 2016 at 06:47 AM

    Hi

    The above solved the problem of splitting the fields onto different lines BUT title/label of each field are not on  the same line as the input fields. Please look at the website www.insight-acad.com using your desktop browser. Then reduce your width your browser to about size of a mobile phone screen and you see the difference. the view changing from desktop version to a mobile version.

    Look at the home page at the bottom where the Insight-Academey Customer Loop Form is displayed.

    I need to have it the same if possible. for both view on normal desktop view and mobile view

    Thanks

    kish

  • Profile Image
    JotForm Support

    Answered by Welvin on March 03, 2016 at 10:05 AM

    I will look at this and let you know the codes to keep the label on left. 

  • Profile Image
    JotForm Support

    Answered by mert on March 03, 2016 at 10:15 AM

    Hi Kish,

    On mobile platforms, I can see no problem. However, it is placed right bottom of the screen when you monitor your form on desktop; but you can easily change its position by adjusting some values on your webpage's source code.

    Below, you can see the class names marked with green, so you can find them easily by searching their names. Then, you can change their "left" variables just like the below (blue marked areas).

     

    Header,

    <div class="Normal_text" style="position: absolute; left:390px; top:2004px; width:282px; height:10px;font-weight:bold;font-size:15.97px;color:#292861;">

     

    Header div,

    <span class="xr_ar xr_1as3 xr_1a1" onmousemove="xr_mpo(this,4,0,event)" style="left: 300px; top: 1977px; width: 481px; height: 45px; background-color: #EDC951; border-radius: 5px;"></span>

     

     Body,

     <div class="xr_noreset " style="position: absolute; left: 300px; top: 1991px; width: 481px; height: 250px; overflow: hidden;">

     

    After making those changes, you can see the changes from the below:

     

    I hope this one will meet your needs. If it is not, please do let us know.

    Thanks.

  • Profile Image

    Answered by kranai on March 03, 2016 at 11:32 AM

    Hi Mert

    I am sure what you want done above.

    First the form on the desktop is placed at the bottom because I want it there. I created the placeholder at that location. So what i want if someone views this website from his mobile he should see the same form roughly also at the bottom in the same format just as image you presented above.

    Are you saying in order to get the above I need to inject HTML code on the webpage itself? Please let me know. 

    rgds

    kish

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 03, 2016 at 12:45 PM

    Inject these CSS codes if you want the form labels to retain left aligned when viewed on mobile just like on desktop view.

    @media screen and (max-width: 480px){

    .form-label{

        width : 34% !important;

        float:left !important;

    }

    .form-input {

        width : 62% !important;

        max-width: none !important;

    }

    input[name$="[country]"],input[name$="[area]"] {

        width: 70% !important;

    }}

    ---

    You might also want to increase the button height so its text will be vertifically aligned.

    .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {

        height: 30px;

    }

    Result:

    Let me know if there's anything I've missed here.

    Thanks!