Quantcast
Channel: WordPress Tutorials Archives - Formidable Forms
Viewing all articles
Browse latest Browse all 521

How To Add a WordPress PDF Viewer to Your Website

$
0
0

It only takes a few seconds to display a PDF in WordPress with these tricks — here are two easy ways to add a WordPress PDF viewer to your website.

How to add a WordPress PDF viewer to your website

Approximate read time: 6 minutes

Want to add PDFs to your WordPress site without the hassle? Look no further! In this article, we'll show you two different methods.

First, we'll guide you through using WordPress's own block editor to embed PDFs. It's perfect if you're new to making websites or short on time.

Then, for those who want a bit more control and some extra features, we'll dive into how to use a handy PDF viewer plugin.

Let's get to it!

Embed a PDF in WordPress with the built-in block editor

The quickest and simplest way to insert a PDF into WordPress is to use the File block in the standard page editor. But if you want to really customize your PDFs and their appearance, ⏩ skip ahead to the next section.

Step 1: Insert the File block

Open your WordPress page or post and click the + icon to add a new block. Then click the File block to insert it.

How to embed a PDF in WordPress in the block editor

Step 2: Upload your PDF file to WordPress

Upload the PDF file or select your PDF document from the media library.

Step 3: Adjust the WordPress PDF viewer settings

Open the settings of the PDF embedder by clicking on the block in your page or post.

Built-in WordPress PDF Viewer settings

From the sidebar, you can now adjust the size of the viewer on your WordPress website and choose whether to show a PDF download button.

You'll also notice it automatically makes a link to open the PDF in WordPress with the option to open the PDF in a new tab.

Step 4: Publish your post or page

And that's it! You just embedded a PDF file in WordPress. Easy, right?

Example of PDF embedded in WordPres website using block editor

This method may be simple, but it comes with some big limitations. Your WordPress theme will determine the color, fonts, and overall styling, so you'll need to know CSS to make changes.

Don't want to fuss with any code? Keep reading!

Use a WordPress PDF viewer plugin

If you want more control over how to put a PDF on your WordPress site, a PDF embedder plugin is the way to go. 🔌

There are a lot of tools to choose from, ranging from the more basic E2PDF to cool custom PDF generators like Formidable Forms and flipbook WordPress plugins such as Dear Flip's 3D Flipbook.

Since we don't like bogging down sites with tons of plugins, we'll use Formidable Forms' all-in-one solution for this tutorial.

Step 1: Install Formidable Forms

Formidable Forms does have a free online form builder, but its form to PDF plugin is only included in the premium version.

So pick up a Business or Elite license below if you don't already have one, and then we can get started!

Get Formidable Forms now!

Try the best WordPress form maker risk-free with a 14-day money-back guarantee.

Step 2: Install and activate the Visual Views and PDF add-ons

From your WordPress dashboard, go to Formidable → Add-Ons. Search for PDFs and then click to install and activate the add-on. Do the same for the Visual Views add-on.

How to install and activate WordPress custom PDF add-on

With these two add-ons, you can automatically create PDFs from form entries and provide visitors with personalized PDF invoices, quotes, contracts, certificates, and more.

Step 3: Make a form

Time for the fun stuff! Go to Formidable → Forms and click + Add New.

Choose a WordPress form template to get started fast, or Create a blank form to build your own from the ground up in the drag and drop editor.

WordPress form builder

The information collected from this form will fill out your PDF, so you'll probably want to include at least Name, Date, and Signature fields.

Save your form when you're done.

🤓 Learn more: How to create a form in WordPress

Step 4: Create your PDF

At the top of the form builder, head to the Views tab then hit Add New.

Grid View type

Choose the type of View you want, but we’ll use a Grid for this example. The editor will open after you name your View and click Create a View.

website PDF view builder

To show only the link to the PDF on the Listing Page, add a single block and the text:

<a href="[detaillink]">View the PDF</a>

Next, Select Detail Page and click the Layout Builder button to design your PDF.

Drag blocks to add rows and columns to your PDF. Then, click Save Layout.

Drag and drop layout builder

Now, you can click inside any block to open the PDF content editor. Add text, images, watermarks, or even pull in form data with the customization options.

How to use a form to fill in a PDF

For example, if you're creating a PDF letter of recommendation, it may look something like this:

WordPress PDF editor for a Letter of Recommendation

Once you're happy with your PDF, click Update, and let's get it online!

Step 5: Embed the PDF into your website

Way to go! You made it to the last step. And you'll be glad to know it's surprisingly simple. 😊

Open the WordPress post or page where you want to embed the PDF file. Next, copy the following shortcode and paste it on the page:

[frm-pdf view="*YOUR VIEW ID*" public="1"]

You can find your View ID on the Formidable → Views page.

Then, Update and preview the page to see the link to view your PDF!

PDF embed example letter of recommendation

For more help customizing your PDF, read this post on how to use a PDF editor for WordPress.

Do more with this WordPress PDF viewer

Remember when we said Formidable Forms is an all-in-one solution? That's because it doesn't just let you view PDF files in WordPress; it also allows you to send them as email attachments, use them as lead magnets, or sell them as digital downloads.

Bootstrap modal for gated content
Example of a Bootstrap modal form for gated content, made with Formidable Forms

Plus, you can create any form imaginable with this same plugin. So you won't need to install other tools to create contact forms or add payment gateways to your website.

See Formidable Forms' features to discover everything you can do with this one WordPress plugin.

Ready to start embedding PDFs?

It's easy to embed PDFs in WordPress websites, but there's probably a lot more you want to do on your site. So why not pick a WordPress PDF viewer that also works as a powerful form builder, custom PDF generator, calculator creator, and survey plugin too?

Grab Formidable Forms today and take your website to the next level!

Get started with Formidable Forms!

For more WordPress PDF tips and tutorials, follow us on Facebook, Twitter, and YouTube.


Did you know Formidable Forms is the best WordPress form plugin available today? If you aren't already using it, get started with our free plugin or the full-featured premium version!

Read more from the Formidable blog

The post How To Add a WordPress PDF Viewer to Your Website appeared first on Formidable Forms.

Viewing all articles
Browse latest Browse all 521

Trending Articles