Joomla - 3. Créer un formulaire avec le package Joomla

Joomla-3D-Vertical-logo-light-background-en-2.png

Vue d'ensemble

Le package Joomla vous permet de créer et d'utiliser des formulaires afin de développer votre liste d'abonnés et ajouter automatiquement vos nouveaux contacts à votre compte Sendinblue.

Ce tutoriel vous explique comment :

  1. Créer un formulaire
  2. Nommer votre formulaire
  3. Définir les listes auxquelles vos visiteurs seront ajoutés
  4. Configurer vos emails de confirmation
  5. Personnaliser vos messages
  6. Ajouter des blocs et des champs à votre formulaire
  7. Intégrer votre nouveau formulaire à votre site

 

Avant de commencer

Vous aurez besoin des informations suivantes avant de pouvoir créer votre formulaire :

1. Créez un formulaire

Sur le panneau d'administration de Joomla, cliquez sur Composants > Sendinblue. Cliquez sur l'icône Subscription forms (« Formulaires d'inscription »). Pour créer un formulaire d'inscription, cliquez sur le bouton New (« Nouveau ») en haut à gauche.

WsllPixKjBnCjgdseDxlCHnewD04o67WTzUMnhPXSaaob89j9nbFaGduWcj9uDeHP2Sypafz4zn2jkF4A06Eb-NMZvweQwIiVPchLQhKRlNf4zMlg_rXSkvBjdzarkppUlIBTp2O.png

Tous vos formulaires s'affichent sur cette page. Vous pouvez les gérer à l'aide des boutons d'édition Joomla de base.

2. Nommez votre formulaire

Commencez par donner un nom à votre formulaire.

GRT2iRaUssIS3SmDn3ouBqlFPwREB4QTakTdeVKajbCby2g9Tl-alWKqdCTIgXPZVXd42h2f_knljEbAdg6QDG3DdNCep_rNB1Bkl3HUcSoQV0FlM3zBY9ynMFt1bB3V8tgxa4Rk.png

3. Sélectionnez vos listes

Sélectionnez la ou les listes Sendinblue auxquelles seront ajoutés les visiteurs lorsqu'ils valideront le formulaire. Vous pouvez choisir autant de listes que vous le souhaitez, dans différents dossiers.

Bon à savoir : vous devez sélectionner au moins une liste, sans quoi le formulaire d'inscription ne fonctionnera pas.

R73NBZ0bxCGH8PDJI_EdMt4FDhD_s5f7TqvqR8RVkAJDfBCwjt7UBQzeNFD8dWUByPghZdF-UfondIg1x9rTA0xZBxAaAu5VOHLAYSerqurHB3LKqy84W_f_IL3MaEEbnhF7ilcK.png

4. Configurez l'email de confirmation

Accédez à l'onglet Confirmation.

Plusieurs options de suivi sont possibles lorsqu'un nouvel abonné valide un formulaire :

  • No confirmation (« Aucune confirmation ») : le visiteur sera inscrit aux listes sélectionnées sans recevoir de notification
  • Simple confirmation : le visiteur sera inscrit aux listes sélectionnées et recevra une notification sous la forme suivante :
    • Follow-up email (« Email de suivi ») : sélectionnez le template d'email de votre compte Sendinblue qui sera envoyé pour souhaiter la bienvenue à votre nouvel abonné.
    • Confirmation page (« Page de confirmation ») : si vous choisissez « Oui », vous pouvez définir la page sur laquelle le visiteur sera redirigé après avoir validé le formulaire. Saisissez simplement l'URL dans le champ « Custom confirmation page » (« Page de confirmation personnalisée »).

qodUok1tfmUz0qlWGOZRVACS7jrLLMVhCNM2zXtPrR8FhEO45JRMD2ERiH3ysZbZIYuJFUwG-0YJl-qHH_dxOy9PbW-8a8iHVoL_xmloEqqDNsCWOF2TFsXXfBhybc-EP9EwUqMe.png

  • Double confirmation : les visiteurs qui valident le formulaire seront ajoutés à la liste Temp - DOUBLE OPTIN et recevront un email de confirmation leur demandant de cliquer sur le lien pour confirmer leur inscription. Une fois qu'ils auront cliqué sur le lien, ils seront ajoutés aux listes Sendinblue sélectionnées.
    • Opt-in email (« Email d'accord ») : sélectionnez le template d'email de votre compte Sendinblue qui sera utilisé pour que votre nouvel abonné confirme son inscription. Remarque : le template doit inclure le tag double opt-in, car celui-ci sera remplacé par un lien de confirmation généré automatiquement.
    • Form redirect page (« Page de redirection du formulaire ») : si vous choisissez « Oui », vous pouvez définir la page sur laquelle le visiteur sera redirigé après avoir validé le formulaire. Saisissez simplement l'URL dans le champ « Custom form redirect page » (« Page de redirection du formulaire »).
    • Final confirmation (« Confirmation finale ») : si vous choisissez « Oui », les nouveaux abonnés recevront un dernier email de confirmation après avoir confirmé leur inscription via l'email d'accord. Sélectionnez un template d'email de votre compte Sendinblue.
    • Confirmation page (« Page de confirmation ») : si vous choisissez « Oui », les nouveaux abonnés seront redirigés vers une page de confirmation après avoir confirmé leur inscription par email. Saisissez simplement l'URL dans le champ « Custom confirmation page » (« Page de confirmation personnalisée »). Il peut s'agir d'une page de remerciement ou d'une landing page comprenant des informations supplémentaires.

-shWR2rqz27mrYiUAiBnCRtd14Aa6YZEN2KdWgJk24GOj1G8wF3cqwLjiplr0y7QQU0ehG-BTPqXooJ-h9Ig-pHocx6EhDh48wWZWZT5pla9mxX1rDtjLQyNh6_620y2THXBUWVX.png

5. Personnalisez vos messages d'information

Accédez à l'onglet Messages. Cet onglet vous permet de personnaliser des messages par défaut.

Bon à savoir : par défaut, le panneau d'administration de l'intégration Joomla est disponible en anglais uniquement. Vous pouvez cependant créer les messages personnalisés de vos formulaires dans la langue de votre choix.

 

481B3kdsyWR-63kY-jBKKklz-JkXAmrvnqltukWGAiQgi7DKDDUZbuHFJ2LHSkMKsdt0ukXMwblJvcg_mJ4KkrCqL-F5yqOnI-9wYHR0pbhT98ayAMQ-pbbrVn4Z74Ywr8GauARF.png

6. Ajoutez des blocs et des champs à votre formulaire

Accédez à l'onglet Form blocks and fields (« Blocs et champs du formulaire ») pour concevoir votre formulaire. Chaque formulaire est composé de blocs. Vous pouvez personnaliser chaque bloc et y inclure différentes options et représentations visuelles.

  • Pour créer le premier bloc, cliquez sur l'icône « + » en haut à gauche de Blocks subform (« Blocs du sous-formulaire »).
  • Pour créer le bloc suivant, cliquez sur l'icône « + » en bas à droite du dernier bloc.
  • Pour supprimer un bloc, cliquez sur l'icône « X » rouge en haut à droite du bloc.
  • À l'aide de l'icône à trois points située à gauche de chaque bloc, vous pouvez faire glisser les blocs pour les réordonner.

dVwQ1iHEOrsT2ISnQ7pl6x0kABAR9LFdvF9-kI7kAXVMXR1QdKzBXw7xYIAn2CryBZpz0pydSHgIkmqA1ry9z-ucXd2fFjdlQJC1OT_SjGcyWyUjcv6SnZDfDmDBWGw123mskVwk9v3Z7BETCA.jpg

Il existe deux groupes de base de types de blocs :

  1. Les blocs « Attribute type » (« Type attribut ») : ce type de blocs contient le mot « attribut » comme préfixe. Il permet aux visiteurs de saisir des données spécifiques.
  2. Les blocs « Specific type » (« Type spécifique ») : ce type de blocs permet d'intégrer des éléments au formulaire, comme du texte, des images, un séparateur, etc.

Bon à savoir : pour que les blocs de type « attribut » fonctionnent correctement, les attributs correspondants doivent être créés au préalable sur votre compte Sendinblue.

Types de blocs :

Blocs de type spécifique :

  • Text and image (« Texte et image ») : permet d'intégrer au formulaire du texte ou des images personnalisés et d'ajouter du contenu à l'aide de l'éditeur de texte. Assurez-vous que l'éditeur est bien activé dans vos paramètres d'utilisateur.
  • Divider (« Séparateur ») : permet d'ajouter un séparateur afin de rendre le formulaire plus lisible.
  • Opt-in (« Accord ») : permet d'ajouter une case à cocher pour confirmer l'accord des visiteurs. Les visiteurs ne pourront pas envoyer le formulaire s'ils n'ont pas coché cette case.
  • Captcha : permet d'ajouter un test Captcha au formulaire. Pour utiliser ce type de bloc, le plugin Captcha doit être installé et activé sur votre site. Il est fortement recommandé d'inclure un champ Captcha dans chaque formulaire.

Blocs de type attribut :

  • Email : permet aux visiteurs de renseigner leur adresse email. Une adresse email valide est requise, et une alerte s'affichera si elle n'est pas saisie correctement.
  • Attribute text (« Attribut de texte ») : permet aux visiteurs de saisir une valeur textuelle, telle que leur nom.
  • Attribute number(« Attribut de nom ») : permet aux visiteurs de saisir une valeur numérique. La valeur saisie sera validée si elle est numérique.
  • Attribute date (« Attribut de date ») : permet aux visiteurs de saisir une valeur de date. Un calendrier s'affichera permettant aux visiteurs de renseigner une valeur, telle que leur date de naissance.
  • Attribute switch (« Attribut de validation ») : permet aux visiteurs de saisir une valeur de type « Oui/Non ». Une case à cocher sera affichée.
  • Attribute single choice (« Attribut de choix unique ») : permet aux visiteurs de sélectionner différentes options dans une liste. Des boutons radio ou des cases à cocher s'afficheront.

Les blocs de type attribut et spécifique incluent les paramètres suivants :

  • visible : cette option permet d'activer ou désactiver facilement un bloc.
  • block class (« classe de bloc ») : classe ajoutée au bloc.
  • style : règles de style CSS spécifiques ajoutées à un bloc ; attribut de style du bloc.
  • block control class (« classe de contrôle de bloc ») : classe ajoutée aux éléments de contrôle au sein d'un bloc.

La plupart des types d'attributs de blocs incluent les options et paramètres suivants :

  • required switch (« option requise ») : les visiteurs doivent renseigner une valeur dans ce champ.
  • show label switch with the option to enter label text (« afficher la description de l'option avec la possibilité de saisir le texte de la description ») : vous pouvez saisir une description et choisir de l'afficher à côté d'un champ.
  • show help switch with the option to enter help text (« afficher la bulle d'aide avec la possibilité de saisir le texte de la bulle d'aide ») : vous pouvez saisir une explication supplémentaire et choisir de l'afficher.

Bon à savoir : l'ordre final des blocs sera le même que l'ordre des blocs sous cet onglet.

Lorsque vous avez terminé de créer votre formulaire, cliquez sur le bouton Save (« Enregistrer ») en haut à gauche.

7. Ajoutez un formulaire

Pour afficher les formulaires que vous avez créés, connectez-vous au panneau d'administration Joomla :

  1. Accédez à Extensions > Modules.
  2. Cliquez sur le bouton + New (« Nouveau ») en haut à gauche.
  3. Sélectionnez Sendinblue subscription form (« Formulaire d'inscription Sendinblue »).

hr7lGubYXnX0D_bBil0GoRJuy48c2V6djGoEhNwtfaBoU7kjmFP6VHXG8hPJGdxWfOhnYuNwfSLgk_Yd33Cp_b_1woGvcQgNnOSyKMnELobfRLhY6EBA-hiby7mXe1Sha5YV2Zc0xbCNPsIKUw.jpg

Commencez par ajouter un titre.

Vous devez sélectionner dans ce module le formulaire d'inscription que vous venez de créer.

Des paramètres supplémentaires vous permettent également d'ajouter du texte avant et après le module. Si votre site Web n'est pas en anglais, nous vous recommandons de configurer le paramètre du module selon la description du bouton.

KR2F3qzorgA2Lz1BzLmWEpfu_PzpO2PP8rLdej3vtXChDX_ADv8xang-zFntwOANIIaChckcqLA-lS7iX6y2fuXzttGxIg61QdOfkIGxcnetBoenoTiYsB-BvBBZcK6-pdKpLq1i.png

Définissez les autres paramètres de base, tels que les suivants :

  • Show Title (« Afficher le titre ») : si vous sélectionnez « Show », le titre s'affichera sur votre site.
  • Position : choisissez à quel endroit de votre site afficher le formulaire.

37GAu5xO5UdCLavtmbB3zW-Xso6xHDA2Rba-35tON94UZjyMtGZgr__1iiZijgc0TZcsHv2iblkfllsjbZJesjLSWkNnshMUD8Ny00AWx7mmI35YqcBnUXi9Pey3p0enO25-dlhN.png

Il est essentiel de comprendre la représentation visuelle de votre formulaire dans sa forme finale, en fonction du template Joomla que votre site utilise et d'autres éléments de style.

Le module utilise les commandes et classes de formulaire Joomla standards pour l'affichage du formulaire. Des options vous permettent d'ajouter des classes et des éléments de style pour chaque bloc du formulaire. Ainsi, vous pouvez facilement personnaliser votre formulaire en fonction de vos préférences.

Par exemple, si votre formulaire comprend un bloc de type « Attribute single choice » et que vous utilisez le template « Protostar » par défaut de Joomla, lorsque vous définissez le paramètre « Block control class » sur « btn-group btn-group-yesno » pour ce bloc, vous obtiendrez des boutons radio qui s'afficheront sous la forme des classes de bouton par défaut de Joomla, qui existent également dans de nombreux autres templates.

Et après ?

Vous avez des questions ?

Si vous avez une question, n'hésitez pas à créer un nouveau sujet ici.