Show hidden field when printing

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

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.

Hi,

Great thanks I will try that (3.) 

Robert 

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

Thanks , Robert

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

It was not intentional.

Robert

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 

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

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.

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.

Great! Works Perfectly!

 Thank you! Robert