Le connecteur Woocommerce vous permet de créer un formulaire d’inscription aux newsletters à intégrer dans votre site, et dont les réponses sont automatiquement remontées dans votre base de données Probance.
Ce tutoriel vous expliquera comment construire votre formulaire et comment l’intégrer dans les pages de votre site.
1. Construire le formulaire
Le contenu et l’apparence du formulaire sont configurables via le menu Probance > Optin de votre panneau d’administration WordPress, dans la section Newsletter.
1.1. Contenu du formulaire
Vous pouvez construire le formulaire avec les éléments suivants :
- Main Title : titre du bandeau (1 dans l’exemple ci-dessus)
- Subtitle : texte complémentaire du bandeau (2 dans l’exemple ci-dessus)
- With First Name & Last Name : cochez cette case pour récupérer le nom et le prénom (3 dans l’exemple ci-dessus) du répondant dans le formulaire.
- Is required (Name & Last Name) : si coché, le champ est obligatoire
- Display Names same row : affiche les champs nom et prénom s’affichent sur la même ligne
- First Name : libellé du champ dans le formulaire
- First Name Error Msg : message d’erreur affiché si la valeur renseignée est non conforme, ou si le champ est laissé vide à la validation du formulaire (lorsqu’il est obligatoire)
- Last Name : libellé du champ dans le formulaire
- Last Name Error Msg : message d’erreur affiché si la valeur renseignée est non conforme, ou si le champ est laissé vide à la validation du formulaire (lorsqu’il est obligatoire)
- Add birthday field : cochez cette case pour récupérer la date de naissance (4 dans l’exemple ci-dessus) du répondant dans le formulaire.
- Is required (Birthday) : si coché, le champ est obligatoire
- Birthday : libellé du champ dans le formulaire
- Birthday Error Msg : message d’erreur affiché si la valeur renseignée est non conforme, ou si le champ est laissé vide à la validation du formulaire (lorsqu’il est obligatoire)
- Add gender field : cochez cette case pour récupérer le genre (5 dans l’exemple ci-dessus) du répondant dans le formulaire. Ce champ se présente sous la forme d’une liste de sélection. Cliquez sur le bouton Options values pour renseigner les options à proposer.
- Is required (Gender) : si coché, le champ est obligatoire
- Gender : libellé du champ dans le formulaire
- Gender Error Msg : message d’erreur affiché si la valeur renseignée est non conforme, ou si le champ est laissé vide à la validation du formulaire (lorsqu’il est obligatoire)
- Add language field : cochez cette case pour récupérer la langue de préférence (6 dans l’exemple ci-dessus) du répondant dans le formulaire.
- Is required (Language) : si coché, le champ est obligatoire
- Language : libellé du champ dans le formulaire
- Gender Error Msg : message d’erreur affiché si la valeur renseignée est non conforme, ou si le champ est laissé vide à la validation du formulaire (lorsqu’il est obligatoire)
- Le champ email (7 dans l’exemple ci-dessus) est présent et obligatoire par défaut dans le formulaire.
- Email : libellé du champ dans le formulaire
- Email Error Msg : message d’erreur affiché si la valeur renseignée est non conforme
- Email Empty Msg : message d’erreur affiché si le champ est laissé vide à la validation du formulaire
Les trois derniers champs vous permettent de définir le libellé du bouton de confirmation et les messages de confirmation/d’erreur d’envoi du formulaire.
- Button : libellé du bouton de confirmation (8 dans l’exemple ci-dessus)
- Confirmation Message : Message de confirmation à afficher après validation du formulaire
- Error Message : Message affiché en cas d’erreur à la validation du formulaire
La case à cocher Add reCAPTCHA v3 vous permet d’intégrer une protection anti-spam reCAPTCHA dans votre formulaire. Consultez notre guide dédié pour en savoir plus.
1.2. Modification des libellés et des textes
Important: les champs de saisie du formulaire de base correspondent aux libellés à afficher dans les langues pour lesquelles aucune traduction n’est définie. Si votre site est en français, en espagnol et/ou en anglais, vous devrez nécessairement passer par le module Translations pour modifier la valeur d’un libellé ou d’un message.
Cliquez sur le bouton Translations à droite d’un élément pour accéder au module.
Des libellés par défaut sont définis en français, anglais et espagnol. Vous pouvez modifier ces valeurs dans les onglets FR, EN et ES. Vous pouvez également ajouter une langue en cliquant sur l’onglet +.
Cliquez sur Save pour enregistrer vos libellés, puis sur Close pour revenir au formulaire.
1.3. Modification de l’apparence des champs
Par défaut, le style du site web est appliqué au formulaire. Vous pouvez cependant ajuster l’apparence de chaque élément en cliquant sur le bouton Properties correspondant dans la section Newsletter Form. Ce bouton ouvre la fenêtre de personnalisation du CSS et des classes de l’élément en question, dans laquelle vous pouvez définir des règles de style à appliquer.
Note: Des connaissances en HTML/CSS sont nécessaires pour cette personnalisation. Pour conserver une bonne harmonie entre le bandeau et le reste de votre site, nous vous recommandons de limiter les modifications de style.
Les options de personnalisation dépendent de l’élément :
- Main title et subtile : propriétés CSS de police + tag HTML (h1, h2, h3, etc.)
- Labels : propriétés CSS de police
- Input et Button : propriétés CSS de police, focus et hover
1.4. Ajout de la case d’optin
Pour être conforme avec la réglementation RGPD en matière d’optin, le formulaire d’inscription newsletter doit contenir une clause d’accord explicite de réception de communications marketing sur l’adresse email renseignée.
Pour activer la case à cocher d’optin dans le formulaire, accédez à la section Web Elements de la page Probance > Optin, et cochez l’option Display checkbox into « Newsletter » form.
Le champ Checkboxes labels vous permet de modifier le libellé de la case. Notez cependant que ce texte est commun à toutes les cases affichées par notre module Woocommerce, la modification sera donc appliquée dans toutes les pages où la case à cocher d’optin est activée.
La case sera ajoutée à la fin du formulaire: elle permet au répondant de confirmer qu’il accepte de recevoir vos communications marketing.
2. Intégrer le formulaire dans votre site
Pour intégrer le formulaire dans votre site, il vous suffit de coller le shortcode suivant là où il doit apparaitre: [probance_newsletter]
Ce shortcode peut être utilisé plusieurs fois, pour afficher le formulaire à différents endroits dans votre site.
Vous pouvez également ajouter des paramètres à un shortcode, pour modifier le contenu et/ou l’apparence du formulaire correspondant et lui ajouter des options (les formulaires affichés par les autres shortcode ne sont pas impactés par ces paramètres)
2.1. Ajouter une vérification d’optin
Vous pouvez conditionner l’affichage du formulaire au statut actuel de souscription du visiteur en ajoutant le paramètre check_optin au shortcode.
Lorsque ce paramètre est à « true », le formulaire sera masqué si le visiteur est identifié comme un contact déjà optin, et affiché s’il n’est pas identifié, ou identifié comme un contact non-optin. Lorsque ce paramètre est à « false », le formulaire sera affiché pour tout les visiteurs.
2.2. Identifier l’origine du formulaire
Le paramètre custom_tag vous permet d’associer un tag à chaque shortcode, pour identifier avec quel formulaire vos contacts se sont inscrits à la newsletter
Ainsi les formulaires envoyés à partir du shortcode [probance_newsletter custom_tag="pop-up NL"] contiendront un tag « Pop-up NL ».
2.3. Masquer des champs
Vous pouvez masquer un champ dans le formulaire en ajoutant le nom du champ avec l’argument « false » dans le shortcode.
Par exemple, le shortcode [probance_newsletter gender="false" birthday="false"] affichera un formulaire dans lequel les champs Genre et Date de naissance seront masqués:
2.4. Modifier la mise en forme
Pour pouvez ajouter des règles de style à un shortcode, et ainsi modifier l’apparence du formulaire.
- Le paramètre block_style vous permet d’appliquer du CSS sur l’ensemble du bandeau (Titre, sous-titre et formulaire)
- Le paramètre form_style vous permet d’appliquer du CSS sur le formulaire (libellés, champs de saisie, messages d’erreur et bouton)
Par exemple, le shortcode [probance_newsletter block_style="text-align: center" form_style="padding: 15px; background-color: #3b3b3b; color: #f5f5f5; text-align: left;"] donnera :
