How to Add a Print Link to Your Forms

Introduction

Would you like to add a print link to your forms? If you want to offer your visitors an easy way to print the form and complete it manually rather than filling it in online, you can easily do this with a little HTML and we’re going to show you how!

By default, you don’t need to add a print link to print the page the form is on, but some users don’t find it as easy to use the File menu to select the Print capabilities. Adding a link or a button to your form will make it much easier for your users to simply print the form.

Creating your form

First, you’ll begin by creating your form and adding your fields. If you need any help in how to create a form, please review this documentation.

Creating a print link

Next, add the HTML form field to your form. Once the field is added, you’ll add this code inside your HTML field.

<a href="#" onClick="window.print()">Print this page</a>

This snippet is an HTML example of a link. The href is left as a pound sign because we only want the link to appear, not to actually redirect the user. Using the pound sign gives us the proper HTML for a link and using the onClick means that when the link is clicked, it will perform the function window.print() and immediately send the webpage to the print window.

Once you’ve saved the form, you can see that just above the Submit button is a link to print the form.

Styling the link (optional)

Additionally, you could add some styling to the link to make it appear like a button if you would wish. If you’d like to add some styling, you would change the HTML to add a CSS class name to the link.

<a class="print_link" href="#" onClick="window.print()">Print this page</a>

Then for the CSS, you can add this CSS. If you need any help on how to add custom CSS to your site, please review this tutorial.

a.print_link {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #B95D6A;
    color: #ffffff;
    border: 1px solid #b95d6a;
    transition: all 0.2s ease-in-out;
}

a.print_link:hover {
    background-color: #ffffff;
    color: #b95d6a;
}

And that’s all you need! Would you like to know how to use shortcodes inside these HTML form fields? Check out our tutorial on How to Display Shortcodes Inside the HTML Field.

FAQ

Q: How can I print a form that is using the Page Breaks?

A: In order to have the whole form print when it spans multiple pages, you would use a specific Media CSS rule.

@media print {

/* print only styles here */
#wpforms-form-2620 .wpforms-page {
    display: block !important;
}

}

You can use the above to add on to your print screen to hide your sidebar, footer, header, etc.

Just remember to change the form ID from 2620 to match your own form ID. If you need help in finding your ID, please check out this tutorial.

If you would like this for all forms, use this CSS instead.

@media print {

/* print only styles here */
.wpforms-page {
    display: block !important;
}

}