Creating Pages and Using the Master Template
Creating a Contact Us Page
We are now going to create a page where we put our contact details. For added functionality, you might want to look at replacing this with a fully fledged contact us Form.
Some potential solutions:
If you're not a programmer you can use the Umbraco built-in package - Umbraco Forms. Umbraco Forms has the added benefit that editors can also create their own forms. Find more information and purchase the product on Umbraco.com.
Build your own contact form using Surface Controllers.
Creating the Document Type and Template
Let's create a content-only contact page where we can provide a title and some rich text.
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:
Group Field Name Alias Data Type 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.
Open the Simple Content Page template.
Select
Master Template: No Masterand choose the Master template.Click Choose.
Add the following HTML after the closing
}.Click Save.
Updating the Document Type Permissions
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.
Creating the content node
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.
Adding the Document Type Properties
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.
Viewing the Contact Us Page
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.
Using Document Type Properties from the Homepage
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 50).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.
Last updated
