Customizing Membership Level Selection
The membership level selection box on our signup form template is designed to be universal. However you may find better conversion rates using your own layout for the membership levels, descriptions and selection buttons.
The simplest way to accomplish this is to create separate sign up pages for each membership level, and then use a main page to link to the appropriate signup page:
1. Obtain the HTML snippet/WordPress shortcode for the Membership Sign-Up Form, then using the "Optional - display only following specific levels..." setting, select just a single membership level. Then take the snippet/shortcode and create a sign up page for that level. Repeat for all your membership levels.
2. Create a main page for potential members to signup. On this page you can have the information about all your membership levels, laid out the way you need. Then use buttons/links to link to the appropriate signup page for each membership level.
Advanced Customization In WordPress
The following method describes how to allow users to select a membership level on your signup form using your own buttons/links/images instead of the default membership level selection box. With this method, everything happens on one page. Some familiarity with HTML is necessary.
Step 1: Adding Your Buttons, Links, Images, Etc
Use the following shortcode to create a link to select the membership level on the signup form:
[mw join="xxx" text="yyy"]
This creates a html anchor tag (ie. link) with text "yyy". When the potential member clicks on the link, the dropdown menu for the membership levels on the signup form will disappear, and the membership level "xxx" will be selected.
You may also use a button instead of an anchor tag by using:
[mw join="xxx" text="yyy" type="button"]
You may also use a image by using
[mw join="xxx" text="yyy" type="img" src="..."]
where "..." is the appropriate source image location.
In all cases, you may optionally apply classname or inline style using:
[mw join="xxx" text="yyy" style="..." class="..." ...]
Step 2: Place The Signup Form On The Page
You need to place where the signup form where it needs to appear on the page using the join shortcode.
If you prefer to the signup form until the visitor selects a level by clicking on your links/button/image, use this shortcode instead where you want the signup form to appear (the ini="0" prevents the form from appearing until one of the buttons/links/images from step 1 is clicked on):
[mw open="join" ini="0"]
Advanced Customization Using HTML & Javascript
The following javascript snippet will initialize the signup form and select the membership level:
where "xxx" is the appropriate membership level.
You should place the HTML snippet for the signup form where you need it to appear on the page. To hide the signup form until activated by the above javascript snippet, remove the parameter data-sfi="1" from the HTML snippet.
The signup form can be re-positioned by moving the div container with the id "SFctr".