Thursday, February 19, 2015

#Umbraco | Creating a contact form for dummies

As a .NET-based, MVC CMS, Umbraco sounds good right from the start.
However, for beginners, the easiest things may be hard to understand, specially if we want to get our hands dirty.

The post will cover the procedure to create a simple contact form in Umbraco, but also how to really integrate it with the platform, for those just starting to know the CMS.

1 - Provision your Umbraco environment
(check out my previous post, Installing Umbraco for the first time)

2 - Really understand the structure concept

The Model-View-Controller pattern is just one of the things you will have to get comfortable with.
The main challenge is to undertand how Umbraco structures its information, specially regarding pages, templates, view and master pages.

3 - Create a model
The model is the "Data Model" were we will need to setup the data structures and types to be used by our interacting elements.

Model (Models\ContactModel.cs):

4 - Create a controller
A controller is a piece of code that will handle the server side code.
The controller will reference the model to understand data structures, and will be referenced by views to create a link between the front end elements and the code behind.

Controller (Controllers\ContactController.cs):

5 - Create a partial view (UI) A partial view is an independent element, that displays html, css and others, while communicating with a controller for the execution of operations. It can be created by opening the /umbraco admin area and going to Settings > Partial Views and hit "Create".
Partial View (Views\Partials\ContactForm.cshtml):

6 - Create a document type & template (UI) If you have created your model, controller and partial view, you have almost everything you need, except there is no interaction with Umbraco just yet. You have functionality, but not structured functionality, like navigation and pages that show your features. This is what is really new when working with Umbraco. You will have to decide weather to create a specific document type for your future page, or use an existing document type, and just create a new template. From Umbraco: "Step 1 of any site is to create a "Document Type" – after a few installations you’ll become familiar with this terminology but at the start it might be a little bit bewildering. A Document Type is a data container in Umbraco where you can add data fields / attributes where the editor user can input data and Umbraco can use it to output it in the relevant part of a "template" (more on these later).  " The template is a .cshtml file, just as the partial view, except that the template will define the master page and render the view, usually with Html.RenderPartial(viewPath) Umbraco on templates. Procedure:
  • Next to "Master", create a new Document Type "Contact Form"
  • Agree to create a new Template with the same name
  • In "Home" Document Type, check "Contact Form" in "Allowed templates"
  • In "Home" Document Type, check "Contact Form" in "Allowed child node types"
  • In Templates, set the Master template of "Contact Form" to "Layout"
By now you should be able to create pages based on the contact form template, either in "Content" or under "Home". Template (Views/ContactForm.cshtml):

7 - Create a content page (UI) The page is, obviously, the endpoint for interaction with the user. You will setup a friendly url, a page title, and the body contents, if any. A page is associated with a specific document type, and the templates available for that document type. You can create a page in the "Content" area, assuming you have already setup the proper document types and templates. 

Quick and Easy Umbraco 7 Razor Contact Form

Umbraco 7 and MVC - Contact Form

If you are looking for a full deliverable, you can find it here.
This is a fully documented plugin that also contains a precompiled dll that can be included in your projects.

No comments:

Post a Comment