EndPreviousNextEnd EndPrint This TopicEnd

Manage eCommerce Lite Form Fields

Contegro understands that you may require custom fields (to obtain information relevant to your business) in addition to the default fields such as Contact Name, Company, Email Address, etc displayed in the E-Commerce Lite 'billing/delivery details' form.

 

Site administrators can construct and integrate additional fields, using the simple drag-n-drop interface.

 

This section explains the task of managing fields in the 'Billing/Delivery Details' form:

 

1.Go to Contegro Start > Add-On Modules > E-Commerce Lite and select Fields.

 

Contegro Start > Add-on Modules > eCommerce Lite > Fields

 

2.By default, the E-Commerce Lite Fields Manager include the elements listed below in a single container.

 

Managing eCommerce Lite form fields

 

Company Name (Text Box)

First Name (Text Box)

Last Name (Text Box)

Email Address (Email Field)

Contact Number (Text Box)

Delivery Address (Text Box)

Delivery Address 2 (Text Box)

Post Code (Text Box)

Country (Country Selector)

Region (Region Selector)

Delivery Instructions (Memo Box)

 

Note: The default elements above cannot be deleted.

 

3.The Drag & Drop Fields area (on the right hand side) contains the available elements for constructing and integrating additional custom fields into the E-Commerce Lite form. Simply drag-and-drop as many text only, input, list and/or managed fields as required into one or more containers.

 

Note: To add a title to the container, click on the [Edit] link, enter a title in the plain text field and click on the [Save] link.  The title does not appear on the live site.

 

4.The table below provides an explanation of each element available in the Drag & Drop Fields area:
 

Note: See step 6 for more information on selecting (or setting) element properties.

 

Field Title

Description

Text Only Fields

Heading

Use this field element to add a header title to the registration form.  You can add one or more Heading elements to separate sections in your form.

Description

Use this field to add a description either below the 'Heading' element or as a method of separating sections within the registration form.

Display Field

The Display Field element can be used to preset the text entered in the registration form or manage the outcome of a calculation performed by the form. For example; you could calculate the number of widgets purchased by the cost of the widget to show the total cost. The display field would be used to show the total cost and a script would be written to carry out the function.  

Hidden Field

The hidden field allows you to add content to your registration form that cannot be viewed on the live page. This field is ideal for capturing information relating to a marketing campaign that is linked from another site.  For example, if you have a banner ad that links through to this registration form from an external website, the unique campaign code or search word within the link could be added within the hidden registration form element allowing you to capture the original link or site each visitor originated from.

Input Fields

Text Box

The text box input element is displayed as a standard input field within your registration form. Use this field to provide your visitors with a way of entering a single line of plain text in the form, for example "First Name" or "Last Name".

Memo Box

The memo box input element is displayed as a multi line field with a scroll bar. Use this field to provide your visitors with a way of entering multi lines of plain text, for example "Comments" or "Additional Information".

Date/Time Field

The Date Time input element displays a Date field with calendar picker or a Date and Time field with calendar picker and time drop down.  Ideal for use in a booking or "Call Me Back" request form.

Date Drop Down

The Date Drop Down element allows visitors to specify a date using three separate dropdown lists; the first list displays the days of the months (i.e. 1-31), the second list displays the months of the year in numeric form (i.e. 01-12) and the third list displays the year.  The element properties allow you to set the starting year (default =current year, minus 100) and an end year (default =current year), as required.  Ideal for use in a booking form or any form where date information is required.

Email Field

The email field input element is displayed as a standard input field in the form. Use this field to provide your visitors with a way of entering their email address. Only correctly formatted email addresses are allowed.

 

Note: If the "Confirm Address" checkbox is selected, an additional confirmation field will be added to the form.  When visitors insert their email address in the email field, they will be required to confirm their email address. Visitors will receive a warning if the email addresses do not match. The confirmation option helps to reduce emails addresses being entered incorrectly. The default label is set to "Confirm Email" but this can be changed by putting in a custom field label, or if no label is required then a space will not display the field label.

Number Field

The number field element is displayed as a standard input field in the registration form, which supports numeric characters only. Use this field to provide your visitors with a way of entering a numeric value such as 'Price' or 'Weight' values.

Yes/No Tick Box

The Yes/No tick box element displays a single tick box. Use this field to provide your visitors with a way of confirming or giving permission. For example; "I have read the terms and conditions" or "Would you like to receive our special offers by email?".

 

