Personnaliser le code d'intégration du formulaire opt-in

Lorsque vous intégrez un formulaire opt-in Flexmail sur votre site web, il est livré avec un style par défaut. Si ce style ne correspond pas au design de votre site web, vous pouvez le remplacer en utilisant du CSS. Cet article explique comment fonctionne le code d'intégration et comment appliquer des styles personnalisés en toute sécurité.

Comment fonctionne le code d'intégration

Lorsque vous générez le code d'intégration d'un formulaire opt-in dans Flexmail, vous recevez trois parties :

• Un extrait JavaScript qui transmet vos styles personnalisés au formulaire une fois celui-ci chargé.
• Une iframe qui charge le formulaire lui-même depuis https://return.flexmail.eu.
• Un bloc <style id="flx-styles">   vide dans lequel vous pouvez ajouter votre propre CSS.

Vous collez les trois parties dans le code HTML de votre site web à l'endroit où vous souhaitez que le formulaire apparaisse. Lorsque la page se charge, l'iframe récupère le formulaire, et le JavaScript ajoute le contenu de votre bloc de style au formulaire afin que votre style soit appliqué.

Pour obtenir le code d'intégration :

1. Allez dans Formulaires > Formulaires opt-in.
2. Ouvrez le formulaire que vous souhaitez intégrer.
3. Cliquez sur le bouton Intégrer votre formulaire.
4. Copiez le code d'intégration depuis la fenêtre contextuelle.

Ajouter du CSS personnalisé à votre site web

Les styles personnalisés se placent à l'intérieur du bloc <style id="flx-styles">  . Le bloc est vide par défaut et contient des espaces réservés commentés pour les sélecteurs les plus courants :

• #flxml_frm > table > tbody > tr > td:nth-child(1)   — les libellés des champs.
• #flxml_frm input[type="text"]   — les champs de saisie de texte.
• #flxml_frm button[type="submit"]   — le bouton d'envoi.

Vous pouvez l'étendre avec des sélecteurs pour d'autres éléments, tels que #flxml_frm select   pour les menus déroulants, #flxml_frm input[type="checkbox"]   pour les cases à cocher, ou #flxml_frm input[type="number"]   pour les champs numériques. Préfixez toujours vos sélecteurs avec #flxml_frm   afin que vos styles ne s'appliquent qu'au formulaire.

Voici un petit exemple qui rend le formulaire transparent, adaptatif sur mobile et donne au bouton d'envoi un aspect personnalisé :

<style id="flx-styles">
    /* == Rendre le formulaire transparent ========================== */
    body.fm_body, #flxml_frm table{
        background: transparent;
    }
    /* == Faire en sorte que le formulaire remplisse son conteneur == */
    #flxml_frm, #flxml_frm table, #flxml_frm tr, #flxml_frm td {
        width: 100% !important;
    }
    #flxml_frm td {
        display: block;
    }
    #flxml_frm input[type="text"],
    #flxml_frm input[type="number"],
    #flxml_frm select {
        width: 100% !important;
        height: 2rem !important;
        box-sizing: border-box;
    }
    /* == Bouton d'envoi personnalisé ===============================*/
    #flxml_frm button[type="submit"] {
        background: #E8472B;
        color: #ffffff;
        border: none;
        border-radius: 4px !important;
        padding: 12px 24px;
    }
</style>

Le marqueur !important   est parfois nécessaire car les styles par défaut du formulaire utilisent des valeurs de largeur en ligne. À partir de là, vous pouvez construire le reste : ajustez les polices, les couleurs, le style des libellés, etc. en ajoutant d'autres règles avec le même préfixe #flxml_frm  .

Ce que vous pouvez modifier

Vous pouvez styliser en toute sécurité toute propriété visuelle des éléments du formulaire : couleurs, polices, espacement, bordures, rayon de bordure, largeur et arrière-plan.

Ce que vous ne devez pas modifier

Ne modifiez ni ne supprimez les éléments suivants du code d'intégration :

• L'URL src de l'iframe. Elle charge le formulaire depuis les serveurs de Flexmail. La modifier cassera le formulaire.
• L'id de l'iframe (iframe_flxml_form) et l'id du bloc <style> (flx-styles). L'extrait JavaScript les utilise pour trouver et transmettre vos styles au formulaire.
• L'extrait JavaScript lui-même. Sans lui, vos styles personnalisés ne sont pas appliqués au formulaire et celui-ci reste invisible après le chargement.

Tester après la personnalisation

Après avoir ajouté votre CSS personnalisé, effectuez toujours un test en direct avant la publication :

• Soumettez le formulaire avec une adresse e-mail réelle.
• Vérifiez que le contact apparaît dans votre compte Flexmail sous Contacts > Tous les contacts.
• Vérifiez que l'e-mail de confirmation arrive et que le lien de confirmation fonctionne.
• Vérifiez le formulaire sur mobile. Certaines modifications CSS qui semblent correctes sur ordinateur peuvent casser la mise en page mobile. Testez sur au moins une taille d'écran mobile.

Erreurs courantes à éviter

Utiliser des sélecteurs trop larges qui affectent d'autres éléments de la page

Les sélecteurs tels que « input » ou « button » sans le préfixe « #flxml_frm  » appliqueront vos styles à tous les inputs et boutons de la page. Limitez toujours la portée de vos sélecteurs avec « #flxml_frm  » pour contenir leur impact.

Définir une largeur fixe qui se casse sur mobile

Une largeur fixe en pixels sur le formulaire ne se redimensionnera pas sur les écrans plus petits. Utilisez max-width ou une valeur en pourcentage pour que le formulaire reste adaptatif.

Prochaines étapes

• Voir « Premiers pas avec les formulaires d'opt-in » pour une présentation complète de la création et de la configuration d'un formulaire opt-in.
• Voir « Conseils pour un formulaire opt-in efficace » pour des conseils sur le texte, le placement et les incitations qui améliorent la conversion.