One of my favorite side projects are my Ninja Form plugins. I love challenging myself with new coding techniques. One of the features that I really enjoyed working on is the template system I put into my Ninja Forms PDF Form Submissions plugin. It allows you to copy a template file to your theme and then customize it. This way you can totally customize the PDF without knowing any programming.
The Basics
If you don't change the template at all the PDF will print out the name of the form and the submitted values in a table. It's pretty basic but contains all of the information you need.
Adding a Logo to the PDF
Now let's say you want to change this up a bit. You want to collect the same information but you want to brand the PDF. Copy over the /templates/pdf.php template to ninja-forms-pdf-submissions/pdf.php in your theme. Upload your logo to your theme and then link to it in the template.
The pdf.php template should look something like this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| / | |
| * PDF Included With Form Submission | |
| * | |
| * @author Patrick Rauland | |
| * @version 1.0.0 | |
| */ | |
| if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly | |
| ?> | |
| <html> | |
| <head> | |
| <link type="text/css" href="pdf.css" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <img src="../../../themes/your-theme/logo.png"/> | |
| <h1><?php echo $title; ?></h1> | |
| <?php echo $table; ?> | |
| </body> | |
| </html> |
The result looks alright. We have the cute mascot but the white text in the logo isn't visible. We'll have to add some CSS to make the background darker.
Adding Styles to the PDF
You can add styles to the PDF just like you add styles you an HTML document. You just need to link to a CSS file. The document root is set to wp-content/plugins/ninja-forms-pdf-submissions/include/ so if you want to include a stylesheet or image from your theme you can to do it like this: <link type=”text/css” href=”../../../themes/your-theme/pdf.css” />. My CSS looks like this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| header { | |
| background-color: #ef4748; | |
| margin-bottom: 20px; | |
| padding: 20px 20px 0 20px; | |
| } | |
| #main { | |
| background-color: #ffffff; | |
| padding: 20px; | |
| } |
By adding some CSS to your PDF document you can really start making it fancy.
Playing with Form Fields
The first part of the tutorial can be achieved by non-technical people. For people who have programming experience I included some extra functionality that you can modify.
There is an extra php variable you can play with in the template. The $fields array contains all of the fields in the form and you can do whatever you want with them. You could loop through them and create the table in a different way or you could omit the table completely and print out specific fields.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| / | |
| * PDF Included With Form Submission | |
| * | |
| * @author Patrick Rauland | |
| * @version 1.0.0 | |
| */ | |
| if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly | |
| ?> | |
| <html> | |
| <head> | |
| <link type="text/css" href="pdf.css" rel="stylesheet" /> | |
| <link type="text/css" href="../../../themes/your-theme/pdf.css" /> | |
| </head> | |
| <body> | |
| <header> | |
| <img src="../../../themes/your-theme/logo.png"/> | |
| </header> | |
| <div id="main"> | |
| <p>Hi <?php echo $fields[6]['value'];?> <?php echo $fields[23]['value'];?>!</p> | |
| <p>Thanks for filling out our form. We'll respond to you shortly.</p> | |
| </div> | |
| </body> | |
| </html> |
Which does something like this:
PDF Templates for Each Form
Some people want to have PDF templates for each form. The best way to achieve this is to use one template and use some conditional logic within the template using the $form_ID variable to display different templates.
Support
I hope this was useful to you. If you have further support inquiries I would reach out to the WP Ninjas directly. They will be able to answer any further Qs you have. For that reason I've disabled comments on this post.