Créer et intégrer des formulaires d’inscription

Published: 16 juillet 2026 · Last updated: 21 juillet 2026 · By Marcus Biel

Un formulaire intégré est placé directement dans une page existante de votre site web. Il reste intégré au contenu environnant au lieu de s’afficher au-dessus de celui-ci.

Les formulaires intégrés conviennent parfaitement aux articles de blog, aux pages de destination de votre propre site web, aux sections de newsletter, aux barres latérales et aux pieds de page. L’emplacement où vous ajoutez le code du formulaire détermine l’endroit où celui-ci apparaîtra.

Ce guide couvre les étapes propres aux formulaires intégrés. Les fonctions communes de modification visuelle sont expliquées dans le guide principal du créateur de formulaires d’inscription.

Créer un formulaire intégré

Ouvrez « Signup Forms », cliquez sur « Create Form » et sélectionnez « Embedded Form ». Saisissez un nom interne clair, puis accédez au créateur.

Vous pouvez également modifier un formulaire existant en cliquant sur son nom dans la vue d’ensemble des formulaires d’inscription.

Le nom interne n’est pas automatiquement affiché aux visiteurs. Nommez le formulaire en fonction de son emplacement ou de son objectif, par exemple « Newsletter de la page d’accueil », « Pied de page du blog » ou « Mises à jour produit ».

Choisir un modèle de départ

Les formulaires intégrés proposent un formulaire vierge, un formulaire standard et quatre modèles conçus :

• Note apaisée
• Bandeau coupon
• Éditorial sombre
• Bleu minimaliste

Choisissez le design qui correspond le mieux à l’espace et au ton du site web où le formulaire apparaîtra. Chaque modèle de départ peut être entièrement modifié après sa sélection.

Concevoir le formulaire intégré

Utilisez « Layout » et « Content » pour organiser le formulaire. Un formulaire intégré peut contenir le formulaire d’inscription ainsi que du texte d’accompagnement, des images, des listes, des boutons, des liens sociaux, un compteur d’abonnés, des espaces ou des séparateurs.

Pour une barre latérale ou un pied de page étroit, une disposition à une seule colonne est généralement plus facile à lire. Dans une section de page plus large, une disposition à deux colonnes peut placer une courte explication ou une image à côté des champs.

Sélectionnez le bloc du formulaire d’inscription pour choisir les champs d’abonné, les champs obligatoires, les libellés, les tags masqués, un indicateur de progression et un compteur d’abonnés facultatif. Vous pouvez ensuite définir séparément le style du conteneur du formulaire, des champs et du bouton d’envoi.

Ouvrez « Page settings » pour modifier l’arrière-plan et les paramètres de design généraux du canevas du formulaire intégré. Tenez compte du site web environnant. Un arrière-plan transparent ou simple s’intègre souvent plus naturellement, tandis qu’un arrière-plan contrasté permet de mieux faire ressortir l’offre d’inscription.

Les instructions complètes concernant les dispositions, le contenu, les calques, les champs, les tags, la typographie et l’apparence sont disponibles dans Utiliser le créateur de formulaires d’inscription.

Configurer le parcours d’inscription

Utilisez le contrôle du parcours d’inscription dans l’en-tête du créateur pour vérifier ce qui se passe après l’envoi, quel e-mail de double opt-in est envoyé et ce que voit le visiteur après la confirmation.

Vous pouvez sélectionner un parcours existant, modifier le parcours attribué ou en créer un nouveau. Si le parcours sélectionné est partagé avec d’autres formulaires, n’oubliez pas que sa modification peut également les affecter.

Prévisualiser et enregistrer

Cliquez sur « Preview » pour examiner le formulaire complet avant de le placer sur votre site web. Vérifiez l’ordre des champs, les libellés, l’espace réservé aux erreurs, le texte du bouton et la quantité de contenu d’accompagnement.

Cliquez sur « Save changes » pour enregistrer la version actuelle. Revenez à la vue d’ensemble des formulaires d’inscription lorsque vous êtes prêt à l’intégrer.

Activer le formulaire

Le formulaire intégré doit être actif avant que son code public puisse être utilisé.

