Comment utiliser l’Éditeur de formulaires de Mailjet 

L’Éditeur de formulaires de Mailjet se compose d’un formulaire d’inscription, d’un email de confirmation et d’une page de confirmation. Lorsqu’une personne s’inscrit sur votre site, un email de confirmation contenant un lien vers la page de confirmation lui est envoyé. Une fois que cette personne a confirmé son inscription, son adresse email (et toute autre information recueillie via le formulaire d’inscription) est ajoutée à votre liste de contacts.

C’est très simple ! Il vous suffit de concevoir et de personnaliser le formulaire, l’email et la page de renvoi dans l’Éditeur de formulaires. Mailjet générera le code pour le formulaire d’inscription et s’occupera du flux de travail.

Votre site fonctionne sous WordPress ? Vous pouvez consulter le plugin WordPress de Mailjet qui vous permet de créer un formulaire d’inscription, de gérer vos contacts, de créer des emails et de consulter les statistiques en temps réel directement depuis l'interface d'administration de WordPress.

Créer un formulaire

Dans le menu, sélectionnez « Contacts → Éditeur de formulaires ».

Cliquez ensuite sur le bouton « Créer un nouveau formulaire ».

La page « Créer un nouveau formulaire » affiche les différentes sections de votre formulaire.

Au fur et à mesure que vous remplissez chaque section, la coche correspondante devient verte.

Une fois toutes les sections complétées, vous pouvez alors publier votre nouveau formulaire d’inscription.

1. Titre : donnez un titre à votre formulaire pour l’identifier dans vos rapports. Il s’agit d’un titre interne uniquement visible par vous.
2. Design du formulaire : créez et prévisualisez votre formulaire.
3. Méthode d’opt-in : Choisissez si les contacts s’abonnent via un processus de simple opt-in ou de double opt-in.
4. Détails de l’email : définissez l’objet d’email et les informations relatives à l’expéditeur.
5. Design de l’email : vous pouvez personnaliser l’email (double opt-in) envoyé aux nouveaux abonnés pour leur demander de valider leur inscription à votre newsletter. Cet email comprendra un bouton avec le lien qui redirige les destinataires vers la page de confirmation.
6. Page de confirmation : une fois qu’une personne s’est inscrite à votre formulaire, elle reçoit un email de confirmation contenant un lien pour valider (confirmer) son inscription. Par défaut, ce lien mène à la page de confirmation via Mailjet que vous pouvez concevoir dans l’éditeur de formulaire. Si vous souhaitez utiliser votre propre page de confirmation sur votre site, cliquez sur « Utiliser une page de confirmation externe » et saisissez ensuite l’URL.
7. Liste de contacts : choisissez l’endroit où les données des abonnés seront stockées.

Première étape : cliquez sur « Concevoir un formulaire » pour sélectionner votre modèle de formulaire.

Ensuite, décidez du type de formulaire que vous souhaitez créer :

Voulez-vous un formulaire d’inscription directement intégré dans la page de votre site, ou préférez-vous un formulaire pop-up qui s’ouvre dans une nouvelle fenêtre lorsque vous cliquez sur un bouton ou un lien ?

Formulaire intégré ou contextuel (pop-up)

Formulaires d'abonnement intégrés et formulaires d'abonnement pop-up sont deux façons différentes d'afficher des formulaires pour collecter des informations sur les abonnés, souvent utilisées sur les sites web pour recueillir des adresses email. Voyons les différences et les avantages de chacun.

Formulaire intégré

Description :

• Un formulaire intégré est intégré directement dans le contenu d'une page web. Il reste statique sur la page, ce qui signifie qu'il est toujours visible par les visiteurs sans nécessiter d'interaction.
• En général, les formulaires intégrés sont placés dans des zones à fort trafic comme la barre latérale, le pied de page ou à la fin d'un article de blog.

Avantages :

