---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/contact-page'
title: 'Crea una página de contacto | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:57:13+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas una página de contacto: un mapa de tu dirección, tres formas de localizarte cada una con su icono, y un formulario de contacto. Úsala para la página que tu menú enlaza como «Contacto». Para poner solo un formulario dentro de otra página, sigue Añade formularios a las páginas en su lugar.
  El vídeo crea la página de contacto de un ayuntamiento.
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Crea una página de contacto'
      description: |-
        Aquí creas una página de contacto: un mapa de tu dirección, tres formas de localizarte cada una con su icono, y un formulario de contacto. Úsala para la página que tu menú enlaza como «Contacto». Para poner solo un formulario dentro de otra página, sigue Añade formularios a las páginas en su lugar.
        El vídeo crea la página de contacto de un ayuntamiento.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:57:13+0000'
      dateModified: '2026-10-24T09:09:48+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/es/hc/documentation/learn-dxpr-builder/tutorials/contact-page'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/contact-page'
      description: |-
        Aquí creas una página de contacto: un mapa de tu dirección, tres formas de localizarte cada una con su icono, y un formulario de contacto. Úsala para la página que tu menú enlaza como «Contacto». Para poner solo un formulario dentro de otra página, sigue Añade formularios a las páginas en su lugar.
        El vídeo crea la página de contacto de un ayuntamiento.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crea una página de contacto.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Añadir un vídeo](/es/hc/documentation/learn-dxpr-builder/elements/video)
- [Crea una página de destino de marketing](/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [Añadir un bloque de Drupal a tu página](/es/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks)

Aquí creas una página de contacto: un mapa de tu dirección, tres formas de localizarte cada una con su icono, y un formulario de contacto. Úsala para la página que tu menú enlaza como «Contacto». Para poner solo un formulario dentro de otra página, sigue [Añade formularios a las páginas](/es/hc/documentation/learn-dxpr-builder/tutorials/add-forms) en su lugar.

El vídeo crea la página de contacto de un ayuntamiento.

  ## Antes de empezar

- Tu rol tiene el permiso **Editar con DXPR Builder**.
- Tu formulario de contacto existe como bloque, por ejemplo como formulario web abierto hecho con el módulo Webform.
- La página está abierta en el constructor. Para una nueva, ve a **Contenido** > **Añadir contenido** > **Página de destino** (`/node/add/landing_page`) y haz clic en **Guardar**.
- Los elementos nuevos caen arriba de su sección o columna. Añade los elementos de una columna en orden inverso, o arrástralos a su sitio después.

## Paso 1: añade el mapa

1. Haz clic en **Añadir elementos** en la página vacía y elige **Sección** en la pestaña **Diseño**.
2. Haz clic en **+** en la sección y elige **Mapa** en la pestaña **Contenido**.
3. Escribe tu **Dirección**, pon **Alto de mapa** en 400 y haz clic en **Guardar**.

El mapa incrusta Google Maps centrado en la dirección.

## Paso 2: añade los datos de contacto

1. Pasa el cursor sobre la sección y haz clic en **Añadir sección debajo**. Abre **Más** > **Ajustes** de la sección nueva, elige **Centrar texto** en **Clases HTML**, luego un **Fondo** gris claro en el panel **Estilo**. Haz clic en **Guardar**.
2. Haz clic en **+** en la sección y elige **Fila**; llega con dos columnas iguales. Haz clic en su icono de cuadrícula (**Diseño de columnas**), elige el ajuste **1/3 + 1/3 + 1/3** y haz clic en **Guardar**.
3. Haz clic en **+** en la primera columna y elige **Texto**. Escribe «Visítanos» como **Encabezado 3**, añade la dirección y el horario, y haz clic en **Guardar**.
4. Haz clic en **+** en la misma columna y elige **Icono**; cae encima del texto. Elige el juego **Font Awesome Free Solid**, busca `location-dot` y haz clic en el icono. Pon **Tamaño** en **Extragrande (2x)** y haz clic en **Guardar**.
5. Repite en la segunda columna con «Llámanos» y el icono `phone`, y en la tercera con «Escríbenos» y el icono `envelope`.

Elige el mismo **Tamaño** para los tres iconos para que la fila quede alineada.

## Paso 3: añade el formulario

1. Añade una tercera sección con **Añadir sección debajo** y dale la clase **Centrar texto**.
2. Haz clic en **+** en la sección y abre la pestaña **Bloques de Drupal**.
3. Elige el bloque de tu formulario de contacto y haz clic en **Guardar** en su diálogo de ajustes; el formulario aparece en la sección.
4. Haz clic en **+** en la sección de nuevo y elige **Texto**; cae encima del formulario. Escribe «Envíanos un mensaje» como **Encabezado 2**, añade una línea y haz clic en **Guardar**.

Los formularios creados en **Estructura** > **Formularios de contacto** (`/admin/structure/contact`) no tienen bloque en el núcleo de Drupal. El módulo contribuido Contact Block añade un **bloque de Contacto** a la misma pestaña.

## Paso 4: guarda y muestra la vista previa

1. Haz clic en **Guardar** en la barra de herramientas del constructor.
2. Abre el menú de vista (el **icono de ojo**) y elige **Vista previa**.

## Ve más allá

No sale en el vídeo:

- **Toca para llamar**: selecciona el número de teléfono en el texto, haz clic en el botón de enlace de la barra de herramientas e introduce `tel:+31104001234`
- **Clic para escribir**: selecciona la dirección y enlázala a `mailto:info@example.com`
- **Cualquier bloque**: la pestaña **Bloques de Drupal** incrusta los bloques de tu sitio, como formularios de búsqueda, altas al boletín y bloques personalizados

## Lo que ves

Un mapa de 400 píxeles de tu dirección llena lo alto de la página. Debajo una banda gris muestra tres columnas centradas, cada una con un icono, un encabezado y tus datos. El formulario cierra la página bajo su encabezado centrado «Envíanos un mensaje».

## Si no ves la página como se muestra

- **El mapa muestra el sitio equivocado.** Google Maps busca la dirección tal como está escrita. Añade el código postal, la ciudad y el país a **Dirección** y guarda de nuevo.
- **Tu formulario no está en la pestaña Bloques de Drupal.** El constructor solo lista formularios web abiertos, y los formularios de contacto del núcleo necesitan el módulo Contact Block. Pon el estado del formulario web en **Abierto** en **Estructura** > **Formularios web** (`/admin/structure/webform`).
- **Los iconos tienen distintos tamaños.** Cada icono conserva su propio **Tamaño**. Abre los ajustes de cada icono y elige el mismo.
- **Tus cambios desaparecieron tras recargar.** Saliste de la página antes de hacer clic en **Guardar** en la barra de herramientas del constructor. Si Guardar muestra un error, lee [Los cambios no se guardan](/es/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## ¿Qué sigue?

- [Elemento vídeo](/es/hc/documentation/learn-dxpr-builder/elements/video) para añadir una visita virtual a tu oficina
- [Página de destino](/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) para tu página principal de marketing
- [Integración con bloques de Drupal](/es/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) para más sobre incrustar bloques