Question

Forms: Fitting Everything on 1 Printable Page

Forms

Updated July 27, 2018

asked on June 21, 2018

Hi all,

I have a client whose only critical requirement is that the completed Laserfiche form store to the repository on a single printable page. If I can't accomplish this, I'll have to push everything to Workflow to populate the current PDF version of the form. This is suboptimal from a maintenance perspective.

Does anyone have any tips or tricks for coercing a form to fit onto 1 page? I believe the client would be fine if everything was zoomed-out and smaller since the critical issue is not having to maintain a PDF and and LF form moving forward.

Thanks!

Rob

0 0

Replies

replied on June 21, 2018

Once you have established what the size of the form is when printing, you have a few options. One option is to show more fields side-by-side. In addition, you can try to create a copy of the form just for saving, and use CSS such as transform: scale(0.90) on the form or on elements of it. I will note that when printing, include prefixes for each browser such as Safari which uses the -webkit-transform prefix, Firefox which uses -moz-transform, IE which uses -ms-transform, Opera which uses the -o-transform prefix.

3 0

replied on June 21, 2018

Thank you for the suggestions, I will try them out! These forms would be printed from the repository, so I'd need everything condensed onto a single page by the time the process hits the save to repo service task. I think your suggestion to scale it using CSS is looking like my best bet at this point.

0 0

replied on June 21, 2018

I've had good results with this kind of approach. Almost all of my processes have an additional version of the form with a name like "Form - Final" in which I adjust the styling, color, etc. to be more print friendly.

As an example, on the form the user completes the font is optimized for the browser and the page has colored headers and such, but on the saved copy used by the Save to Repository task everything is grayscale with different fonts/sizes.

2 0

replied on June 22, 2018

Awesome, thanks for weighing in, Jason! I think this is the route I'll take, sounds like I should be able to get it working without too much trouble.

0 0

replied on June 21, 2018

I have a form that looks like a sheet of paper and is intended to be 'as printable as possible'. In addition to everything Karina said, in the print dialogue box of the browser there is (usually) a scale option. When you adjust it you can see the preview adjust to where you want it. I have found that educating my users about this scaling tools puts the control in their hands. Of course, you want to get it to a clean display of the data first.

Good luck,

Chris

1 0

replied on June 21, 2018

Thanks for the suggestion! These forms will be printed after being saved to the repo, and it is these saved forms that need to be single page documents. I will definitely inform the client about the scale option when printing, though.

0 0

replied on July 25, 2018 • Show version history

Hi everyone,

I had a pretty big breakthrough on this. Simple too. I got some good results printing the form when the "Optimize form layout on mobile devices" is unchecked:

Just go into the form settings on the form itself (cog in top right).

Let me know if this is just me or it works for you too.

1 0

replied on July 26, 2018

I will give this a shot soon and report back. Thanks!

0 0

replied on July 27, 2018 • Show version history

I ended up needing to do one more thing that helped. Backstory: I have a form that mimics a sheet of paper so users can print it. There is a button on the page made in a custom html field. I have javascript that cleans up the page (removes buttons, etc) before it is sent to print and then returns it to its previous state. I was trying to set the width for the iframe of the form. I thought I could gurantee that it would always be sent to print as a certain px width. Long story short, I didn't have any luck using javascript to alter the iframe width, but I COULD alter the html element width. I found that helped make printing much more uniform for the following browsers: IE, Chrome & Firefox. There are little tweaks needed to make all print jobs look the same but they were much more uniform when I set the html element width:

  
//print button
  $('.printButton').on('click', function(winPrint){ 
  winPrint.preventDefault();
  		$(this).hide(); //hides print button for printout
    	$('.emailSection, .Submit, .Approve').hide();//hide email section & buttons
	    $('html').width(1200);
        window.print();
  		$(this).show(); //returns print button
	    $('html').width('auto');
	   	$('.emailSection, .Submit, .Approve').show();//show email section & buttons
  		return false;   
 	});

Keep in mind I have my forms width set to 1200 as well.

I found that Chrome (used the least here) cut a very small amount off the right side. It didn't cut of any character so I can live with it. Firefox print beautifully no matter what I did, so this was the easiest one to deal with. IE was the most volatile. I had to increase the scale to 120% (from 100%) for it to fill the entire page. Otherwise it was smaller than the page. I was trying to find a 'happy medium' for all browsers. I am going to go with this for now.

Hope this helps.

0 0

replied on July 27, 2018

Maybe you can have a few different behaviors set up for different browsers. Your script can check the navigator.userAgent string and change your CSS and other adjustments based on that.

1 0

You are not allowed to follow up in this post.

Question

Question

Forms: Fitting Everything on 1 Printable Page

Replies

Sign in to reply to this post.