Creating Pages and Using the Layout Template

Creating a Contact Us Page

Let's 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.

Creating the Document Type and Template

To create a content-only contact page in Umbraco, follow these steps:

1. Go to Settings.
2. Click on ... next to Document Types.
3. Select Create. The Create Document Type dialog opens.
4. Select Document Type with Template.
5. Select an Icon from the list of icons.
6. Click Submit.
7. Enter a Name. Let's call it Simple Content Page.
8. 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

   

   Simple Content Page Template with Data Fields
9. Click Save.
10. 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.

1. Open the Simple Content Page template.
2. Select Layout template: No layout\ and choose the Layout template.
3. Click Choose.
4. Add the following HTML after the closing }.

<!-- Jumbotron, w title -->
    <div class="jumbotron text-center jumbotron-fluid">
            <div class="container">
                <h1 class="display-1">Umbraco Support</h1>
            </div>
        </div>

<!-- Main -->
<section id="main" class="wrapper">
    <div class="container">

        <p>Are you a developer?</p>
        <p>Are you a marketer?</p>
        <p>Are you working at an agency?</p>
        <p>Let Umbraco unleash your talent</p>
    </div>
</section>        

1. Click Save.

Updating the Document Type Permissions

Now let's update the Document Type permissions to specifically add child nodes under the root content node.

To update the Document Type permissions:

1. Go to Settings.
2. Open the Homepage Document Type.
3. Go to the Structure tab.
4. Click Choose in the Allowed child node types.
5. Select Simple Content Page.

   

   Allow child nodes in HomePage
6. Click Choose.
7. Click Save.

Creating the content node

To create a content node:

1. Go to Content.
2. Select ... next to the Homepage node.
3. Click Create.
4. Select Simple Content Page.
5. Enter a name for the Document Type. Let's call it Contact Us.
6. Fill in details for the Page Title and Body Text.
7. Click Save and Publish.

Adding the Document Type Properties

To add the Document Type properties:

1. Go to Settings.
2. Expand the Templates folder from the Templating section.
3. Open the Simple Content Page template.
4. Scroll to the <!-- Jumbotron, w title --> (around line 8) section and highlight the text “Umbraco Support” (around line 11).
5. Click Insert and select Value.
6. Click Submit.

   • 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.
7. Repeat the same process for the <div class="container"> tag:

   • Highlight the content from the <p> tag (around line 19) to the end of the </p> tag (around line 22).
   • Click Insert and select Value.
   • Click Submit.
   • 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.
8. Click Save.

Viewing the Contact Us Page

To view the Contact Us Page:

1. Go to Content.
2. Navigate to the Contact Us page.
3. Go to the Info tab.
4. Click the link to view the page.

   

   Viewing Contact Us Page

Using Document Type Properties from the Homepage

You may notice that the footer is now empty. The footer content from the Homepage node is not rendered.

To use the Document Type properties from the Homepage Document Type, do the following:

1. Go to Settings.
2. Expand the Templates folder from the Templating section.
3. Open the Layout template.
4. Highlight @Model.Value("footerText") in the footer (around line 51).
5. Click Insert and select Value.
6. Click Submit.
7. Select Document Type from the Choose field drop-down list.
8. Select Home Page.
9. Click Choose.
10. Select footerText field from the HomePage drop-down list.
11. 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 requested.
12. Click Submit.
13. Click Save.

Reload the Contact Us page to view the content with the footer.