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

    Injected CSS code using Form Designer did not work

    Asked by KriyaYogaVienna on January 13, 2015 at 10:01 PM

    The css code does not work.

    .form-line.calculatedOperand {
        -webkit-user-select : none;
        -moz-user-select : none;
        -ms-user-select : none;
        -o-user-select : none;
        user-select : none;
    }

     

    I suppose because I used the Designer a little. It added a LOT of code to my Inject Custom CSS.

    If I use it after adding code it will delete all custom code and after using the Designer some custom code will not work.

     

    I deleted the css code from the Designer but it doesn't work anyway.

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 14, 2015 at 01:56 AM

    Hi,

    The CSS codes you injected to your form removes the highlight effect when you try to highlight and select the field which I can confirm that it is working with your form. I can't highlight the first two dropdown section. I think that's what the code exactly does.

    I tried it with my form and I see no errors on the CSS.

    Let us know if I have missed anything about your question. Thank you!

  • Profile Image

    Answered by KriyaYogaVienna on January 15, 2015 at 06:10 AM

    I got this css code:

    .form-line.calculatedOperand {
        -webkit-user-select : none;
        -moz-user-select : none;
        -ms-user-select : none;
        -o-user-select : none;
        user-select : none;
    }

     

    to make that a certain calculation field can not be changed by the user.

    But with this code added to my css code the user still can change the field.

    The highlighting you are talking about I had switched off, because it is very ugly and I do not want it. I didn't do that with CSS but by pressing a button in the Preferences.

    Now I switched it on again just to see if it works, but the calculation field still can be changed by the user.

     

    I also tried this css code on an other (test) form, but it is not working.

    http://form.jotformeu.com/form/50125184438351

    (the fields which are called "dynamic" should be protected for user change.

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 15, 2015 at 09:02 AM

    @KriyaYogaVienna

    Thanks for your reply.

    Sorry to say but the CSS you're using will not actually prevent the field value to be edited, what it does is it only makes the text or value unselectable or can't be highlighted. In short, you can't make the field read-only with CSS.

    We actually have a built in feature where you can make the text boxes read-only by going to its properties. However, since you're using calculation widget, it should be read-only be default. Try to uncheck the read-only on your form calculation field and then check it again, see if that helps.

    Here's a clone version of your form http://form.jotformpro.com/form/50143942644958? which has a read-only field on the last line.

    Let us know if this doesn't help. Thank you!