Screen: ShopSite > Commerce Setup > Customize Order System

Creating Custom Checkout Fields

Overview

The ShopSite shipping and checkout screen contains the fields necessary to collect common order information, such as billing/shipping addresses and a field for customer comments. However, you might want or need to gather additional information, such as a customer code, or separate first and last name fields, or a customer agreement to store policy.

The custom checkout fields let you add as few or as many fields as you require to the checkout screen. The entire screen is an HTML form, and your custom fields will be integrated into the form at any of the locations that you designate.

Creating The Fields

Creating a custom field requires two steps:

1. Define a custom field by specifying its name and type and a few other parameters.
2. Add text and HTML input tags into any of the five location fields to use your defined field.

You must have a one-to-one matching of a custom field to an input tag. Here is an example that uses three custom fields to let customers request gift wrapping. The first field is a checkbox, the second field is a select (drop-down) list, and the third field is a textarea.

1. The first field will let customers check a box to request gift wrapping. Set the Text Name value to "Gift Wrap," and select "Checkbox" in the Type list.
2. The second field will let customers choose the style of gift wrap from a list. Set the Text Name value to "Gift Wrap Style," and select "Select" in the Type list.
3. The third field will be a text area where customers can type in a note that they’d like included with the gift. Set the Text Name value to "Gift Wrap Note" and select "TextArea" in the Type list.

   The Use? box must be checked for all three fields. None of the other field parameters are required for this example. Here is what the screen looks like with those values:

   

4. There are five locations on the checkout screen where custom fields can be placed, but for this example all three custom fields will appear together just below the order total and before the comment field. The HTML code to do this creates a table to control the layout, and uses form fields for the customer input. The essential step is to use the custom field names (field01, field02, etc., shown in bold below) in the form to link the input fields to the defined custom fields. Here is an example of the code you could include in the HTML Before the Comment Field:

   <table align="center">
     <tr>
       <th colspan="2" style="font-size: x-large;">Add Gift Wrap!</th>
     </tr>
     <tr>
       <td><input type="checkbox" name="field01"> Add Gift Wrap</td>
       <td><select name="field02">
         <option value="Style">Gift Wrap Style</option>
         <option value="Birthday">Happy Birthday</option>
         <option value="Christmas">Merry Christmas</option>
         <option value="Congrats">Congratulations</option>
       </select></td>
     </tr>
     <tr>
       <td colspan="2"><textarea cols="32" rows="4" name="field03">Use this area to enter a gift note.</textarea></td>
     </tr>
   </table>

   Note that you do not have to include <form> and </form> because your custom fields will be added to the existing form that makes up the entire page.

   The results on the checkout screen look like this, shown just below the order total:

   

You can easily use custom checkout fields to create a survey question on the order form or to require customers to check a box indicating that they’ve read and agree to your store’s terms and policies. See the custom checkout field examples for more information.

Viewing and Downloading the Information

ShopSite makes it easy to view and download the information that is collected via custom checkout fields.

Customer E-Mail, Confirmation Page, and Thank You Page

You can choose to include the name and content of any custom fields on the Confirmation page, Thank You page and/or on the e-mail receipt that is sent to customers. For those fields that you wan to include, simply check the box labeled "Emails", "Conf", or "Thank You" when defining the custom field.

View Orders

The order confirmation e-mail messages that you receive will contain all the custom form fields for which you checked the "Emails" box. The name and content of all custom fields are automatically included when you view orders in the ShopSite back office. Of course, you can print the orders while viewing them.

Downloading the Information

The name and content of all custom fields are included when you download orders, in a new field called "Custom Fields." Each field name and its contents are separated by a colon and a space, and fields are separated by |n|. Here is an example based on the gift wrap fields:

Gift Wrap: on|n|Gift Wrap Style: Birthday|n|Gift Wrap Note: To: John|n|Here's to the big FOUR-ZERO!!|n|-Terry|n|

Note that |n| is also used to indicate a carriage return within a textarea field.

Custom Checkout Fields

Use these fields on the Customize Order System screen to create your custom checkout fields.

ShopSite Help and Resource Center Last updated: March 01, 2010 Give Feedback

ShopSite Shopping Cart Software