---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/kontaktseite'
title: 'Eine Kontaktseite erstellen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:45:59+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bauen Sie eine Kontaktseite: eine Karte Ihrer Adresse, drei Kontaktwege mit je einem Icon und ein Kontaktformular. Nutzen Sie sie für die Seite, die Ihr Menü als „Kontakt“ verlinkt. Um nur ein Formular in eine andere Seite zu setzen, folgen Sie stattdessen Formulare zu Seiten hinzufügen.
  Das Video baut die Kontaktseite einer Stadtverwaltung.
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-24T20:03:43+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Eine Kontaktseite erstellen'
      description: |-
        Hier bauen Sie eine Kontaktseite: eine Karte Ihrer Adresse, drei Kontaktwege mit je einem Icon und ein Kontaktformular. Nutzen Sie sie für die Seite, die Ihr Menü als „Kontakt“ verlinkt. Um nur ein Formular in eine andere Seite zu setzen, folgen Sie stattdessen Formulare zu Seiten hinzufügen.
        Das Video baut die Kontaktseite einer Stadtverwaltung.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:45:59+0000'
      dateModified: '2026-10-24T20:03:43+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/de/hc/dokumentation/dxpr-builder-lernen/tutorials/kontaktseite'
      articleSection: 'Tutorial folgen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/kontaktseite'
      description: |-
        Hier bauen Sie eine Kontaktseite: eine Karte Ihrer Adresse, drei Kontaktwege mit je einem Icon und ein Kontaktformular. Nutzen Sie sie für die Seite, die Ihr Menü als „Kontakt“ verlinkt. Um nur ein Formular in eine andere Seite zu setzen, folgen Sie stattdessen Formulare zu Seiten hinzufügen.
        Das Video baut die Kontaktseite einer Stadtverwaltung.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Startseite
            item: 'https://dxpr.com/de'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: de
---
[Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Tutorial folgen](/de/hc/documentation/learn-dxpr-builder/tutorials/overview) # Eine Kontaktseite erstellen.

 DXPR Builder lernenSeiten erstellenTutorial folgen

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Ein Video hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/video)
- [Eine Marketing-Landingpage erstellen](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/marketing-landingpage)
- [Einen Drupal-Block zu Ihrer Seite hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/integrationen/drupal-bloecke)

Hier bauen Sie eine Kontaktseite: eine Karte Ihrer Adresse, drei Kontaktwege mit je einem Icon und ein Kontaktformular. Nutzen Sie sie für die Seite, die Ihr Menü als „Kontakt“ verlinkt. Um nur ein Formular in eine andere Seite zu setzen, folgen Sie stattdessen [Formulare zu Seiten hinzufügen](/de/hc/documentation/learn-dxpr-builder/tutorials/add-forms).

Das Video baut die Kontaktseite einer Stadtverwaltung.

  ## Bevor Sie beginnen

- Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**.
- Ihr Kontaktformular existiert als Block, etwa ein offenes Webform, das mit dem Webform-Modul erstellt wurde.
- Die Seite ist im Builder geöffnet. Für eine neue gehen Sie zu **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) und klicken Sie auf **Save**.
- Neue Elemente landen oben in ihrem Abschnitt oder ihrer Spalte. Fügen Sie die Elemente einer Spalte in umgekehrter Reihenfolge hinzu oder ziehen Sie sie danach an ihren Platz.

## Schritt 1: Die Karte hinzufügen

1. Klicken Sie auf der leeren Seite auf **Add Elements** und wählen Sie **Section** aus dem Tab **Layout**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Map** aus dem Tab **Content**.
3. Geben Sie Ihre **Address** ein, setzen Sie **Map height** auf 400 und klicken Sie auf **Save**.

Die Karte bettet Google Maps zentriert auf der Adresse ein.

## Schritt 2: Kontaktdetails hinzufügen

1. Fahren Sie über den Abschnitt und klicken Sie auf **Add Section Below**. Öffnen Sie das **More** > **Settings** des neuen Abschnitts, wählen Sie **Align text center** unter **HTML classes**, dann ein hellgraues **Background** im Panel **Style**. Klicken Sie auf **Save**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Row**; sie kommt mit zwei gleichen Spalten. Klicken Sie auf ihr Grid-Icon (**Column layout**), wählen Sie das Preset **1/3 + 1/3 + 1/3** und klicken Sie auf **Save**.
3. Klicken Sie in der ersten Spalte auf **+** und wählen Sie **Text**. Geben Sie „Besuchen Sie uns“ als **Heading 3** ein, fügen Sie Adresse und Öffnungszeiten hinzu und klicken Sie auf **Save**.
4. Klicken Sie in derselben Spalte auf **+** und wählen Sie **Icon**; es landet über dem Text. Wählen Sie das Set **Font Awesome Free Solid**, suchen Sie nach `location-dot` und klicken Sie auf das Icon. Setzen Sie **Size** auf **Extra Large (2x)** und klicken Sie auf **Save**.
5. Wiederholen Sie das in der zweiten Spalte mit „Rufen Sie uns an“ und dem `phone`-Icon und in der dritten mit „Schreiben Sie uns“ und dem `envelope`-Icon.

