How To: Enhance PDF Downloads with a Smart Loading Indicator

Featured image for the "How To: Enhance PDF Downloads with a Smart Loading Indicator" blog post
Learn how to improve your website's user experience by using a smart loading indicator that provides instant feedback while generating and downloading even the most complex Gravity PDF document.

Just How Long is a Piece of String?

Have you ever had to wait for a large/complex PDF to generate with no idea of how long it will take? That’s no fun! But on the flip side, the true power of Gravity PDF stems from dynamic document generation.

Gravity PDF documents have an infinite amount of ways they can be rendered, and are affected by the input from users, conditional logic in both form and PDF template, and the document design. Plus, that doesn’t even take into account the server resources available on your web hosting provider, or a user’s available bandwidth (or distance they are from your web host)!

Just like that piece of string, it’s impossible to be certain just how much time a PDF will take to generate and download. But just because something isn’t possible to measure with accuracy, doesn’t mean a user should be left twiddling their thumbs while they wait. That’s just bad *ahem* form!

To solve this problem we built the Enhanced Download extension. The plugin gives users instant feedback when the PDF generation process begins and ends, thanks to a smart loading indicator. Users know what to expect, it helps build trust with your audience, and improves the overall experience.

Take The Stress Out of Success!

Imagine you are organizing a virtual conference, and you want to provide a Certificate of Attendance to the guests. Doing the work manually is inefficient, time-consuming, and stressful; so you’ve chosen to automate the process using Gravity Forms and Gravity PDF.

You create the form and set up the PDF certificate. You’d like the certificate to automatically download as soon as the form is completed. This is where the Enhanced Download add-on comes into play. With it, a user submitting your form will see a loading indicator while the certificate is generated. If an attendee makes a typo, they can easily fix it without going to the hassle of refreshing the page and refilling the form from scratch. It’s a win-win! Once you’ve finished testing everything, you send everyone the link to the form and automation does the rest.

In this guide, we’ll demonstrate how to use the Enhanced Download add-on to make downloading PDFs more intuitive for your users. Let’s get going! 🚀

0. Install and Activate Enhanced Download

If you’d like to follow along, you’ll first need a copy of the Enhanced Download plugin installed and activated on your website. It probably goes without saying, but you’ll need Gravity Forms and Gravity PDF activated, too.

Want to follow along?
Grab your copy of Enhanced Download.

1. Create a Form

You can either download this form export (right click and save as) and import it on your website, or build the form from scratch. If you’d prefer to create your own, all you need is a Name field and a Date field. For completeness, I’ve included a few additional fields, but they aren’t necessary.

Screenshot on how to set the Gravity Forms Date Field to Administrative

Since this fictitious virtual conference is a fixed event, you’ll need to hide the Date Field from public view and give it a default value. To do this, navigate to the Advanced Section of the Date field, set the Visibility to Administrative, and then add a date to the Default Value. Since it’s a made up event, it doesn’t really matter what date you choose. Once you have finished, select the Save Form button.

Pro Tip: This form is a perfect place to collect post-event feedback from attendees.

2. Create a Certificate of Attendance

In the following section, I will guide you through the basics of setting up a PDF. If you’re after a detailed guide on setting up and configuring a PDF certificate on your form, please refer to this How To article.

To get started, first make sure you are on the Form Editor page for the form created in step 1. Next, hover over the Settings menu item at the top of the page, and select the PDF submenu item. On the page that loads, add a new PDF by selecting the Add New button.

General

When setting up a new PDF, ensure that you complete the two required fields: Label and Filename. For the Template, you can select from any of the six premium PDF Certificate templates sold through the GravityPDF.com store. Each certificate is highly customizable and can be used for any occasion, and with any Gravity Form. For this How To, I’ve selected Skylark for its fun and friendly design. But any of these certificates works equally well.

If you want the PDF sent via email you can configure the Notification setting. However, I’m going to leave this feature disabled.

Level up your certificates!
Grab a Gravity PDF certificate today.

Appearance

The Appearance section of the PDF settings lets you fine-tune the overall look and feel of your PDF. This includes customizing the paper size and orientation, as well as the font, font size, color, and right-to-left language settings.

Screenshot of the Gravity PDF Gravity PDF Appearance Section

