/ 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

Paperform + Process Street: How to Use Zapier to Kickstart Your Client Onboarding Process

Respond quickly and complete all of the necessary steps to deliver a first-class onboarding experience.

Alex Gallia

Subscription Services: How to Give Your Talents and Skills Recurring Value

With subscription-based services, you offer your clients more than just a service; you provide them with an ongoing experience. Too often though, we fail to recognize that a single job can quickly expand into a long-term relationship.

Stephen Altrogge

Landing Your Best Donors: How the Right Landing Page Draws More than Just Donations

Donations are the lifeblood of any nonprofit or charity organization. Here’s how to use the digital tools of today to maximize the contributions to your cause.

Stephen Altrogge

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