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.
The first thing we need to do is add a
MM_Formblock with the
typeattribute set to
MM_Formtag 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]
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_Messagetag and set the
Now, when the form is submitted any errors that happen when processing the payment or creating an account will be displayed where the
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_Sectiontag and set the
typeattribute to the appropriate section type. In this case, that's
[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_Sectiontag it creates
<div>tags and places the content inside the
MM_Form_Sectiontag within the
<div>tags. For example, this...
[MM_Form_Section type="accountInfo"] This is my content. [/MM_Form_Section]
<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_Sectiontag 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>
Now, we'll add some form fields inside the
MM_Form_Sectionblock 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_Fieldtag and set the
nameattribute to indicate which data the field is collecting. For example, to collect a customer's first name you'll set the
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 theThe 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.
MM_Form_Fieldtags. In this case we've added a section header and field labels.
- 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:
Note: The form will look different depending on the theme you've chosen.