Tutoriel – Créer un bloc de cases à cocher pour plusieurs mailing lists

Voici le récapitulatif validé étape par étape

Pour faire un système d’inscription par cases à cocher sur plusieurs formulaires Fluent Forms, avec synchronisation automatique des champs prénom, nom et email (remplis une seule fois), et assignation aux bonnes listes dans FluentCRM.

🎯 Objectif

  • saisir prénom, nom et email une seule fois en haut de la page
  • cocher une ou plusieurs cases dans des formulaires séparés
  • que chaque case déclenche l’inscription du user (avec ses infos) à une liste différente dans FluentCRM
  • tout cela en respectant le fonctionnement natif Fluent Forms/FluentCRM (reCaptcha, règles conditionnelles, etc.)

✅ Prérequis

  • Fluent Forms (version gratuite)
  • FluentCRM (version gratuite)
  • Au moins une liste dans FluentCRM par case à cocher
  • Les étiquettes dans FluentCRM doivent porter exactement le même nom que les valeurs des cases à cocher
  • 1 page WordPress avec :
    • un bloc HTML contenant les 3 champs : prénom, nom, email
    • plusieurs shortcodes Fluent Forms (1 par case à cocher)

🧱 Étape 1 – Ajouter le bloc HTML pour les données globales

Ajoute ceci en haut de ta page WordPress :

<div id="form-global">
  <label>Prénom<br><input type="text" id="user_firstname" placeholder="Ton prénom"></label><br>
  <label>Nom<br><input type="text" id="user_lastname" placeholder="Ton nom"></label><br>
  <label>Email<br><input type="text" id="user_email" placeholder="Ton email"></label>
</div>

🧾 Étape 2 – Créer les formulaires Fluent Forms

Pour chaque case à cocher, crée un formulaire distinct contenant :

  • 3 champs masqués (Hidden) :
    • prenom
    • nom
    • email
  • 1 case à cocher unique (Checkbox) avec comme valeur le nom exact de l’étiquette FluentCRM
  • Un champ reCAPTCHA v2
  • Un bouton “Submit”

⚙️ Étape 3 – Ajouter ce script dans chaque formulaire Fluent Forms

Dans chaque formulaire, va dans :
Fluent Forms > Formulaires > JS/CSS personnalisé
Colle ce code JS dans la zone “Javascript personnalisé” :

function updateUserData() {
  var fName = jQuery('#user_firstname').val().trim();
  var lName = jQuery('#user_lastname').val().trim();
  var email = jQuery('#user_email').val().trim();

  $form.find('input[name="prenom"]').val(fName);
  $form.find('input[name="nom"]').val(lName);
  $form.find('input[name="email"]').val(email);
}

jQuery(document).ready(function () {
  jQuery('#user_firstname, #user_lastname, #user_email').on('input', updateUserData);
});

✅ Ce script copie automatiquement les valeurs entrées dans le bloc HTML vers les champs masqués du formulaire courant.

🧩 Étape 4 – Ajouter les règles conditionnelles dans Fluent Forms

Dans chaque formulaire, va dans :
Règles & intégrations > Réglages > Règles conditionnelles
Ajoute une règle comme :

SI Tu es : égal à [NomExactÉtiquette]
→ Définir l’étiquette : [NomExactÉtiquette]

(Rappel : le champ checkbox s’appelle bien Tu es)

🧪 Étape 5 – Tester

  • Renseigne prénom, nom, email dans le bloc du haut
  • Coche une case
  • Valide le reCAPTCHA
  • Soumets le formulaire
  • Vérifie que :
    • un nouveau contact est bien créé dans FluentCRM
    • il est bien assigné à l’étiquette correspondante


© Mc Lennan Global ISC