Choose Yes or No in the "Default" field to select whether the checkbox is ticked or unticked by default (Ticked=Yes, Unticked=No).

List Fields

Drop Down List

The drop down list element displays a single select drop down list. Use this field to provide your visitors with a way of choosing a single value from the list.  For example; a 'How did you find us' list which displays values such as; "Search Engine", "Referral", "Link from another site", etc.

 

Note: Hyperlinks to a form containing a dropdown list can be preset to display a dropdown list option set in the 'Enter List Options' field within the Drop Down List element properties.  When the link is selected, the preset list option will be displayed in the Form Builder form on the live site. For example, 
http://www.contegro.com/form-builder-page/default.aspx?DropDownListElementFieldID=listoption1
or, http://www.contegro.com/default.aspx?MenuID=1&DropDownListElementFieldID=listoption1

Multi-Select List

The multi select list element displays a list box with scroll bar (depending on the number of values within the box). Use this field to provide your visitors with a way of choosing multiple values from a list. For example; a 'Product' list which displays values such as; "ProductA", "ProductB", "ProductC", etc. Visitors can select multiple products from the list by holding the CTRL key and selecting one or more values with the left mouse button.

Checkbox List

The check box list element displays a multi select check box list. Use this field to provide your visitors with a way of choosing multiple values from a list.  For example; a 'Which services would you like to know more about' field which displays values such as; "Gardening", "Cleaning", etc...

Radio Button List

The radio button list element displays a single select radio button list. Use this field to provide your visitors with a way of choosing a single value from the list.  For example, a field which displays age ranges (13-18, 19-26, 27-35, etc).

Managed Fields

Region Selector

The Region Selector element can be used to display preset region values in a dropdown list (managed within Admin Tools > Managed Lists) or set as a plain text field which site visitors can use to manually enter their region.

When this element is set to display as a drop down list, the Region field will remain hidden in the registration form until a Country (with associated regions) has been selected in the Country Selector element (see below).  If a country with no associated regions is selected, the region field will remain hidden.
 
When this element is set to display as a plain text field, the Region field will be hidden from the registration form until a Country has been selected in the Country Selector element (see below).

Country Selector

The Country Selector element can be used to display the preset list options within the Country group (managed within Admin Tools > Managed Lists).  This element is displayed as a drop down list in the registration form.

List Selector

The List Selector element can be displayed as multi select (list box or checkbox) or single select (drop down or radio button) list; depending on your selection within the element properties. The list options (or values) displayed in the form are generated by the List Manager.

 

The List and Parent List fields within the List Selector element properties enables associations between lists, which provides a sub list facility whereby the values shown in the sub list is dependent upon the main list. For example, a Country list with a Region sub list, the list of regions shown is dependent on the country selected.  You would need to add two instances of the List Selector element to your form in order to create an association.

 

Use the Default field within the element properties to preset a selected value within the list on the live site. Please ensure that the text within the Default Value field matches a list option within the selected list.  To check the list options for the selected list, go to Admin Tools > Manage Lists.

Email Marketing Fields

Email Sign-up

The Email Sign-up field element uses data entered in the form to create a newsletter subscriber account within the Email Marketing add-on module.  This field element can be set as hidden and all accounts are created automatically or you can add this element as a tickbox in the registration form, giving site visitors the option of subscribing to newsletters generated by the Email Marketing module.

Container

Container

The container element is used to group elements (or fields).  Add additional containers to your form as a way of separating sections.

 

Note: Please contact your Contegro partner to change the layout or formatting of elements to suit your individual requirements.

 

5.To edit field element properties including the label (which is used as the field name on the live page), click on the [Expand/Minimize] button in the control bar.
Click [Expand] to view element properties

Note: You can also use the element control bar functions to carry out the following:
Drag Me - This is the drag and drop selector, which allows you to reposition a container (including elements) above or below another container, reposition elements within a container and/or move elements from one container to another.
Delete - Click on the 'X' icon to delete an element.
Expand/Minimize - Show/hide the element properties by clicking on the up or down arrow.
Form Builder element control barWhen an element is inserted within a container, the following information is displayed; Element Name, Element Label, Control Bar and Element Properties.

 

6.Set the element properties using the table below as a guide:

 

Default Element Properties

Function

Label

Enter a label for each element relating to the information required (i.e. Full Name, Email Address, etc).  The label will show as the field name or element title if the 'Show Label' tickbox below is enabled.

