Fancy Contact us Page Using ASP.NET

Title : Contact us page using ASP.NET

Description :

I am going to design contact us page where you will fill up necessary fields and click button to submit it.

I will make use of few textboxes to enter some necessary fields and then at the end there will be a button called submit which will send data in form of an email notification.

Demo :

Email Notification :

.aspx Code :

 ASP |   Copy to Clipboard | ?  
001 <head runat="server">
002     <title></title>
003  
004     <link rel="Stylesheet" href="Contact.css" type="text/css"/>
005  
006 </head>
007 <body>
008     <form id="form1" runat="server">
009  
010     <table class="auto-style1">
011         <tr>
012             <td class="auto-style2">&nbsp;</td>
013             <td>
014                 <p style="font-family: Tahoma; font-size: large; font-weight: bold; 
015                     font-style: normal; font-variant: normal; color: #000099">
016  
017                     Contact Us
018  
019                 </p>
020             </td>
021         </tr>
022         <tr>
023             <td class="auto-style2">&nbsp;</td>
024             <td>&nbsp;</td>
025         </tr>
026         <tr>
027             <td>
028                 <asp:label ID="nameLabel" runat="server" Font-Bold="True" Font-Names="Tahoma" 
029                     Font-Size="Medium" ForeColor="Black" Text="Name"></asp:label>
030             </td>
031             <td>
032  
033                 <asp:textbox ID="nameTextBox" runat="server" CssClass="TextBox" Font-Names="Tahoma"
034                      Width="216px" CausesValidation="True"></asp:textbox>
035  
036                 <asp:requiredfieldvalidator ID="nameTextBoxRFV" ErrorMessage=" * " 
037                     runat="server" ControlToValidate="nameTextBox" ValidationGroup="save" Display="Dynamic" 
038                     SetFocusOnError="True"></asp:requiredfieldvalidator>
039  
040             </td>
041         </tr>
042         <tr>
043             <td>
044                    <asp:label ID="emailLabel" runat="server" Font-Bold="True" Font-Names="Tahoma" 
045                        Text="Em@il Id"></asp:label>
046             </td>
047             <td>
048  
049                 <asp:textbox ID="emailTextBox" runat="server" CssClass="TextBox" Width="216px" 
050                     CausesValidation="True"></asp:textbox>
051  
052                 <asp:requiredfieldvalidator ID="emailTextBoxRFV"  ErrorMessage=" * " 
053                     runat="server" ControlToValidate="emailTextBox" ValidationGroup="save" Display="Dynamic" 
054                     SetFocusOnError="True"></asp:requiredfieldvalidator>
055  
056                 <asp:regularexpressionvalidator runat="server" ID="RegularExpressionValidator23"
057                     SetFocusOnError="true" Text="Example: username@gmail.com" ControlToValidate="emailTextBox"
058                     ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" Display="Dynamic"
059                     ValidationGroup="save" /><br />
060  
061             </td>
062         </tr>
063         <tr>
064             <td>
065                 <asp:label ID="subjectLabel" runat="server" Font-Bold="True" Font-Names="Tahoma" 
066                     Text="Subject"></asp:label>
067             </td>
068             <td>
069  
070                 <asp:textbox ID="subjectTextBox" runat="server" CssClass="TextBox" Width="216px" 
071                     CausesValidation="True"></asp:textbox>
072  
073                 <asp:requiredfieldvalidator ID="subjectTextBoxRFV"  ErrorMessage=" * " 
074                     runat="server" ControlToValidate="subjectTextBox" Display="Dynamic" SetFocusOnError="True"
075                      ValidationGroup="save"></asp:requiredfieldvalidator>
076  
077             </td>
078         </tr>
079         <tr>
080             <td>
081                 <asp:label ID="messageLabel" runat="server" Font-Bold="True" Font-Names="Tahoma" 
082                     Text="Message"></asp:label>
083             </td>
084             <td>
085  
086                 <asp:textbox ID="messageTextBox" runat="server" CssClass="TextBox" Rows="6"
087                      TextMode="MultiLine" Width="216px" CausesValidation="True"></asp:textbox>
088  
089                 <asp:requiredfieldvalidator ID="messageTextBoxRFV"  ErrorMessage=" * "
090                      runat="server" ControlToValidate="messageTextBox"
091                      ValidationGroup="save" Display="Dynamic"></asp:requiredfieldvalidator>
092  
093             </td>
094         </tr>
095         <tr>
096             <td>&nbsp;</td>
097             <td>&nbsp;</td>
098         </tr>
099         <tr>
100             <td>&nbsp;</td>
101             <td>
102                 <asp:button ID="submit" CssClass="Button" runat="server" 
103                     style="text-align: center" Text="Submit" ValidationGroup="save" 
104                     CausesValidation="true" OnClick="submit_Click"/>
105             </td>
106         </tr>
107         <tr>
108             <td>&nbsp;</td>
109             <td>
110                 <asp:label ID="confirmationLabel" runat="server" Visible="False"></asp:label>
111             </td>
112         </tr>
113     </table>
114  
115     </form>
116 </body>
117

