# 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](https://umbraco.com/products/umbraco-forms/).
* Build your own contact form using [Surface Controllers](https://docs.umbraco.com/umbraco-cms/13.latest/fundamentals/code/creating-forms).

### Creating the Document Type and Template

Let's create a content-only contact page where we can provide a title and some rich text.

1. Go to **Settings**.
2. Select the **...** next to the **Document Types** in the **Settings** tree.
3. Select **Document Type with Template**. The Document Type opens in the content editor.
4. Select an **Icon** from the list of icons.
5. Enter a **Name**. Let's call it *Simple Content Page*.
6. Enter a Description.
7. 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 |

   ![Content Page Template with Data Fields](https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-a54379c956aeeb61aec75484084db0570114175c%2Ffigure-35-contact-us-template-with-data-fields-v8.png?alt=media)
8. Click **Save**.
9. Go to **Templates** to view your *Simple Content Page* template that was created automatically with the Document Type.
10. Select the **Simple Content Page** template and then select **Master** as the **Master template**.
11. Add the following HTML to the **Simple Content Page** template and click **Save**.

    ```html
    <!-- 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>        
    ```
12. 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:

1. Go to **Settings**.
2. Open the **Homepage** Document Type and go to the **Permissions** tab.
3. Select **Add child** in the **Allowed child node types**. The **Choose child node** dialog opens.
4. Select **Simple Content Page** and click **Save**.

   <figure><img src="https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-7ed6353667c4d18af1f7eba373d95967dcb9820e%2Ffigure-32-homepage-allowed-child-v8.png?alt=media" alt=""><figcaption></figcaption></figure>

### Creating the content node

To create a content node:

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

### Adding the Document Type Properties

To add the Document Type properties:

1. Go to **Settings**.
2. Select **Templates** from the **Templating** section.
3. Go to **Master** and 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. Select the **pageTitle** field from the drop-down list and 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**.
   * Select **bodyText** field from the drop-down list.
   * Click **Submit**.
8. Click **Save**.

### Viewing the Contact Us Page

To view the **Contact Us** Page:

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

   <figure><img src="https://3872888104-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgEH4FChbCn7eDDqREvdE%2Fuploads%2Fgit-blob-07fcfef036b8c72f2376a0e9345521e510ceab4c%2Ffigure-37-viewing-contact-us.png?alt=media" alt=""><figcaption></figcaption></figure>

## 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, do the following:

1. Go to **Settings**.
2. Select **Templates** from the **Templating** section, and open the **Master** template.
3. Highlight `@Model.Value("footerText")` in the footer (around line 52) and click **Insert**.
4. Select **Value** and choose the **footerText** again from the **Choose field** dropdown.
5. 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.
6. Click **Submit**.
7. Click **Save**.

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