ASP.NET MVC: Create Contact Form Flat Responsive

How to Create a Contact Form Flat Responsive with ASP.NET Identity MVC 5 using C#, Entity Framework Code First

Step 1: Download Client Contact Form a Flat Responsive Widget Template

Client Contact Form a Flat Responsive Template

Step 2: Create a Contact class, then run add-migration to create a contact table

[Table("Contacts")]
public class Contact
{
    public int Id { get; set; }
    [StringLength(100)]
    [Required]
    public string FullName { get; set; }
    [StringLength(100), Required]
    public string Email { get; set; }
    [StringLength(1000), Required]
    public string Message { get; set; }
    [StringLength(15), Required]
    public string PhoneNumber { get; set; }
}

Open IdentityModels class, then create a contact property

public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{
    public ApplicationDbContext()
        : base("DefaultConnection", throwIfV1Schema: false)
    {
    }
   
    public DbSet<Contact> Contacts { get; set; }

    public static ApplicationDbContext Create()
    {
        return new ApplicationDbContext();
    }
}

Step 3: Create a Contact controller

public class ContactController : Controller
{
    ApplicationDbContext context;

    public ContactController()
    {
        context = new ApplicationDbContext();
    }

    // GET: Contact
    public ActionResult Index()
    {
        return View(context.Contacts.ToList());
    }

    public ActionResult Create()
    {
        return View(new Contact());
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> Create(Contact model)
    {
        if (ModelState.IsValid)
        {
            context.Contacts.Add(model);
            await context.SaveChangesAsync();
            return RedirectToAction("Index");
        }
        return View(model);
    }

    public ActionResult Profile()
    {
        return View(new Contact());
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> Profile(Contact model)
    {
        if (ModelState.IsValid)
        {
            context.Contacts.Add(model);
            await context.SaveChangesAsync();//Save data to sql database
            return RedirectToAction("Index");
        }
        return View(model);
    }
}

Right click on Index action, then create an Index view, similar for Create and Profile action

@model IEnumerable<MvcDemo.Models.Contact>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FullName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Message)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PhoneNumber)
        </th>
        <th></th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.FullName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Message)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PhoneNumber)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>
    }
</table>

Add code to Create view

@model MvcDemo.Models.Contact
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>Client Contact Form Flat Responsive Widget Template :: w3layouts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Client Contact Form template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- Custom Theme files -->
    <link href="/clientcontact/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- //Custom Theme files -->
    <!-- web font -->
    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'><!--web font-->
    <link href="//fonts.googleapis.com/css?family=Amita:400,700" rel="stylesheet">
    <!-- //web font -->
</head>
<body>
    <!-- main -->
    <div class="main">
        <h1>Client Contact Form</h1>
        <div class="main-row">
            <div class="agileits-info">
                <div class="agileits-infoleft">
                    <img src="/clientcontact/images/img1.jpg" alt="" />
                </div>
                <div class="agileits-inforight">
                    <h2>Jose Leiter</h2>
                    <h6>Fashion Designer</h6>
                    <p><img src="/clientcontact/images/i1.png" alt=""> +01 11 222 3333</p>
                    <p><img src="/clientcontact/images/i2.png" alt=""> <a href="mailto:[email protected]"> [email protected]</a></p>
                </div>
                <div class="clear"> </div>
            </div>
            <h3>SEND A QUICK MESSAGE TO ME</h3>
            <div class="contact-wthree">
                @using (Html.BeginForm("Create", "Contact", FormMethod.Post))
                {
                    @Html.AntiForgeryToken()                   
                    @Html.TextBoxFor(m => m.FullName, new { @placeholder = "Full name" })
                    @Html.ValidationMessageFor(m=>m.FullName)
                    @Html.TextBoxFor(m => m.PhoneNumber, new { @placeholder = "Mobile Number" })
                    @Html.ValidationMessageFor(m => m.PhoneNumber)
                    @Html.TextBoxFor(m => m.Email, new { @placeholder = "Email" })
                    @Html.ValidationMessageFor(m => m.Email)
                    @Html.TextAreaFor(m => m.Message, new { @placeholder = "Message" })
                    @Html.ValidationMessageFor(m => m.Message)
                    <input type="submit" value="SUBMIT">
                }                
            </div>
        </div>
    </div>
    <!-- //main -->
    <!-- copyright -->
    <div class="w3copyright-agile">
        <p>© 2017 Client Contact Form. All rights reserved | Design by <a href="http://w3layouts.com/" target="_blank">W3layouts</a></p>
    </div>
    <!-- //copyright -->
</body>
</html>

Add code to Profile view

@model MvcDemo.Models.Contact
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>Profile Contact Form Flat Responsive Widget Template :: w3layouts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Profile Contact Form template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- Custom Theme files -->
    <link href="/profile/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- //Custom Theme files -->
    <!-- web font -->
    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href="//fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
    <!-- //web font -->
</head>
<body>
    <!-- main -->
    <div class="main">
        <h1>Profile Contact Form</h1>
        <div class="main-wthree-row">
            <h4><span>Lorem ipsum </span>dolor Sit amet consec tetur adip iscing elit.</h4>
            <div class="agileits-info">
                <div class="agileits-infoleft">
                    <img src="/profile/images/img1.jpg" alt="" />
                    <div class="agileits-infotext">
                        <h2>Jose Leiter</h2>
                        <h6>Fashion Designer</h6>
                    </div>
                </div>
                <div class="agileits-inforight">
                    <p><img src="/profile/images/i1.png" alt=""> +01 11 222 3333</p>
                    <p><img src="/profile/images/i2.png" alt=""> <a href="mailto:[email protected]"> [email protected]</a></p>
                </div>
                <div class="clear"> </div>
            </div>
            <h3>Send a message to me</h3>
            <div class="contact-wthree">
                @using (Html.BeginForm("Profile", "Contact", FormMethod.Post))
                {
                    @Html.AntiForgeryToken()
                    <div class="contact-w3left w3-agile">                        
                        @Html.TextBoxFor(m => m.FullName,new { @placeholder = "Full Name" })
                        @Html.TextBoxFor(m => m.PhoneNumber, new { @placeholder = "Mobile Number", @class = "email" })
                        @Html.TextBoxFor(m => m.Email, new { @placeholder = "Email" })                        
                    </div>
                    <div class="contact-w3right">                        
                        @Html.TextAreaFor(m => m.Message, new { @placeholder = "Message" })                        
                        <input type="submit" value="SUBMIT">
                    </div>
                    <div class="clear"> </div>
                }                
            </div>
        </div>
    </div>
    <!-- //main -->
    <!-- copyright -->
    <div class="w3copyright-agile">
        <p>© 2017 Profile Contact Form. All rights reserved | Design by <a href="http://w3layouts.com/" target="_blank">W3layouts</a></p>
    </div>
    <!-- //copyright -->
</body>
</html>

VIDEO TUTORIALS