how to toggle show/hide a specific field

  • Profile Image
    Asked on June 11, 2013 at 11:20 AM

    I want to hide a specific field temporarily in a survey form.  I don't want to lose the data associated with it.  

    Is there just a simple Toggle to show/hide a specific field.  I would rather not jump through hoops doing conditional formatting.

    Thank you.

  • Profile Image
    Answered on June 11, 2013 at 11:43 AM


    There are 2 ways you can do this.

    1. Using smart conditions for multiple fields. This guide will do it How-to-Hide-or-Show-Multiple-Fields-at-Once-Based-On-a-Single-Conditional-Entry

    2. You can inject CSS code to hide the fields. (guide: How-to-Inject-Custom-CSS-Codes)

    Both this method will not delete existing submissions of the form because the field/s are not deleted at all.

    Hope this help. Inform us if you need further assistance.


  • Profile Image
    Answered on June 12, 2013 at 10:33 AM

    Thank you for the response.

    Option one is too complicated to simply temporarily hide a field.

    Option two could work.  ** Do you have the CSS code I would paste to hide the field? ** I am no CSS expert.  I searched the forum and I cannot find an example.  

    A simple HIDE radio button would be much easier and very useful.

  • Profile Image
    Answered on June 12, 2013 at 10:38 AM

    Hi, Can you please provide us the url of the form and the field name which you want to hide? So that we can provide you the correct CSS code.

  • Profile Image
    Answered on June 12, 2013 at 10:55 AM

    No I can't.  It is on a secure page.

    The question is very generic.  What CSS code can I inject to hide a Radio Button field??

  • Profile Image
    Answered on June 12, 2013 at 11:13 AM

    You can inject this CSS code to hide the radio button on your form

    .form-radio {display:none; } or .form-radio-item {display:none; }

    If you need to hide the entire field including the radio button, you will need to get the field ID and use display:none as well. I created a video presentation in this link on how to get the Field ID, note that you still need to insert the code in the form styles.

    If you need further assistance, please contact us again.

  • Profile Image
    Answered on June 12, 2013 at 11:40 AM

    Hi.  Thank you for your response.  I figured out how to hide it.  

    The problem with this solution, is that once it is hidden you no longer see the field in the form, and there is no way I can see to edit it and remove the CSS.  How do I edit it once it is hidden???

    Your video would require me to learn to use the browser developer tools.  There is an easier way:

    1. click on the form, click the field properties icon to show properties. In the properties popup, at the bottm it shows the field id with each button number (input 32-1,input 32-2) etc....  The field number would be 32.

    2. click on the field, click on the Setup&Embed Tab at the top, then click on the Preferences Gear Icon at the very top.

    3. click on the Form Styles Tab in the popup. then Paste   #id_32 {display:none;}   in the Inject CSS section. (replace id_32) with the id of your field from step one above.

  • Profile Image
    Answered on June 12, 2013 at 12:02 PM

    Yes that would be another method. I was using Google Chrome browser Inspect element when I did the video that should appear when you right click your chrome browser.

    I would suggest editing it before hiding it or you can also try cloning the form and do the editing in the clone form then copy the CSS code to our original form. If you need to track the field id, you can add a quote beside your CSS code e.g.

    #ID_123 { display:none; )  /* This is a radio button quote */