Creating Forms
Information on creating forms in Umbraco
Creating forms requires that you know your way around .NET Core MVC. So if you are familiar with adding view models, views and controllers you are ready to make your first form.
You can also use Umbraco forms. It lets you and/or your editors create and handle forms in the backoffice. This includes setting up validation, redirecting and storing and sending form data. Great UI, extendable and supported by Umbraco HQ.
In this example we'll create a basic contact form containing a name, email and message field.
Creating the view model
First, we're going to create the model for the contact form by adding a new class to the /Models
folder. If the folder doesn't already exist, create it at the root of your website. Let's call it ContactFormViewModel.cs
Build your solution after adding the model.
Creating the view
Next, we add the view for the form to the /View/Partials
folder. Because we've added the model and built the solution we can add it as a strongly typed view.
Name your view "ContactForm".
The view can be built with standard MVC helpers:
Adding the controller
Finally, we're going to add the controller. Create a new empty class in the /Controllers
folder (if the folder doesn't already exist, create it at the root of the website). Name it ContactFormController
and make it inherit from SurfaceController
. Inheriting from SurfaceController
requires that you call its base constructor. If you are using an IDE: Integrated Development Environment, this can be done automatically.
If the model state is invalid, CurrentUmbracoPage()
will send the user back to the form. If valid, you can work with the form data, for example, sending an email to site admin and then RedirectToCurrentUmbracoPage();
.
Adding the form to a template
You can add the form to a template by rendering the partial view:
Adding the form through the backoffice
To add the form to your site we'll make a macro. This also makes it possible to let editors add the form to a page using the rich text editor.
Creating a macro
Go to the Settings section and right-click the Partial Views Macro Files node. Choose "Create" and select New partial view macro. Name the macro Contact Form.
In the partial view, we're going to render our contact form using the view model we created earlier.
Adding the macro
The last thing to do before we can add the form to a page is to allow the Macro in a rich text editor. Expand the Macros node and select the Contact Form Macro. Check the boxes under Editor Settings.
If you don't see your new macro listed, right click Macros and select Reload.
Now you can add the form to a page that has a rich text editor.
More information
Last updated