Header logo not showing in print preview page?

  • Profile Image
    kkelso
    Asked on July 18, 2017 at 11:10 PM

    How can I show the form logo on the output to be printed when the website user clicks the 'Print' button option of the Submit button control? Right now, I'm conditionally 'showing' a hidden header object of the form logo that's on the second page, when the user is on the last page of the form, to have it included in the print output.

    My form is here: https://form.jotform.us/71945384571162 

    Thanks,

    Karl

  • Profile Image
    Charlie
    Answered on July 19, 2017 at 02:18 AM

    I checked your form and so far the header logo is showing in the print preview page. 

     

    I presume you have already resolved the issue? 

    We'll wait for your response. 

  • Profile Image
    kkelso
    Answered on July 19, 2017 at 10:44 AM
    Thank you for your response. However, you are not viewing the form in the manner that I anticipate the website visitor will. You are right clicking on the form after the Captcha page and selecting the browser’s Print link in the pop-up window menu.

    I anticipate the website visitor will go all the way through the form to the last page and then select the Print button option of the Submit button control object. This is what I see when I do that:


    And this is what they see.

    Thanks,

    Karl M. Kelso, M.B.A.
    kkelso@optonline.net

    ...
  • Profile Image
    Mike_G
    Answered on July 19, 2017 at 02:34 PM

    I would like to apologize for any inconvenience, however, the screenshots you tried to show us did not post. To post a screenshot here in the support forum, please follow the instructions in this guide — How-to-Post-Screenshots-to-Our-Support-Forum

    With regards to your concern, to my understanding, you are trying to hide the entire first page of your form when it is printed so the logo on the first page will appear at the top of the second page, is that correct?

    I tried filling up the form (required fields only)  from your website then clicked the Print Form button on the last page and here's what I got:

    I noticed that the logo appeared twice on the first page after I filled the Date Field from the last page because there is an additional header with the logo on your form and that is what the condition in your form states.

    What you can also try to do instead of showing the header with the logo conditionally when a field is filled, you can just delete the additional header with the logo and the condition associated with it then add CSS codes that will hide the entire first page only when the form is in Print mode. — https://www.w3schools.com/css/css3_mediaqueries.asp

    Here's a clone version of your form

    https://form.jotformpro.com/71994910986979

    I deleted the additional logo and the condition in the clone version of your form then  I injected the CSS codes below:

    @media print {

    #cid_1, #id_43, #id_133, #cid_44 {

        display: none !important;

    }

    }

    I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.

  • Profile Image
    Karl Kelso
    Answered on July 19, 2017 at 04:27 PM

     

    Thank you for your response. As you note, I anticipate the website visitor will go all the way through the form to the last page and then select the Print button option of the Submit button control object. This is what I see when I do that:

     

    This is the result of clicking the Print Button

  • Profile Image
    Mike_G
    Answered on July 19, 2017 at 05:45 PM

    I appreciate you explaining the issue you are having a little bit more for us to understand it. We would like to apologize for any inconvenience. Upon testing, I see that there is an issue with the logo set on the form not showing in Microsoft Edge print mode.

    To fix the issue with your form and remove the blank space on top of the form in print mode, please inject the following CSS codes to your form following this guide — How-to-Inject-Custom-CSS-Codes

    @media print {

        .form-all:before {

            display:none !important;

        }

        .form-all {

            margin-top: 0px !important;

        }

    }

    I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.

  • Profile Image
    Mike_G
    Answered on July 19, 2017 at 06:12 PM

    I just would like to clarify that the issue regarding Form Logo not showing in Microsoft Edge browser is not a form issue but a Microsoft Edge issue since it does not support printing of page background (colors and images).

    https://answers.microsoft.com/en-us/windows/forum/apps_windows_10-msedge/microsft-edge-does-not-allow-users-to-print/f1631753-cfe6-44c0-be34-b1dd10ae9b46

    Browsers like Google Chrome support this by default and for Mozilla Firefox and Internet Explorer 11, you have to enable the option first.