Download Sample Code

In this example, we'll cover the basics of using Form SmartTags and create a simple form to sign up new members for a free membership.

1. The first thing we need to do is add a MM_Form block with the type attribute set to checkout. The MM_Form tag is required to use any other Form SmartTags. It will contain all of our Form SmartTags and our design and layout elements. Start by adding the following text to your page:

   
   

   [MM_Form type="checkout"]
   <!-- all Form SmartTags and design elements go here -->
   [/MM_Form]

   
   

2. Next, we'll add a form element that will display any errors that occur when the form has been submitted. We'll do this by adding the MM_Form_Message tag and set the type attribute to error.

   
   

   [MM_Form_Message type="error"]

   
   

   Now, when the form is submitted any errors that happen when processing the payment or creating an account will be displayed where the MM_Form_Message is.
   

3. Next, we'll create a form section where we can put Form SmartTags related to account information. Creating form sections is not required but is recommended. The benefit of using a form section is that it allows MemberMouse to intelligently show or hide a section based on what is being purchased and who is purchasing it. With regards to account information, when you use a form section, MemberMouse will automatically hide this content when an existing member is checking out because they don't need to fill out this information again.

   
   

   Creating a form section is easy, just use the MM_Form_Section tag and set the type attribute to the appropriate section type. In this case, that's accountInfo:

   
   

   [MM_Form_Section type="accountInfo"]
   <!-- all account information Form SmartTags and design elements go here -->
   [/MM_Form_Section]

   
   

   IMPORTANT NOTE: When MemberMouse processes the MM_Form_Section tag it creates <div> tags and places the content inside the MM_Form_Section tag within the <div> tags. For example, this...

   
   

   [MM_Form_Section type="accountInfo"]
   This is my content.
   [/MM_Form_Section]

   
   

   ...becomes this...

   
   

   <div id="mm-account-information-section">
   This is my content.
   </div>

   
   

   This is important to note because you'll want to make sure that the content you place within the MM_Form_Section tag doesn't conflict with the surrounding <div> tags. For example, these are valid...

   
   

   [MM_Form_Section type="accountInfo"]
   <div class="someStyle">
   This is my content.
   </div>
   [/MM_Form_Section]
   
   <div class="someStyle">
   [MM_Form_Section type="accountInfo"]
   This is my content.
   [/MM_Form_Section]
   </div>

   
   

   These are not valid...

   
   

   <div class="someStyle">
   [MM_Form_Section type="accountInfo"]
   This is my content.
   </div>
   [/MM_Form_Section]
   
   [MM_Form_Section type="accountInfo"]
   <div class="someStyle">
   This is my content.
   [/MM_Form_Section]
   </div>

   
   

4. Now, we'll add some form fields inside the MM_Form_Section block so that the user can fill out information related to their account such as name, email, phone number and password. Adding form fields is really easy using Form SmartTags. You simply use the MM_Form_Field tag and set the name attribute to indicate which data the field is collecting. For example, to collect a customer's first name you'll set the name attribute to firstName. Here's what you'll add in order to collect account information:

   
   

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

   
   

   Notice that we can place any content around the MM_Form_Field tags. In this case we've added a section header and field labels.
   
   

    The Email and Password fields are essential, but you can configure it so that some, or all, of the other Form Fields aren't visible. You will need to change the information in the type=" " section from type="input" to type="hidden". The article Make Fields Optional on Checkout Form will give you more information about how to add or hide fields from your checkout page.
   
   
5. Finally, we need to add a button so the customer can submit the form. To do this, just add the following:
   
   

   [MM_Form_Button type='all' label='Submit Order' color='orange']

   
   This tag will automatically show the appropriate form submission buttons based on what payment methods are configured for your site. For example, if you just have PayPal configured, it will display a PayPal button. If you just have Authorize.net configured, it will display a Submit Order button. If you have both configured, it will display both buttons.
   
   

Free Member Checkout Example

Below is an example of what the Free Member Checkout Form will look like: