When we start adding code to our forms, it usually means that if someone downloads your form as a PDF or goes to print it then it often looks a little crazy. Colours are usually removed, there’s lots of extra white space and all in all it’s not a great user experience.

This is because by default Dubsado forms strip out a lot of the styling, and makes them look boring or even unreadable when they’re downloaded, which is not great for clients who want to download and save the proposal to share it with their team.

Many people just hide the Download PDF button however people can still download and print forms even if you hide that button.

In order to get your forms looking professional even when they’re downloaded we can use print specific CSS codes. These work similarly to responsive CSS codes, they recognise when a webpage is being printed or converted to a PDF.

Here’s an example of two forms that look identical on a web browser, but completely different when downloaded.

We tend to assume everyone views things the way we want them to, but in reality many of our clients will print out our forms or view them on different devices, which is why it’s so important they look great at all times.

Just know, that every computer is different and there will likely be some differences. It may not be perfect – but it will look SO much better.

It’s a bit tricky for me to provide you with a complete copy & paste code for this as every form is different and uses different codes. However, all of our templates come fully optimised for all devices as well as print and PDF. I’ve also provided some instructions below if you’d like to add your own print friendly codes.

The Codes

Background Images

The main area you’ll find problems with are backgrounds, whether that’s background colours or images. Dubsado’s code will override the code to remove the background.

To resolve this you’ll want to add !important; after any background image’s code that you want to show when printing.

The !important must go before the semicolon ; For example:

.heading-image-background{ 
background-image: url(https://formsandflows.com/wp-content/uploads/2020/05/Premium-Dubsado-Proposal-Responsive-Templates-.jpg)!important;
}

The Print CSS Code

In order to style things specifically for print you need to write print specific declarations. To do this, simply wrap your declarations in @media print. Anything wrapped inside will only affect the PDF/Print version, no changes will occur on the live website version. This is particularly useful when you want to reduce the padding on printed versions.

@media print{
  CSS Styles go here!
}

You don’t have to add special print declarations for every bit of code, the main things to look out for are background-colors, paddings, margins, colours and font sizes.

Page Breaks

We can add specific code to ensure control where the page breaks. Often you’ll find that elements break awkwardly over two pages, instead the whole element will move to a new page.

page-break-before :  auto | always | avoid ;
page-break-after :  auto | always | avoid ;
page-break-inside : auto | avoid ;

Here are the three page break properties available. You’ll be able to use these codes to format your PDF. These need to be attached to an element for example; the following code would apply to all columns, and would discourage the page from breaking a column over two pages.

.column {
page-break-inside: avoid;
}

You can force (always) or discourage (avoid) page breaks before, after and inside your elements to help format your PDF document.

Simply choose auto, always or avoid i.e page-break-inside : avoid;

It’s worth noting it will only follow your code instructions if it’s physically possible. If there’s simply not enough space a page break may still occur.

Forcing page breaks

You can encourage a page break at certain points in your form with the following code. Simply add at the point you want to add a page break.

<p style="page-break-after:always;">&nbsp; </p>
<p style="page-break-before:always;">&nbsp; </p>

Recommended code

I recommend starting by copying the following code into your forms. These are the basic backbone of print friendly forms.

This code will:

• ensure form fields always stay on the same page as their label
• ensure columns don’t break over pages

@media print{
  .form-group {
  page-break-inside: avoid;
   }

  .column {
  page-break-inside: avoid;
   }
}