Create A Contact Us Form For Your Website

Most of the time we have seen suggestion/complaint form in the footer of many websites but what if you want the same thing in your project?
 
Then I am here to guide you. As far as I know, there are two methods to implement this:
  1. Make a database and save the form details in that so when the site admin logins, he/she can see them.
  2. Generate an email from the code so you can get an email and can retrieve that on the go.
I will explain the second method here. This method will simply guide you on how to send an email and then you can use this in any way you like.
 
Building the Sample
 
Firstly, I created a form in HTML view of an MVC project which looks like the following:
 
Contact us
 
HTML for this form is:
  1. @using(Html.BeginForm("email", "Home", FormMethod.Post)) {  
  2. <div class="row">  
  3.      <div class="col-lg-12">  
  4.           <form name="sentMessage" id="contactForm" novalidate>  
  5.                <div class="row">  
  6.                     <div class="col-md-6">  
  7.                          <div class="form-group">  
  8.                               <input type="text" name="sname" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">  
  9.                               <p class="help-block text-danger"></p>  
  10.                          </div>  
  11.                          <div class="form-group">  
  12.                               <input type="email" name="semail" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">  
  13.                               <p class="help-block text-danger"></p>  
  14.                          </div>  
  15.                          <div class="form-group">  
  16.                               <input type="tel" name="sphone" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">  
  17.                               <p class="help-block text-danger"></p>  
  18.                          </div>  
  19.                     </div>  
  20.                     <div class="col-md-6">  
  21.                          <div class="form-group">  
  22.                               <textarea class="form-control" name="smessage" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>  
  23.                               <p class="help-block text-danger"></p>  
  24.                          </div>  
  25.                     </div>  
  26.                     <div class="clearfix"></div>  
  27.                     <div class="col-lg-12 text-center">  
  28.                          <div id="success"></div>  
  29.                          <button type="submit" class="btn btn-xl" onclick="this.form.submit();">Send Message</button>  
  30.                     </div>  
  31.                </div>  
  32.           </form>  
  33.      </div>  
  34. </div>  
If you copy and paste this HTML it won’t work as desired due to the CSS. So don’t get confused with the code this is just to guide you a bit, you can make any kind of form.
 
Observe the starting line of HTML code I used:
  1. @using (Html.BeginForm("email""Home", FormMethod.Post))   
This is used to call the controller ActionResult method when the user submits this form. "email" is the name of the ActionResult method and "Home" is the controller. That is the main thing where the whole stuff happens.
 
In controller there is a method and an Action Method that calls the method.
  1. public async Task <  
  2.     ActionResult > email(FormCollection form) {  
  3.         var name = form["sname"];  
  4.         var email = form["semail"];  
  5.         var messages = form["smessage"];  
  6.         var phone = form["sphone"];  
  7.         var x = await SendEmail(name, email, messages, phone);  
  8.         if (x == "sent")  
  9.             ViewData["esent"] = "Your Message Has Been Sent";  
  10.         return RedirectToAction("Index");  
  11.     }  
  12. private async Task <  
  13.     string > SendEmail(string name, string email, string messages, string phone) {  
  14.         var message = new MailMessage();  
  15.         message.To.Add(new MailAddress("abc@xyz.com")); // replace with receiver's email id     
  16.         message.From = new MailAddress("xyz@abc.com"); // replace with sender's email id     
  17.         message.Subject = "Message From" + email;  
  18.         message.Body = "Name: " + name + "\nFrom: " + email + "\nPhone: " + phone + "\n" + messages;  
  19.         message.IsBodyHtml = true;  
  20.         using(var smtp = new SmtpClient()) {  
  21.             var credential = new NetworkCredential {  
  22.                 UserName = "xyz@abc.com"// replace with sender's email id     
  23.                     Password = "*****" // replace with password     
  24.             };  
  25.             smtp.Credentials = credential;  
  26.             smtp.Host = "smtp-mail.outlook.com";  
  27.             smtp.Port = 587;  
  28.             smtp.EnableSsl = true;  
  29.             await smtp.SendMailAsync(message);  
  30.             return "sent";  
  31.         }  
  32.     } 
So what's happening here is that I have created an async task of ActionResult type which is called when the user clicks the submit button and values from the form are passed into it.
  1. public async Task<ActionResult> email(FormCollection form)    
Async is used when you have to wait for an action to complete before moving ahead as this process requires some time so we need to use async type and this allows us to use await keyword in it.
  1. private async Task<string> SendEmail(string name, string email, string messages, string phone)   
This is a method that returns a string to tell the status. I have passed all the form values which I need in my email.
  1. message.To.Add(new MailAddress("abc@xyz.com")); // replace with receiver's email id   
Here we have to write the email id on which we want to receive the email.
  1. message.From = new MailAddress("xyz@abc.com"); // replace with sender's email id   
Here go the senders' email id, I have used my id in both so I am sending an email from my one id to another which contains the users' query/suggestion, contact, name, and email, so I can respond later if I want to:
  1. message.Subject = "Message From" + email;   
Here goes the subject, I have written the user's email on the subject, you can write anything you like.
  1. message.Body = "Name: " + name + "\nFrom: " + email + "\nPhone: " + phone + "\n" + messages;   
Here goes the body, I have written the user's name, email, phone, and message in the body. You can get the desired things according to your requirements and form fields.
  1. var credential = new NetworkCredential {  
  2.     UserName = "xyz@abc.com"// replace with sender's email id     
  3.         Password = "*****" // replace with password     
  4. };  
  5.   
  6. //here you have to give your email id and password of that id which you are using to send an email. so our code can log in using these credentials.    
  7.   
  8. smtp.Credentials = credential;  
  9. smtp.Host = "smtp-mail.outlook.com";  
  10. smtp.Port = 587;  
  11. smtp.EnableSsl = true
These are the setting of Hotmail /outlook email service. I was using my Hotmail id as a sender and it worked. If you are using live/outlook/hotmail you can use these ones but for other clients, you can search Host and Port and replace these with those and it will work like a charm.
 
More Information
 
That's all folks, this is very easy to implement and I have tried my best to explain you step by step.
 
For more information, queries or to contact me kindly comment below.

Recommended Ebook

Diving Into Microsoft .NET Entity Framework

Download Now!
Similar Articles