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

    Making a Form Field Visible Only on Certain Platform

    Asked by jaiswal78 on October 04, 2015 at 09:46 AM

    In my form there are two checkboxs. I want to show one checkbox only on mobile and tablet while other only on desktop.

    I have assigned #element_id to both the checkboxes and used the following code in the custom CSS of the form.

     

    #element_id Description_mobile {display: none}#element_id Description_desktop {display: none}

    @media screen and (min-width: 900px) {

    #element_id Description_desktop { display:inline; }}

     

    unfortunately this is not working. Can you please help on this as to how to achieve the above mentioned objective.

    PS: - i  am not having a coding knowledge so sorry for any lame questions.

    Regards

    Amit

    form field visible checkbox checkboxes Mobile mobile form
  • Profile Image
    JotForm Support

    Answered by jonathan on October 04, 2015 at 06:40 PM

    Can you please confirm first that this is the form http://www.jotformeu.com/form/52625406038351 and you were referring to this checkboxes

    the form URL you mentioned on your message is invalid http://www.jotformeu.com/jaiswal78/forms.urbanmistri.com/service_reque

    so I am not sure of the correct form on your account.

     

    We will wait for your updated response.

    Thanks.

  • Profile Image

    Answered by jaiswal78 on October 04, 2015 at 06:43 PM

    Yes indeed this is the form and the checkboxes you have identifed are also the one I mentioned.

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 05, 2015 at 04:20 AM

    Hi,

     

    I'm currently testing the custom CSS codes for your form. I'll post here as soon as I fix the code.

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 05, 2015 at 04:38 AM

    Hi,

     

    Can you try injecting the custom CSS codes below and see if it you like how it looked?

    @media screen and (min-width: 900px) {

    #id_62{ display:inline;}

    #id_70{display:none;}

    }

     

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

    #id_62{display:none !important;} 

    #id_70{display:inline;}

    }

     

    To inject custom CSS codes, you can follow the guide: How to Inject Custom CSS Codes.

     

    Do let us know if you need further assistance.

    Regards.

  • Profile Image

    Answered by jaiswal78 on October 05, 2015 at 06:51 AM

    Hi Chriistian,

    thanks for your help. These codes have worked fine and given the desired result in the form, but I am suprised that it is not behaving (ie both feilds / checkboxes are visible on my website (www.urbanmistri.com). Any idea as why this is happening. I had saved the jotform, but had not altered any embeded codes in the website. This is happening for all media. 

     

    Regards

    Amit

  • Profile Image
    JotForm Support

    Answered by mert on October 05, 2015 at 10:03 AM

    Hi Amit,

    When I checked your form, I found that custom CSS code that Chriistian provided hasn't applied. It seems like recent changes haven't applied for some reasons.

    After applying custom CSS codes, the form has started to work as it is supposed to be. Also, I embedded it with IFrame and tested, it works too.

     

    In addition, you can try it from the link below:

    http://www.jotformpro.com/form/52774252908967

     

    If the problem insists, please let us know.

    Thanks.

  • Profile Image

    Answered by jaiswal78 on October 07, 2015 at 04:52 AM

    Hi,

    The problem is still there. If I check the jotform independently, then conditions are seen as I want them to be and the codes are working, but in the website it is showing all the options. Please suggest. Website is www.urbanmistri.com

  • Profile Image
    JotForm Support

    Answered by mert on October 07, 2015 at 07:42 AM

    Hi Amit,

    I checked your form again and found that the problem continues with your form too.

     

    After that, I changed it with Custom CSS for you. The problem seems to be gone.

     

    In addition, please remember that you need to re-embed your form after these changes applied, because you are using IFrame method for embedding.

     

    Also, if you are doing your tests on tablet, you need to add extra CSS code to your form. Because they have px value between phones and desktops generally. That's why, they are showing both of the options. Add following CSS codes in addition to your previous codes, if you want to add this feature. 

     

    @media only screen and (min-width : 768px) {

    #id_62{display:none !important;} 

    #id_70{display:inline;}

    }

     

    I added this CSS to a cloned form, you can try it from the link below with your tablet:

    http://form.jotformpro.com/form/52774252908967

     

    I hope these methods will help you this time.

    Have a nice day.

  • Profile Image

    Answered by jaiswal78 on October 07, 2015 at 07:52 AM

    Hi, Thank you so much for your efforts. I will try this out in 5-7 days and then will let you know a about the outcome.

  • Profile Image
    JotForm Support

    Answered by mert on October 07, 2015 at 07:58 AM

    Hi Amit,

    I checked your form again and found that the problem continues with your form too.

     

    After that, I changed it with Custom CSS for you. The problem seem to be gone.

     

    In addition, please remember that you need to re-embed your form after these changes applied, because you are using IFrame method for embedding.

     

    Also, if you are doing your tests on tablet, you need to add extra CSS code to your form. Because they have px value between phones and desktops generally. That's why, they are showing both of the options. Add following CSS codes in addition to your previous codes, if you want to add this feature. 

     

    @media only screen and (min-width : 768px) {

    #id_62{display:none !important;} 

    #id_70{display:inline;}

    }

     

    I added this CSS to a cloned form, you can try it from the link below with your tablet:

    http://form.jotformpro.com/form/52774252908967

     

    I hope these methods will help you this time.

    Have a nice day.