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

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.

where "..." is the appropriate source image location.

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.

Advanced Customization Using HTML & Javascript

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".