Introduction

In this article, we wanted to show you how to make a quick and dirty paywall using WPForms.  As a design agency, we offer a lot of resources for free. We also have a lot of resources/articles that should be paid, and decided to make a really quick paywall, to use if we ever wanted to quickly monetize a resource.

We're going to use WPForms for the main paywall framework, as it offers a unique and easy way to build our form, process entries, and push users to our preferred payment processor, Stripe.

Here's how we expect the solution to work. We will push users via social media to our paywall -- if the user decides to purchase access to the content, they'll enter their information into the form. The form will then process their payment, and redirect them to a password protected page. In the redirect, via a URL parameter, we will contain a passthrough pass code which will automatically sign them into the page.

The form will also email the user a confirmation on submission. We can include the password in this message, so our customer has access to the content even without the passthru link.

If a user tries to access the page from the public internet, they will be greeted with a password screen.  If they paid via the form, they'll have the password, and if they didn't, they’ll need to go back and pay through the form.

There are several WordPress plugins that will allow you to do this, but we decided to do this on her own because we already have WPForms implemented into our website, adding new plugins decreases the performance of a website,  and this method of redirecting users to a page with a URL means that we can push users to different domains. To be more specific, if we have paywall content on the Isotropic Design site, but push users to this content through a WPform paywall located on our ElementorQA website, this can easily be done using this solution.

Now that we've figured out how our paywall is going to work, let's go and build it.

The first step is creating our paywall form. We want to collect some information while also making our users pay for the content. The way we're going to do this is by collecting the name, email address, and website of the visitor. Using the stripe payment add-on for WPForms, we’ll then have users pay $5 to access the content behind the paywall. 

When the payment is successfully processed will push the user to the content behind the paywall by redirecting them. Remember, this redirect will contain the password in the URL. The form will also email the password to the customer.

Building The Form

First, we create the form.

We're naming our form paywall, and using a blank form template.

We'll make the basic info collection part of the form by adding a name field, email field, and URL field.

Now, we had our paywall feature by adding a single item field. This is located in the payment Field section of WPForms. 

From WPForms:

The Single Item field can be used to display an individual item in a form. This can be useful for prices that are fixed and will always be applied to the total cost, such as a base fee for a program.

We want to charge $5 for individuals to access our article, so the item price is $5. You can also make a “pay what you want” paywall by selecting “user defined” as the item type. This means the user can type in a price, and they will be charged what they enter.

If you’re interested in the psychology behind this selling method, here’s a link to a really interesting report on Pay What You Want (PWYW).

Because we're going to place this form in a landing page (“Title: Unlock This Article For $5”), we're going to hide the item type. That means the submitter will not see this field on the front end, but will still be charged the $5.  If this will be a stand-alone form (ie. no context), you can choose “single item”, and this field will display on the front end of the form.

The final thing we're going to do is add the credit card field, where users can enter their payment information. This payment information is not stored in our server, and is processed through Stripe. To get this field, you need to have WPForms Pro and the Stripe Addon. 

We also want to make this field appear only after the user enters their basic information. We feel that this may increase the conversion of our paywall and will do this by enabling Conditional Logic for that specific field. 

The rule that we're using will hide the credit card filled until the form user fills out the website / URL field.

By now here's what your form should look like on the backend WPForms builder.

For the submit button on the form, we're going to change the button text to “access your content now”. You can do this by going to Settings →  General, and editing the Submit Button Text field. 

Now, we're going to configure Stripe as the payment processor. We'll do this by going to the payment section on the form builder, clicking “Stripe” and setting our Stripe API keys (you need an account with Stripe to get API keys).

Configure Stripe

We recommend you run this form in testing mode before you push it to your production site. You can access your test API by going to your Stripe dashboard → Developers tab → API Keys,  and toggling the “test mode” on.

Simply paste those keys into your WPForms Stripe settings page, check “test mode” and you're good to go.

Now that Stripe is configured, go back to your Form Builder, and enable Stripe. 

You do this by going to this Stripe settings tab under payments, and checking “Enable Stripe”.  Enter your payment description and set the Receipt to “Email”. You can also enable subscriptions, though we opted not to go this route.

The final thing to do is set up your email confirmation, which will send the password to the purchaser, and your url redirect with the password parameter in place.

For the email, go to Settings → Notification, and add a new one (we called it “For User”:

Configure the notification to send to the customers email address by using Smart Tags (click Smart Tags, Select Email): 

Then you can make your custom email message. In our email, we included the password in plain text that customers can use to unlock the page.

Now, we need to configure the redirect, which will send users to the password protected page and automatically log them in using the password contained in the URL parameter. This is quite simple to do, simply change the default confirmation to page redirect.

Redirect to the page that you will have the protected content on, and be sure to include the password in a URL parameter like the one in the example. Our password is 32101, so the parameter is /?pw=32101. 

Make The Landing Page

Now your form is ready to be embedded on your initial landing page. Simply click the embed button, and paste the shortcode where you want the form to display. We made a really simple & quick landing page using Elementor Pro. With the form embedded, this is what the page looks like: 

We're getting an insecure content warning which is automatically generated by WordPress forms because we're developing this website on our Localhost (no SSL). If you get this warning in your production website, you've likely misconfigured your SSL certificate or don't have one.  The process payments you should always be using HTTPS. 

You can test this form by entering information into the field (for the credit card use a test number provided by Stripe), and clicking “Access Content Now”.  If you've configured everything correctly, it should redirect you to the page that will be password protected. 

Make the Content Page

Now we need to configure the page content to be password protected (and accept a passthrough password via the URL parameter). To do this we're going to use a super simple and lightly plug-in called Password Passthough. We're going to link this plug-in in the article as it is difficult to find by searching the plugin repository from your WordPress installation:

The plugin is currently not actively supported or developed, but it still works with WordPress Version 5. It makes it so we can attach the password to the URL, which the form will redirect to, and unlock a password protected post automatically. That makes the action from the form paywall to the content (even if it’s on another site) seamless. Even better, it won’t make an impact on the performance of your website as its total size is 2.30 KB.

You can make your page/post directly in Guttenberg, like we did. When you're ready to publish, change the post visibility to “password-protected”. Enter the password that your form redirects to.

Now, you can test the password protection by going to the page. If the page displays something like this, it’s protected:

You can test to see if the password passthrough works by navigating to the URL of the web page and appending the following parameter to it: https://example.com/page/?pw=yourpassword. 

This should be the link that your form will redirect to after processing the payment. If you navigate to the link and the protected page is automatically unlocked, then your setup is working. If you navigate to the base page without the link, then you’ll need the password to unlock it (which is why it’s a good idea to set up your WPForm to automatically email it to the submitter). 

Congratulations. You've now made a really quick and simple paywall that can work across websites, and only installs a few lines of code on the receiving site (that's the password passthrough plugin). 

With this setup, the website with the content doesn't even need to be running WordPress. If you're on a different CMS, you can simply make a password protected post by using a little bit of JavaScript. This is great because it makes this setup extremely versatile.

This tutorial should have introduced you to WPForms, and a simple paywall that's easy to build with it. If you have any questions about how to implement this, feel free to reach out using our live chat feature. We're happy to consult with you on how best to implement a paywall like this for your website.