---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/contactpagina'
title: 'Een contactpagina maken | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:00:58+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je een contactpagina: een kaart van je adres, drie manieren om je te bereiken elk met een pictogram, en een contactformulier. Gebruik hem voor de pagina waarnaar je menu linkt als “Contact”. Om alleen een formulier in een andere pagina te zetten, volg je in plaats daarvan Formulieren toevoegen aan pagina’s.
  De video bouwt de contactpagina van een gemeentebestuur.
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: 'Een contactpagina maken'
      description: |-
        Hier bouw je een contactpagina: een kaart van je adres, drie manieren om je te bereiken elk met een pictogram, en een contactformulier. Gebruik hem voor de pagina waarnaar je menu linkt als “Contact”. Om alleen een formulier in een andere pagina te zetten, volg je in plaats daarvan Formulieren toevoegen aan pagina’s.
        De video bouwt de contactpagina van een gemeentebestuur.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T04:00:58+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/nl/hc/documentatie/dxpr-builder-leren/tutorials/contactpagina'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/contactpagina'
      description: |-
        Hier bouw je een contactpagina: een kaart van je adres, drie manieren om je te bereiken elk met een pictogram, en een contactformulier. Gebruik hem voor de pagina waarnaar je menu linkt als “Contact”. Om alleen een formulier in een andere pagina te zetten, volg je in plaats daarvan Formulieren toevoegen aan pagina’s.
        De video bouwt de contactpagina van een gemeentebestuur.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/nl/hc/documentation/learn-dxpr-builder/tutorials/overview) # Een contactpagina maken.

 DXPR Builder lerenPagina’s bouwenVolg een tutorial

   ## In deze gids

 Gerelateerde gidsen

