How to Add a Print Link to Your Forms

Are you considering adding a print link to your forms? By including a print option, you provide your visitors with a convenient method to print the form and complete it manually instead of filling it out online. Below, we’ll guide you through the process of implementing this feature with a simple HTML snippet.

Although web browsers typically allow users to print the entire page containing the form via the “File” menu, some individuals may find this process cumbersome. Integrating a print link or button directly into your form enhances user experience by simplifying the printing process. This improvement can be particularly beneficial for users who prefer to work with physical copies or who encounter difficulties with the browser’s print functionality.

By offering a dedicated print option within your form, you empower users to effortlessly generate a printed version, facilitating their interaction with your forms and potentially increasing overall user satisfaction.

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;
}

}