/ wordpress

Adding Paperform Popups to your WordPress Site

We recently released the ability to have our web forms available as a popup on websites. The basic use case is to simply have a button that you can click to show your form, which is very easy to set up if you have direct control over the HTML on your website.

Sometimes though, you can't always edit the HTML directly, but would still love to have a Paperform popup on certain elements. This is particularly true of WordPress where you often shouldn't or can't modify the template you are using directly.

In these cases, the Paperform platform provides a JavaScript API for calling popups programmatically. This means with a small amount of custom JavaScript you can have a popup appear any time, and when any element is clicked.

So let's get started!

1. Install the Header and Footer Scripts Plugin

  • Log in to your WordPress site.
  • Go to Plugins > Add new
  • Search for "Header and Footer Scripts Inserter".
  • Click "Install Now" and activate the plugin.

This plugin gives us a place to neatly add in some custom JavaScript that is separate to the template.

2. Add Paperform Embed Javascript

  • Go to Settings > Head and Footer Scripts
  • At bottom footer section add the following code:
<script src="https://paperform.co/__embed"></script>

3a) IF you can edit the HTML directly

So you have a certain element that when it's clicked it opens the popup (e.g. a button, link or image). If you can reach this element's HTML all you need to do is add two attributes -> data-paperform-id and data-popup-button.

For example, say I had the following button:

<button>Subscribe Now!</button>

And I wanted to show the form https://newsletter.paperform.co. Then, all I'd need to do is add those two attributes.

<button data-paperform-id="newsletter" data-popup-button="1">Subscribe Now</button>

That's it! Paperform embed codes will take it from there.

3b) Advanced: Custom JavaScript

If you can't access the HTML directly, you will need to use some custom JavaScript. The Paperform embed script includes a function that when called shows the popup. To open the Paperform popup on the newsletter form, you can call the function Paperform.popup('newsletter');.

If you were using jQuery, you could add something like the following to the footer scripts section;

<script>
  $('#my-element-id').click(function() {
    Paperform.popup('newsletter');
  });
</script>

Without jQuery, the above would look like;

<script>
  document.querySelector('#my-element-id').addEventListener('click', function() {
    Paperform.popup('newsletter');
  });
</script>

In both of the above, #my-element-id is a selector for the target element, and newsletter is the start of the URL for the desired web form.

The easiest way to get the selector is by using Chrome Dev Tools, see this quick video for an overview of how to do that.

Dean McPherson

Stop Guessing, Start Asking: How to Conduct Market Research Without a Massive Budget

Market research can seem like a heavy lift for small businesses. But, with modern technology, you don’t need advanced tools or sophisticated training to gather useful data. This 6-step process walks you through everything you need to make your company smarter.

Tyler Hakes

Knowledge is Money: How to Turn Your Passion in a Money-Making Enterprise

Tired of reading articles about the latest internet success story and wonder high they got there. Wonder no more. Here’s how to turn your passion and knowledge into an online business.

Stephen Altrogge

Pay for Play: Why Putting Your Content Behind a Paywall Is the Right Move For Your Website

After a dormant few years, paywalls are once again on the rise. If you’ve ever thought about charging a fee for the content you create, now is the time to stop thinking and start doing.

Stephen Altrogge

Paperform Product Roadmap 2019

Here's how we wrapped up Q4 2018, and what's happening with the Paperform platform in Q1 2019. We've got big things planned! A New Templates Experience Launched November 2018 We worked with our most prolific Paperform users to bring you a series of

Diony McPherson

From Idea to Creation to Sale: How to Write an eBook and Sell it on Your Website

If you’ve ever wanted to create an eBook now's the time. Here's what you need to know to create your own and sell it on your website.

Stephen Altrogge