-
kkelsoAsked 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
-
CharlieReplied on July 19, 2017 at 2: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.
-
kkelsoReplied on July 19, 2017 at 10:44 AMThank 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
... -
Mike_G JotForm SupportReplied on July 19, 2017 at 2: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.
-
Karl KelsoReplied on July 19, 2017 at 4: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
-
Mike_G JotForm SupportReplied on July 19, 2017 at 5: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.
-
Mike_G JotForm SupportReplied on July 19, 2017 at 6: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).
Browsers like Google Chrome support this by default and for Mozilla Firefox and Internet Explorer 11, you have to enable the option first.