• Non-intrusif : Comme il fait partie de la page, il n'interrompt pas l'expérience de l'utilisateur. Les visiteurs peuvent interagir avec le formulaire à leur rythme.
• Toujours visible : Il est toujours présent sur la page, ce qui le rend facile à trouver et à utiliser lorsque l'utilisateur se sent prêt à s'inscrire.
• Idéal pour une collecte à long terme : Les formulaires intégrés sont efficaces lorsque vous souhaitez maintenir une visibilité continue, en particulier pour les utilisateurs qui visitent souvent votre site.
• Mieux intégré au contenu : Les formulaires intégrés s'adaptent naturellement au contexte, par exemple à la suite d'un article ou d'une description de produit, incitant les utilisateurs à s'inscrire après avoir consommé le contenu.

Quand l'utiliser :

• Lorsque vous souhaitez une approche subtile pour collecter des emails, sans perturber l'expérience de navigation de l'utilisateur.
• Sur des blogs, des articles, ou des pages produits où les gens pourraient vouloir s'abonner après avoir bénéficié du contenu.

Formulaire contextuel (pop-up)

Description :

• Les formulaires pop-up apparaissent sur la page web sous forme de fenêtre modale après un certain laps de temps, après une action spécifique (comme le défilement ou le clic sur un bouton), ou à l'intention de sortie (quand un visiteur est sur le point de quitter la page).
• Les pop-ups peuvent être visuellement accrocheurs et incluent souvent des incitations telles que des réductions ou des offres spéciales.

Avantages :

• Haute visibilité : Les pop-ups attirent immédiatement l'attention puisqu'ils apparaissent au centre de l'écran. Cela les rend très efficaces pour générer des abonnements.
• Options de timing et de déclenchement flexibles : Vous pouvez définir des pop-ups pour qu'ils apparaissent après une action spécifique, comme le temps passé sur la page, un pourcentage de défilement, ou une intention de sortie (doit être codé de votre côté). Cela vous permet de cibler les utilisateurs qui sont plus susceptibles d'être intéressés.
• Efficace pour la conversion de prospects : En raison de leur caractère intrusif, les pop-ups sont efficaces pour générer des conversions, surtout lorsqu'ils sont accompagnés d'une offre attrayante telle qu'une réduction, un guide gratuit, ou un contenu exclusif.
• Personnalisable en fonction du comportement de l'utilisateur : Ils peuvent être personnalisés en fonction de l'activité de l'utilisateur, ce qui les rend idéaux pour cibler des audiences spécifiques avec des messages sur mesure.

Quand l'utiliser :

• Lorsque vous voulez maximiser rapidement les inscriptions et que vous avez une incitation à offrir, comme une réduction, un eBook ou un guide gratuit.
• Sur les pages où l'attention de l'utilisateur pourrait avoir besoin d'être captée avant qu'il ne parte, comme les pages produits ou les pages de sortie.

Si vous choisissez le type de formulaire contextuel, un bouton supplémentaire nommé « Trigger » apparaîtra sur la page de conception du formulaire, vous donnant la possibilité de modifier le bouton de déclenchement du formulaire contextuel à votre guise (texte, couleurs, etc.).

Pour cet exemple, nous allons sélectionner le formulaire « Pop-up ».

Outils de mise en page de formulaire

Cette partie est le début de la conception, où vous créez la structure de votre formulaire. Dans cette étape, vous pouvez ajouter toutes les colonnes nécessaires qui seront remplies avec du contenu plus tard.

Vous pouvez choisir entre 1 et 4 colonnes consécutives et jouer avec les ratios des blocs de contenu, si nécessaire, en cliquant sur « Voir plus d'options ».

La mise en page peut bien sûr être modifiée ultérieurement à l'aide de la barre d'outils si vous décidez de modifier votre conception.

Outils de contenu

Cette zone couvre tous les éléments de contenu qui apparaîtront dans votre formulaire (texte, images, boutons, partage sur les réseaux sociaux...)

