How to Customize Printing An Entry

Introduction

Would you like to customize the styles when printing an entry? There is default styling on the entries when you print them, however, with a small PHP snippet and some CSS rules you can easily add your own styling before printing. In this tutorial, we’ll walk you through how to create your own styles when printing entries.

Creating the form

First, you’ll need to create a new form and add the fields that you need. If you need any help in creating a form, please see this tutorial.

Our form is a class registration form that will accept requests to sign up for particular classes so we have the Name, Email, Dropdown (to select the class), Numbers (for how many people are signing up for the class), Date (to select the requested date of the class) and Paragraph Text form fields.

Creating and uploading the stylesheet

Next, we’re going to create a dedicated stylesheet and add our custom styles to this .css file.

Once you’ve created the CSS rules, it’s now time to upload it using FTP or an FTP type of plugin, upload it to the theme directory. For uploading using FTP, you can follow this tutorial.

We’re going to use some CSS to change the labels, what the user entered into the field, the title, the border of the entry, and the body’s background color.

body {
    background-color: #e1f5fe;
}

#print .page-title h1 {
    color: #01579b;
}

#print .fields {
    border: 15px solid #eee;
}

#print p.field-name {
    color: #01579b;
}

#print p.field-value {
    color: #0277bd;
}

Once the CSS file has been uploaded, you’ll need to copy the URL to this file as we’ll need that for the next step.

Adding the code to customize printing an entry

Now our final step is to add the code snippet that will point to our stylesheet.

If you need any help in adding code snippets, please see this tutorial.

/*
 * Change the styles when printing an entry
 *
 * @link  https://wpforms.com/developers/how-to-customize-printing-an-entry/ 
 */

function print_page_additional_styles() {
	
   // Change this link to your stylesheet	
   $link = 'http://yoursite.com/print-wpforms-entry-stylesheet.css';
	
   //You can also echo your own custom styles by adding them inline to the top of the page
   echo '<style> body { background-color: #e1f5fe;} </style>';
	
   printf( '<link rel="stylesheet" href="%s">', $link ); 
	
}
add_action( 'wpforms_pro_admin_entries_printpreview_print_html_head', 'print_page_additional_styles', 10 );

Now when you go to print your entries, you’ll see your new custom styling.

Would you like also customize the styles on the Conversational Forms addon? Take a look at our tutorial on How to Enqueue a Stylesheet for Conversational Forms.

FAQ

Q: How can I provide more spacing in the print view?

A: You can add padding, margins, and widths to anything in the print view just by using this snippet.

/*
 * Customize the print view with margins, padding, and widths
 *
 * @link  https://wpforms.com/developers/how-to-customize-printing-an-entry/ 
 */

function wpf_customize_print_entry_styles() {
  echo '<style>
  #print.wpforms-preview-mode-compact .print-item-title{
	width: 200px;
    min-width: 400px;
  }
  #print.wpforms-preview-mode-compact .print-item-title, #print.wpforms-preview-mode-compact .print-item-value{
       padding-top: 4px;
       padding-bottom: 4px;
  }
  #print .print-body{
       margin-right: 20px;
       margin-left: 20px;
  }
  </style>';
}

add_action('wpforms_pro_admin_entries_printpreview_print_html_head', 'wpf_customize_print_entry_styles', 10);