CatalogContactUsControl Class

A catalog Contact Us control.

Remarks

The CatalogContactUsControl displays a custom form on a page and sends the submitted information as an email.

You can create HTML forms that can capture user input based on form fields you create, and then forward the response to a designated recipient via email.

Property Usage

By changing the values of the control's properties in the SitePages.config file for your Site, you can enable or disable certain behaviors, set certain defaults, alter aspects of the display or otherwise cusomtize your site's implementaion of the control.

The following describes properties pertaining to key functional areas of the control that can be configured to suit your needs.

To specify the content file that contains the form field layout for the CatalogContactUsControl, set the value of the FileLocation property to the filename, including the extension, as found in your Site's content folder. The control will assume ../YourSiteFolder/Content as the path.

Using the Email Manager screen in the Management Console, create a new email. In order for the control to use that email, match the value of the LinkName property with the LinkName of the email.

The control adds the submit button on the form. To customize the text within the button, set the SubmitButtonText property. You can also specify its CSS class using the SubmitButtonCSSClass.

When building your form, you may want to require that certain fields be filled out prior to submission. To require input within certain fields, list those fields by ID as a comma separated list using the RequiredFormFields property. You can also use the RequiredFieldCheckFailureMessageText property to customize the message displayed to the user if they did not fill out all of the necessary fields.

To help prevent Internet robots from submitting SPAM emails from your site's CyberStore Email Forms, enable the use of Google reCAPTCHA within the control by setting the UseRecaptcha property to true, and then specifying appropriate reCAPTCHA PublicKey and PrivateKey properties.

Important Note:

It will be necessary to create an Account with Google to register your Site and obtain a unique Public and Private key to use with your CyberStore.

Visit Google's reCAPTCHA from Google site.

Properties Inherited from the Base CyberStoreBaseControl

Properties specific to the CyberStoreBaseControl can be listed in the following categories:

Override Properties
Contextual Properties

Override Properties

When the IgnoreControl property is set to true, all processing of a control is skipped, and the control's Visible property is set to false ensuring that it is not rendered in the resulting CyberStore page.

Contextual Properties

Contextual properties define specific details about the current instance of the control based on context. Context can be set by any number of factors including the log in state of the Shopper, the Site being visited, or the properties that have been established for a control.

The AttributesBag property is used internal to control processing and is the collection of attributes, or properties, and their values based on how the control is configured. The attributes in this property are set by processing the SitePages.config file as well as any specific declared property values in any registered sub controls. It allows for the passing down of all properties to a control and any registered sub controls.

The ComConfig, UserData and Site_ID properties are read-only values made available to all CyberStore controls to aid in processing and establishing context about the Site and Shopper.

Example

See an example of how to configure this control in SitePages.config.

<Control src="CatalogContactUsControl.ascx"
   FileLocation="ContactUsForm.htm"
   LinkName="ContactUs" 
/>

The following example illustrates how to create the form field template as a content file which in this example is saved as ContactUsForm.htm.

HTML