L’ajout de contenu est facile. Cliquez sur le bloc de contenu et faites-le glisser vers la zone souhaitée de votre formulaire. Si vous voulez déplacer ce bloc, il suffit de le glisser et déposer au nouvel emplacement.

Cliquez dans le cadre pour personnaliser l’élément à l’aide de la barre d’outils qui apparaît autour du cadre.

Texte

Grâce à la barre d’outils Texte, vous pouvez facilement formater et personnaliser votre bloc de texte :

• Ajuster la hauteur des lignes
• Aligner le texte
• Définir la couleur de fond
• Modifier les marges
• Formater le texte (police, gras, italique...)
• Sélectionner le type de consentement (explicite ou implicite) 

Image

La barre d’outils Image vous permet de :

• Définir le positionnement horizontal
• Modifier les marges
• Appliquer une bordure (forme) à l’image
• Rendre responsif sur appareils mobiles
• Définir la couleur de fond

Vous pouvez ajouter une image à la section de deux façons :

• Importer votre image ou choisir une image dans votre galerie
• Ajouter un lien vers une image existante en ligne

Pour cet exemple, nous allons importer une image.

Une fois que vous avez cliqué sur le bouton d'importation d’image, vous pouvez glisser et déposer votre fichier image dans la boîte de dialogue, ou cliquer sur le lien « Importer un fichier » pour télécharger votre image. Vous pouvez également télécharger une image à partir d’un lien externe.

Vous pouvez ajouter un texte alternatif à votre image. Si votre image ne peut pas être affichée, le texte alternatif apparaîtra à la place. Privilégiez un texte alternatif court et descriptif, un peu comme un tweet. :)

Une fois que vous avez choisi une image, vous pouvez utiliser l’éditeur d’image pour recadrer, redimensionner, faire pivoter ou retourner votre image. 

Vous pouvez également le faire une fois l’image enregistrée, en cliquant sur l’image que vous souhaitez modifier, puis sur le bouton de l’éditeur d’image.

Séparateur

Vous pouvez ajouter une ligne de séparation entre les sections ou les éléments à l’intérieur d’une même section.

La barre d’outils Séparateur vous permet de :

• Définir la couleur de fond
• Ajuster les marges
• Changer l’apparence de la ligne de séparation (design, couleur, largeur)
• Ajuster l’espacement horizontal et vertical

Bouton

De nombreuses options sont disponibles dans la barre d’outils des boutons, notamment :

• Rayon de bord (permet d’arrondir les angles d’un bouton)
• Couleur, largeur et style du bord du bouton (solide, en pointillés, en tirets...)
• Définir le positionnement horizontal et le remplissage
• Ajouter un lien hypertexte
• Alignement de la police
• Ajuster les marges
• Personnaliser le texte à l’aide des propriétés du contact
• Mise en forme du texte (police, couleur, gras...)

Espacement

Ajouter un espace blanc pour séparer des éléments ou des sections de votre email. L’outil Espacement permet de :

• Définir la hauteur de l’espace vide (en pixels)
• Ajouter un fond de couleur (facultatif)

[haut]

Réseaux sociaux

Insérez dans votre formulaire les icônes de vos réseaux sociaux préférés (Facebook, Twitter, LinkedIn, Instagram, YouTube, Medium, Xing...)

Cliquez sur le bouton « Configurer les liens » pour ouvrir la fenêtre de configuration des réseaux sociaux. Cela vous permet de :

• Sélectionner jusqu’à 10 icônes de médias sociaux
• Modifier les libellés
• Partager la version en ligne de votre newsletter marketing directement sur vos pages de réseaux sociaux ou inclure un lien de redirection vers votre page
• Créer votre propre icône en cliquant sur « Ajouter une icône personnalisée »

Pour afficher et configurer les libellés de texte, cliquez sur « Afficher le texte ».