Si le formulaire est inactif, ouvrez son menu d’actions à trois points dans la vue d’ensemble des formulaires d’inscription et choisissez « Activate ». Un formulaire actif affiche l’action « Show Code Snippet ».

Désactivez le formulaire lorsqu’il ne doit plus être disponible sur votre site web. La désactivation met le formulaire hors ligne sans supprimer son design ni les données de ses rapports précédents.

Copier le code JavaScript

Cliquez sur « Show Code Snippet » et ouvrez l’onglet « JavaScript ». Maildroppa fournit un court script contenant l’ID unique du formulaire.

Le code suit cette structure :

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Copiez l’intégralité du code sans modifier l’adresse du script ni l’ID du formulaire.

L’option JavaScript charge le formulaire actuellement enregistré via le moteur d’exécution des formulaires Maildroppa. Lorsque vous modifiez et enregistrez ultérieurement ce même formulaire dans Maildroppa, l’extrait existant continue de pointer vers cet ID de formulaire. Il n’est pas nécessaire de créer un nouveau formulaire simplement pour modifier son texte ou son design.

Ajouter le formulaire à votre site web

Collez le script à l’emplacement de la page où le formulaire intégré doit apparaître.

Les étapes exactes dépendent de votre système de site web. Dans un créateur de pages ou un système de gestion de contenu, utilisez un bloc qui accepte le code HTML ou de script personnalisé. Sur un site web personnalisé, ajoutez le script au modèle ou au code de page concerné.

Certains éditeurs de sites web suppriment les balises de script pour des raisons de sécurité. Si le formulaire n’apparaît pas après la publication de la page, vérifiez d’abord que l’éditeur a conservé l’intégralité du script Maildroppa. Vous devrez peut-être utiliser la zone de code personnalisé dédiée du système ou demander de l’aide à la personne qui gère le site web.

Ne collez pas plusieurs fois le même extrait de formulaire intégré sur une page, sauf si vous souhaitez intentionnellement afficher le même formulaire à plusieurs emplacements et avez testé cette configuration.

Utiliser l’onglet HTML

L’onglet « HTML » fournit le balisage généré du formulaire. Cette option est destinée aux intégrations personnalisées dans lesquelles vous souhaitez travailler directement avec le HTML généré.

Copiez l’intégralité du balisage si vous choisissez cette méthode. Comme une intégration HTML personnalisée peut être affectée par les styles et l’implémentation de votre site web, testez attentivement ses champs, sa validation, son envoi et son parcours de confirmation.

Pour un formulaire géré normalement par Maildroppa, l’extrait JavaScript constitue l’intégration la plus courte et charge la configuration publique actuelle du formulaire à partir de son ID.

Tester le formulaire intégré

Publiez ou prévisualisez la page du site web qui contient le code. Testez ensuite le formulaire comme le ferait un visiteur :

1. Vérifiez que le formulaire apparaît au bon emplacement.
2. Consultez la page sur un écran large et un écran étroit.
3. Remplissez chaque champ obligatoire.
4. Envoyez le formulaire et examinez la réponse.
5. Ouvrez l’e-mail de double opt-in.
6. Confirmez l’adresse et examinez la réponse finale.
7. Vérifiez que l’abonné et les éventuels tags masqués apparaissent correctement dans Maildroppa.

Si le formulaire est plus large que le conteneur de votre site web, ajustez sa largeur, la disposition des colonnes, les marges internes ou les paramètres d’empilement mobile dans le créateur. Évitez de résoudre les problèmes de mise en page en modifiant le code Maildroppa généré.

Mettre à jour un formulaire intégré

Ouvrez le même formulaire dans Maildroppa, effectuez les modifications, prévisualisez-les, puis cliquez sur « Save changes ». L’extrait JavaScript présent sur votre site web continue d’utiliser le même ID de formulaire et charge la configuration publique enregistrée.

Si le formulaire doit être supprimé temporairement, désactivez-le depuis la vue d’ensemble des formulaires d’inscription. S’il n’est plus nécessaire, supprimez également l’extrait du site web afin que la page ne contienne pas de code inutilisé.