Cet article vous montre comment personnaliser vos formulaires ActiveCampaign. Vous apprendrez à modifier les couleurs, les polices et les mises en page pour les adapter à votre marque. Il couvre également les options avancées telles que le CSS personnalisé et la suppression de la marque ActiveCampaign.
À noter
L'utilisation du HTML et du CSS avec votre formulaire est recommandée aux utilisateurs avancés ; vous devez maîtriser ces langages. Si vous n'êtes pas familier avec le HTML ou le CSS, nous vous recommandons de travailler avec un membre de votre équipe qui maîtrise ces langages, ou vous pouvez faire appel à l'un de nos Consultants certifiés.
Notre équipe d'assistance n'est pas en mesure de vous aider à créer ou à résoudre les problèmes liés au code HTML ou CSS que vous ajoutez à votre formulaire.
Regarder une vidéo
Regardez cette vidéo pour apprendre à créer et personnaliser votre formulaire.
Accéder aux options de personnalisation du formulaire
Les options de personnalisation d'un formulaire se trouvent sous l'onglet « Style » dans le générateur de formulaires.
Pour accéder à cet onglet pour n'importe quel formulaire :
- Cliquez sur Site web > Formulaires dans le menu de gauche.
- Cliquez sur le bouton « Modifier le formulaire » ou créez un nouveau formulaire.
- Le générateur de formulaires se chargera. Toutes les options d'édition et de style apparaîtront dans le volet de droite. Cliquez sur l'onglet « Style » situé dans le volet de droite.
Choisir une mise en page
Vous pouvez choisir une mise en page pour les formulaires intégrés, modaux et à boîte flottante. Les options de mise en page ne sont pas disponibles pour les formulaires à barre flottante.
Options de mise en page du formulaire intégré
Deux options s'offrent à vous pour votre formulaire intégré : une disposition horizontale ou verticale :
Options de mise en page des formulaires modaux et en boîte flottante
Quatre options s'offrent à vous pour votre formulaire modal ou flottant : aucune image, image à gauche, image en haut ou image au centre :
Personnaliser un formulaire
Les options de style sous « Mise en page » vous permettent de personnaliser l'apparence du formulaire pour les visiteurs de votre site web. Vous trouverez ci-dessous des tableaux présentant toutes les options de personnalisation :
Général
| Options de personnalisation générales | Description |
|---|---|
| Largeur maximale | Utilisez cette option pour ajuster la largeur de votre formulaire. La largeur est définie en pixels. |
| Rembourrage | Le rembourrage est l'espace autour de votre formulaire. Vous pouvez utiliser cette option pour augmenter ou diminuer le rembourrage. Cette valeur est définie en pixels. |
| Arrière-plan du formulaire | Cliquez sur le sélecteur de couleurs pour modifier la couleur de votre formulaire ou ajouter une image d'arrière-plan. |
| Arrière-plan de la page | Cliquez sur le sélecteur de couleurs pour modifier la couleur de votre formulaire ou ajouter une image d'arrière-plan. |
| Couleur des bordures | Cliquez sur le sélecteur de couleur pour modifier la couleur des bordures du formulaire. |
| Bordure et contour |
Utilisez cette option pour ajouter une bordure à votre bouton. Les bordures sont définies en pixels. Vous pouvez augmenter ou diminuer la bordure, modifier sa couleur et choisir parmi quatre types de bordure différents : Pleine, Pointillée, Tiretée et Double. Cliquez sur Personnalisé pour choisir une largeur et un style différents pour chaque bordure du formulaire. |
| Bordures et coins | Utilisez cette option pour rendre les coins de votre formulaire arrondis ou carrés. Le rayon des coins est défini en pixels. |
Entrées
Les champs de saisie désignent les éléments que les visiteurs du site web utiliseront pour vous soumettre leurs informations personnelles. Les options de personnalisation des champs comprennent :
| Options de personnalisation des entrées | Description |
|---|---|
| Arrière-plan du champ | Cliquez sur le sélecteur de couleurs pour modifier la couleur des champs de saisie. |
| Bordure de champ | Cliquez sur le sélecteur de couleur pour modifier la couleur des bordures du champ. |
| Coins | Utilisez cette option pour rendre les coins des champs de saisie arrondis ou carrés. Le rayon des coins est défini en pixels. |
Champs
La zone « Champs » vous permet de personnaliser l'apparence des champs de votre formulaire. Les options de personnalisation des champs comprennent :
| Options de personnalisation des champs | Description |
|---|---|
| Couleur de police de l'en-tête | Cliquez sur le sélecteur de couleur pour modifier la couleur de la police de l'en-tête. |
| Style du texte d'en-tête | Sélectionnez un style de police, une taille pour l'en-tête, et indiquez si vous souhaitez que le texte soit en gras, en italique ou souligné. |
| Couleur du paragraphe | Cliquez sur le sélecteur de couleur pour modifier la couleur de la police du paragraphe. |
| Style de texte de paragraphe | Sélectionnez un style de police de paragraphe, une taille, et indiquez si vous souhaitez que le texte soit en gras, en italique ou souligné. |
Bouton
La zone « Bouton » vous permet de personnaliser l'apparence du bouton d'envoi de votre formulaire. Les options de personnalisation des boutons comprennent :
| Options de personnalisation des boutons | Description |
|---|---|
| Arrière-plan de la mise en page | Modifiez la couleur d'arrière-plan du bouton d'envoi. |
| Texte de mise en page | Modifiez la couleur du texte du bouton. |
| Rembourrage de mise en page | Utilisez cette option pour ajuster le rembourrage de votre bouton. Le rembourrage est défini en pixels. |
| Largeur de la mise en page | Modifier la largeur du bouton d'envoi. |
| Couleur des bordures | Cliquez sur le sélecteur de couleur pour modifier la couleur de la bordure du bouton. |
| Bordure et contour |
Utilisez cette option pour ajouter une bordure à votre bouton. Les bordures sont définies en pixels. Vous pouvez augmenter ou diminuer la bordure, modifier sa couleur et choisir parmi quatre types de bordure différents : Pleine, Pointillée, Tiretée et Double. Cliquez sur Personnalisé pour choisir une largeur et un style différents pour chaque bordure du formulaire. |
| Borders Corner | Utilisez cette option pour rendre les coins de votre bouton arrondis ou carrés. Le rayon des coins est défini en pixels. |
Modifier le texte du bouton « Envoyer »
Vous pouvez modifier le texte du bouton « Envoyer » pour n'importe quel formulaire.
- Depuis la page Formulaires, cliquez sur le bouton « Modifier le design » pour le formulaire que vous souhaitez mettre à jour.
- Cliquez sur le bouton « Envoyer » dans le générateur de formulaires.
- Le menu de droite affiche le libellé du bouton et un champ. Saisissez le texte que vous souhaitez utiliser pour le bouton.
Le nouveau texte du bouton sera enregistré automatiquement.
Personnalisation avancée du style
Chaque type de formulaire dans ActiveCampaign dispose d'une option CSS personnalisée. Cette fonctionnalité s'adresse aux utilisateurs avancés qui maîtrisent le CSS et sont à l'aise avec son utilisation.
Veuillez noter que le CSS implique une mise en œuvre avancée qui peut s'avérer complexe pour les personnes peu familières avec le codage. L'équipe Expérience client ne sera pas en mesure de résoudre les problèmes de codage liés au CSS. Nous vous recommandons donc de contacter un développeur pour obtenir de l'aide concernant la mise en œuvre.
L'option CSS personnalisé se trouve sous l'onglet « Style » de chaque formulaire et peut être utilisée pour apporter des modifications supplémentaires à n'importe quel élément du formulaire. Par exemple, vous pouvez utiliser cette option pour :
- Ajuster la largeur et la hauteur des champs de saisie
- Ajuster la largeur et la hauteur du bouton d'envoi
- Ajuster la taille de la police
- Ajustez le type de police pour les éléments individuels. Par exemple, vous pouvez utiliser cette option pour que la police du texte du bouton soit différente du reste du formulaire
Pour utiliser l'option CSS personnalisé :
- Depuis le générateur de formulaires, en haut à droite, cliquez sur le bouton "Éditeur de code" pour l'activer.
- Un éditeur HTML apparaîtra en bas du Form Builder. Saisissez le CSS dans cette zone.
Le CSS que vous ajoutez au formulaire sera enregistré automatiquement.
Désactiver la marque ActiveCampaign
Si vous disposez d'un abonnement Plus, Professional ou Enterprise, vous pouvez supprimer la marque ActiveCampaign de votre formulaire. Les utilisateurs du plan Starter ne peuvent pas désactiver le branding.
Pour désactiver la marque ActiveCampaign :
- Dans le Générateur de formulaires, cliquez sur l'onglet « Style ».
- Faites défiler jusqu'en bas de la section « Général ».
- Cliquez sur le bouton AC branding pour le mettre en position « Désactivé ».
Ce paramètre sera enregistré automatiquement.
En savoir plus sur la marque ActiveCampaign sur les formulaires.
Options de personnalisation supplémentaires
Les options de personnalisation sous « Options » vous permettent de définir quand les formulaires Modal, Boîte flottante et Flottant apparaissent sur votre site web, comment les messages s'affichent après la soumission du formulaire, les actions du formulaire et les paramètres du formulaire. Cette section explique comment utiliser les options de personnalisation dans l'onglet « Options ».
Si vous avez besoin de modifier la taille d'un formulaire sur un appareil mobile, vous pouvez le faire avec CSS et des requêtes média.
Veuillez noter que le CSS implique une mise en œuvre avancée qui peut s'avérer complexe pour les personnes peu familières avec le codage. L'équipe Customer Experience ne sera pas en mesure de résoudre les problèmes de codage liés au CSS. Nous vous recommandons donc de contacter un développeur pour obtenir de l'aide concernant la mise en œuvre.
Personnalisation supplémentaire pour les formulaires Modal, Floating Box et Floating Bar
Ces types de formulaires offrent des options de personnalisation supplémentaires qui déterminent quand et comment le formulaire apparaît aux visiteurs du site. Ces paramètres se trouvent sous « Options » > « Effet contextuel » dans le menu de droite du générateur de formulaires.
| Type de formulaire | Options |
| Modal |
|
| Boîte flottante |
|
| Barre flottante |
|
Ressources supplémentaires pour l'onglet « Options » :
- En savoir plus sur « À la soumission »
- En savoir plus sur « Action de formulaire »
- En savoir plus sur les « Paramètres du formulaire »