How to hide text highlight widget in print view?

Hello,

Is there a way to make text highlight widget to be appeared on the form like mine but not be printed? Can i put something on CSS for that? Or is there any other widget with similar functionality. 

I mean to have a Note in the form to guide the user but during the printing this Note to be disappeared.

Thanking you in advance. 

Unfortunately it is not possible to achieve this "Text Highlight" widget. Here are the steps you need to follow to achieve your requirement:

#1. Delete the "Text Highlight" widget you have added in form.

#2. Add "Text" field in form and add the following div in the text field:

<div class="pageBreakHere"></div>

#3. Add the following content in the source of the "Text" field between the div tag you added in step #2:

<div class="pageBreakHere">This e-form can be <span style="background-color: #ffff88;">signed electronically in case you use mobile or tablet by crafting your signature in the above textbox (either with your finger or with touch screen pen)</span>. Alternatively you can complete the form, print it, sign it and send it to Atlantic via Fax at 22028804 or scanned copy at email underwriting@atlantic.com.cy

</div>

#4. Please inject the following custom css code in form:

@media print {

.pageBreakHere {

page-break-after: always !important;

visibility: hidden !important;

}

}

The following guide should help you how to inject custom css code in form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Please take a look at the following cloned form where I have added this and see if it works as expected: https://form.jotform.com/200491416578963

Hope this helps.

Do get back to us if you have any questions.

Hello,

Thank you for the guidance. It works but as you can see from the print preview (check the attachment) comes in 3 pages. Is there any way the print preview when i press the Print button of the form to be in one page? How i can shrink the form and fit in one page?

Thanking you in advance.

https://www.dropbox.com/s/udg6vj4hlgizsyo/Authorizationpdf.pdf?dl=0

Is there any way the print preview when i press the Print button of the form to be in one page? How i can shrink the form and fit in one page?

Unfortunately, there is no direct way of forcing your form to print on a single page. If your form fits a single page then it will be printed on one page if it fits two pages then it will be printed in two pages.

However, you can try by decreasing the vertical space between questions in order to compress the form on one page. Here's how:

1. In the Form Builder, click the "Form Designer" button.

2. Go to the "Styles" tab and change the "Question Spacing" to "2". After that, click the "Save" button.

After this, decrease the LOGO size:

Now, you need to make some changes in the Print setting. When you print a webpage or in this case, a form, you will see a print dialog box that will show the printing option. Please refer to this screencast:

Hope this helps! Let us know if you need any additional assistance.

Regards.

Hello,

Thank you for the advises. However I see that margins between image and the rest sections or the Header and the other sections can be shrink more. I have limited the question spacing to 1 and the spaces are still there.

Another weird point has to do with Browsers. On Chrome the print preview shows my form in 3 pages and in explorer or edge the print preview brings 2 pages.

Could you please give a few more tricks to shrink more the sections on the form?

Thanking you in advance.

Please check this form: https://form.jotform.com/200523073357953 I've tried to shrink the form as much as possible.

I have moved your last query regarding font size for Narrative fields widget to a new thread: https://www.jotform.com/answers/2175796 

Thank you. How can i make the same shrink to my form like yours?

My colleague made some changes to the ADVANCED DESIGNER PAGE of the form he linked.

Here are the changes.

After you make the changes, please do not forget to save it.

My colleague also injected the following custom CSS codes to your form.

.jotform-form {

padding: 0px !important;

}

http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Feel free to let us know if you need any further assistance.

Thank you very much for all the detailed instructions. They were very helpful. However the chrome only insists to bring 2 pages in print preview although edge and explorer bring 1 page.

Can you figure out please why chrome responds like that?

Thanking you in advance.

https://form.jotform.com/200464888862063

On the CSS codes one of my colleagues asked you to inject above, please remove this line.

page-break-after: always !important;

Here's a cloned version of your form where I have applied the changes.

https://form.jotform.com/200532248935959

Feel free to test it and let us know if you need any further assistance.

Thank you very much. Now it previews fine on chrome.

Thanks a lot!