Cliquez sur les options du bloc (icône de crayon) pour configurer la taille, les formes et la couleur de l’icône ainsi que la couleur de fond et le remplissage de la section.

Bloc HTML

Vous pouvez ajouter du code HTML directement dans votre formulaire. Faites glisser le bloc HTML sur votre formulaire, puis cliquez sur le bouton de la barre d’outils pour ouvrir la fenêtre de l’éditeur HTML et commencez à coder.

Vidéo

Pour ajouter une vidéo à votre formulaire, faites glisser l’outil Vidéo à l’emplacement souhaité. Dans la fenêtre modale, ajoutez l’URL de votre vidéo.

Des images de prévisualisation sont automatiquement générées pour les vidéos YouTube, Vimeo et Dailymotion. Pour toutes les autres vidéos, cliquez sur « Choisir une autre image » pour ajouter votre propre image de prévisualisation.

Une fois la vignette de prévisualisation créée, le bouton de lecture par défaut sera ajouté. Vous pouvez choisir parmi plusieurs modèles de bouton de lecture. (Veuillez noter que l’image du bouton de lecture sera automatiquement redimensionnée en fonction de la taille de la vignette. Plus précisément, elle représentera 50 % du plus petit bord, largeur ou hauteur, de la vignette de prévisualisation.) 

La dernière étape consiste à ajouter une description simple de l’image de prévisualisation dans le champ « Texte alternatif ». Ce texte alternatif s'affichera au cas où votre abonné ne peut pas visualiser l’image. Cliquez ensuite sur « Insérer une vidéo ».

Dans la barre d’outils Vidéo, cliquez sur le bouton « Vidéo » pour modifier votre vidéo à tout moment.

Formulaires

Recueillir des informations supplémentaires (propriétés) auprès de vos abonnés est très facile. Cliquez sur le bloc de formulaire de votre choix et faites-le glisser vers la zone souhaitée de votre formulaire. Si vous voulez déplacer ce bloc, il suffit de le glisser et déposer au nouvel emplacement.

Texte

Le bloc de formulaire « Texte » vous permet d’ajouter une propriété pour les données de chaîne de caractères liée à l’email de l’abonné. La longueur maximale de ce champ est de 255 caractères.

Options disponibles :

• Définir le positionnement horizontal et le remplissage
• Appliquer une bordure (forme) à l’image
• Définir la couleur ou l’image de fond
• Sélectionner une propriété de contact
• Définir le champ comme obligatoire
• Ajouter un texte de remplacement (indices)
• Ajuster la limite maximale de caractères

Zone de texte

Le bloc de formulaire « Zone de texte » vous permet d’ajouter une propriété de données de chaîne de caractères liée à l’email de l’abonné (comme pour le bloc « Texte »), mais cette fois la longueur maximale autorisée du champ est 500 caractères.

Options disponibles :

• Définir le positionnement horizontal et le remplissage
• Appliquer une bordure (forme) à l’image
• Définir la couleur ou l’image de fond
• Sélectionner une propriété de contact
• Définir le champ comme obligatoire
• Ajouter un texte de remplacement (indices)
• Ajuster la limite maximale de caractères

Nombre

Le bloc de formulaire « Numéro » vous permet d’ajouter une propriété de données entière ou décimale liée à l’email de l’abonné. Vous pouvez ajouter une plage personnalisée et des limites d’incrémentation pour ce champ. 

Options disponibles :

• Définir le positionnement horizontal et le remplissage
• Appliquer une bordure (forme) à l’image
• Définir la couleur ou l’image de fond
• Sélectionner une propriété de contact
• Définir le champ comme obligatoire 
• o Ajouter un texte de remplacement (indices)
• Définir les limites personnalisées d’une gamme ou d’une échelle

Bouton Radio

Le bloc de formulaire « Bouton Radio » permet aux utilisateurs de choisir une seule option dans un lot d'options prédéfinies mutuellement exclusives. Lorsqu'un utilisateur sélectionne un bouton radio, tout bouton radio du même groupe sélectionné précédemment sera désélectionné.

