How to get mail from contact us form in bootstrap/html

Question

As i have implemented this code in my web application web form on Asp.net http://azuresolutionz.com/ContactUs.html Kindly check the link for the detailed issue.

When i click to send button i do not get the form detail in my inbox. and the js is also not working.

Answer 1

Ahh I see, you have implemented mail in a very weird way here.

Firstly very important - I see the error message "$ is not defined" in your console. But I see the jquery file in your Resource folder, which only means you have called the jquery-2.1.4.min.js in the wrong order.

You first need to call the jquery-2.1.4.min.js file before all the other js files like bootstrap.min.js and your ContactUs.js. You can give it a try after you do this change. This should remove most of your js errors.

That being cleared now you can check the rest of the information I provided to get a better understanding on how your mail system works.

• You have not used any server side technologies but directly fetching the values from the fields and on-click of the send button you are retrieving all the form inputs data and using mail:to.

• mail:to opens a mail(with the data) on the user's default mail client to send the mail.

• So just expect(after clicking "Send" button) for the data to populate on your default Email Client like Outlook(Windows) or Mail(MAC).

• Here on your Email Client you need to send the mail like how you would send any normal mail to send and receive ofcourse.

Alternatively if you do not want mailto, then you have to use any server side mailer implementation making use of PHP or Java or C# etc.

Updated as per @Shahzeb's request:

After creating the ContactUs.ascx files,

Firstly you need to make your input text fields as asp:TextBox and add an ID attribute to it, as this is how we can get the value of the corresponding fields on the code behind page. This would look something like

<asp:TextBox ID="txtFirstName" runat="server" />

Do this for all your fields.

Then Add this to your ContactUs.ascx.cs file (which is the code behind page of ContactUs.ascx).

Note: It has using System.Net.Mail; added.

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Net.Mail;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        try
        {
            MailMessage message = new MailMessage(txtFirstName.Text, txtLastName.Text, txtEmail.Text, txtPhone.Text);
            SmtpClient emailClient = new SmtpClient(txtSMTPServer.Text);
            emailClient.Send(message);
            litStatus.Text = "Message Sent";
        }
        catch (Exception ex)
        {
            litStatus.Text=ex.ToString();
        }
    }
}