fbpx
  1. Home
  2. Knowledge Base
  3. Tips, Tricks and Customizations
  4. Tips and Tricks
  5. Gather Additional Member Information on your Checkout Page

Gather Additional Member Information on your Checkout Page

MemberMouse allows you to create custom fields in order to associate additional data with each member's account, which allows for an even greater ability to allow or restrict access using Member Decision SmartTags™.

Custom fields are identified by the ID assigned to them in MemberMouse. In the following example we'll show you how the different types of custom fields can be used to collect custom information through a checkout form.

Here is the custom code used to show the 5 different types of custom fields
<p class="mm-formField">
  <label>Birth Date:</label>
  [MM_Form_Field type='custom' id='4' isRequired='false' class='' customAttributes='placeholder="Birth Date"']
  </p>
  <p class="mm-formField">
    <label>Check Here For Access to Hidden Content:</label>
    [MM_Form_Field type='custom' id='5' isRequired='false' class=''']
  </p>
  <p class="mm-formField">
    <label>Favorite Time of Day:</label>
    [MM_Form_Field type='custom' id='7' isRequired='false' class=''']
  </p>
  <p class="mm-formField">
    <label>Any Questions?:</label>
    [MM_Form_Field type='custom' id='8' isRequired='false' class='']
  </p>
  <p class="mm-formField">
    <label>How is our signup process?</label>
    [MM_Form_Field type='custom' id='9' isRequired='false' class='']
  </p>
Here is a full template using the above code with the original checkout page
<div class="mm-checkoutContainer">
[MM_Form type='checkout']

[MM_Form_Message type='error']<p></p>
<div class="mm_left_column">
[MM_Form_Section type='accountInfo']<p></p>
<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 Number"']</p>
<p class="mm-formField">
<label>Birth Date:</label>

[MM_Form_Field type='custom' id='4' isRequired='false' class='' customAttributes='placeholder="Birth Date"']</p>
<p class="mm-formField">
<label>Check Here For Access to Hidden Content:</label>[MM_Form_Field type='custom' id='5' isRequired='false' class=''']</p>
<p class="mm-formField">
<label>Favorite Time of Day:</label>

[MM_Form_Field type='custom' id='7' isRequired='false' class=''']</p>
<p class="mm-formField">
<label>Any Questions?:</label>

[MM_Form_Field type='custom' id='8' isRequired='false' class='']</p>
<p class="mm-formField">
<label>How is our signup process?</label>

[MM_Form_Field type='custom' id='9' isRequired='false' class='']</p>
</div>
<p>[/MM_Form_Section]

[MM_Form_Section type='billingInfo']</p>
<div id="mm-billing-information-section" class="mm-checkoutInfoBlock">
<h3>Billing Details</h3>
<p class="mm-ccLogos"><img src="../wp-content/plugins/membermouse/resources/images/cclogos.gif" width="199" height="30" alt="Visa, Master Card, American Express, Discover"></p>
<p class="mm-formField">
<label>Credit Card:</label>

[MM_Form_Field name='ccNumber' customAttributes='placeholder="Credit Card Number"']</p>
<p class="mm-formField">
<label>Security Code:</label>

[MM_Form_Field name='ccSecurityCode' customAttributes='placeholder="Security Code"']</p>
<p id="mm-checkout-expiration-date" class="mm-checkout-expiration-date mm-formField">
<label>Expiration Date: </label>

[MM_Form_Field name='ccExpirationDate']</p>
<p style="clear:both;">
</p><h3 class="mm-hr">Billing Address</h3>
<p class="mm-formField">
<label>Address:</label>

[MM_Form_Field name='billingAddress' customAttributes='placeholder="Billing Address"']</p>
<p class="mm-formField">
<label>City:</label>

[MM_Form_Field name='billingCity' customAttributes='placeholder="Billing City"']</p>
<p class="mm-formField">
<label>State:</label>

[MM_Form_Field name='billingState' customAttributes='placeholder="Billing State"']</p>
<p class="mm-formField">
<label>Zip:</label>

