A Paywall is used to prevent access to some kind of content, i.e blog post, ebook, download, membership site, until your customer completes a purchase.
In this article I will be walking you through how to setup a simple paywall solution using Gravity Forms and Stripe.
Note: The images and videos shown in this article are from the new Gravity Forms 2.5 form builder. 2.5 is currently in Beta and not recommended for use in production sites. You can learn more about 2.5-beta here.
Installing the Required Plugins
This video will walk your through installing Gravity Forms.
If you need help installing the Popup Maker Plugin, here is a quick video to walk you through that process.
Setting Up the Stripe Add-On
I think it is important that you understand why I prefer Stripe over the PayPal Standard Add-On. With Stripe the credit card processing happens in real time from your website through the form.
With PayPal, the user is redirected to PayPal to complete their purchase then redirected back to your site.
There are less complications when using Stripe and no risk of the user getting access to the product without completing a successful payment.
Building Your Form
I prefer for this form to be simple, low friction, so I will only be using a couple fields. You can however, add whatever fields you’d like to your form.
- Stripe Card
In my demo, the Product field is hidden, so that I can setup and style the call to action the way I want, without dealing with the form pricing field.
In my demo, I’ll be providing a downloadable file after the purchase is completed.
For simplicity, I will simply use the confirmation message, displayed after the form is submitted to deliver the download.
Note: If you rather not share the download link, you could send the file as an attachment in a notification email. You can use the article we wrote, Attaching a File to Your Gravity Forms Notifications, to help you implement that option if you’d like.
Setting Up the Form
This video will walk your through the whole form building process.
Building the Popup Box
You do not have to use a popup box when setting up this paywall. You can just embed your form directly onto your page, but I wanted something that I could use within my blog content that looked nice and didn’t confuse people, like a form in the middle of a blog article might do.
Why the Popup Maker Plugin?
This is important. There are a lot of popup or modal plugins in the market place, and some that are built into page builders like Elementor, however these can often be problematic causing conflicts with the Gravity Forms plugin.
The only popup plugin that is suggested for use (not endorsed or supported by) by Gravity Forms support is Popup Maker.
The Setup – Part 1
- Go to Popup Maker > Create Popup
- Enter your Title
- Add whatever content you want in the popup
- Click Add Form
- Select the form from the dropdown
- Uncheck Title, Description
- Check Enable AJAX
- Click Insert Form
The Setup – Part 2
- Scroll down to Popup Settings
- Click Add New Trigger
- Select Click Open from the dropdown
- Uncheck “Prevent popup from showing…”
- Click Add
- Enter a CSS Class .paywall-go
- Click Add
- Go to Display
- Click Center Popup
- Go to Appearance
- Select your desired theme from the dropdown
- Click Publish
Creating Your Call to Action
You can use this in a sales page, blog post, sidebar, etc… and you can make it as simple or as fancy as you’d like. For this demonstration, I will be building a reusable block that can be easily inserted into my blog articles.
After creating your form, the popup, and your call to action, you can start using your paywall.
Below is a demo of my paywall in action.
The Wrap Up
If you have questions or need help building your paywall, please use the comments or chat below.