---
url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-contacto'
title: 'Crie uma página de contacto | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T09:05:47+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aqui constrói-se uma página de contacto: um mapa da sua morada, três formas de o contactar com um ícone cada e um formulário de contacto. Use-a para a página para que o seu menu liga como "Contact". Para pôr apenas um formulário dentro de outra página, siga Adicione formulários às páginas.
  O vídeo constrói a página de contacto de um município.
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-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Crie uma página de contacto'
      description: |-
        Aqui constrói-se uma página de contacto: um mapa da sua morada, três formas de o contactar com um ícone cada e um formulário de contacto. Use-a para a página para que o seu menu liga como "Contact". Para pôr apenas um formulário dentro de outra página, siga Adicione formulários às páginas.
        O vídeo constrói a página de contacto de um município.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T09:05:47+0000'
      dateModified: '2026-10-24T17:19:22+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/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-contacto'
      articleSection: 'Seguir um tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-contacto'
      description: |-
        Aqui constrói-se uma página de contacto: um mapa da sua morada, três formas de o contactar com um ícone cada e um formulário de contacto. Use-a para a página para que o seu menu liga como "Contact". Para pôr apenas um formulário dentro de outra página, siga Adicione formulários às páginas.
        O vídeo constrói a página de contacto de um município.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Seguir um tutorial](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crie uma página de contacto.

 Aprender DXPR BuilderCriar páginasSeguir um tutorial

   ## Neste guia

 Guias relacionados

- [Adicionar um vídeo](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/video)
- [Crie uma página de destino de marketing](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-destino-de-marketing)
- [Adicione um bloco Drupal à sua página](/pt-pt/hc/documentacao/aprender-dxpr-builder/integracoes/blocos-drupal)

Aqui constrói-se uma página de contacto: um mapa da sua morada, três formas de o contactar com um ícone cada e um formulário de contacto. Use-a para a página para que o seu menu liga como "Contact". Para pôr apenas um formulário dentro de outra página, siga [Adicione formulários às páginas](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/add-forms).

O vídeo constrói a página de contacto de um município.

  ## Antes de começar

- A sua função tem a permissão **Edit with DXPR Builder**.
- O seu formulário de contacto existe como bloco, por exemplo um webform aberto feito com o módulo Webform.
- A página está aberta no construtor. Para uma nova, vá a **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) e clique em **Save**.
- Os elementos novos ficam no topo da sua secção ou coluna. Adicione os elementos de uma coluna por ordem inversa ou arraste-os para o lugar depois.

## Passo 1: adicione o mapa

1. Clique em **Add Elements** na página vazia e escolha **Section** no separador **Layout**.
2. Clique em **+** na secção e escolha **Map** no separador **Content**.
3. Escreva a sua **Address**, defina **Map height** como 400 e clique em **Save**.

O mapa incorpora o Google Maps centrado na morada.

## Passo 2: adicione os dados de contacto

1. Paire o cursor sobre a secção e clique em **Add Section Below**. Abra o **More** > **Settings** da secção nova, escolha **Align text center** em **HTML classes** e depois um **Background** cinzento claro no painel **Style**. Clique em **Save**.
2. Clique em **+** na secção e escolha **Row**; vem com duas colunas iguais. Clique no seu ícone de grelha (**Column layout**), escolha a predefinição **1/3 + 1/3 + 1/3** e clique em **Save**.
3. Clique em **+** na primeira coluna e escolha **Text**. Escreva "Visit us" como **Heading 3**, adicione a morada e o horário de abertura, e clique em **Save**.
4. Clique em **+** na mesma coluna e escolha **Icon**; fica por cima do texto. Escolha o conjunto **Font Awesome Free Solid**, pesquise `location-dot` e clique no ícone. Defina **Size** como **Extra Large (2x)** e clique em **Save**.
5. Repita na segunda coluna com "Call us" e o ícone `phone`, e na terceira com "Email us" e o ícone `envelope`.

Escolha o mesmo **Size** para os três ícones para a fila ficar alinhada.

## Passo 3: adicione o formulário

1. Adicione uma terceira secção com **Add Section Below** e dê-lhe a classe **Align text center**.
2. Clique em **+** na secção e abra o separador **Drupal Blocks**.
3. Escolha o bloco do seu formulário de contacto e clique em **Save** no seu diálogo de definições; o formulário aparece na secção.
4. Clique novamente em **+** na secção e escolha **Text**; fica por cima do formulário. Escreva "Send us a message" como **Heading 2**, adicione uma linha e clique em **Save**.

Os formulários feitos em **Structure** > **Contact forms** (`/admin/structure/contact`) não têm bloco no núcleo do Drupal. O módulo contribuído Contact Block adiciona um **Contact block** ao mesmo separador.

## Passo 4: guarde e pré-visualize

1. Clique em **Save** na barra de ferramentas do construtor.
2. Abra o menu de vista (o **ícone de olho**) e escolha **Preview**.

## Para ir mais longe

Não mostrado no vídeo:

- **Tocar para ligar**: selecione o número de telefone no texto, clique no botão de ligação na barra de ferramentas e introduza `tel:+31104001234`
- **Clicar para enviar correio**: selecione o endereço e ligue-o a `mailto:info@example.com`
- **Qualquer bloco**: o separador **Drupal Blocks** incorpora os blocos do seu sítio, como formulários de pesquisa, inscrições de newsletter e blocos personalizados

## O que vê

Um mapa de 400 píxeis da sua morada preenche o topo da página. Por baixo, uma faixa cinzenta mostra três colunas centradas, cada uma com um ícone, um cabeçalho e os seus dados. O formulário fecha a página por baixo do seu cabeçalho centrado "Send us a message".

## Se não vir a página como mostrada

- **O mapa mostra o lugar errado.** O Google Maps pesquisa a morada como escrita. Adicione o código postal, a cidade e o país a **Address** e guarde de novo.
- **O seu formulário não está no separador Drupal Blocks.** O construtor lista apenas webforms abertos e os formulários de contacto do núcleo precisam do módulo Contact Block. Defina o estado do webform como **Open** em **Structure** > **Webforms** (`/admin/structure/webform`).
- **Os ícones têm tamanhos diferentes.** Cada ícone mantém o seu próprio **Size**. Abra as definições de cada ícone e escolha o mesmo.
- **As suas mudanças desapareceram depois de recarregar.** Saiu da página antes de clicar em **Save** na barra de ferramentas do construtor. Se Save mostra um erro, veja [As mudanças não guardam](/pt-pt/hc/documentacao/aprender-dxpr-builder/resolucao-de-problemas/falha-ao-guardar).

## E a seguir?

- [Adicionar um vídeo](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/video) para adicionar uma visita virtual ao seu escritório
- [Crie uma página de destino de marketing](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-destino-de-marketing) para a sua página principal de marketing
- [Integração com blocos Drupal](/pt-pt/hc/documentacao/aprender-dxpr-builder/integracoes/blocos-drupal) para mais sobre incorporar blocos