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.

start by creating your form and adding your fields

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>

add the print link snippet inside the HTML field

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 immediate send the webpage to the print window.

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

now just above the submit button is a print link to print the form

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

by adding the CSS, you can turn a regular link into the appearance of a button

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.