Watch video

How to create your first form?

Now that we have Umbraco forms installed and running, let's create our first form. We can create forms by interacting with the tree, like you are used to in the Umbraco Back Office. You can start from a blank form or a template already containing some fields.

In the Umbraco Back Office, in the Forms section, if you do not have any forms set up yet, you will get this notification on your dashboard.

We will interact with the tree to make a new form. In the Forms section, you will have three trees. Of course, forms creation will happen by interacting with the forms tree. Just click the tree dots.

You are able to create a form by either selecting one of the templates or starting from scratch. That is what you will do. You will start with an empty form.

As you now see, you will have to enter a name. Let's call this My First Form.

You can now also enter a page caption like Contact Us, in case you are creating a contact form.

Next, you will have to start adding fields to your form. All of this can be done in the UI. Adding fields will be done by hitting the plus sign.

You will see that you are able to choose which type of field you want to add. You have Textfield, Textarea, DatePicker, Checkbox, File upload, Password Field, Checkbox List, DropDownList, RadioButton List, Text, Recaptcha and Hidden Field.

There are also a couple of layout elements, which we will discuss in a later chapter.

For now, you just want to add a name, an email and a comment field. You will start with your name field. Add a form field of the type Textfield.

For each field, you will have a caption, a help text and then the preview.

The caption will be your name. The help text will be your name.

In order to set additional settings, like making a field mandatory, you will have to hover over your field and hit the cork that is visible on the right.

This dialogue now shows you some additional settings. Of course, there is the name, the label and the type of field. There is also some stuff regardingvalidations if you want to make a field mandatory. There is the mandatory error message.

You can also validate the field with a regular expression and enable conditions. There are also some extra settings that are dependent on the field type. For now, you just want to make your field mandatory.

You will now repeat this step for the email and message. Add a new field.

Set the caption or label to email. Set the help text to "Your Email Address".

Finally, add a new form for the field of type Textarea called "Message". Set the help text to "Your Message".

Of course, you still need to make these two fields mandatory. You will go to the cork and check the Mandatory box. Repeat this step for Message.

Once you are satisfied with your form, you can then save it.

*That was your first form. *

Umbraco Forms

Total Time: 00:24:25

With the Umbraco HQ's add-on product Umbraco Forms it's a breeze to create any type of form you can imagine.