How to Style WordPress Form Submissions for Print

Need to print form submissions? Does your View look great on screen, but not on a printed page? This tutorial shows how to format a View to print form data.

Why print form submissions?

Since the rise of mobile devices, my office printer gets less and less use every year. I carry documents on my phone and display them on the screen. Even barcodes on plane tickets are scanned directly on the screen without the need to print. I can't even remember the last time I bought ink for my printer. But I could never throw out my printer completely, since there are some things too important to not have a hard copy. It will always be a vital part of my home office!

Words on paper often have a greater impact than the same words on screen. Coupled with the occasional reliability issues of electronic devices, the ability to print data is essential. Even simple things like a dead battery can remind you of the value of a hard copy!

Maybe you've built a WordPress job board and want to allow applicants to print job details. Regardless of what you need printed, this guide will show you how to make your submitted form data printable.

Option 1 - Print WordPress pages with CSS

So you've built a custom reports View that looks amazing on-screen. Now you want to print it. If you're looking to style your View for the printed page, you will need some CSS. This styling will hide some of the elements that look good on-screen, but not on paper. Your custom print CSS can be added in your child theme CSS, or on the Formidable > Styles > Custom CSS.

This first option is quick and easy to implement. Styles apply globally so this method is not as flexible as creating a custom View specifically for printing.

This code will only affect the output when printing (or bring up print preview). It simply hides some elements that commonly look messy when printed, resulting in a cleaner print version.  For any element you'd like to hide, add the class "dont-print".

Please note that this CSS is just a starting point. Depending on your theme and styling, you may need additional CSS for your site.

@media print {
.dont-print, header, nav, aside, footer, #header, #sidebar, #footer, #colophon {
display: none !important;
}
article, #content {
margin: 0;
float: none;
width: auto;
}
* {
background: none !important;
box-shadow: none !important;
}
}

Option 2 - Create a View to print form submissions

Sometimes the "one size fits all" solution isn't ideal. If you want to apply different print styles to different Views, you will need to approach this another way.

For example, you may want custom styling to apply only to a single View. Or you may find that the data you display on the screen simply will not fit on a printed page. In this case, the solution may be to duplicate the existing "on-screen" Views, and modify the duplicate to optimize for printing.

Step one - Create a View

First, create a View that displays the data you want to print. You may wish to remove info that isn't vital and rearrange the layout a little. Test to ensure that your data will fit within the limits of the paper size.

Step two - Add print CSS

The next step is to build your custom CSS. Print CSS differs from screen CSS in one main way: it's aimed at a fixed document size. When designing for the web, we're always working hard to have responsive layouts that look great on all screen sizes. But with print CSS, you can (and should) define a fixed page size.

There are options to define page margins, page orientation, and even automatically insert page breaks and page numbers. This guide is a great introduction to print CSS. I'd definitely recommend reading before you go any further. Instead of adding CSS to the Formidable -> Styles page, add it directly to the View content box, wrapped in style tags.

Step 3 - Create a print button

The final step is to create a print button. Because this isn't a special Formidable function, and is widely used online, I'm going to link to offsite articles that explain this in more detail than I could in a single blog post. The Javascript window.print function is perfect for building a "Print this screen" type button. CSS Tricks also discuss how to implement a print button and include some additional information.

Not using Formidable Forms for your WordPress forms? Learn more about the features of the best online form builder plugin or try out our free WordPress form builder.