---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-contact'
title: 'Créer une page de contact | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:09+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Ici, vous construisez une page de contact : une carte de votre
  adresse, trois moyens de vous joindre avec chacun une icône, et un
  formulaire de contact. Utilisez-la pour la page vers laquelle votre menu
  pointe comme « Contact ». Pour mettre seulement un formulaire dans une
  autre page, suivez plutôt
  Ajouter des formulaires aux pages.
  La vidéo construit la page de contact d’un conseil municipal.
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: 'Créer une page de contact'
      description: |-
        Ici, vous construisez une page de contact : une carte de votre
        adresse, trois moyens de vous joindre avec chacun une icône, et un
        formulaire de contact. Utilisez-la pour la page vers laquelle votre menu
        pointe comme « Contact ». Pour mettre seulement un formulaire dans une
        autre page, suivez plutôt
        Ajouter des formulaires aux pages.
        La vidéo construit la page de contact d’un conseil municipal.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:24:09+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/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-contact'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-contact'
      description: |-
        Ici, vous construisez une page de contact : une carte de votre
        adresse, trois moyens de vous joindre avec chacun une icône, et un
        formulaire de contact. Utilisez-la pour la page vers laquelle votre menu
        pointe comme « Contact ». Pour mettre seulement un formulaire dans une
        autre page, suivez plutôt
        Ajouter des formulaires aux pages.
        La vidéo construit la page de contact d’un conseil municipal.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Accueil
            item: 'https://dxpr.com/fr'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: fr
---
[Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Suivre un tutoriel](/fr/hc/documentation/learn-dxpr-builder/tutorials/overview) # Créer une page de contact.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Ajouter une vidéo](/fr/hc/documentation/apprendre-dxpr-builder/elements/video)
- [Créer une page de destination marketing](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing)
- [Ajouter un bloc Drupal à votre page](/fr/hc/documentation/apprendre-dxpr-builder/integrations/blocs-drupal)

Ici, vous construisez une page de contact : une carte de votre adresse, trois moyens de vous joindre avec chacun une icône, et un formulaire de contact. Utilisez-la pour la page vers laquelle votre menu pointe comme « Contact ». Pour mettre seulement un formulaire dans une autre page, suivez plutôt [Ajouter des formulaires aux pages](/fr/hc/documentation/learn-dxpr-builder/tutorials/add-forms).

La vidéo construit la page de contact d’un conseil municipal.

  ## Avant de commencer

- Votre rôle a la permission **Edit with DXPR Builder**.
- Votre formulaire de contact existe comme bloc, par exemple un webform ouvert créé avec le module Webform.
- La page est ouverte dans le builder. Pour une nouvelle, accédez à **Content** > **Add content** > **Landing Page**(`/node/add/landing_page`) et cliquez sur **Save**.
- Les nouveaux éléments atterrissent en haut de leur section ou colonne. Ajoutez les éléments d’une colonne dans l’ordre inverse, ou glissez-les en place ensuite.

## Étape 1 : ajouter la carte

1. Cliquez sur **Ajouter des éléments** sur la page vide et choisissez **Section** depuis l’onglet **Mise en page**.
2. Cliquez sur **+** sur la section et choisissez **Carte** depuis l’onglet **Contenu**.
3. Tapez votre **Address**, réglez **Map height** sur 400 et cliquez sur **Save**.

La carte intègre Google Maps centré sur l’adresse.

## Étape 2 : ajouter les coordonnées