Code Behind Button :

 ASP |   Copy to Clipboard | ?  
01 using System;
02 using System.Collections.Generic;
03 using System.Linq;
04 using System.Net;
05 using System.Net.Mail;
06 using System.Web;
07 using System.Web.UI;
08 using System.Web.UI.WebControls;
09  
10 namespace AmazingThingsDemoOG
11 {
12 public partial class _Default : System.Web.UI.Page
13     {
14         protected void Page_Load(object sender, EventArgs e)
15         {
16  
17         }
18  
19         //This function will be called on button click to send email
20         protected void SendEMail()
21         {
22             try
23             {
24                 //url of your website
25                 String url = "YourURL";
26  
27                 //Email id and Password of that Email id which you will be using to send email
28                 NetworkCredential loginInfo = new NetworkCredential("EmailId", "Password");
29  
30                 //Declare new MailMessage object and initialize with values such as from address, to address, bcc address, subject etc
31                 MailMessage msg = new MailMessage();
32                 msg.From = new MailAddress("FromAddress");
33                 msg.To.Add(new MailAddress(emailTextBox.Text));
34                 msg.Bcc.Add(new MailAddress("BccAddress"));
35                 msg.Subject = "Notification from:Your Website Name";
36                 msg.Body = "Hi," + nameTextBox.Text + "<br /> Thanks for contacting us. We will contact you soon. <br />" + "Our System has recorded a message <br />" + messageTextBox.Text + " <br /> Thanks and Regards <br />" + url;
37                 msg.IsBodyHtml = true;
38  
39                 //Name the client which you will be using to send email.
40                 SmtpClient client = new SmtpClient("smtp.gmail.com");
41  
42                 client.EnableSsl = true;
43                 client.UseDefaultCredentials = false;
44                 client.Credentials = loginInfo;
45                 client.Send(msg);
46             }
47             catch (Exception ex)
48             {
49                 confirmationLabel.Text = ex.Message;
50             }
51  
52         }
53  
54         protected void submit_Click(object sender, EventArgs e)
55         {
56             try
57             {
58                 //It Will call function SendEmail and confirms that message sent succesfully.
59                 SendEMail();
60                 confirmationLabel.Text = "Thanks for contacting us. We will get back to you in 24Hrs.";
61                 confirmationLabel.Visible = true;
62                 subjectTextBox.Text = "";
63                 emailTextBox.Text = "";
64                 nameTextBox.Text = "";
65                 messageTextBox.Text = "";
66             }
67             catch (Exception) { }
68         }
69     }
70  
71 }

I have used CSS to make contact us page attractive.

CSS Code :

 CSS |   Copy to Clipboard | ?  
01 .TextBox 
02         {
03            padding: 9px;
04         border: solid 1px #E5E5E5;
05         outline: 0;
06         font: normal 13px/100% Verdana, Tahoma, sans-serif;
07         width: 200px;
08         background: #FFFFFF url('bg_form.png') left top repeat-x;
09         background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
10         background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
11         box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
12        -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
13        -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
14         }       
15  
16         .TextBox:hover, textarea:hover,
17         .TextBox:focus, textarea:focus
18          { 
19          border-color: #C9C9C9; 
20          -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
21      }        
22  
23         .Button 
24         {
25          width: auto;
26          padding: 9px 15px;
27          background: #617798;
28          border: 0;
29          font-size: 14px;
30          color: #FFFFFF;
31          -moz-border-radius: 5px;
32          -webkit-border-radius: 5px;
33          cursor: pointer;
34      }