Ajouter des formulaires aux pages.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Ici, vous placez un formulaire d’inscription à côté de votre message dans une section. Le formulaire est un bloc Drupal, donc vous pouvez placer ainsi tout webform ouvert. Utilisez cette page pour un formulaire dans une page existante. Pour une page complète avec adresse, carte et horaires d’ouverture, suivez Créer une page de contact.

La vidéo construit une inscription à la lettre d’information pour une clinique.

Avant de commencer

  • Votre rôle a la permission Edit with DXPR Builder.
  • Le formulaire existe, par exemple comme webform 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.

Étape 1 : ajouter une section teintée

  1. Cliquez sur Ajouter des éléments sur la page vide et choisissez Section depuis l’onglet Mise en page.
  2. Survolez la section et ouvrez Plus > Paramètres. Ouvrez le panneau Style, choisissez un Background gris clair et cliquez sur Save.

Étape 2 : ajouter deux colonnes

  1. Cliquez sur + sur la section et choisissez Ligne. Une nouvelle ligne arrive avec deux colonnes égales, la division voulue ici.

Étape 3 : rédiger le message d’inscription

  1. Cliquez sur + dans la colonne gauche et choisissez Texte depuis l’onglet Contenu.
  2. Tapez « Get health tips by email » et réglez-le sur Heading 2 depuis la barre d’outils.
  3. Ajoutez une ligne sur ce que les abonnés reçoivent et à quelle fréquence, puis cliquez sur Save.

Étape 4 : insérer le formulaire

  1. Cliquez sur + dans la colonne droite.
  2. Ouvrez l’onglet Drupal Blocks.
  3. Choisissez le bloc de votre formulaire et cliquez sur Save dans sa boîte de dialogue de réglages. Le formulaire s’affiche dans la colonne.

Étape 5 : 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 pour voir le message à côté du formulaire.

D’où viennent les formulaires

Non montré dans la vidéo :

  • Module Webform : chaque webform ouvert est listé dans l’onglet Drupal Blocks comme « Block: DXPR builder: Webform: » suivi de son nom. Tapez le nom dans Search, ou choisissez DXPR builder sous Filter by category.
  • Module Contact du cœur : ses formulaires sous Structure > Contact forms n’ont pas de bloc à eux. Le module contribué Contact Block ajoute un Contact block au même onglet.

Styliser les formulaires

Non montré dans la vidéo. Les formulaires prennent les styles de votre thème. Pour les changer :

  • Ajoutez des classes sous HTML classes dans le panneau General du bloc, et stylisez ces classes dans votre thème.
  • Réglez la marge et le remplissage autour du formulaire dans le panneau Style du bloc.

Ce que vous voyez

La bande grise contient votre titre et une ligne de texte à gauche et le formulaire à droite. En prévisualisation, le formulaire fonctionne comme pour les visiteurs, et les envois vont aux gestionnaires propres du formulaire. Choisissez Edit dans le menu en forme d’œil pour continuer.

Si vous ne voyez pas le formulaire

  • Votre webform manque dans l’onglet Drupal Blocks. Le builder ne liste que les webforms ouverts. Accédez à Structure > Webforms (/admin/structure/webform) et réglez le statut du formulaire sur Open.
  • L’onglet Drupal Blocks manque ou est vide. Le builder ne liste de blocs que quand le module Block Content du cœur est activé. Activez-le sous Extend (/admin/modules).
  • Les visiteurs voient une colonne vide où devrait être le formulaire. Le bloc cache un webform aux personnes qui ne peuvent pas l’envoyer. Autorisez leur rôle à créer des envois dans les réglages Access du webform.
  • 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 ?