Show Label (Checkbox)

Enable tickbox to display text within the Label field (see above) as a field name on the live site.  Disable tickbox to hide the label (or field name) on the live site.

Required (Checkbox)

Select this tickbox to force validation.  All field elements with this tickbox enabled will become mandatory fields within the form.  Disable tickbox to remove validation.
 
Note: If the checkbox is selected, an asterisk (*) will be displayed alongside the label (or field name) on the public page.

Field ID

By default, the 'Field ID' field is populated with the element name and a sequential number, which makes the Field ID unique. We recommend that you update the field ID to be more meaningful; ensuring that the following rules are adhered to:

 

The Field ID must be unique; you cannot duplicate the field id of any other elements
within this form.  Where possible, ensure that all Field IDs are unique to each form.

You must not use any symbols or spaces to separate text within this field.
i.e: Time & Date must be entered as "TimeDate".

Enable Visibility

This field controls whether form elements and/or containers are displayed or hidden by default, based on the Field ID of another element.  If the tickbox is enabled, enter the Field ID from another field element, select an action within the dropdown list (i.e. equal to, greater than, less than, equal to or greater than, etc) and select a result.

Element Specific Properties

Function

Auto Subscribe
(Email Sign-up element)

NB: This is a custom element relating to the Email Marketing add-on module only.

 

Enable the 'Auto Subscribe' tickbox within the Email Sign-Up element to automatically create subscriber accounts  when the form is submitted.  If the tickbox is disabled, a 'Newsletter Sign-up' tickbox will be displayed within the form, giving site visitors the option of subscribing.

Columns
(Check box and Radio button

list elements)

By default, list values for a check box or radio button list are displayed in a single column on the public page and will only wrap to a second or third column when the maximum amount of values for one column is reached.

 

Enter a numeric value in this field to set the amount of columns in a list element.

Confirm Address Field
(Tickbox option in Email Field element)

If the "Confirm Address Field" tickbox is enabled, an additional confirmation field will be added to the form in the Email Address field.  When visitors insert their email address in the email field, they will be required to confirm their email address. Visitors will receive a warning if the email addresses do not match. The confirmation option helps to reduce emails addresses being entered incorrectly.

Currency
(Number Field)

If the Currency tickbox is enabled, the number entered in this element will default to a currency value.  You can specify the symbol to show within the plain text field.

 

Note:  If the 'Currency' tickbox is enabled, the default setting of '2' will overwrite the value set in the Decimal Places field.

Date & Time Format
(Date Time element)

Select which fields show in the Date Time element.  You can set the Date field with calendar  date picker, time drop down selectors or both.

Decimal Places
(Number Field)

Enter a numeric value to limit the number of digits to the right of the decimal point.

 

Note:  If the 'Currency' tickbox is enabled, the default setting of '2' will overwrite the value set in this field.

Default
(Date Time element)

Select the 'Todays Date' radio button option to set the default date in the calendar date picker to todays date. Select 'None' if you do not wish to show a default date.

 

Note:  This setting only applies if you select 'Date' or 'Date & Time' in the Date & Time Format field above.

Default List Option
(Drop down & Radio button  list element)

This is an optional field within the drop down and radio button element properties.  Use this field to specify the list value to display by default.
 
The list value entered in this field must be exactly the same as one of the values entered in the "Enter List Options" field.

Default Value

(Text Box, Memo Box &

Email Field elements)

The Default Value field allows you to populate forms with preset text.  To add preset text, enter the value within this field; which will be displayed in the form field on the live site.

 

Pre-populating forms with member account details: 
Use the Field ID of any element within the Member Registration module global settings (see Admin Tools » Module Settings » Member Registration) to create a variable.  For example, if you are using an Email Field element in your form, you can use the Member Registration Email Address Field ID - EmailAddress,  to create a default value in the Email Field element default field - [EmailAddress] (Note: remember to include the square brackets). If the default value is set and a member is logged in, the form will automatically populate the field with the members email address.

Default Value
(List Selector element)

Set the default value to show in the Manage List element on the live site.  For example, if you have selected a Region list, you can enter the default region to show by default (e.g. Waikato or Auckland).

 

