[et_pb_section fb_built=”1″ _builder_version=”4.6.6″ _module_preset=”default” custom_padding=”6px|||||”][et_pb_row _builder_version=”4.6.6″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false”][et_pb_column type=”4_4″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text _builder_version=”4.8.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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.
What You'll Need For This Tutorial
1 – Memberpress
MemberPress is our preferred WordPress membership plugin for most use cases.
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.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.6.6″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false”][et_pb_column type=”4_4″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text module_class=”mfcodes” _builder_version=”4.0.9″ text_font=”Source Code Pro||||||||” text_font_size=”15px” background_color=”#eff0f4″ custom_margin=”|||60px” custom_padding=”3%|3%|3%|3%” z_index_tablet=”500″ border_width_top=”7px” border_color_top=”#0c71c3″ border_width_top_tablet=”7px” border_width_top_phone=”7px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]
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:
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.6.6″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false”][et_pb_column type=”4_4″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text module_class=”mfcodes” _builder_version=”4.0.9″ text_font=”Source Code Pro||||||||” text_font_size=”15px” background_color=”#eff0f4″ custom_margin=”|||60px” custom_padding=”3%|3%|3%|3%” z_index_tablet=”500″ border_width_top=”7px” border_color_top=”#0c71c3″ border_width_top_tablet=”7px” border_width_top_phone=”7px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]
function mberpressForm(){
So add the following code to your functions.php file in child theme.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.6.6″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false”][et_pb_column type=”4_4″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text module_class=”mfcodes” _builder_version=”4.0.9″ text_font=”Source Code Pro||||||||” text_font_size=”15px” background_color=”#eff0f4″ custom_margin=”|||60px” custom_padding=”3%|3%|3%|3%” z_index_tablet=”500″ border_width_top=”7px” border_color_top=”#0c71c3″ border_width_top_tablet=”7px” border_width_top_phone=”7px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]
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
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.6.6″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false”][et_pb_column type=”4_4″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text module_class=”mfcodes” _builder_version=”4.0.9″ text_font=”Source Code Pro||||||||” text_font_size=”15px” background_color=”#eff0f4″ custom_margin=”|||60px” custom_padding=”3%|3%|3%|3%” z_index_tablet=”500″ border_width_top=”7px” border_color_top=”#0c71c3″ border_width_top_tablet=”7px” border_width_top_phone=”7px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]
3.3 – Add “disable” class to <div class=”mp-form-submit”> div.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.6.6″ _module_preset=”default” min_height=”55px” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false”][et_pb_column type=”4_4″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text module_class=”mfcodes” _builder_version=”4.0.9″ text_font=”Source Code Pro||||||||” text_font_size=”15px” background_color=”#eff0f4″ min_height=”40px” custom_margin=”|||60px” custom_padding=”3%|3%|3%|3%” z_index_tablet=”500″ border_width_top=”7px” border_color_top=”#0c71c3″ border_width_top_tablet=”7px” border_width_top_phone=”7px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]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.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_4,3_4″ make_equal=”on” _builder_version=”4.6.6″ custom_margin=”0px||30px||false|false” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|phone” custom_padding=”0px|0px|0px|0px” border_width_all=”1px” border_color_all=”#2ecc71″][et_pb_column type=”1_4″ _builder_version=”3.25″ background_color=”#2ecc71″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_blurb use_icon=”on” font_icon=”%%83%%” icon_color=”#ffffff” _builder_version=”4.6.6″ custom_margin=”30px||5px|” custom_padding=”|||” custom_css_blurb_image=”margin:0;”][/et_pb_blurb][/et_pb_column][et_pb_column type=”3_4″ _builder_version=”3.25″ custom_padding=”30px|20px|20px|0px” custom_padding_tablet=”” custom_padding_phone=”0px||30px|20px” custom_padding_last_edited=”on|phone” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.6.6″ text_font=”||||||||” text_line_height=”1.6em”]
Have you ever use multistep Multistep Contact Form 7 Add-on?
Tell us which ones in the comments section below!
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.6.6″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false”][et_pb_column type=”4_4″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text _builder_version=”4.6.6″ _module_preset=”default”]
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
