How To Create a Contact Us Form In Umbraco 7

This is the second post in a series of using forms with Umbraco.  In today’s tutorial, I’m going to cover how to create a contact us form.

Surface Controller

When working with MVC and Umbraco, you will need to work with controllers. Umbraco comes with two varieties, the RenderMvcController and the SurfaceController. When you want to use route hijacking to intercept requests from a published page request to a specific document type.

The surface controller, on the other hand, is used to interact with views, like when you want to post a form to a controller. Or you could write a child action to a view with a SurfaceController

Contact Us View Model

When we want to move data between the business layer and the presentation layer, we will need a view model to pass this data. For a contact form this view model may look like this:

public class ContactFormViewModel
{
public string Name { get; set; }
public string Email { get; set; }
public string Message { get; set; }
}

The Surface Controller

The next step is to create a controller to render the contact us form and validate the form.

public class ContactUsFormSurfaceController : Umbraco.Web.Mvc.SurfaceController
{
public ActionResult Index()
{
return PartialView("ContactUsForm", new ContactFormViewModel());
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SubmitForm(ContactFormViewModel model)
{
if (!ModelState.IsValid)
return CurrentUmbracoPage();
// Do stuff
TempData["FormSubmitted"] = true;
return RedirectToCurrentUmbracoPage();
}
}

in the controller, we define two actions, an index action to render the view and a submit form action to process the for data.

In the ‘SubmitForm’ action, we use the standard MVC validation things, like the ValidateAntiForgeryToken attribute and the IsValid property. I have omitted the code to process the form, you may want to send an email, or submit the data into Umbraco.

After we do the form logic we can use the TempData feature to pass information back to the view. The other way of doing this is adding an extra property on the view model.

The View

@model JonDJones.BusinessLayer.ViewModel.ContactFormViewModel
@using JondJonesSampleSite.Controllers;
@{
Html.EnableClientValidation(true);
Html.EnableUnobtrusiveJavaScript(true);
}
@if (Convert.ToBoolean(TempData["FormSubmitted"]))
{
<div>Thanks for submitting the form.</div>
}
else
{
using (Html.BeginUmbracoForm<ContactUsFormSurfaceController>("SubmitForm"))
{
@Html.ValidationSummary(true)
@Html.AntiForgeryToken()
@Html.EditorFor(x => Model)
<input type="submit" />
}
}

In the form the template property is set, a thank you for submitting this form message will be displayed.  If it hasn’t, then a form will render based on the view models properties.

Code Sample

You can download a fully working example sample site here:
https://github.com/jondjones/JonDJones.com.UmbracoContactForm

Conclusion

In today’s guide we’ve covered how to create a basic contact us form in Umbraco. In order for everything to work, we create use the Umbraco surface controller. The surface controller has methods and properties that hook into Umbraco to provide some of the routing requirements needed to post back to an Umbraco controller.

The rest of the process is fairly simple, create a view model to pass information between the view and the controller. A view to render the HTML and a controller to process the submission.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

2 replies
    • Jon D Jones
      Jon D Jones says:

      If you use this approach, you would have to write custom code yourself as your responsible for managing the form and where the data lives. If you use Contour then you would do it within Umbraco. You would export the data etc.. as it lives within the Umbraco database

      Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *