How can I hide buttons on a form?

  • Profile Image
    odileb
    Asked on April 11, 2018 at 02: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.png

  • Profile Image
    Mike_G
    Answered on April 11, 2018 at 03: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.

  • Profile Image
    odileb
    Answered on April 11, 2018 at 04:43 PM
    Hi Mike
    that is great and you are spot on. I have changed these on the form.
    Many thanks
    Odile
    ...
  • Profile Image
    Mike_G
    Answered on April 11, 2018 at 05: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.png

    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.

  • Profile Image
    odileb
    Answered 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
    ...
  • Profile Image
    odileb
    Answered 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
    ...
  • Profile Image
    Kiran
    Answered on April 12, 2018 at 05: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.gif

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