How to write Contact Us Control

Problem

How to write a custom control that provides you the Email functionality for example a small contact us control using the CommerceBuilder classes.

Solution

This tutorial will guide you how to create a feedback or contact control for your AbleCommerce powered store. The main purpose is to utilize the AbleCommerce CommerceBuilder API for utilizing the AbleCommerce configured SMTP settings.

Let's start by first creating a ContactUs.ascx file in Website/ConLib/ folder. It would be better to construct this feedback form as a ConLib user control so that it can be used any where on the store side.

After creating the file now copy and paste the following code into the ContactUs.ascx file.

<%@ 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>

Now contact us control is available and you can use it just like any other conlib control across the store.

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

SendTo Property

The control exposes a SendTo property. You can use this property to specify the address at which you want to receive the Email. For example you want to recieve the Email at your Email address dedicated for customer feedback then the use of control will be as bellow.

[[ConLib:ContactUs SendTo="feedback@yourdomain.com"]]

Also keep in mind that if you don't provide any SendTo Email address then the control will be used the default Email address defined in the SMTP settings for store.

How can i add more fields to the contorl?

Almost each and every merchant including you has its own requirements. So a basic questoin may be in your mind too that how can i add my custom information to the control. You can do this job easily. For example if you want to add user's last name as well then you can do this job in two 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:-

Now in this step you need to modify the C# code so that this information can be sent within the Email. For this you need to modify the SendButton_Click function. You just need to add this extra 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 want to the control in this way.

Screen Shot