How to write Contact Us Control

Problem

How to write a custom control that can be used as a 'contact us' form. The information submitted on the form should be emailed to a given email address. One should be able to place the control on any Ablecommerce store page.

Solution

Download links for both AC7 and Gold compatible contact us controls are available at the bottom of the page under Reference section.

This tutorial will guide you how to create a feedback or contact-us control for your AbleCommerce powered store. It will also explain the use of CommerceBuilder API an configured SMTP settings for sending emails.

Let's start by first creating a file named ContactUs.ascx in ConLib folder of your Ablecommerce installation. After creating the file copy and paste the following code into the ContactUs.ascx.

<%@ Control Language="C#" ClassName="ContactUs" %>

<script runat="server">
    
    private string _sendTo;
    
    public string SendTo 
    {
        get { return _sendTo; }
        set { _sendTo = value; }
    }

    protected void SendButton_Click(object sender, EventArgs e)
    {
        Store store = Token.Instance.Store;
        StoreSettingCollection settings = store.Settings;
        System.Net.Mail.MailMessage mailMessage = new System.Net.Mail.MailMessage();
        
        if (String.IsNullOrEmpty(SendTo))
        {
            mailMessage.To.Add(settings.DefaultEmailAddress);
        else
            mailMessage.To.Add(SendTo);
        }
        mailMessage.From = new System.Net.Mail.MailAddress(Email.Text);
        mailMessage.Subject = "Feedback";
        mailMessage.Body += "Name: "+Name.Text+Environment.NewLine;
        mailMessage.Body += "Email: " + Email.Text + Environment.NewLine;
        mailMessage.Body += "Comment: "+Environment.NewLine+Comment.Text;
        mailMessage.BodyEncoding = System.Text.Encoding.UTF8;
        mailMessage.IsBodyHtml = false;
        mailMessage.Priority = System.Net.Mail.MailPriority.High;
        SmtpSettings smtpSettings = SmtpSettings.DefaultSettings;
        
        try
        {
            MessageLabel.Text = "Message Sent";
            MessageLabel.CssClass = "goodCondition";
            EmailClient.Send(mailMessage);
        }
        catch (Exception exp)
        {
            MessageLabel.Text = exp.Message;
            MessageLabel.CssClass = "errorCondition";
        }
    }
</script>

<table cellpadding="0" cellspacing="0" class="inputForm">
    <tr>
        <th style="text-align:right;padding-right:3px;">
            Name</th>
        <td>
            <asp:TextBox ID="Name" runat="server" ValidationGroup="ContactUs"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="Name"
                        ErrorMessage="Name is Required." ToolTip="Email Address is Required." 
                        Display="Static" Text="*" ValidationGroup="ContactUs">*</asp:RequiredFieldValidator>
            </td>
    </tr>
    <tr>
        <th style="text-align:right;padding-right:3px;">
            Email</th>
        <td>
            <asp:TextBox ID="Email" runat="server" ValidationGroup="ContactUs"></asp:TextBox>
            <asp:RequiredFieldValidator ID="EmailRequired" runat="server" ControlToValidate="Email"
                        ErrorMessage="Email Address is Required." ToolTip="Email Address is Required." 
                        Display="Static" Text="*" ValidationGroup="ContactUs">*</asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="EmailValidator" runat="server" Display="Static" 
                        ControlToValidate="Email" ValidationExpression="\S+@\S+\.\S+" ErrorMessage="The email address is not properly formatted." 
                        Text="*" ValidationGroup="ContactUs"></asp:RegularExpressionValidator>
            </td>
    </tr>
    <tr>
        <th style="text-align:right;padding-right:3px;">
            Comment</th>
        <td>
            <asp:TextBox ID="Comment" runat="server" TextMode="MultiLine" ValidationGroup="ContactUs"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Comment"
                        ErrorMessage="Comment is Required." ToolTip="Email Address is Required." 
                        Display="Static" Text="*" ValidationGroup="ContactUs">*</asp:RequiredFieldValidator>
            </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <asp:Button ID="SendButton" runat="server" Text="Send" ValidationGroup="ContactUs" OnClick="SendButton_Click" /></td>
    </tr>
    <tr>
        <td></td>
        <td >
        <asp:Label ID="MessageLabel" runat="server"></asp:Label>
            <asp:ValidationSummary ID="ContactUsSummary" runat="server" ValidationGroup="ContactUs" />
        </td>
    </tr>
</table>

After saving the file your new Contact-Us control is ready for use. It can be used in ASPX pages just like any ASPX control or it can be called in Scriptlet pages just like any other ConLib control in Ablecommerce.

Here is an example of how it can be used in a Scriptlet.

[[ConLib:ContactUs SendTo="info@yourstore.com"]]

SendTo Property

The control exposes a property named SendTo. You can use this property to specify the address at which you want to receive the Emails sent from the contact us form. If you do not specify a SendTo email address the emails will be sent to default email address of your Ablecommerce store.

How can you add more fields to the control?

Almost every merchant has its own requirements. So a basic question is; how can you add your custom information to the control. You can do this quite easily.

For example if you want to add user's last name to the contact-us form and receive that in your email then you can do this job in two simple steps

Step1:-

Modify the HTML to include a new text filed for Last Name. For example if we modify that part of code and add a new row just bellow the row having the name field and provide suitable ids for controls it will be something like.

<tr>
        <th style="text-align:right;padding-right:3px;">
            Last Name</th>
        <td>
            <asp:TextBox ID="LastName" runat="server" ValidationGroup="ContactUs"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidatorLastName" runat="server" ControlToValidate="LastName"
                        ErrorMessage="Name is Required." ToolTip="Last Name is required." 
                        Display="Static" Text="*" ValidationGroup="ContactUs">*</asp:RequiredFieldValidator>
            </td>
    </tr>

Step2:-

In this step you need to modify the C# code so that this information can be sent in the Email. For this you need to modify the SendButton_Click method. All you need to do is to add the Last Name information to the body of the Email as bellow

mailMessage.Body += "Last Name: "+LastName.Text+Environment.NewLine;

You can add as many fields as you like.

Screen Shot

Reference

Originally posted in forums by mazhar http://forums.ablecommerce.com/viewtopic.php?f=47&t=7954

Updated version for Gold is available here http://forums.ablecommerce.com/viewtopic.php?f=47&t=17102