Adding Paperform Popups to your WordPress Site

/ product
Dean McPherson

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.

Try Paperform Now!

14 Day Free Trial, No CC Required

Rebranding Your Business: The 5-Step Strategy For Success

We recently sat down with Hayden Bleasel, Founder of award-winning design studio Jellypepper, to map out a foolproof process for a successful rebrandi...

Vrinda Singh

Ultimate Guide To Event Promotion In 2019: 10 Creative Ways To Promote

You've set the date and booked a venue. Now you just need to make sure people show up. Here's how to do just that.

Olga Bedrina

Referral Marketing: 6 Foolproof Strategies For 2019

Here's how you can quickly build a successful referral marketing program with a small budget.

Anastasia Sviridenko

How To Get Clients As A Personal Trainer In 2019: 5 Fast Hacks

Coach Alan Ashley shares his exclusive secrets and tips on getting (and keeping) clients as a personal trainer - fast.

Vrinda Singh
}