How can I hide buttons on a form?

  • odileb
    Asked on April 11, 2018 at 2:41 PM

    I want to create one form with buttons but want to hide some of the options so in this form i only want 50, 100 and 200 for back, breast and fly and 200 and 400 for IM so want to hide the other buttons


    1523472058jot Screenshot 10

  • Mike_G JotForm Support
    Replied on April 11, 2018 at 3:09 PM

    What you would like to happen to the Input Table field in your form is only possible with the help of CSS codes. And, we can help you with that.

    But first, I just need you to clarify things a bit for us so that we will be able to give you the correct codes for your form and meet your requirements.

    I see that there are two "back" rows and also, I assume that the "10m" should be "100m" instead, is that correct?

    We will wait for your response.

  • odileb
    Replied on April 11, 2018 at 4:43 PM
    Hi Mike
    that is great and you are spot on. I have changed these on the form.
    Many thanks
    Odile
    ...
  • Mike_G JotForm Support
    Replied on April 11, 2018 at 5:53 PM

    Thank you for doing that, we appreciate it. As for your request, you can inject the following custom CSS codes into your form to just show 50m, 100m, and 200m options for Back, Breast, and Fly rows AND 200m and 400m options for IM row.

    li#id_30 table tr:nth-child(2) .form-matrix-values input, li#id_30 table tr:nth-child(3) .form-matrix-values:nth-child(n+5) input, li#id_30 table tr:nth-child(4) .form-matrix-values:nth-child(n+5) input, li#id_30 table tr:nth-child(5) .form-matrix-values:nth-child(n+5) input, li#id_30 table tr:nth-child(6) .form-matrix-values:nth-child(-n+3) input, li#id_30 table tr:nth-child(6) .form-matrix-values:nth-child(n+6) input {

        display: none !important;

    }

    The table should look like this after:

    1523483409t17 48 57 Screenshot 10

    To learn how you can inject custom CSS codes to your from, please use this guide as a reference — How-to-Inject-Custom-CSS-Codes

    I hope this helps. If you have other questions or concerns, please do not hesitate to let us know.

  • odileb
    Replied on April 12, 2018 at 12:43 AM
    Hi that is fantastic. However I obviously didn’t say that I need all the buttons in free displaying.
    Sorry . That is why the table has all the numbers . All the other buttons are perfect.
    Apologies and thanks
    Odile
    Sent from my iPad
    ...
  • odileb
    Replied on April 12, 2018 at 12:43 AM
    Also when you say inject - how do I do that? I have tried copying and pasting css code in and it then didn’t seem to do anything
    Many thanks
    Odile
    Sent from my iPad
    ...
  • Kiran Support Team Lead
    Replied on April 12, 2018 at 5:40 AM

    I have checked your JotForm and see that the provided CSS codes are not added to the form. Please see the screencast below that can help you with injecting CSS code to the form.

    15235260051441790 InjectCSS Screenshot 10

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help.