Difference between revisions of "How to write Contact Us Control"

From AbleCommerce Wiki
Jump to: navigation, search
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
'''Problem'''
 
'''Problem'''
  
−
How to write a custom control that provides you the Email functionality for example a small contact us control using the CommerceBuilder classes.
+
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'''
 
'''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.
+
Download links for both AC7 and Gold compatible contact us controls are available at the bottom of the page under Reference section.
  
−
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.
+
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.
  
−
After creating the file now copy and paste the following code into the ''ContactUs.ascx'' file.
+
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''.
  
 
<code>
 
<code>
Line 33: Line 34:
 
          
 
          
 
         if (String.IsNullOrEmpty(SendTo))
 
         if (String.IsNullOrEmpty(SendTo))
 +
        {
 
             mailMessage.To.Add(settings.DefaultEmailAddress);
 
             mailMessage.To.Add(settings.DefaultEmailAddress);
 
         else
 
         else
 
             mailMessage.To.Add(SendTo);
 
             mailMessage.To.Add(SendTo);
 +
        }
 
         mailMessage.From = new System.Net.Mail.MailAddress(Email.Text);
 
         mailMessage.From = new System.Net.Mail.MailAddress(Email.Text);
 
         mailMessage.Subject = "Feedback";
 
         mailMessage.Subject = "Feedback";
Line 57: Line 60:
 
             MessageLabel.CssClass = "errorCondition";
 
             MessageLabel.CssClass = "errorCondition";
 
         }
 
         }
−
 
 
     }
 
     }
 
</script>
 
</script>
Line 109: Line 111:
 
     </tr>
 
     </tr>
 
</table>
 
</table>
−
 
  
 
</pre>
 
</pre>
 
</code>
 
</code>
  
−
Now contact us control is available and you can use it just like any other conlib control across the store.
+
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.
 
<code>
 
<code>
 
<pre>
 
<pre>
Line 121: Line 123:
 
</pre>
 
</pre>
 
</code>
 
</code>
 +
  
 
'''SendTo Property'''
 
'''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.
+
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.
  
−
<code>
 
−
<pre>
 
−
[[ConLib:ContactUs SendTo="feedback@yourdomain.com"]]
 
−
</pre>
 
−
</code>
 
  
−
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 you add more fields to the control?'''
  
−
'''How can i add more fields to the contorl?'''
+
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.
  
−
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 to the contact-us form and receive that in your email then you can do this job in two simple steps
−
For example if you want to add user's last name as well then you can do this job in two steps
+
  
 
''Step1:- ''
 
''Step1:- ''
Line 162: Line 159:
 
''Step2:- ''
 
''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
+
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
  
 
<code>
 
<code>
Line 170: Line 167:
 
</code>
 
</code>
  
−
You can add as many fields as you want to the control in this way.
+
You can add as many fields as you like.
  
 
'''Screen Shot'''
 
'''Screen Shot'''
Line 178: Line 175:
 
==Reference==
 
==Reference==
 
Originally posted in forums by mazhar http://forums.ablecommerce.com/viewtopic.php?f=47&t=7954
 
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
 +
[[Category:AbleCommerce 7]]

Latest revision as of 06:19, 8 April 2015

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

ContactUs.jpg

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

Retrieved from "http://wiki.ablecommerce.com/index.php?title=How_to_write_Contact_Us_Control&oldid=1196"