Customizing Ninja Forms PDF Form Submissions

PDF Form Submissions

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.

PDF Form Basic

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:


<?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.

PDF Form With Logo

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:


html {
margin: 0;
padding: 0;
}
header {
background-color: #ef4748;
margin-bottom: 20px;
padding: 20px 20px 0 20px;
}
#main {
background-color: #ffffff;
padding: 20px;
}

view raw

pdf.css

hosted with ❤ by GitHub

By adding some CSS to your PDF document you can really start making it fancy.

PDF Form with Logo and Colors

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.


<?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>

view raw

pdf.php

hosted with ❤ by GitHub

Which does something like this:

PDF Form Customized Fields

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.

Comments are closed.