Options disponibles :

• Modification des marges 
• Formatage du texte (police, gras, italique...)
• Choix des couleurs d'arrière-plan, de l'intérieur et de la bordure des boutons radio
• Choix du positionnement (espace entre les icônes et le texte)
• Utilisation d'une propriété de contact 
• Paramétrage de champs comme obligatoires
• Définition du texte pour chaque bouton radio

Notez que les options de texte diffèreront en fonction du type des propriétés de données que vous avez choisi (chaîne de caractères, nombre entier, booléen...) 

Web URL

Le bloc de formulaire « URL web » sert à héberger des URL web. Il est le plus souvent utilisé pour héberger l'adresse du site personnel du contact. Le formulaire n'acceptera l'URL que si elle est correctement formatée. Si l'URL n'est pas correctement formatée, le champ passera au rouge, et un message d'erreur s'affichera. 

Options disponibles :

• Choix des bordures et du remplissage
• Choix de la couleur ou de l'image d'arrière-plan
• Paramétrage de champs comme obligatoires
• Ajout de texte de remplacement (guide)
• Ajustement de la limite de caractères

Date 

Le bloc « Date » est utilisé pour enregistrer des dates spécifiques comme des anniversaires depuis le formulaire. Le masque de saisie est automatiquement ajouté au champ, pour que les utilisateurs voient le format de date correct. Vous pouvez gérer ce format depuis le panneau de préférences.

Options disponibles :

• Choix des bordures et du remplissage
• Choix de la couleur ou de l'image d'arrière-plan
• Utilisation d'une propriété de contact
• Paramétrage de champs comme obligatoires
• Préférences de format de date

Menu déroulant

Le bloc « Menu déroulant » permet à vos utilisateurs de sélectionner une option parmi celle prédéfinie dans ledit menu, de la même façon que le bloc « Bouton ». Lorsqu'un utilisateur sélectionne une option dans le menu déroulant, toutes les autres options sont automatiquement désélectionnées.

L'utilisation d'un menu déroulant dans un formulaire d'inscription rend l'expérience plus simple et agréable, en limitant les volumes de textes à entrer, et en offrant un choix clair d'options. Par ailleurs, cela vous garantit que les utilisateurs entrent des informations précises et utiles, pour des inscriptions plus efficaces.

Options disponibles :

• Choix des bordures et du remplissage
• Formatage du texte (police, gras, italique...)
• Choix de la couleur de la flèche de déroulement
• Choix de la couleur ou de l'image d'arrière-plan
• Utilisation d'une propriété de contact
• Paramétrage de champs comme obligatoires
• Choix du texte pour chaque option

Captcha

Protéger vos formulaires d'inscription avec CAPTCHA

Le CAPTCHA permet de protéger vos formulaires d'inscription Mailjet contre le pourriel automatisé et les inscriptions de bots, en ajoutant une étape de vérification supplémentaire (ou en exécutant des vérifications en arrière-plan). Mailjet prend en charge les fournisseurs/types suivants :

• reCAPTCHA v2

• reCAPTCHA v2 (invisible)

• reCAPTCHA v3

• hCaptcha

• Cloudflare Turnstile

Ajouter un CAPTCHA à votre formulaire d'inscription Mailjet

1. Rendez-vous dans Formulaires → ouvrez votre formulaire dans l'Éditeur de formulaires.

2. Dans le panneau de gauche, faites glisser et déposez Captcha dans votre formulaire.

3. Dans la fenêtre de configuration :

   • Sélectionnez un type de Captcha

   • Collez votre Clé de site

   • Collez votre Clé secrète

4. Cliquez sur Créer, puis sur Sauvegarder et Appliquer.

Types de CAPTCHA : quelle est la différence ?

Qu’est-ce que la « Clé de site » et la « Clé secrète » ?

