Comment ajouter un formulaire de Newsletter Flodesk sur Divi

Flodesk est un superbe outil d’email marketing. Il va te permettre de communiquer via ta newsletter de manière classe et intuitive. Je te le recommande les yeux fermés. Tu peux lire mon article détaillé sur cet outil ici.
Comme l’outil est plutôt récent il n’est pas encore intégré partout. Aussi lorsqu’on veut installer un formulaire de Newsletter Flodesk sur son site, on doit passer par un code à installer.

Rien de trop complexe je te rassure, mais il y a une petite subtilité à connaître notamment pour s’assurer de la bonne mise en page de l’ensemble.

Je te montre tout ça en vidéo !

Voici les étapes à retenir pour installer son formulaire Flodesk sur Divi

Etape #1: On crée son formulaire dans Flodesk

Dans Flodesk on va choisir un formulaire inline et pour pouvoir le mettre à peu près partout où on le souhaite, on va choisir de rendre le background transparent.

On va personnaliser ensuite :

• nos champs de formulaire
• les textes
• les styles des polices
• la couleur du bouton

Quand notre formulaire est prêt on clique sur next et on fait ses choix : double opt-in ou non, message de succès ou redirection etc.

Etape #2: On récupère le header code si c’est la première fois qu’on installe un formulaire flodesk sur son site internet

Ce code on va le coller dans Divi > Intégration > Header code puis on enregistre.
Cette manip n’est à faire qu’une seule fois. Tu n’auras plus à la refaire pour les prochains formulaires Flodesk.

Etape #3 : On récupère et on installe le inline code sur notre page

C’est le code magique qui va faire apparaître notre formulaire sur la page de notre site internet.

Dans Divi on choisit un module “Code”. On colle le code donné par Flodesk dedans et on valide. Notre formulaire est alors installé sur notre site.

Attention : Le module code est quasi invisible côté “visual builder” sur Divi. On voit juste une ligne grise apparaître mais pas le contenu donc il vaut mieux passer par le back office pour le paramétrer.

Etape #4: Subtilité finale

Il y a un padding assez important autour du formulaire qui ajoute un espace au dessus de ce dernier. Il faut donc le réduire. Pour les codeurs on peut récupérer l’ID du formulaire Flodesk et enlever ce padding de 70px. Pour les non codeurs, on peut ajouter une marge négative dans le module code de Divi pour le remonter et faire en sorte de réduire cet écart qui n’est pas très esthétique pour la mise en page.

Voilà ! Ton formulaire est installé !

Si Flodesk t’intéresse tu peux bénéficier d’une année à -50% avec le code Calliframe. Tu ne paieras que 19$ pendant un an puis le tarif sera ensuite de 38$ ce qui reste bien moins cher que la plupart des outils sur le marchés pour un nombre illimité d’abonnées.

---

Envie d’apprendre à construire ton site de A à Z avec Divi ? Inscris toi sur la liste d’attente de Learn Work Grow. Mon programme complet pour t’aider à créer ton site toi même tout en ayant accès à moi en direct via un groupe Slack !