### [How to Add a Print Link to Your Forms](https://wpforms.com/developers/how-to-add-a-print-link-to-your-forms/)

**Published:** December 14, 2021
**Author:** Umair Majeed

**Excerpt:** This tutorial will show you how to add a print link to your WPForms using an HTML form field and little HTML. 

**Content:**

Want to let users print your forms for offline completion? While browsers offer built-in printing functionality through the default **File** menu, adding a dedicated print button or link can improve user experience.

This guide will show you how to add a print option directly to your forms using simple HTML code.

## Setting Up Your Form

First, create a form and add your desired fields. If you need help creating your form, please review our guide on [creating your first form](https://wpforms.com/docs/creating-first-form/).

## Adding the Print Link

Next, add an **HTML** field to your form. Inside this field, add the following code:

```

Print this page
```

![add the print link snippet inside the HTML field](https://wpforms.com/wp-content/uploads/2021/12/wpforms-add-print-link-in-html-field.jpg)This code creates a simple text link that triggers the browser’s print dialog when clicked. The `href="#"` prevents page redirection, while `onClick="window.print()"` calls the browser’s print function.

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

![now just above the submit button is a print link to print the form](https://wpforms.com/wp-content/uploads/2021/12/wpforms-print-form.jpg)## Styling Your Print Link (Optional)

To make your print link look more like a button, you can add custom styling. First, modify your HTML to include a CSS class:

```

Print this page
```

Then add this CSS to your site. If you need help adding custom CSS, please review our guide on [adding custom code](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).

```

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](https://wpforms.com/wp-content/uploads/2021/12/wpforms-print-form-styling.jpg)## Printing Multi-Page Forms

If your form uses Page Breaks, you’ll need additional CSS to ensure all pages print properly. Add this CSS to your theme:

```

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

Remember to replace `1000` with your form ID. If you need help finding your form ID, please check our guide on l[ocating form IDs](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id).

To apply this to all forms, use:

```

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

You can also use these print styles to hide elements like the sidebar, footer, or header when printing.

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](https://wpforms.com/developers/how-to-display-shortcodes-inside-the-html-field/ "How to Display Shortcodes Inside the HTML Field").

**Categories:** Extending

**Tags:** CSS, HTML

---