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 form 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

4 Types of eCommerce Emails To Send To Millennials

There’s always a risk, but plenty of reward if you’re sending out the right emails to your Millennial audience.

Jake Rheude

How To Start An Online Bakery (Or Move Your Existing Shop Online)

In light of COVID-19, many businesses will increasingly rely on online solutions to make sales. Now might be a good time to move your bakery business ...

Jodie Lee

COVID-19: Social Media Etiquette for Small Businesses

Whether you're running business-as-usual or have paused operations temporarily, there is plenty you can do to ensure that your audience remains as eng...

Iniobong Eyo

How To Work From Home & Thrive: 7 Tips From Our Remote Team

We share some of our favourite tips and tools to help you feel connected, productive and mentally sound whilst working from home during COVID-19.

Vrinda Singh
}