Le bloc Optin Form vous permet de collecter les noms et adresses e-mail des visiteurs intéressés par les mises à jour, actualités et offres de votre site. Ajoutez-le à n'importe quelle page d'accueil ou modèle SeedProd pour commencer immédiatement à constituer votre liste d'abonnés.
Le bloc comprend des champs personnalisables pour le nom et l'adresse e-mail, un bouton d'envoi avec contrôle total du style, une action de réussite pour afficher un message ou rediriger après l'envoi, et une intégration native avec les plateformes d'e-mail marketing tierces les plus populaires.
Ajouter le bloc « Formulaire d'inscription » à vos pages
Suivez ces étapes pour ajouter un bloc Optin Form à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc Formulaire d'inscription dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Formulaire d'inscription pour ouvrir ses paramètres. L'onglet Contenu est organisé en trois sections : Champs, Bouton Envoyer et Action réussie.
Domaines :
- Champs E-mail / Nom / Confirmation d'inscription : chaque champ est répertorié sous forme de ligne déplaçable. Cliquez sur l'icône des paramètres d'une ligne de champ pour développer ses paramètres individuels. Vous pouvez personnaliser le libellé (le texte affiché au-dessus du champ de saisie) et la largeur (la largeur du champ en pourcentage du formulaire, de 10 à 100 %). Le champ Nom dispose également d'un bouton Obligatoire pour le rendre obligatoire. Utilisez l'icône œil pour afficher ou masquer les champs Nom et Confirmation d'inscription dans votre formulaire. Le champ Confirmation d'inscription est masqué par défaut. Activez-le pour ajouter une case à cocher de consentement de type RGPD que les visiteurs doivent cocher avant de soumettre le formulaire.
- Taille : définissez la taille globale des champs de saisie — Petite, Moyenne ou Grande.
- Alignement : définissez l'alignement horizontal de l'ensemble du formulaire : à gauche, au centre ou à droite.
Bouton « Soumettre » :
- Texte du bouton : Personnalisez le libellé affiché sur le bouton « Soumettre ».
- Largeur : définissez la largeur du bouton en pourcentage du formulaire, entre 10 et 100 %.
- Taille de la police : définissez la taille de la police du texte du bouton entre 0 et 72 pixels.
- Couleur d'arrière-plan : définissez la couleur d'arrière-plan du bouton « Soumettre ».
Action réussie :
- Action à entreprendre : choisissez ce qui se passe après l'envoi réussi d'un formulaire — Afficher un message affiche un message de remerciement personnalisé à la place du formulaire, ou Rediriger redirige le visiteur vers l'URL de votre choix.
- Message : Entrez le message de remerciement à afficher après la soumission (disponible lorsque l'option Afficher le message est sélectionnée). Prend en charge le formatage de texte enrichi.
- URL de redirection : entrez l'URL vers laquelle rediriger le visiteur après la soumission (disponible lorsque l'option Redirection est sélectionnée).
Étape 2a : Choisissez un style de modèle
Dans l'onglet Modèles, vous pouvez choisir parmi des styles de champs de saisie prédéfinis pour modifier rapidement l'apparence visuelle de votre formulaire d'inscription. Cliquez sur n'importe quel modèle pour l'appliquer instantanément.
- Styles disponibles : choisissez parmi 7 modèles différents : clair, sans bordure, bordure large, gris, foncé, bordure inférieure et champ de saisie transparent.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez affiner la typographie, les couleurs des champs, le style des boutons et l'espacement de votre bloc Formulaire d'inscription.
Formulaire :
- Famille de polices : choisissez la famille de polices et la variante de police appliquées à toutes les étiquettes de formulaire et au texte des champs.
- Rayon de bordure : définissez le rayon des coins de tous les champs de saisie entre 0 et 100 px pour contrôler leur aspect arrondi ou carré.
- Supprimer le remplissage en ligne : cochez cette case pour supprimer le remplissage interne par défaut entre les champs du formulaire et l'enveloppe du bloc, ce qui permet au formulaire d'être aligné avec son conteneur.
Domaines :
- Couleur d'arrière-plan du champ : définit la couleur d'arrière-plan des champs de saisie.
- Couleur du texte du champ : définissez la couleur du texte saisi dans les champs de saisie.
- Couleur de la bordure du champ : définit la couleur de la bordure des champs de saisie.
- Largeur de la bordure du champ : définissez indépendamment la largeur de la bordure pour chaque côté des champs de saisie (haut, droite, bas, gauche).
Bouton :
- Style du bouton : choisissez le style visuel du bouton de soumission : plat, fantôme, 2D ou vintage.
- Icône avant le texte : ajoutez une icône Font Awesome qui apparaîtra avant le texte du libellé du bouton.
- Icône après le texte : ajoutez une icône Font Awesome qui apparaîtra après le texte du libellé du bouton.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Formulaire d'inscription (haut, droite, bas, gauche). Cela détermine l'espace qui apparaîtra entre le formulaire et les éléments environnants sur la page.
- Remplissage : ajustez l'espacement intérieur dans votre bloc Formulaire d'inscription (haut, droite, bas, gauche). Cela crée un espace entre le formulaire et les bords du bloc.
Attributs :
- Identifiant CSS : affiche l'identifiant unique généré automatiquement pour votre bloc Optin Form. Cet identifiant est créé automatiquement par SeedProd pour la personnalisation du style ou le ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez n'importe quel attribut HTML à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur.
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc Formulaire d'inscription sur les écrans de bureau.
- Masquer sur tablette : masque le bloc « Formulaire d'inscription » sur les tablettes.
- Masquer sur mobile : masquez le bloc « Formulaire d'inscription » sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bloc Optin Form apparaît à l'écran. Les options disponibles incluent Rebond, Fondu entrant, Zoom avant, Rotation et bien d'autres encore.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Formulaire d'inscription et de personnaliser son apparence, veillez à enregistrer votre travail.
Soumissions de formulaires Optin
Par défaut, toutes les soumissions de formulaires d'inscription sont enregistrées dans la section Abonnés sous SeedProd > Abonnés. Vous pouvez consulter, exporter et gérer les données collectées sur vos abonnés à partir de cette section.
Remarque : par défaut, le bloc Formulaire d'inscription n'envoie pas de notifications par e-mail lorsqu'un nouvel abonné soumet le formulaire. Si vous souhaitez recevoir des notifications, pensez à connecter une intégration d'e-mail marketing (voir ci-dessous).
Connectez le formulaire d'inscription avec les intégrations d'email marketing
Vous pouvez intégrer le bloc Optin Form à des plateformes tierces de marketing par e-mail dans la section Connect de vos paramètres de page SeedProd. Cela permet d'ajouter automatiquement les nouveaux abonnés à vos listes de diffusion dans des services tels que Mailchimp, AWeber, ConvertKit, ActiveCampaign, etc.
Remarque : les intégrations d'e-mail marketing sont disponibles dans les formules Pro, Plus et Elite. Consultez nos intégrations d'e-mail disponibles pour obtenir la liste complète des plateformes prises en charge.
Vous avez ajouté avec succès un bloc Formulaire d'inscription à votre page ! Utilisez-le pour commencer à collecter des abonnés, améliorer l'engagement sur votre site web et constituer une audience à laquelle vous pouvez vous adresser directement. Testez différentes dispositions de champs, styles de boutons et modèles prédéfinis pour créer un formulaire qui correspond à votre marque et convertit les visiteurs en abonnés.