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

By: Jignasha
Updated: April 4, 2015 | Technology: Asp.Net MVC
How to create custom form using MVC controller in Umbraco 7?

Umbraco 7 is one the best and powerful CMS platform 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 Umbraco 7 cms system. here is total asp.net MVC developer guidelines for creating a custom form. kindly follow the below step by step guideline for the customization.

Guideline for the customization:

  1. Create model that will be used in Razor view.

    Create ForgotPasswordModel inside Models folder. kindly follow the below Javascript code for the solution.

Copy to Clipboard
  1. Add Partial View which contains model elements.

    Create Partial View inside ~\Views\Partials 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.

Copy to Clipboard
  1. Create SurfaceController as following and add ForgotPassword method. Please note that here it returns partial view instead of a view.
Copy to Clipboard
  1. Add View which will call methods of SurfaceController. Create Section called “scripts” in Layout page then add javascript related to this page in scripts section as follows.
Copy to Clipboard
  1. If you want to post Forgot password form then you need to use a method in view like following then create Post method in AccountSurfaceController.
Copy to Clipboard

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.