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

    Checkbox rendering on Mobile devices

    Asked by quickstartcrm on April 19, 2013 at 02:13 PM

    Hi,

     

    I am testing my form on mobile devices. The form is generally OK but not specifically adapted for mobile or tablet (i mean things like the fields don't become large on tablets etc automatically) however its ok after you zoom.

     

    But I cant get the checkboxes to look OK they are very small and when you check them the green tick is NOT that obvious.

     

    Could you please help

     

    Regards,

    checkbox Mobile checkboxes check
  • Profile Image

    Answered by quickstartcrm on April 19, 2013 at 02:13 PM

    BTW I have tried this with both HTML and IFRAME embedding on my web page

  • Profile Image

    Answered by jefreylandicho on April 19, 2013 at 02:50 PM

    Can you please provide us your web page url/link so we may be able to assist you further? 

  • Profile Image

    Answered by quickstartcrm on April 19, 2013 at 03:00 PM

    Hi,

     

    the web page is

     

    http://www.quickstartcrm.com/requirements.html

     

    Regards,

  • Profile Image

    Answered by jefreylandicho on April 19, 2013 at 03:18 PM

    Please try injectecting the CSS code below in your form styles.

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

    .form-checkbox { display: inline;

    padding:0;

    height: 30px; /* Adjust checkbox height */

    width: 30px;  /* Adjust checkbox width */

    }

     

    To Inject a custom CSS code in your form styles, go to Setup & Embed then click the Preferences Icon.

    Add the code in the form styles as shown below.

    If you need further assistance, please contact us again.

  • Profile Image

    Answered by quickstartcrm on April 20, 2013 at 12:01 PM

    Hi,

     

    Thanks for your response. I have ried this but it is having no impact.

     

    The problem is on smartphone on a iPad it seems to work fine even without your recent fix and I can clearly see the checkboxes being entered on a smartphone this is not the case.

     

    Regards,

  • Profile Image
    JotForm Support

    Answered by jonathan on April 20, 2013 at 06:23 PM

    @ quickstartcrm

    Hi, I was able to see other issue with your embedded form as well when I tried testing it on iphone 5. The form is cut-off (scrolling also since it is off)

     

    Can you please try re-embedding your form using the code I provided below

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//www.jotformeu.com/form/31003349147345" frameborder="0" style="width:100%; height:3151px; border:none;" scrolling="no"></iframe>

    This is the iframe embed code of your form, which I modified a bit. Please try and see if fixes the problem.

    Hope this help. Please inform us if the issue persists.

    Thanks.