Creating Pages and Using the Master Template
Last updated
Last updated
We will now create a page to display our contact details. For added functionality, you might consider replacing this page with a fully-fledged "Contact Us" form.
Here are some potential solutions:
Use Umbraco Forms (for non-developers): Umbraco offers an add-on called Umbraco Forms. This tool is ideal for users who aren’t programmers, as it allows editors to create custom forms. You can find more information and purchase the product on Umbraco.com.
Build Your Own Contact Form (for developers): If you prefer a custom solution, you can build your own contact form using Surface Controllers in Umbraco.
To create a content-only contact page in Umbraco, follow these steps:
Go to Settings.
Click on ... next to Document Types.
Select Create. The Create Document Type dialog opens.
Select Document Type with Template.
Select an Icon from the list of icons.
Click Submit.
Enter a Name. Let's call it Simple Content Page.
Let's add two fields with the following specifications:
Content
Page Title
pageTitle
Textstring
Content
Body Text
bodyText
Rich Text Editor
Click Save.
Go to Templates to view your Simple Content Page template that was created automatically with the Document Type.
If you do not see the template, try refreshing the page.
Open the Simple Content Page template.
Select Master Template: No Master and choose the Master template.
Click Choose.
Add the following HTML after the closing }.
Click Save.
We now need to update the Document Type permissions to specifically add child nodes under the root content node.
To update the Document Type permissions:
Go to Settings.
Open the Homepage Document Type.
Go to the Structure tab.
Click Choose in the Allowed child node types.
Select Simple Content Page.
Click Choose.
Click Save.
To create a content node:
Go to Content.
Select ... next to the Homepage node.
Click Create.
Select Simple Content Page.
Enter a name for the Document Type. Let's call it Contact Us.
Fill in details for the Page Title and Body Text.
Click Save and Publish.
To add the Document Type properties:
Go to Settings.
Expand the Templates folder from the Templating section.
Go to Master and open the Simple Content Page template.
Scroll to the <!-- Jumbotron, w title --> (around line 7) section and highlight the text “Umbraco Support” (around line 10).
Click Insert and select Value.
Select Document Type from the Choose field drop-down list.
Select Simple Content Page.
Click Choose.
Select pageTitle from the Simple Content Page drop-down list.
Click Submit.
Repeat the same process for the <div class="container"> tag:
Highlight the content from the <p> tag (around line 18) to the end of the </p> tag (around line 21).
Click Insert and select Value.
Select Document Type from the Choose field drop-down list.
Select Simple Content Page.
Click Choose.
Select bodyText from the Simple Content Page drop-down list.
Click Submit.
Click Save.
To view the Contact Us Page:
Go to Content.
Navigate to the Contact Us page.
Go to the Info tab.
Click the link to view the page.
You may notice that the footer is now empty - we don't have the content from our Homepage node.
To use the Document Type properties from the Homepage Document Type, do the following:
Go to Settings.
Expand the Templates folder from the Templating section.
Open the Master template.
Highlight @Model.Value("footerText") in the footer (around line 51).
Click Insert and select Value.
Select Document Type from the Choose field drop-down list.
Select Home Page.
Click Choose.
Select footerText field from the HomePage drop-down list.
Select Yes, make it recursive checkbox. This notifies Umbraco to look up the content tree if the field doesn't exist at the node level for the page we're requesting.
Click Submit.
Click Save.
Reload the Contact Us page to view the content with the footer.
