---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/contact-page'
title: 'Create a contact page | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Contact form, map, office details'
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Create a contact page'
      description: 'Contact form, map, office details'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/contact-page'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/contact-page'
      description: 'Contact form, map, office details'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Create a contact page.

Contact form, map, office details

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Video (embedded)](/hc/documentation/learn-dxpr-builder/elements/video)
- [Landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [Drupal Blocks](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks)

Here you build a contact page: a map of your address, three ways to reach you with an icon each, and a contact form. Use it for the page your menu links to as "Contact". To put only a form inside another page, follow [Add forms to pages](/hc/documentation/learn-dxpr-builder/tutorials/add-forms) instead.

The video builds the contact page of a city council.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- Your contact form exists as a block, for example an open webform made with the Webform module.
- The page is open in the builder. For a new one, go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) and click **Save**.
- New elements land at the top of their section or column. Add the elements of a column in reverse order, or drag them into place afterwards.

## Step 1: add the map

1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab.
2. Click **+** on the section and pick **Map** from the **Content** tab.
3. Type your **Address**, set **Map height** to 400 and click **Save**.

The map embeds Google Maps centred on the address.

## Step 2: add the contact details

1. Hover the section and click **Add Section Below**. Open the new section's **More** > **Settings**, pick **Align text center** under **HTML classes**, then a light grey **Background** in the **Style** panel. Click **Save**.
2. Click **+** on the section and pick **Row**; it arrives with two equal columns. Click its grid icon (**Column layout**), pick the **1/3 + 1/3 + 1/3** preset and click **Save**.
3. Click **+** in the first column and pick **Text**. Type "Visit us" as **Heading 3**, add the address and opening hours, and click **Save**.
4. Click **+** in the same column and pick **Icon**; it lands above the text. Choose the **Font Awesome Free Solid** set, search for `location-dot` and click the icon. Set **Size** to **Extra Large (2x)** and click **Save**.
5. Repeat in the second column with "Call us" and the `phone` icon, and in the third with "Email us" and the `envelope` icon.

Pick the same **Size** for all three icons so the row lines up.

## Step 3: add the form

1. Add a third section with **Add Section Below** and give it the **Align text center** class.
2. Click **+** on the section and open the **Drupal Blocks** tab.
3. Pick your contact form's block and click **Save** in its settings dialog; the form appears in the section.
4. Click **+** on the section again and pick **Text**; it lands above the form. Type "Send us a message" as **Heading 2**, add one line and click **Save**.

Forms made at **Structure** > **Contact forms** (`/admin/structure/contact`) have no block in Drupal core. The contributed Contact Block module adds a **Contact block** to the same tab.

## Step 4: save and preview

1. Click **Save** on the builder toolbar.
2. Open the view menu (the **eye icon**) and choose **Preview**.

## Go further

Not shown in the video:

- **Tap to call**: select the phone number in the text, click the link button on the toolbar and enter `tel:+31104001234`
- **Click to email**: select the address and link it to `mailto:info@example.com`
- **Any block**: the **Drupal Blocks** tab embeds the blocks on your site, such as search forms, newsletter signups and custom blocks

## What you see

A 400 pixel map of your address fills the top of the page. Below it a grey band shows three centred columns, each with an icon, a heading and your details. The form closes the page under its centred "Send us a message" heading.

## If you don't see the page as shown

- **The map shows the wrong place.** Google Maps searches for the address as typed. Add the postcode, city and country to **Address** and save again.
- **Your form is not in the Drupal Blocks tab.** The builder lists only open webforms, and core contact forms need the Contact Block module. Set the webform's status to **Open** at **Structure** > **Webforms** (`/admin/structure/webform`).
- **The icons are different sizes.** Each icon keeps its own **Size**. Open the settings of each icon and pick the same one.
- **Your changes are gone after a reload.** You left the page before clicking **Save** on the builder toolbar. If Save shows an error, see [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## What's next?

- [Video element](/hc/documentation/learn-dxpr-builder/elements/video) to add a virtual tour of your office
- [Landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) for your main marketing page
- [Drupal Blocks integration](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) for more on embedding blocks