In order to create a free membership signup form, you'll use the membershipLevelId attribute in conjunction with the MM_Form SmartTag. This tag is used to limit a form to a specific membership level ID. Using this method will allow you to create a specific checkout page configured just for a free membership signup, that does not have any billing information collected.
Attributes
membershipLevelId
- Specifies the ID of the membership level being purchased on the checkout form. If this attribute is not provided then the checkout form will attempt to get the product ID from the querystring parameter rid
in the browser URL. Using this attribute will ensure that the checkout form can only be used for the specific membership ID set. You will usually not want to use this on your Checkout Core page, but rather on a specific checkout page used for a free membership. Read this article to learn how to find IDs for membership levels. Usage
[MM_Form type='checkout' membershipLevelId='1']
(Replace 1 with the ID of the membership level you wish to use)[MM_Form_Section type='accountInfo']
...account information form fields and related content...
[/MM_Form_Section]
<a href="[MM_Form_Button type='submit' paymentMethod='default']" class="mm-button orange large rounded">Sign Up</a>
(This replaces all the buttons that normally display on your checkout page, including PayPal, with a custom button. You can use MemberMouse button styles to change the look of this.)
[/MM_Form]
Full Example (without HTML styling)
This is the code to use for a free membership only. If you are using this for a paid membership, use the full checkout template and the
membershipLevelId
attribute. Just remember to replace the Membership Level ID with one for the free membership level for your site.[MM_Form type='checkout' membershipLevelId='1']
[MM_Form_Message type='error']
[MM_Form_Section type='accountInfo']
Account Information
First Name: [MM_Form_Field type='input' name='firstName']
Last Name: [MM_Form_Field type='input' name='lastName']
Email: [MM_Form_Field type='input' name='email']
Password: [MM_Form_Field type='input' name='password']
Phone: [MM_Form_Field type='input' name='phone']
[/MM_Form_Section]
<a href="[MM_Form_Button type='submit' paymentMethod='default']" class="mm-button orange large rounded">Sign Up</a>
[/MM_Form]
This code will generate a form that looks very close to this, depending on the colors and fonts included in your installed theme:
Full Example (with HTML styling)
We've found that some customers would prefer additional styling already present in the code. If that's you, try the below code for your form instead.
As with the above example, this is the code to use for a free membership only. If you are using this for a paid membership, use the full checkout template and the membershipLevelId
attribute. Remember to replace the Membership Level ID with one for the free membership level for your site.
<center>
[MM_Member_Decision isMember='true']
<style>
.mm-paymentbuttons { display:none }
</style>
[/MM_Member_Decision]
<div class="mm-checkoutContainer">
[MM_Form type='checkout' membershipLevelId='1']
[MM_Form_Message type='error']
<div class="mm_left_column">
[MM_Form_Section type='accountInfo']
<div id="mm-account-information-section" class="mm-checkoutInfoBlock">
<h3>Account Information</h3>
<p class="mm-formField">
<label>First Name:</label>
[MM_Form_Field type='input' name='firstName' customAttributes='placeholder="First Name"']
</p>
<p class="mm-formField">
<label>Last Name:</label>
[MM_Form_Field type='input' name='lastName' customAttributes='placeholder="Last Name"']
</p>
<p class="mm-formField">
<label>Email:</label>
[MM_Form_Field type='input' name='email' customAttributes='placeholder="Email Address"']
</p>
<p class="mm-formField">
<label>Password:</label>
[MM_Form_Field type='input' name='password' customAttributes='placeholder="Password"']
</p><p class="mm-formField">
<label>Phone:</label>
[MM_Form_Field type='input' name='phone' isRequired='false' customAttributes='placeholder="Phone"']
</p>
</div>
[/MM_Form_Section]
<div class="mm-paymentbuttons">
<a href="[MM_Form_Button type='submit' paymentMethod='default']" class="mm-button orange large rounded">Sign Up</a>
</div>
</div>
[/MM_Form]
</div>
[MM_Member_Decision isFree='true']
<h3>You are already signed up as a free member.</h3>
[/MM_Member_Decision]
[MM_Member_Decision isFree='false']
<h3>You are already signed up as a paid member.</h3>
[/MM_Member_Decision]
</center>
This code will generate a form that looks like this, depending on the colors and fonts included in your installed theme:
And when a logged-in member views the page, the button is hidden and a message is displayed instead. For example: