How to create custom form using MVC controller in Umbraco 7?

Umbraco 7 is one the best and most powerful CMS platforms based on asp.net MVC. You can also create a custom form in Umbraco. You can easily create a custom form in Umbraco using Razor view and Partial view. Umbraco 7 controllers need to inherit from SurfaceController for creating custom form methods in asp.net MVC.

Let’s discuss how you can create a stunning custom web form in Umbraco 7 cms system. here I am going to explain step-by-step web form customization in asp.net MVC.

These are some steps to create a custom form in Umbraco 7.

1. Create a model that will be used in Razor view.
2. Add Partial View which contains model elements.
3. Then you have to create SurfaceController.
4. Add View which will call methods of SurfaceController.

For Example, suppose we create forgot password Page in the Umbraco 7 cms system. here is the total asp.net MVC developer guidelines for creating a custom form. kindly follow the below step-by-step guidelines for the customization.

Guideline for the customization:

1. Create model that will be used in Razor view. Create ForgotPasswordModel inside the Models folder. kindly follow the below Javascript code for the solution.

public class ForgotPasswordModel
{
	public ForgotPasswordModel()
	{

	}
	[DataType(DataType.EmailAddress)]
	[Display(Name = "Email Address")]
	[Required(ErrorMessage = "Email Address is required.")]
	[UIHint("Text")]
	public string EmailAddress { get; set; }
}

2. Add Partial View which contains model elements.Create Partial View inside ~ViewsPartials folder. keep one thing in mind you do not have to add javascript of that page here. kindly add it in a view. follow the below HTML code for the solution.

@model BussinessLayer.ViewModel.ForgotPasswordModel
@{
	ViewBag.Title = "_ForgotPassword";
}

Send Mail

3. Create SurfaceController as following and add ForgotPassword method. Please note that here it returns partial view instead of a view.

public class AccountSurfaceController : SurfaceController
{
	public ActionResult ForgotPassword()
	{
		return PartialView("_ForgotPassword");
	}
}

4. Add View which will call methods of SurfaceController. Create a Section called “scripts” in the Layout page then add javascript related to this page in scripts section as follows.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
	Layout = "umbLayout.cshtml";
}
@Html.Action("ForgotPassword", "AccountSurface")
@section scripts {
}

5. If you want to post Forgot password form then you need to use a method in view like the following then create the Post method in AccountSurfaceController.

@using (Html.BeginUmbracoForm("ForgotPassword", "AccountSurface", FormMethod.Post))
{
	@Html.EditorFor(model => model.EmailAddress)
	@Html.ValidationMessageFor(model => model.EmailAddress)
	<button type="submit">Send Mail</button>
}

I hope that this article is useful for Umbraco 7 developers for creating a custom web form in Umbraco 7 using with asp.net MVC and coding implementation.