1. Survolez la section et cliquez sur **Add Section Below**. Ouvrez les **Plus** > **Paramètres** de la nouvelle section, choisissez **Align text center**sous **HTML classes**, puis un **Background** gris clair dans le panneau **Style**. Cliquez sur **Save**.
2. Cliquez sur **+** sur la section et choisissez **Ligne** ; elle arrive avec deux colonnes égales. Cliquez sur son icône de grille (**Column layout**), choisissez le préréglage **1/3 + 1/3 + 1/3** et cliquez sur **Save**.
3. Cliquez sur **+** dans la première colonne et choisissez **Texte**. Tapez « Visit us » en **Heading 3**, ajoutez l’adresse et les horaires d’ouverture, et cliquez sur **Save**.
4. Cliquez sur **+** dans la même colonne et choisissez **Icône** ; elle atterrit au-dessus du texte. Choisissez le jeu **Font Awesome Free Solid**, cherchez `location-dot` et cliquez sur l’icône. Réglez **Size** sur **Extra Large (2x)** et cliquez sur **Save**.
5. Répétez dans la deuxième colonne avec « Call us » et l’icône `phone`, et dans la troisième avec « Email us » et l’icône `envelope`.

Choisissez le même **Size** pour les trois icônes pour que la ligne s’aligne.

## Étape 3 : ajouter le formulaire

1. Ajoutez une troisième section avec **Add Section Below** et donnez-lui la classe **Align text center**.
2. Cliquez sur **+** sur la section et ouvrez l’onglet **Drupal Blocks**.
3. Choisissez le bloc de votre formulaire de contact et cliquez sur **Save**dans sa boîte de dialogue de réglages ; le formulaire apparaît dans la section.
4. Cliquez à nouveau sur **+** sur la section et choisissez **Texte** ; il atterrit au-dessus du formulaire. Tapez « Send us a message » en **Heading 2**, ajoutez une ligne et cliquez sur **Save**.

Les formulaires créés sous **Structure** > **Contact forms**(`/admin/structure/contact`) n’ont pas de bloc dans le cœur de Drupal. Le module contribué Contact Block ajoute un **Contact block** au même onglet.

## Étape 4 : enregistrer et prévisualiser

1. Cliquez sur **Save** dans la barre d’outils du builder.
2. Ouvrez le menu d’affichage (l’**icône en forme d’œil**) et choisissez **Preview**.

## Aller plus loin

Non montré dans la vidéo :

- **Appel en un toucher** : sélectionnez le numéro de téléphone dans le texte, cliquez sur le bouton de lien dans la barre d’outils et saisissez `tel:+31104001234`
- **E-mail en un clic** : sélectionnez l’adresse et liez-la à `mailto:info@example.com`
- **N’importe quel bloc** : l’onglet **Drupal Blocks** intègre les blocs de votre site, comme les formulaires de recherche, les inscriptions à la lettre d’information et les blocs personnalisés

## Ce que vous voyez

Une carte de 400 pixels de votre adresse remplit le haut de la page. En dessous, une bande grise montre trois colonnes centrées, chacune avec une icône, un titre et vos coordonnées. Le formulaire ferme la page sous son titre centré « Send us a message ».

## Si vous ne voyez pas la page comme montrée

- **La carte montre le mauvais endroit.** Google Maps cherche l’adresse telle que tapée. Ajoutez le code postal, la ville et le pays à **Address**et enregistrez à nouveau.
- **Votre formulaire manque dans l’onglet Drupal Blocks.** Le builder ne liste que les webforms ouverts, et les formulaires de contact du cœur ont besoin du module Contact Block. Réglez le statut du webform sur **Open**sous **Structure** > **Webforms** (`/admin/structure/webform`).
- **Les icônes ont des tailles différentes.** Chaque icône garde son propre **Size**. Ouvrez les réglages de chaque icône et choisissez le même.
- **Vos changements ont disparu après un rechargement.** Vous avez quitté la page avant de cliquer sur **Save** dans la barre d’outils du builder. Si Save affiche une erreur, voir [Les modifications ne s’enregistrent pas](/fr/hc/documentation/apprendre-dxpr-builder/depannage/enregistrement-echoue).

## Et ensuite ?

- [Élément vidéo](/fr/hc/documentation/apprendre-dxpr-builder/elements/video) pour ajouter une visite virtuelle de vos bureaux
- [Page de destination](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing) pour votre page marketing principale
- [Intégration de Drupal Blocks](/fr/hc/documentation/apprendre-dxpr-builder/integrations/blocs-drupal) pour en savoir plus sur l’intégration de blocs