Créer une page de contact.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

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.

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.

Et ensuite ?