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.
How to make one checkbox required and other two not required?Asked by xe7en on February 20, 2017 at 04:20 AM
It is also possible to create a selected field which cannot be deselected?
My wish is:
i have 3 selectional fields and i want one of them is selected forever. User cannot deselect this option but they can select the other two option additionaly.
Thanks for reply! :)
This is possible to achieve with CSS, by using pointer-events:none; rule. You can apply this rule to checkbox option that you do not want that your users can deselect.
Here is my demo form: https://form.jotform.com/70501991476965
First option can not be deselected.
I added this CSS code to my form:
pointer-events : none!important;
You can provide us ID of your form and tell us which option you want to disable and we will provide you CSS code for your form.
Let us know if you need further assistance.
Thank you so much it works fine!
Have a nice week. :)
i'm sorry to ask you again, but my boss has another wish/idea.
He wan't 3 Button and one of them is a required button and the other two are optional.
Our User have to select the required button by themselve - so that the button at first have to be deselected.
the second requirement is: if the user click the send button without clicking the required button a Error Message has to show.
Hope you understand my wishes.
You can do that by separating the first checkbox field from the second and third:
I made the first checkbox button as required, so if it is not clicked it will throw an error to the user.
Also, you have to remove the CSS code provided by my colleague earlier in order to make the field clickable.
Here is my clone of your form so feel free to check it: https://form.jotform.com/70511879516966
If you need any assistance please let us know.
thank you for the fast answer!
I have also think about this solution, but my problem is that the distance from the first Checkbox is not the same as from the option 2 to option 3. How to solve this problem?
Rather than making the distance smaller between first and second. I would make the distance between 2nd and 3rd to match the distance between 1st and second. And to do that just paste this CSS in your Custom CSS field:
It will look better because of the error message that will be shown if the first button is not checked. I made a new form with all changes and here is the link: https://form.jotform.com/70511998241963
And here is how it looks like:
Could that work for you?
Please let us know.
I think this solution is the best way to solve our problem - many thanks!
could you please move the second active field a little up? See below:
You're completely right, my apologies, I overlooked that one :)
Please add the below code to your Custom CSS Code:
It should look like this:
Let us know how it worked for you.
thank you! It works fine.
Can you tell me how to replace your design instead of mine? I'm not want to clone it because the form is already in use (dont want to lose the submission etc.). Is there any solution?
You also can edit it directly in myform.
The css-designer don't work as good as before JotForm v4 released. It looks like a bug?! :
I did the changes in your form. It looks fine to me.
Please check and let us know if it is ok now.
one last wish, could you please add "responsive" to the form? I know where i can do it but the advance designer dont work, if i try to set it the complete css-design is deleted. I dont know how and why this happens.
thank you again!
Let me check that and I will get back to you as soon as possible.
Thank you for your patience.
Thank you for your patience.
I had a hard time making the form responsive because of Theme used, and field "Anrede". So to make it easier, I replaced that field with regular checkbox field:
And I made it so it is possible to select maximum one:
Again, I had a hard time with regular radio button field because of the theme used, so CSS that I used to align it didn't work.
Hope this could work.
If it doesn't please let us know so we can try to find some other solution if it is possible.
And it's mobile responsive. You can check my clone of your form: https://form.jotform.com/70511998241963
I'm sorry to say that, but this would not working for me, it looks not good as before.
We have to find a way to get the "Anrede" looks like before. :( Is there no way?
I added the radio button fields again and I was able to make them appear properly. Those changes I saved in your form, so please check and let us know how it worked.
It looks fine on a mobile phone as well.
We'll wait for your response.
Thank you Nik for your efforts.
It is possible to move the Text "Anrede" in the same line as "Frau" and "Herr" is? So that "Anrede" stays left, "frau" in the middle and "Herr" on the right side?
I'm sorry for the delay.
I added this code to your form:
And that is the closest I could get because of the responsiveness problem, so that's why your fields need to be aligned like that:
And in mobile view:
Hope this could work for you.
Please check and let us know your thoughts.
Thank you Nik.
additional i have added another css codes and changes some codes.
could you can tell me how to center the text in the Box ("Frau" and "Herr") -> before <- checked?
In the "checked"-position the text is already center but not in the "unchecked" version
I have tested your embedded form on this page http://www.humilife.de/tablet/index.html and I was not able to replicate mentioned issue.
Check box options are center before and after they are selected.
If you have issues with some other form, please provide us ID of that form.