Making a Form Field Visible Only on Certain Platform

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

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.

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

Hi,

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

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.

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

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.

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

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.

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.

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.