If you’re creating your own certificate from scratch (great job), feel free to choose any font and font size you’d like. If using one of the store Certificates, you’ll get the best results by sticking to the font recommended in the documentation. For Skylark, that is Saira at 15pt.

Template

The Template section of the PDF settings changes depending on the specific template chosen in the General section. For any premium certificate, these settings are all standardized and will remain the same regardless of the design you select.

Screenshot of the Gravity PDF Gravity PDF Appearance Section

Continue by personalizing the certificate to suit your needs. Be sure to use the merge tag selector to include the Name and Date fields created in Step 1.

Pro Tip: You're welcome to use merge tags anywhere you see the merge tags icon { · · }.

Go ahead and skip the Advanced Section. Refer to our documentation if you’re interested in what all the advanced settings do.

Once you’re happy with the configuration, click the Update PDF button to save/update all the changes made.

Test the Certificate

Now that you’ve customized your Certificate, let’s see if the PDF is working properly. First, head over to the Entries List Page. If no entries are shown yet, go ahead and submit a test entry (you can do this quickly by selecting the Preview button). Hover over any entry in the list and select View PDF. Does it look amazing? Well done you! 👏 If it’s not quite right, go back to the PDF settings and make modifications until you are happy. 

Configure the Form Confirmation

Here’s where the magic happens! Let’s set up the PDF Redirect Confirmation so you can start taking advantage of Enhanced Download. This allows your users to automatically download the certificate on form submission.

Head over to the PDF List Page and select the shortcode Copy button for the Certificate PDF. This will copy the PDF Download Link shortcode to your clipboard, and allow you to easily paste it in your form Confirmation.

Now you’ve copied the shortcode, head to your form’s Confirmations List Page. Go ahead and edit the Default Confirmation. When the page loads, set the Confirmation Type to Redirect and paste the shortcode into the Redirect URL field.

To redirect the user to the download process after submitting the form, set the Confirmation Type to Redirect. Paste the PDF download link into the Redirect URL field, and then save the confirmation.

Pro Tip: While not required in a Redirect Confirmation, you can enhance any Gravity PDF download link by including the enhanced="1" attribute in the [gravitypdf] shortcode. This includes Text and Page confirmations (Posts or Pages), GravityView, and GravityWiz Entry Blocks.

Enable AJAX on your Form

For Enhanced Download to work correctly using a Redirect Confirmation, AJAX must be enabled on your form. But what is AJAX and how do you enable it? Well, our friends over at GravityKit have a fantastic article all about Gravity Forms and AJAX, so I’ll let them answer your questions.

Suffice to say, you’ll need to go to the page or post your form is embedded on and toggle on the AJAX setting in the Gravity Forms Block. If you haven’t added the form to a page yet, go ahead and do that first.

Make sure you publish or update your post/page once you’re done.

Like these How To Guides? Subscribe to our newsletter to get notified when our next one is published.

4. The Enhanced Download Experience

Alright. Now you’ve got the Enhanced Download plugin set up, let’s see it in action! Head to the page you just published/updated, fill out the form and submit.

As soon as the form is submitted, the smart loading indicator will be displayed, providing feedback about the PDF generation process. 

One of the great features when using a Redirect Confirmation with Enhanced Download is users can easily edit their form information, resubmit, and get a fresh PDF. This is perfect for fixing those pesky typos.

To give it a try, close the smart loading indicator once complete, make your changes, and hit submit again.. Voila! Your updated PDF Certificate is generated and downloaded again. Pretty cool, right? 😉

Final Tip!

Screenshot on how to translate strings when using the Enhanced Download add-on

It’s easy to change the text that appears in the smart loading indicator. This can be done via the Extensions Global Settings page, and is really useful for translating the text into your native language.

Wrapping up!

Way to go! You’ve just taken a big step towards providing a better PDF download experience on your website. Plus, you have a better understanding of how Gravity PDF can be used as a powerful tool to generate certificates. Now go ahead and use your newfound knowledge to give your users the best UX possible. 👌

If you’re keen to explore other ways to use Gravity PDF to streamline your business processes, be sure to check out other articles in our How To series. If you found this How To Guide helpful, spread the word by sharing it on Facebook or Twitter (or any other social media you might be using).

Give Your Users a Better Experience
Grab your copy of Enhanced Download today!