Add multi-step Terms of Service to MemberPress checkout

Overview

Do you want to require your members to read and agree to a multi-step terms of service (TOS) before being able to complete the MemberPress checkout for your membership?

This step by step tutorial will show you how to set that up! 🙂

Here’s the scenario:

Imagine that you’re selling a health course through MemberPress.

You then decide that you want to present your Terms of Service agreement in multiple steps to your customers.

Your members must read and agree to each of these steps individually before they’ll be able to complete their registration for your course.

If you only add a checkbox with a link to your Terms of Service, most members will just skip it.

So now you’re going to learn how to make your Terms agreement in the MemberPress checkout process both mandatory and multi-step.

Table of Contents

What You’ll Need For This Tutorial

1 – Memberpress

MemberPress is our preferred WordPress membership plugin for most use cases.

2. Contact Form 7

Contact Form 7 is one of our favorite contact form plugins for WordPress.

3. Contact Form 7 Multistep add-on ($25)

This is a paid add-on that will allow you to create the multi-step component of your terms of service.

Video Tutorial

Create a multistep form

1.1 – Go to Plugins => Add new section of your admin panel.

1.2 – Search for Contact Form 7 plugin.

1.3 – Install it by clicking on the “Install now” button.

1.4 – Activate it by clicking on the “Activate” button.

1.5 – Click on “Upload plugin”

1.6 – Choose the Contact Form 7 Multistep add-on and click on the “Install now” button.

1.7 – Go to Contacts->Add new section on your admin panel

1.8 – Fill the name of the form

1.9 – Name the step, buttons of the form

1.10 – Add the part of the text and mandatory checkbox to go further steps.

1.11 – Repeat point 1.10 for each page you want to add and in the last step add a button.

Just copy paste this code:

<button type=”button” id=”step-last”>Finish</button>

1.12 – Save the form and copy the shortcode for the next step

Create a script that will display the purchase button

2.1 – First of all you need to hide the purchase button and style the form.

Add the following code to the Stylesheet (style.css) of your child theme, or to your custom CSS plugin.

Make sure to use a Child Theme or a CSS plugin so you don’t lose your changes when your theme gets updated.

.mp-form-submit{

position: absolute;

bottom: 40px;

}

.mp-form-submit.disable{

display: none;

}

.wpcf7-form{

border: none;

}

.wpcf7-form .fieldset-cf7mls{

padding: 0;

}

#cf7mls-next-btn-cf7mls_step-last{

background-color: #0073aa;

border: 0 none;

border-radius: 3px;

color: #ffffff;

cursor: pointer;

font-weight: bold;

margin: 25px 0px 26px;

padding: 13px 5px;

min-width: 100px;

position: relative;

position: absolute;

right: 60px;

bottom: 0;

}

.mp-form-submit input[type=submit]{

border: none;

background-color: #0073aa;

border-radius: 3px;

color: #ffffff;

cursor: pointer;

font-weight: bold;

padding: 13px 5px;

min-width: 100px;

}

@media screen and (max-width: 980px){

.mp-form-submit{

bottom: -50px;

}

@media screen and (max-width: 767px){

.memberpressproduct-template-default #main-content{

padding-bottom: 50px;

}

C2.2 – After that you need to create a script that will display the button after accepting all of the Terms of Service steps.

If you still don’t have a child theme, create it. You can check this article to know how to do it.

Create a custom.js file in ../yourChildThemeFolder/assets/js/ folder

And add the following code there:

“use strict”;

function mberpressForm(){

// Set up variables and found elements we need

var submit = document.querySelector(‘.mp-form-submit’);

var finish = document.getElementById(‘cf7mls-next-btn-cf7mls_step-last’);

var check1 = document.querySelector(‘#check1>span>label>input’);

// Add onlcick event on button in the lsat step

finish.onclick = function(){

var infoList = document.querySelectorAll(‘.wpcf7-not-valid-tip’);

infoList.forEach(function(el){

el.remove();

});

// Check if all checkboxes are checked

if(check1.checked){

submit.classList.remove(‘disable’);

}else{

if(!check1.checked){

let parent = check1.closest(‘.wpcf7-form-control’);

let info = document.createElement(‘span’);

info.setAttribute(‘role’, ‘alert’);

info.classList.add(‘wpcf7-not-valid-tip’);

info.innerText = ‘The field is required.’;

parent.append(info);

}

};

}

function ready(){

mberpressForm();

}

document.addEventListener(“DOMContentLoaded”, ready);

2.3 – Now we need to add this script to the website.

So add the following code to your functions.php file in child theme.

function my_theme_enqueue_styles() {

wp_enqueue_script(‘custom’, get_stylesheet_directory_uri() . ‘/assets/js/custom.js’);

}

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

3 – Customize Memberpress template to add the multistep form

3.1 – Create a new template form.php to override the default MemberPress form in the folder: ../yourChildThemeFolder/memberpress/checkout/

3.2 – Add the following code (where you need to paste the form code instead of SHORTCODE) just after the </form> tag

<?php echo do_shortcode(‘[SHORTCODE”]’); ?>

3.3 – Add “disable” class to <div class=”mp-form-submit”> div.

That’s it!

Now members will see the form you created and won’t be able purchase a MemberPress membership from you without agreeing to all of the Terms of Service steps you configured.

Have you ever use multistep Multistep Contact Form 7 Add-on?

Tell us which ones in the comments section below!