Show hidden field when printing

  • Profile Image
    AgilityAssoc.Canada
    Asked on August 28, 2017 at 11:29 AM

    Hi,

    On my form 52745887899988 I have a hidden field id_41. I want this text to show when printing only. I have some injected CSS code to eliminate all but the required information and added this line with no success.

     #id_41 { display: unset;} How do I get this to work?

    Many thanks, Robert

  • Profile Image
    aubreybourke
    Answered on August 28, 2017 at 12:52 PM

    Its possible, but it depends how you are printing:

     

    1. From submissions page?

    Navigate to "My Forms"

     

    Select your form and hit submissions

    You will see your hidden fields are visible here. So click print

     

     

    2. From emails?

    Go to your email settings. On the Advanced tab, make sure "hide empty fields" is disabled:

     

    3. From print button on form?

    Please try injecting this CSS code:

    @media print
    {
      #id_41
      {
        display: block;
        overflow: visible;
      }
    }

    This will show the hidden field only when the form is printing.

  • Profile Image
    AgilityAssoc.Canada
    Answered on August 28, 2017 at 12:59 PM

    Hi,

    Great thanks I will try that (3.) 

    Robert 

  • Profile Image
    AgilityAssoc.Canada
    Answered on August 28, 2017 at 01:24 PM

    Hi,

    I did all you suggested and I still don't see the text I want for print. Here is the complete css code.

     

    @media print{

       header,.form-sub-label, 

        #header_28, #cid_22, #id_27, #cid_27 {

            display : none;

        }

          #id_41

      {

        display: block;

        overflow: visible;

      }

        body {

            background : white;

            color : black;

            margin : -100px 0px 0px 0px;

        }

        #container #content #main {

            width : 90%;

            margin : 0px 0px 0px 10px;

            padding : 0px;

        }

        * {

            color : #000;

            border : 0;

            background-color : #fff;

            background-image : #fff;

        }

    Here is an image of what I'm getting. The -100px for the body margin-top was to delete the blank area at the top. It Helped but I thought it might hide my text so in image below it is at 0px. Also note the two borders that remain. They are part of the two text items that are hidden for printing and should also be hidden. 

     

    Thanks , Robert

     

  • Profile Image
    AgilityAssoc.Canada
    Answered on August 28, 2017 at 01:27 PM

     

    Thanks , Robert

  • Profile Image
    AgilityAssoc.Canada
    Answered on August 28, 2017 at 02:10 PM

    WOW ... How did that happen. My response was posted twice. I noticed it was taking a long time.

    It was not intentional.

    Robert

  • Profile Image
    BDAVID
    Answered on August 28, 2017 at 02:38 PM

    Upon inspecting, there was an ID that needs to be included #cid_18, so, please use this code:

    @media print{

    .form-sub-label,#cid_18,#id_28, #cid_28, #cid_22, #id_27, #id_27 {

    display : none!important;

    border: none !important;

    }

    #id_41{

        display: block;

        overflow: visible;

      }

      body {

            background : white;

            color : black;

            margin : 0px;

        }

        #container #content #main {

            width : 90%;

            margin : -100px 0px 0px 10px;

            padding : 0px;

        }

      .form-all {

            background : #fff !important;

        }

        .form-line {

            width : 100% !important;

            padding : 0 !important;

            margin : 8px 0 !important;

        }

        .form-textbox, .form-dropdown, .form-textarea {

            background : #fff !important;

        }

        li#id_22 {

            padding-top : 10px !important;

        }

    }

    Result: https://form.jotformpro.com/72396003380957 

  • Profile Image
    AgilityAssoc.Canada
    Answered on August 28, 2017 at 06:54 PM

    Hi,

    This edit did clean up the the top of the print but I'm not getting the text for id_41 to appear. I noticed on your clone it is not hidden. I want it to be on the print view only.

    Regards,

    Robert

  • Profile Image
    John_Benson
    Answered on August 28, 2017 at 09:50 PM

    Hi Robert,

    I already have an answer but I need more time to finish the CSS code. I will contact you again on this thread once I have an update.

    Thank you.

  • Profile Image
    John_Benson
    Answered on August 28, 2017 at 10:14 PM

    Thank you for patiently waiting.

    To fix the issue, please disable the Hide feature of the Text field (id_41). 

    After that add this custom CSS code on the top of the @media print:

    #id_41 {

      display: none;

    }

    Here's the result:

    I hope that helps. If you have questions, please contact us again.

  • Profile Image
    AgilityAssoc.Canada
    Answered on August 28, 2017 at 10:28 PM

    Great! Works Perfectly!

     Thank you! Robert