[MM_Form_Field name='billingZipCode' customAttributes='placeholder="Billing Zip Code"']</p>
<p class="mm-formField">
<label>Country:</label>

[MM_Form_Field name='billingCountry']</p>
</div>
<p>[/MM_Form_Section]

[MM_Form_Section type='shippingInfo']</p>
<div id="mm-shipping-information-section" class="mm-checkoutInfoBlock">
<h3>Shipping Address</h3>
<p id="mm-shipping-method-block" class="mm-formField">
<label>Shipping Method:</label>

[MM_Form_Field name='shippingMethod']</p>
<p class="mm-formField">
Shipping is the same as billing

[MM_Form_Field name='shippingSameAsBilling']</p>
<p>[MM_Form_Subsection type='shippingAddress']</p>
<div>
<p class="mm-formField">
<label>Address:</label>

[MM_Form_Field name='shippingAddress' customAttributes='placeholder="Shipping Address"']</p>
<p class="mm-formField">
<label>City:</label>

[MM_Form_Field name='shippingCity' customAttributes='placeholder="Shipping City"']</p>
<p class="mm-formField">
<label>State:</label>

[MM_Form_Field name='shippingState' customAttributes='placeholder="Shipping State"']</p>
<p class="mm-formField">
<label>Zip :</label>

[MM_Form_Field name='shippingZipCode' customAttributes='placeholder="Shipping Zip Code"']</p>
<p class="mm-formField">
<label>Country:</label>

[MM_Form_Field name='shippingCountry']</p>
</div>
<p>[/MM_Form_Subsection]</p></div>
<p>[/MM_Form_Section]

[MM_Form_Section type='coupon']</p>
<div id="mm-coupon-block" class="mm-couponSection mm-checkoutInfoBlock">
<h3>Coupons</h3>
<p class="mm-formField">
[MM_Form_Field name='couponCode']

<a href="[MM_Form_Button type='applyCoupon']" class="mm-button">Apply Coupon</a></p>
<p>[MM_Form_Message type='couponSuccess']

[MM_Form_Message type='couponError']</p></div>
<p>[/MM_Form_Section]</p></div>
<div class="mm_right_column">
<div class="mm-checkoutSection2">
<h2>[MM_Form_Data name='productName' useAccessName='false']</h2>
<p class="mm-productDesc">[MM_Form_Data name='productDescription']</p>
<ul>
<li><span class="mm-prices">Product Price:</span> [MM_Form_Data name='productPriceDescription']</li>
<p>[MM_Order_Decision isShippable='true']</p>
<li><span class="mm-prices">Shipping Price:</span> [MM_Form_Data name='shippingPrice']</li>
<p>[/MM_Order_Decision]

[MM_Order_Decision isDiscounted='true']</p>
<li><span class="mm-prices">Discount:</span> [MM_Form_Data name='discount']</li>
<p>[/MM_Order_Decision]</p>
<li><span class="mm-prices">Total Price:</span> [MM_Form_Data name='totalPrice']</li>
</ul>
</div>
<div class="mm-purchaseSection">
<div class="mm-giftsection">
[MM_Member_Decision isMember='true'][MM_Form_Field type='input' name='gift'] Is this a gift?<p></p>
<p>[/MM_Member_Decision]</p></div>
<div class="mm-paymentbuttons">
[MM_Form_Button type='all' label='Submit Order' color='orange']</div>
</div>
</div>
[/MM_Form]
</div> 
Here is an example of how this could look on your site:

Note: The form fields above will look different depending on the theme you've chosen for your site and/or any CSS additions or changes you have included..

Keep in mind, the above code example is provided as a starting place. Though it can be copied and pasted directly into your page editor as HTML, the custom field labels and IDs will need to be changed to match the names and IDs of your specific custom fields.  The IDs can be found by hovering your mouse over the name of the custom field in Checkout Settings > Custom Fields, or by clicking on the “Show Form SmartTag™” button.

Was this article helpful?

Related Articles