- [Een video toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/video)
- [Een marketinglandingspagina bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/marketinglandingspagina)
- [Drupal-blokken: formulieren, menu's en inhoudsblokken](/nl/hc/documentatie/dxpr-builder-leren/integraties/drupal-blokken)

Hier bouw je een contactpagina: een kaart van je adres, drie manieren om je te bereiken elk met een pictogram, en een contactformulier. Gebruik hem voor de pagina waarnaar je menu linkt als “Contact”. Om alleen een formulier in een andere pagina te zetten, volg je in plaats daarvan [Formulieren toevoegen aan pagina’s](/nl/hc/documentatie/dxpr-builder-leren/tutorials/formulieren-toevoegen).

De video bouwt de contactpagina van een gemeentebestuur.

  ## Voordat je begint

- Je rol heeft de permissie **Bewerken met DXPR Builder**.
- Je contactformulier bestaat als blok, bijvoorbeeld een open webformulier gemaakt met de Webform-module.
- De pagina is open in de builder. Ga voor een nieuwe naar **Inhoud** > **Inhoud toevoegen** > **Landingspagina** (`/node/add/landing_page`) en klik op **Opslaan**.
- Nieuwe elementen belanden bovenaan hun sectie of kolom. Voeg de elementen van een kolom in omgekeerde volgorde toe, of sleep ze daarna op hun plek.

## Stap 1: de kaart toevoegen

1. Klik op **Add Elements** op de lege pagina en kies **Sectie** op het tabblad **Lay-out**.
2. Klik op **+** op de sectie en kies **Kaart** op het tabblad **Inhoud**.
3. Typ je **Adres**, zet **Kaarthoogte** op 400 en klik op **Opslaan**.

De kaart voegt Google Maps in, gecentreerd op het adres.

## Stap 2: de contactgegevens toevoegen

1. Beweeg over de sectie en klik op **Sectie hieronder toevoegen**. Open **More** > **Settings**, kies **Align text center** onder **HTML-klassen**, daarna een lichtgrijze **Achtergrond** in het paneel **Stijl**. Klik op **Opslaan**.
2. Klik op **+** op de sectie en kies **Rij**; deze komt met twee gelijke kolommen. Klik op het rasterpictogram (**Kolomindeling**), kies de preset **1/3 + 1/3 + 1/3** en klik op **Opslaan**.
3. Klik op **+** in de eerste kolom en kies **Tekst**. Typ “Bezoek ons” als **Kop 3**, voeg het adres en de openingstijden toe, en klik op **Opslaan**.
4. Klik op **+** in dezelfde kolom en kies **Pictogram**; dit belandt boven de tekst. Kies de set **Font Awesome Free Solid**, zoek naar `location-dot` en klik op het pictogram. Zet **Size** op **Extra Large (2x)** en klik op **Opslaan**.
5. Herhaal in de tweede kolom met “Bel ons” en het pictogram `phone`, en in de derde met “Mail ons” en het pictogram `envelope`.

Kies dezelfde **Size** voor alle drie de pictogrammen zodat de rij uitlijnt.

## Stap 3: het formulier toevoegen

1. Voeg een derde sectie toe met **Sectie hieronder toevoegen** en geef hem de klasse **Align text center**.
2. Klik op **+** op de sectie en open het tabblad **Drupal-blokken**.
3. Kies het blok van je contactformulier en klik op **Opslaan** in de instellingendialoog; het formulier verschijnt in de sectie.
4. Klik opnieuw op **+** op de sectie en kies **Tekst**; deze belandt boven het formulier. Typ “Stuur ons een bericht” als **Kop 2**, voeg één regel toe en klik op **Opslaan**.

Formulieren gemaakt bij **Structuur** > **Contactformulieren** (`/admin/structure/contact`) hebben geen blok in Drupal-core. De contributed module Contact Block voegt een **Contactblok** toe aan hetzelfde tabblad.

## Stap 4: opslaan en vooraf bekijken

1. Klik op **Opslaan** op de werkbalk van de builder.
2. Open het weergavemenu (het **oogpictogram**) en kies **Voorvertoning**.

## Verder gaan

Niet getoond in de video:

- **Tikken om te bellen**: selecteer het telefoonnummer in de tekst, klik op de linkknop op de werkbalk en typ `tel:+31104001234`
- **Klikken om te mailen**: selecteer het adres en link het aan `mailto:info@example.com`
- **Elk blok**: het tabblad **Drupal-blokken** voegt de blokken van je site in, zoals zoekformulieren, nieuwsbriefaanmeldingen en aangepaste blokken

## Wat je ziet

Een kaart van 400 pixels van je adres vult de bovenkant van de pagina. Eronder toont een grijze strook drie gecentreerde kolommen, elk met een pictogram, een kop en je gegevens. Het formulier sluit de pagina af onder de gecentreerde kop “Stuur ons een bericht”.

## Als je de pagina niet ziet zoals getoond

- **De kaart toont de verkeerde plek.** Google Maps zoekt op het adres zoals getypt. Voeg de postcode, stad en het land toe bij **Adres** en sla opnieuw op.
- **Je formulier staat niet op het tabblad Drupal-blokken.** De builder toont alleen open webformulieren, en core-contactformulieren hebben de module Contact Block nodig. Zet de status van het webformulier op **Open** bij **Structuur** > **Webformulieren** (`/admin/structure/webform`).
- **De pictogrammen hebben verschillende groottes.** Elk pictogram behoudt zijn eigen **Size**. Open de instellingen van elk pictogram en kies dezelfde.
- **Je wijzigingen zijn weg na een herladen.** Je verliet de pagina voordat je op **Opslaan** op de werkbalk van de builder klikte. Als Opslaan een fout toont, zie [Wijzigingen worden niet opgeslagen](/nl/hc/documentatie/dxpr-builder-leren/probleemoplossing/opslaan-mislukt).

## Wat nu?

- [Video-element](/nl/hc/documentation/learn-dxpr-builder/elements/video) om een virtuele rondleiding door je kantoor toe te voegen
- [Landingspagina](/nl/hc/documentatie/dxpr-builder-leren/tutorials/marketinglandingspagina) voor je belangrijkste marketingpagina
- [Drupal-blokkenintegratie](/nl/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) voor meer over het inbedden van blokken