Pour commencer à utiliser CAPTCHA, vous devez créer une paire de clés pour votre site Web dans le tableau de bord du fournisseur choisi :

• Clé de site (publique) : utilisée dans le formulaire pour appeler/afficher le CAPTCHA ou exécuter la vérification en arrière-plan.

• Clé secrète (privée) : utilisée par le serveur pour vérifier le jeton de réponse du captcha auprès du fournisseur.

Comment obtenir votre Clé de site et votre Clé secrète

Sélectionnez le fournisseur de CAPTCHA que vous souhaitez utiliser, puis suivez le guide de configuration officiel pour générer votre Clé de site et votre Clé secrète :

• Google reCAPTCHA (v2 / v3) : https://docs.cloud.google.com/recaptcha/docs/create-key-website

• hCaptcha : https://docs.hcaptcha.com/switch/

• Cloudflare Turnstile : https://developers.cloudflare.com/turnstile/get-started/

Bonnes pratiques et dépannage

Bonnes pratiques

• Gardez votre Clé secrète privée. Traitez-la comme un mot de passe.

• Utilisez le bon type de clé :

  • Les clés reCAPTCHA v2 ne fonctionneront pas pour la v3, et vice versa.

• Enregistrez le ou les domaine(s) corrects dans le tableau de bord du fournisseur.

Problèmes courants

• « La vérification du Captcha a échoué » : clés incorrectes, mauvais type de captcha sélectionné ou non-concordance de domaine.

• Le Captcha n’apparaît pas : les bloqueurs de publicité/outils de confidentialité peuvent bloquer les scripts du fournisseur (en particulier reCAPTCHA).

• Fonctionne dans un environnement mais pas dans un autre : les clés ont été enregistrées uniquement pour le domaine de production, et non pour celui de test/pré-production.

Sections

Dupliquer une section

Cliquez dans la section pour la mettre en surbrillance, puis cliquez sur l’icône de duplication sur le côté droit de l’écran.

Supprimer une section

Pour supprimer une section du corps de votre formulaire, cliquez dans la section, puis cliquez sur l’icône de corbeille et confirmez la suppression.

Vous pouvez également supprimer rapidement une section ou un élément, en le faisant glisser vers la zone des outils de contenu.

Paramètres de style global

En quelques clics, vous pouvez facilement formater les styles de texte de tous vos paragraphes, en-têtes et hyperliens dans votre formulaire.

Pour accéder aux styles de texte globaux, cliquez sur l’icône d’engrenage dans le coin supérieur gauche (onglet « Paramètres »).

Comme son nom l’indique, l’option « Style global » permet de définir la famille de polices et la couleur pour tous les éléments répertoriés (En-têtes, Paragraphes, Liens).

Vous pouvez ensuite personnaliser davantage le style de chacun des éléments En-tête, Paragraphe et Lien.

Enfin, si vous souhaitez avoir un style de texte différent pour certains en-tête ou paragraphe de votre formulaire, il vous suffit de personnaliser le texte avec la barre d’outils d’une section.

Options de logo

En utilisant l'éditeur de formulaires, un logo « Powered by Mailjet » sera ajouté au pied du modèle.

Vous pouvez choisir entre 5 couleurs différentes de logo dans la section « Options de logo » de l'onglet « Paramètres ». Notez que le logo n'est ni déplaçable ni redimensionnable.

Si vous avez souscrit un abonnement payant, vous pouvez supprimer le logo en sélectionnant l'option « Pas de logo ». 

Modification des messages de réussite et d'erreur

Lorsqu’une personne envoie votre formulaire, elle est redirigée vers :

• une page Succès si le formulaire a été envoyé correctement

• une page Erreur si quelque chose se passe mal (par exemple, un problème technique)

Les contacts doivent toujours cliquer sur le lien de confirmation dans l’e-mail avant d’être entièrement inscrits (double opt-in).

