/ 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.