Note: The default value entered in this field must match a list value in the selected list (e.g. if Auckland is entered in this field, the selected list must contain 'Auckland'.

Enable By Default
(Email Sign-up element)

NB: This is a custom element relating to the Email Marketing add-on module only.

 

Enable tickbox to set the 'Newsletter Sign-up' tickbox to enabled by default. Disable to allow site visitors to choose whether they wish to subscribe.

 

Note: If the 'Auto Subscribe' tickbox within the Email Sign-Up field element is enabled, this setting will be overridden.

Enable fill-in choice
(Radio button, Drop down and

Check box list elements)

When selected, an ‘Other’ value will automatically be added to the list element. If required, use the plain text field to change 'Other' to a custom value.  When this value is selected within the form on the public page, a plain text box will appear which allows the visitor to enter additional information.

End Year
(Date Drop Down element)

The Year dropdown list within the Date Drop Down element can be set to show a specific end year or leave blank to show default setting (i.e. current year).

Enter List Options
(Drop down, Multi select,

Radio button and Check box list elements)

Enter comma delimited list values for use in a drop down, radio button, check box or multi select list.

 

Note: Pressing [Enter] or [Return] on your keyboard will also separate list values.

Tip:  Use a forward slash to separate items shown in a single line, eg: Magenta / Violet / Mauve will be displayed in the following way in a check box list.

Format String
(Display Field element)

Use format strings to retain formatting in the Display Field. For example, if the Display Field element is used to display a numeric value previously entered Number Field element in a multi page form, you can use the following format string to retain the decimal place - {0:00.000}

 

Number Formatting:

Specifier

Type

Format

c

Currency

{0:00.000}

d

Decimal (digit placeholder)

{0:c}

In-Field Label

(Text Box element)

Use this field to add an inline label to any form field created using the Text Box element.  The text entered in this field will  be used to create a label that sits within the field and will continue to display until it is replaced by data entered by the user.

List
(List Selector element)

The managed list option enables associations between lists, which provides a sub list facility whereby the values shown in the sub list is dependent upon the main list. For example, a Country list with a Region sub list, the list of regions shown is dependent on the country selected.

 
Setup of a single Managed List element:

Select a list of predefined values (generated using the List Manager).

 

Setup of associated Managed List elements:

1.First Managed List Element: Select the parent list of predefined values (generated using the List Manager). Eg: Country

2.Second Managed List Element: Select the sub list of predefined values (generated using the List Manager). Eg: Regions
 

Note: You will need to have a minimum of Administrator permissions to create, edit or delete list values created in the List Manager.

Max Characters
(Text Box & Memo Box elements)

Enter a numeric value to set the maximum number of characters supported.  This setting is unique to each instance of the Text or Memo box elements within a single form or multiple forms.

No. of Lines to show
(Memo Box element)

Enter a numeric value to set the maximum number of lines to show in the memo box element.   This value sets the height of the memo box in the form; vertical scrollbars will automatically appear if the text entered in this field exceeds the number of lines set to show.

Parent List
(List Selector element)

1.First Managed List Element: By default, the "None" value is selected.

2.Second Managed List Element: Select the "Field ID" of the related Managed List element from the dropdown list.

Range

(Number Field)

Use the 2 plain text fields to define the range (minimum and maximum) of supported values.

Required Message
(Yes/No Tick Box element)

Enter a required message which will show if the 'Required' tickbox is enabled in the Yes/No Tick Box element.  This message will only show if the field is not completed before the Submit button is selected.

Set List
(Email Sign-up element)

NB: This is a custom element relating to the Email Marketing add-on module only.

 

Select from a list of existing newsletter subscriber lists within the Set List dropdown.  All site visitors who successfully submit the form will be added to the selected subscriber list.

Start Year
(Date Drop Down element)

The Year dropdown list within the Date Drop Down element can be set to show a specific starting year or leave blank to show default setting - current year, minus 100.

Show "Please select..." (Checkbox)
(Drop down list element)

To show ‘Please Select’ as the default list value, leave the Default Text field blank and tick  the 'Show "Please select..."' checkbox.

Text
(Heading & Description elements)

Use the text field for your description or heading. This can be used in conjunction with the

label to show more information or as an alternative to the label.

Value

(Hidden Field element only)

The hidden field allows you to add content to your form that cannot be viewed on the live page.  For example, if you have a banner ad that links through to this form from an external website, you can add the unique campaign code or search word within the Value field; allowing you to capture the original link or site each visitor originated from.

 

7.Click [Save].

 

Note: Any custom fields will be displayed in the 'Items to Display' fields in the E-Commerce Lite module instance settings

 

Topic Link