Wählen Sie dieselbe **Size** für alle drei Icons, sodass die Zeile gerade steht.

## Schritt 3: Das Formular hinzufügen

1. Fügen Sie mit **Add Section Below** einen dritten Abschnitt hinzu und geben Sie ihm die Klasse **Align text center**.
2. Klicken Sie auf **+** auf dem Abschnitt und öffnen Sie den Tab **Drupal Blocks**.
3. Wählen Sie den Block Ihres Kontaktformulars und klicken Sie in seinem Einstellungsdialog auf **Save**; das Formular erscheint im Abschnitt.
4. Klicken Sie erneut auf **+** auf dem Abschnitt und wählen Sie **Text**; er landet über dem Formular. Geben Sie „Schreiben Sie uns eine Nachricht“ als **Heading 2** ein, fügen Sie eine Zeile hinzu und klicken Sie auf **Save**.

Formulare, die unter **Structure** > **Contact forms** (`/admin/structure/contact`) erstellt wurden, haben keinen Block in Drupal Core. Das Contrib-Modul Contact Block fügt demselben Tab einen **Contact block** hinzu.

## Schritt 4: Speichern und Vorschau

1. Klicken Sie in der Builder-Symbolleiste auf **Save**.
2. Öffnen Sie das Ansichtsmenü (das **Augen-Icon**) und wählen Sie **Preview**.

## Weiter gehen

Nicht im Video gezeigt:

- **Anrufe per Fingertipp**: Wählen Sie die Telefonnummer im Text aus, klicken Sie auf den Link-Button in der Symbolleiste und geben Sie ein: `tel:+31104001234`
- **E-Mail per Klick**: Wählen Sie die Adresse aus und verlinken Sie sie mit `mailto:info@example.com`
- **Beliebige Blöcke**: Der Tab **Drupal Blocks** bettet die Blöcke Ihrer Website ein, etwa Suchformulare, Newsletter-Anmeldungen und benutzerdefinierte Blöcke

## Was Sie sehen

Eine 400 Pixel hohe Karte Ihrer Adresse füllt den oberen Teil der Seite. Darunter zeigt ein graues Band drei zentrierte Spalten, jede mit einem Icon, einer Überschrift und Ihren Details. Das Formular schließt die Seite unter seiner zentrierten Überschrift „Schreiben Sie uns eine Nachricht“.

## Wenn Sie die Seite nicht wie gezeigt sehen

- **Die Karte zeigt den falschen Ort.** Google Maps sucht nach der Adresse, wie sie eingegeben ist. Fügen Sie Postleitzahl, Stadt und Land zu **Address** hinzu und speichern Sie erneut.
- **Ihr Formular ist nicht im Tab Drupal Blocks.** Der Builder listet nur offene Webforms, und Core-Kontaktformulare brauchen das Contact-Block-Modul. Setzen Sie den Status des Webforms auf **Open** unter **Structure** > **Webforms** (`/admin/structure/webform`).
- **Die Icons haben unterschiedliche Größen.** Jedes Icon behält seine eigene **Size**. Öffnen Sie die Einstellungen jedes Icons und wählen Sie dieselbe.
- **Ihre Änderungen sind nach einem Neuladen weg.** Sie haben die Seite verlassen, bevor Sie auf **Save** in der Builder-Symbolleiste geklickt haben. Wenn Save einen Fehler zeigt, siehe [Änderungen werden nicht gespeichert](/de/hc/dokumentation/dxpr-builder-lernen/fehlerbehebung/speichern-schlaegt-fehl).

## Wie geht es weiter?

- [Video-Element](/de/hc/documentation/learn-dxpr-builder/elements/video), um einen virtuellen Rundgang durch Ihr Büro hinzuzufügen
- [Landingpage](/de/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) für Ihre Haupt-Marketingseite
- [Drupal-Blöcke](/de/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) für mehr über das Einbetten von Blöcken