Table of Contents
ToggleIntroduction
Overview
This article will give you all the necessary information to send a highly-customizable PDF document once a form built by Gravity Forms is submitted on your WordPress website.
The PDF will be sent to the user that submitted the form and will contain all of the form results. Plus, as I'll show in the example below, your PDF will also show the user specific text based on the submitted result, styled according to your brand!
The form in our example is a quiz / assessment. Based on the user choices, the PDF will contain different text outputs for every answer.
So, on your WordPress website you will need to install:
- Gravity Forms – you will build the quiz with this
- Gravity PDF – the plugin which will actually generate the PDF of the submitted results and send it to the user email
Installing and activating the plugins
Install Gravity Forms
Just login to your Gravity Forms account, download the .zip with the latest plugin version and then go to your WordPress website to Plugins > Add New and upload the file.
Install Gravity PDF
Go to Plugins > Add New, search for Gravity PDF and then Install and Activate plugin.
Create the simple quiz
In addition to the text, here is the video version of this tutorial so you can follow along:
Go to Forms > New Form and create a simple quiz like in the below image, with only two questions:
Of course, you can have how many questions you like or any other form fields. Once the quiz is created we will add it to a page on the WordPress website and from that point users will be able to submit the form. At the end of the form/quiz we should also add First Name – Last Name field and also Email field so that user can add their contact info.
Notification and PDF settings
Add the notification for the user who submits the form
This notification will be the email message which the user will get and which will actually contain the PDF file, as an attachment, with all the form results. To set up this notification you will have to go to form Settings and from the drop down links click on Notifications.
Then create the notification and fill in the fields.
Add the PDF settings
The fun part begins now. When you edit your form, just mouse over the Settings tab and click on PDF from the drop down menu. On the next page click on Add New button.
1. You will land on a page where you will choose all the PDF settings which are important for the goal we are trying to achieve. The first field is “Name” and you can add the name you want. This is just an internal name which that helps you to distinguish between multiple PDFs.
2. The second one is a drop down containing different templates for the PDF. Gravity PDF comes with four completely-free and highly customizable designs. But in our example we will learn how to create a new template from scratch and customize it as we want. 🙂
So, as you can see in the above image, when you check the drop down options under “Template” you will see two sections: Core – where there are all four free templates provided by Gravity PDF plugin and also there is another section called MemberFix Custom Template, which I have added, and under this section it is a template called Reinvention Personality Assessment (which is just an example name; you can call it anything). This one is actually the template we will build from scratch and customize it exactly how we want.
How to create a custom template for the PDF
So how can we make the template to appear in the Template drop-down and then how to customize it to include the form results ?
In order to create the file for this template you will need to login to your FTP or SFTP with the program you use for this and go to /wp-content/uploads/PDF_EXTENDED_TEMPLATES/.
Then create an empty .php file and upload it there. You will need to open the empty .php file and add the following to the top of the file and save it:
<?php
/**
* Template Name: Reinvention Personality Assessment
* Version: 0.1
* Description: Reinvention Personality Assessment
* Author: SC
* Author URI:
* Group: MemberFix Custom Template
* License: GPLv2
* Required PDF Version: 4.0
* Tags: space, solar system, getting started
*/
/* Prevent direct access to the template (always good to include this) */
if ( ! class_exists( ‘GFForms' ) ) {
return;
}
?>
You can add your own text for the Template Name or Group (which it is actually the new section I have mentioned above).
Once this is created then the new template will appear in the drop-down under the Template option of the PDF settings. Right now the template is empty and to add the forms results in it we will need to add the Gravity Forms merge tags and shortcodes in exactly the same way as you add them to the email body of the notification.
In this file you can also add CSS styles on top and HTML or PHP code inside the body. So it is pretty much like a normal web page file which uses HTML and PHP code. To be more clear please check the attached image showing the entire top part of the template:
You can see that I have added an image as a top header which will contain the logo or whatever you want. You can also add other images inside the PDF in every place you might need. As you have noticed, I have also used normal Gravity Forms merge tags ( {First name:79} and {Last name::80} ) and, as I said above, we can also use Gravity Forms shortcodes. Regarding the use of these you can see more info here.
But one very important thing to discuss it is the use of the nested conditionals in the PDF.
The correct use of the GravityForms nested conditionals
Let's say, for example, that when the user answers the first question of the small quiz I have created above, they get a number of points for every choice ( they get 3 points if they choose “Never”, they get 5 points if they choose “Rarely” and so on).
And the same thing happens for the next quiz question. And in the PDF we want to show different text based on the total number of points the user accumulates based on his answers. To achieve this we will need to use conditionals and even nested conditionals.
For example, if the user gets a total of 7 points or less then we will need to use a simple conditional like this:
But if the user gets a total number of points which it is greater than 7 and less than 14 then we will need to use nested conditionals like this (note there is a GravityForms shortcode and then within that shortcode there's another GravityForms shortcode; that's why it's “nested”).
It is important to notice that the first tag is written as gravityforms (with an “s” at the end) and the nested one is gravityform (no “s”). That is all regarding the template.
3. The next option on the PDF settings page is “Notification“. From the drop down please select the notification which we have created above:
4. For the “Filename” please add the name of the PDF file which will be attached to the notification email to the user. You should exclude the .pdf extension from the name. The following are invalid characters and will be converted to an underscore _
when the PDF is generated: / \ " * ? | :
.
5. “Conditional Logic” allows you to create rules to dynamically enable or disable PDFs. This includes attaching to notifications and viewing from your admin area.
And we are done with the General settings, the most important ones, for the generated PDF. Now, for every sent email notification, there will be a PDF attached which users can download.
The end
If you want to set up other things for the PDF, like Paper Size, Orientation or images PDI then you might also check the Appearance and Advanced tabs. Please let me know if you have questions or suggestions.
If you want to hire our team to set this up for you (and save yourself the price of a GravityForms license while you're at it), check out our MemberFix service!
the new template will appear in the drop-down under the Template option of the PDF settings, but even after adding the html/css I am getting a blank pdf, can you suggest a solution.
Hello Mrinal!
Thank you for your interest. Can you please send to me the code which you added to the template? I think there could be an error somewhere and I would be glad to help you with this.
SC
Hi SC — Do you offer assistance with creating custom PDFs? I have how I want the PDF to look, but I don’t know how to map the forms to where the data should appear on the PDF.
Hi Brigid! Yes, we would love to help you with this. Please let us know. Thank you.
how to export all entries in one form ? to one pdf.
Hi Ahmet! That is an interesting question. What do you mean by export entries in one form?
Great Article! I’m making a simple PDF, just form fields arranged nicely in an HTML table.
I’m getting the same result as Mrinal, a blank PDF attached to the notification email.
Here’s the email notification content using All Fields
I like to eat:
Apples
I enjoy ___ the most:
Spring Time
Name
bob smith
Email
1@3.com
The php file I’m using is modeled after yours and can be seen here:
https://pastebin.com/GKVvfNWP
Any insight would be much appreciated!
Hi Mark, Thank you for your message.
It is hard to tell why it’s not working, without checking the website.
Do you use the latest plugins versions?
SC
I figured it out! And thanks for the Reply. Turns out, In your first screenshot, your line 16 and my line 16 were slightly different, (you can see it in my pastebin link above). My single quotes (apostrophes) around the GFForms weren’t registering as the correct character. I deleted them and retyped them and then it correctly shaded the GFForms and the rest worked just as you said it would. Great resource, the problem was on my end!
Ok Mark. Glad to hear that it worked. 🙂
How we can bind all the dynamic form’s values in this customized PDF ?
Thanks in advance!
How to customise default gravity template? If I edit the default template will it break the CSS of the PDF report.