Using WordPress for Sales Landing Pages

Last month, I became the Senior Web Dev Fellow at Center Centre. For the second half of my 6 month fellowship, I get to focus on growing my skills as a web developer and tackle projects that I can add to my portfolio.

The new Junior Dev Fellow has caught on quickly and has taken over email dev duties, which has given me the time to work on other projects. Some of them are frontend related like building out a static landing page for our next Agile intensive. Others are backend/dev ops focused like migrating the hosting of our sites from a web server to DigitalOcean cloud hosting.

This particular project involves building out sales landing pages for our products using WordPress.

A Bit of Background

The previous Senior Web Dev Fellow and I researched several CRMs, or Customer Relationship Management tools, and we eventually settled on ActiveCampaign as the CRM that meets Center Centre’s needs. ActiveCampaign has become a great alternative to our previous CRM, GoHighLevel, but it lacks one ☝️ important ability: sales landing pages with forms and Stripe integrations.

With GoHighLevel, we were able to build out sales landing pages that matched the styling of our product landing pages with forms that added the customer as a contact, entered them into automations, and sent their purchase information to Stripe. It even allowed us to create unique products within the CRM, some of which included payment plans.

ActiveCampaign, unfortunately, does not include this feature. My proposal: build out our sales landing pages using our existing WordPress sites, such as CenterCentre.com.

The Best Laid Plans

With Jared’s blessing and the best intentions, I began trying to build out a sales landing page for one of our products. The first obstacle I identified was that most plugins in WordPress weren’t compatible with our site’s WordPress version. I copied the files and database, then upgraded the site’s WordPress version in a Vagrant environment. Surprisingly, but not unwelcome, the upgrade went off without any issues and I began searching for the perfect form builder plugin.

To say there are many form builder plugins in WordPress is an understatement. Searching for “form” plugins returns something like 800 possible options. I found some plugins that had Stripe integrations and began testing them using a testing sales landing page. Weirdly enough, what I was previewing in the form builder plugin is not what I was seeing on the page when I viewed it. Either the form did not appear at all or it was terribly distorted. Another head-scratcher puzzle to solve.

Well…. it didn’t take much research. We use a custom built theme for our site. 🤦‍♀️ Unfortunately, this means most form plugins aren’t going to look or work as hoped; at least not without a lot of troubleshooting and unspooling the CSS built into our theme.

A Problem, A Solution, and a New WordPress Site

After revealing this hiccup in my project, Summer suggested we try building out the sales landing pages in a WordPress site using the themes that are compatible with the available form plugins. Using our DigitalOcean account, I launched a brand spanking new WordPress site where we could (ideally) build out sales landing pages for all of our products. This provided me the opportunity to use the TwentyTwentyThree WordPress theme, test form plugins, and try out WordPress’s full site editing.

The search for the perfect form builder plugin begins anew. I found a great plugin called WPForms that was wonderfully customizable and easy to use. It’s free tier had a user-friendly form builder and integrated with Stripe seamlessly. The forms looked great on the page and it allowed me to create products within the plugin. Alas, as many great web developers know, the best things in life aren’t free.

We need our sales landing pages to be able to do a certain things:

1. Provide a form for customers to purchase a product.
2. Add a customer to ActiveCampaign as a contact.
3. Send purchase information to Stripe.

WPForms:

1. allows us to create forms for products easily ✅
2. has an ActiveCampaign integration ✅
3. integrates with Stripe and sends purchase information to our Stripe account ✅

Unfortunately, its never this easy. If we want to use WPForm’s ActiveCampaign integration, we would need to subscribe to the Elite version of the plugin for $239.60 (and that’s with a discount).

I thought to myself, “I can work within this limitation.” WPForms sends purchase information to Stripe and we use Zapier: I can create trigger using Stripe -> Zapier -> ActiveCampaign to add our customers as contacts. Once again, WPForms stops me with a big nope 🙅‍♀️. As it happens, WPForms only sends the customer’s email address and card number to Stripe. This prevents us from creating a contact with a name, email address, company name, and any other information we may need from our customers.

WPForms is meets all of our needs for a price, but I knew there had to be alternative options, maybe for an even better price.

The Search Continues

As I said before, there are something like 800 results when searching for forms in WordPress. I began my search anew. I tried GravityForms, NinjaForms, Contact Form 7, and a few others. Each had their pros and cons, and all had subscription upgrades for the features I needed. I tried out WooCommerce which is an ecommerce plugin I’ve always had interested in getting to know better. This is a great plugin in, but it turned out to be way more than what we needed.

Finally, I found an excellent form plugin that has extensive features for free, is easy to use, and meets (nearly) all of our needs: Forminator. (I am currently this plugin’s biggest fan.)

Forminator:

1. allows us to create fully customizable forms with products ✅
2. integrates with ActiveCampaign by sending the customer’s name, email address, company name, and any other information provided through the form to the CRM along with any tags we want to add, and it adds them to the list of our choosing ✅
3. sends purchase information to Stripe including the customer’s name, email address and product number ✅

It doesn’t require any additional addons like WooCommerce or Contact Form 7. It is much easier to use than SimpleForm and incredibly intuitive. And all of these features are free?!? I hesitantly began to hope the search was over.

I’ve tested this form plugin several times over, from every which way, and found it to work exactly as hoped. Now, it’s time for styling.

Its All About the Look 👀

We needed these sales landing pages to be functional, but we also need them to look like our product pages. This is were the WordPress’s Gutenberg Editor makes it’s debut. This is block editing at it’s finest. According WordPress’s Block Editor Handbook:

It has been a bit of a learning curve, but I’ve wrangled the pages to look (mostly) the way I want while learning how to harness the full site editor, page templates, and blocks. This is a big change from the Customize option I worked with in the past when editing WordPress themes. There is a big list of pros and cons, but I will save that for another post.

Nearly Done

Next week, I will finish building out our sales landing pages and setting up our first product using this WordPress build. In the coming weeks, I will be moving all of our sales landing pages to this site and customizing them to look like the product pages we already have. In the future, we are going this project to build out the next intensive and as a learning experience for creating some cool new products that are soon coming out.

As always, thank you for reading my blog and hope to see you next time!