In this tutorial, we'll look at creating a Contact Form using Umbraco Forms. It will take you through the process of creating a Contact Form and cover all the different components involved in building the form.
You can use a Contact Form on your website to allow a visitors to send you a message. Having a Contact Form on your website allows you to keep track of potential customer queries and possibly generate leads via email communication.
The first step in this tutorial is to configure the Document Types that will be used to show the Contact Form on your website.
We'll start off by creating a Composition. A Composition is a stand-alone Document Type, that you can reuse on other Document Types. By creating a Composition, we are not duplicating the same properties on multiple Document Types. This is helpful when we want to use the same set of properties on multiple Document Types.
To create a Composition, follow these steps:
Go to Settings in the Umbraco Backoffice.
Expand the Document Types folder in the Settings tree.
Select ... next to the Compositions folder.
Click Composition.
Enter a Name for the Composition- let's call it Title Box.
Add the following fields with the respective specifications:
Save Composition.
Next, we will create a Document type with template. A Document Type contains different properties for holding different types of content. The Document Type we create here will be the one used for creating the content page that will hold our Contact Form.
To create a Contact Us Document Type, follow these steps:
Go to Settings in the Umbraco Backoffice.
Select ... next to the Document Types folder.
Select Document Type with Template.
Enter a Name for the Document Type- let's call it Contact Us.
Select Compositions in the top-right corner.
Make sure the Title Box Composition is checked.
Submit the change.
Add the following fields with the respective specifications:
Save the Document Type.
In the following we will update the Document Type permissions to specifically add child nodes under the root content node.
To update the Contact Us Document Type permissions, follow these steps:
Navigate to the Document Type used for the root content node on your website, in this case Home Page.
Go to the Permissions tab.
Select Add child in the Allowed child node types section.
Select the Contact Us page.
Submit the changes.
Save the Document Type.
This step takes you through creating the content node for your Contact Form. The content node uses the Document Type and Template to serve up an HTML page to web visitors.
To add the content node, follow these steps:
Go to Content in the Umbraco Backoffice.
Select ... next to the Home Page.
Create a Contact Us page.
Enter the name for the content node. let's call it Contact Us.
Enter a Title, Subtitle, and Body Text value. These can always be updated at a later point.
Save or Save and Publish the content node.
In this step, we will create the Contact Form using Umbraco Forms.
To create a form, follow these steps:
Navigate to the Forms section in the Umbraco Backoffice.
Click ... next to the Forms folder.
Choose the Empty Form option.
Enter a Name for the Form- let's call it Contact Us.
[Optional] Enter a Group Name for the Data Consent query - let's call it Data Consent.
Add new group - let's call it Information.
Select Add Question to add a new field.
Enter the following details:
Submit the changes.
Repeat steps 7-9 to add the following fields:
Select Enable Conditions on the Enter your phone number field.
Click Add Condition.
Select How should we contact you? from the dropwdown.
Enter phone in the value field.
Submit the changes.
Repeat steps 7-9 to add the following field:
Select Enable Conditions on the Enter your email address field.
Click Add Condition.
Select How should we contact you? from the dropwdown.
Enter email in the value field.
Submit the changes.
Repeat steps 7-9 to add the following field:
Select the Reorder option.
Drag the Data consent group below the Information group.
Click I am done reordering.
Save the form.
Workflows is how you determine what you happen after your form is submitted. It could be actions like sending an email or displaying a "Thank You" message.
To configure the Form workflow, follow these steps:
Select the Submit message/ Go to page options in the bottom of the Forms editor.
Enter a customised message in the Message on Submit field.
Submit the change.
Click on Send template email to xxx@xx.dk.
Select Example-Template.cshtml in the Email template field.
Enable Attachments.
Enter an email address in the Sender Email field.
Submit the changes.
Save the form.
In this step, you will find the information about accessing the Forms Settings and the validations available to customise your form.
To configure the form settings, follow these steps:
Navigate to the Settings tab in the Forms editor.
Scroll to find the Validation section.
Ensure that the Mark Mandatory fields option is checked under Mark fields.
Save the changes.
There are multiple settings that be configured. These are all optional in relation to this tutorial.
Now that you have created your Contact Form, you can add it in the Contact Us Content Node using the Rich Text Editor. We will use the Insert Form macro to insert a form.
To add the Contact Form to the Content Node, follow these steps:
Navigate to the Content section in the Umbraco Backoffice.
Open the Contact Us Page.
Select Insert macro in the Contact Form field.
Select the Insert Form with Theme option.
Select Add in the Choose a form field.
Choose the Contact Us Form.
Select Add in the Theme field.
Choose the default theme.
Submit the changes.
Save or Save and Publish the content node.
In the next couple of steps, we will add some additional configuration required in order for our form to work properly.
When you inserted the form in the previous step, you will notice an error message in the reCAPTCHA field. You need to update the configuration to include a value in the appsettings.json file.
To configure the reCAPTCHA value, see the reCAPTCHA configuration article.
By adding the SMTP settings in the appsettings.json file, you can send out emails from your Umbraco installation. It is required in order for your form to be able to send emails on submission.
To configure the SMTP settings, see the Global Settings article.
In this step, we will render the values of the Contact Us Document Type in the template.
To render the Contact Form, follow these steps:
Navigate to the Settings section in the Umbraco Backoffice.
Open the Contact Us template in the Templates folder.
Choose the Insert option and select Value.
Select contactForm from the Choose field dropdown.
Submit the changes.
Follow steps 3-5 to insert the bodyText value.
Submit the changes.
Save the template.
Finally, it is time to view the Contact Form on the frontend.
To view the Contact Form on the Frontend, follow these steps:
Navigate to the Content section in the Umbraco Backoffice.
Open the Contact Us Page.
Ensure that the page is published.
Go to the Info tab.
Click on the Published link in the Links section.
You now have a full-fledged Contact Form ready to be used on your website.
| Group | Field Name | Alias | Data Type |
|---|---|---|---|
| Group | Field Name | Alias | Data Type |
|---|---|---|---|
| Field Name | Value |
|---|---|
| Field Name | Value |
|---|---|
| Field Name | Value |
|---|---|
| Field Name | Value |
|---|---|
| Field Name | Value |
|---|---|
| Field Name | Value |
|---|---|
| Field Name | Value |
|---|---|
| Field Name | Value |
|---|---|
Title Box
Title
title
Textstring
Title Box
Subtitle
subtitle
Textarea
Form
Contact Form
contactForm
Richtext Editor
Content
Body Text
bodyText
Richtext Editor
Enter question
Name
Alias
fullName
Choose answer type
Short answer
Field Type
text
Mandatory
Yes
Enter question
Company Name
Choose answer type
Short answer
Enter question
How should we contact you?
Choose answer type
Single choice
Prevalues Items
phone, email
Mandatory
Yes
Enter question
Enter your phone number
Choose answer type
Short answer
Field Type
tel
Validation
Validate as a number
Enter question
Enter your email address
Choose answer type
Short answer
Field Type
Validation
Validate as an email address
Enter question
What is your role?
Choose answer type
Dropdown
Prevalues Items
manager, developer, tester, writer, marketing specialist
Enter question
Attachments (if any)
Choose answer type
File upload
Predefined allowed file types
pdf, png, jpg, gif, txt
Enter question
Are you a Robot?
Choose answer type
reCAPTCHAv2
Theme
light
Size
normal
Mandatory
Yes