Par défaut, Mailjet fournit des messages de Succès et d’Erreur prêts à l’emploi, vous n’avez donc rien à configurer. Cependant, vous pouvez facilement remplacer ce texte par votre propre contenu et votre propre design.

1. Ouvrez votre formulaire dans l’éditeur.

2. Utilisez les onglets en haut à droite pour passer d’une vue à l’autre :

   • Formulaire – le formulaire d’inscription lui-même

   • Succès – le message de confirmation affiché après un envoi réussi

   • Erreur – le message affiché si l’envoi échoue

3. Sélectionnez Succès ou Erreur, puis modifiez le contenu sur le canevas comme pour n’importe quelle autre page (texte, images, mise en page, etc.).

Types de consentement et modification du texte

Vous pouvez choisir entre deux types de consentement : explicite et implicite. Cliquez dans le cadre du texte de consentement pour afficher la barre d'outils, puis sur l'icône des boutons du curseur. Sélectionnez ensuite le type de consentement que vous voulez utiliser, et si besoin, modifiez le texte pour qu'il corresponde à vos besoins.

Consentement explicite (recommandé)

Le consentement explicite a lieu lorsque l'on présente en amont la demande d'autorisation de collecte de données personnelles à un individu, avant même que cette collecte ne soit effective. Cette méthode est la meilleure garantie de s'assurer que les abonnés acceptent de recevoir vos communications.

Consentement implicite

Avec le consentement implicite, vos contacts n'ont pas de case de validation à cocher. Ce type de consentement signifie qu'une fois le formulaire envoyé, les abonnés acceptent de recevoir les différentes communications que vous allez leur envoyer.

Sauvegarder un modèle

Créer un modèle vous permet de gagner du temps. En créant un modèle de votre design actuel, vous pouvez facilement le réutiliser et l'adapter, sans avoir à recommencer de zéro.

Lorsque vous concevez votre formulaire, vous pouvez choisir de le sauvegarder en tant que nouveau modèle, ou de remplacer et écraser un modèle existant. À partir de la page de création de formulaire, il vous suffit de cliquer sur le menu déroulant en haut à droite et de sélectionner « Sauvegarder en tant que modèle ».

Cette action vous fera gagner du temps sur le long terme tout en vous garantissant une uniformité entre les différents formulaires que vous utiliserez, tout en facilitant la collaboration avec vos collègues travaillant sur ces formulaires.

Pour accéder à vos modèles sauvegardés lors de la création d'un formulaire, cliquez sur « Concevoir un formulaire », puis sélectionnez l'un de vos modèles.

Modifier, dupliquer ou supprimer un modèle

Pour modifier, dupliquer ou supprimer un modèle de formulaire, rendez-vous dans la page de gestion des modèles de formulaires puis cliquez sur l'icône d'engrenage.

Différentes options d'actions s'afficheront. Sélectionnez celle que vous souhaitez effectuer, et le tour est joué.

Attention : faites toujours preuve de prudence lorsque vous supprimez un modèle de formulaire. Cette action est permanente, et le formulaire ne peut pas être restauré.

Intégration du formulaire à votre site

La dernière étape consiste à intégrer le code HTML du formulaire d’inscription. Il suffit de copier-coller le code sur votre site.

Cette présentation des différents éléments du code devrait vous aider à mieux l'intégrer à votre site.

Intégrez votre formulaire à WordPress

Vous pouvez ajouter le code de votre formulaire d'inscription directement dans un article ou une page, ou l'ajouter via le widget de WordPress.

Dans ce premier exemple, nous allons créer une nouvelle page et ajouter un formulaire d'inscription.

Dans le menu, sélectionnez Pages → Ajouter une nouvelle page

Donnez un nom à cette page, puis sélectionnez le bloc « HTML personnalisé » et collez le code du formulaire d'inscription (depuis votre compte Mailjet).

Cliquez sur « Publier » et le tour est joué. Votre widget d'inscription apparaîtra dans la nouvelle page.

