Saturday , 1 November 2014
You are here: Home » .NET » Fancy Contact us Page Using ASP.NET

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 :

 Asp contact us form

 Email Notification : 

Email Notifiaction ASP.NET

.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
     }

This project was successfully compiled using  Microsoft Visual Studio 2012

About Vinayak Bamane

MCA from IMCOST College. Works as a Software Specialist with eClinicalWorks. Programming Worm, Trek lover, Rock Climber, Game Addict, Volleyball Player and happy to be with Amazing Things : )
  • Sneha Posam

    Nice

    • http://www.amazingthings.in Vinayak Bamane

      Thank you very much..!

    • Vinayak Bamane

      Thank you very much!!

Scroll To Top