<div id="contactForm" class="row">
    <div class="control-group col-xs-12">
        <label class="FormLabel col-xs-12 col-sm-3">
            First Name:
        </label>
        <div class="controls col-xs-12 col-sm-5">
            <input id="firstnameTextBox" tabindex="1" name="firstnameTextBox"><font color="red">  *  </font>
        </div>
    </div>

    <div class="control-group col-xs-12">
        <label class="FormLabel col-xs-12 col-sm-3">
            Last Name:
        </label>

        <div class="controls col-xs-12 col-sm-5">
            <input id="lastnameTextBox" tabindex="2" name="lastnameTextBox"><font color="red">  *  </font>
        </div>
    </div>

    <div class="control-group col-xs-12">
        <label class="FormLabel col-xs-12 col-sm-3">
            Email Address:
        </label>

        <div class="controls col-xs-12 col-sm-5">
            <input id="emailTextBox" tabindex="3" name="emailTextBox"><font color="red">  *  </font>
        </div>
    </div>

    <div class="control-group col-xs-12">
        <label class="FormLabel col-xs-12 col-sm-3">
            Address Line1:
        </label>

        <div class="controls col-xs-12 col-sm-5">
            <input id="addressline1TextBox" tabindex="4" name="addressline1TextBox">
        </div>
    </div>

    <div class="control-group col-xs-12">
        <label class="FormLabel col-xs-12 col-sm-3">
            Address Line2:
        </label>
        <div class="controls col-xs-12 col-sm-5">
            <input id="addressline2TextBox" tabindex="5" name="addressline2TextBox">
        </div>
    </div>

    <div class="control-group col-xs-12">
        <label class="FormLabel col-xs-12 col-sm-3">
            City:
        </label>

        <div class="controls col-xs-12 col-sm-5">
            <input id="cityTextBox" tabindex="6" name="cityTextBox">
        </div>
    </div>

    <div class="control-group col-xs-12">
        <label class="FormLabel col-xs-12 col-sm-3">
            State:
        </label>

        <div class="controls col-xs-12 col-sm-5">
            <input id="stateTextBox" tabindex="7" name="stateTextBox">
        </div>
    </div>

    <div class="control-group col-xs-12">
        <label class="FormLabel col-xs-12 col-sm-3">
            Zip Code:
        </label>

        <div class="controls col-xs-12 col-sm-5">
            <input id="zipcodeTextBox" tabindex="8" name="zipcodeTextBox">
        </div>
    </div>

    <div class="control-group col-xs-12">
        <label class="FormLabel col-xs-12 col-sm-3">
            Phone Number:
        </label>

        <div class="controls col-xs-12 col-sm-5">
            <input id="phonenumberTextBox" tabindex="9" name="phonenumberTextBox">
        </div>
    </div>

    <div class="control-group col-xs-12">
        <label class="FormLabel col-xs-12 col-sm-3">
            Fax Number:
        </label>

        <div class="controls col-xs-12 col-sm-5">
            <input id="faxnumberTextBox" tabindex="10" name="faxnumberTextBox">
        </div>
    </div>

    <div class="control-group col-xs-12">
        <label class="FormLabel col-xs-12 col-sm-3">
            Comment:
        </label>

        <div class="controls col-xs-12 col-sm-5">
            <textarea id="commentTextBox" tabindex="11" name="commentTextBox"></textarea>
        </div>
    </div>
</div>

Control Markup

The following is the markup for this control.

Developer's Note:

To create a custom version of the control, copy all of the code below into a file of the same name and place it into your Site's control folder (e.g., ../YourSiteFolder/Control). The CyberStore page engine will then override the default markup with your customized version.

CatalogContactUsControl.ascx

<@ Register TagPrefix="uc1" TagName="CommonValidEmailControl" Src="~/Control/CommonValidEmailControl.ascx" >
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CatalogContactUsControl.ascx.cs"
    Inherits="Dovetail.Ecommerce.Controls.CatalogContactUsControl" %>
<dx:ASPxLabel ID="lblContactUsError" ClientIdMode="Static" EncodeHtml="false" CssClass="ValidationMessage" Visible="false" runat="server" />
<dx:ASPxPanel ID="tablePanel" runat="server" DefaultButton="btnSubmit">
    <PanelCollection>
        <dx:PanelContent>
                <asp:Label ID="tableLable" runat="server" Visible="true"></asp:Label>
        </dx:PanelContent>
    </PanelCollection>
</dx:ASPxPanel>

<br />
<asp:Label ID="Content" runat="server" Visible="false" />
<dx:ASPxPanel ID="RecaptchaPanel" runat="server" CssClass="RecaptchaWrap" Visible="false" />
<dx:ASPxButton ID="btnSubmit" runat="server" ClientIDMode="Static" ClientInstanceName="btnSubmit" OnClick="btnSubmit_Click" Text="Submit" Visible="false" />

Inheritance Hierarchy

System.Object
   System.Web.UI.Control
      System.Web.UI.TemplateControl
         System.Web.UI.UserControl
            Dovetail.Ecommerce.ControlBases.CyberStoreBaseControl
               Dovetail.Ecommerce.Controls.CatalogContactUsControl

Reference

CatalogContactUsControl Members
Dovetail.Ecommerce.Controls Namespace
reCAPTCHA from Google