Vous pouvez également ajouter votre formulaire d'inscription via les widgets de WordPress.

Dans le menu principal, cliquez sur Apparence → Widgets

Dans la page Widgets, vous verrez tous vos widgets. Pour ajouter un nouveau widget (en l'occurrence, ici, votre formulaire), cliquer sur l'icône « + » dans le coin en haut à gauche, puis faites glisser le block « HTML personnalisé » depuis le menu du widget.

Collez le code de votre formulaire d'inscription (depuis votre compte Mailjet) dans la section « Contenu ». Cliquez ensuite sur « Mettre à jour ».

Et voilà. Il ne vous reste plus qu'à vous rendre sur votre site pour voir votre nouveau formulaire d'inscription intégré à la page !

Prévisualiser le formulaire

Vous pouvez désormais prévisualiser votre formulaire de deux manières différentes :

👉 Prévisualisation rapide depuis la page des formulaires

Dans la liste de vos formulaires, cliquez sur l’ icône d’engrenage ⚙️ à côté du formulaire que vous souhaitez prévisualiser, puis sélectionnez Prévisualiser.
Le formulaire s’ouvrira instantanément, vous permettant d’en vérifier l’apparence sans entrer dans l’éditeur.

👉 Prévisualisation depuis l’éditeur de formulaire

Si vous êtes déjà en train de modifier votre formulaire, vous pouvez également le prévisualiser directement depuis l’éditeur.
Dans le coin supérieur droit, cliquez sur Aperçu pour ouvrir une vue interactive de votre formulaire.
Cette option est utile lorsque vous effectuez des ajustements de conception ou de contenu en direct.

Vous pouvez prévisualiser votre formulaire sur différents appareils, tels que les mobiles et les ordinateurs de bureau. 

Afficher le code du formulaire

À partir de la page de gestion des formulaires, cliquez sur l’icône d’engrenage du formulaire dont vous voulez afficher le code et sélectionnez « Voir le code ».

Cette présentation des différents éléments du code devrait vous aider à mieux l'intégrer à votre site.

Modifier un formulaire

Dans la page de gestion des formulaires, cliquez sur l’icône d’engrenage et sélectionnez « Modifier ».

Veuillez noter qu’après chaque modification apportée au formulaire d’inscription, vous devrez recharger le code HTML sur votre site, afin que les modifications puissent être prises en compte.

Afficher l’utilisation du formulaire

Depuis la page de gestion des formulaires, cliquez sur l’icône engrenage ⚙️ à côté de votre formulaire et sélectionnez Voir les utilisations. Cela ouvre le tableau Emplacements du formulaire, qui répertorie toutes les landing pages où le formulaire est actuellement placé.

Archiver, supprimer ou restaurer un formulaire

Pour archiver un seul formulaire, cliquez sur l’icône d’engrenage de la page de gestion des formulaires, puis sélectionnez « Archiver ».

Pour archiver plusieurs formulaires simultanément, cochez la case de chaque formulaire puis cliquez sur le bouton « Archiver ».

Si vous souhaitez définitivement supprimer un formulaire qui a déjà été archivé, rendez-vous dans l'onglet « Archivés » de la page de gestion des formulaires, puis cliquez sur l'icône d'engrenage, et sélectionnez « Supprimer ».

Faites toujours preuve de prudence lorsque vous supprimez un formulaire ou toute autre donnée stockée sur votre compte Mailjet. Une fois supprimées, ces données ne peuvent pas être restaurées.

Si vous avez archivé un formulaire et souhaitez le restaurer, vous pouvez le faire à partir de l'icône d'engrenage, en cliquant sur « Restaurer ».

Résolution de problèmes

Si vous avez ajouté un formulaire d’inscription sur votre site et qu’il a soudain cessé de fonctionner, vérifiez que la liste de contacts associée au formulaire n’a pas été modifiée ou supprimée.  

[haut]