Avec Activecampaign, vous pouvez personnaliser les formulaires en fonction des couleurs de votre marque, ajouter des images, modifier la police de caractères, etc.
Regarder une vidéo
Regardez cette vidéo pour apprendre à créer et à personnaliser votre formulaire.
Options de personnalisation du formulaire d'accès
Les options de personnalisation d'un formulaire se trouvent sous l'onglet "Style" dans le générateur de formulaire.
Pour accéder à cet onglet pour tout formulaire :
- Cliquez sur "Site web" "Formulaires" dans le menu de gauche.
- Modifier ou créer un nouveau formulaire.
- Le constructeur 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.
Personnaliser un formulaire en ligne
Avec le formulaire en ligne, vous pouvez choisir une mise en page et personnaliser le style du formulaire et du bouton d'envoi.
Général
La case "Style du bar" vous permet de personnaliser la façon dont le formulaire apparaîtra aux visiteurs de votre site web. Le tableau ci-dessous présente toutes les options de style de formulaire.
| Options générales de personnalisation | Description |
|---|---|
| Mise en page | Cliquez sur l’une des options pour choisir une disposition horizontale ou verticale de votre formulaire. |
| Largeur maximale | Utilisez cette option pour ajuster la largeur de votre formulaire. La largeur est définie comme une valeur en pixels. |
| Contexte | Changez la couleur de fond de votre formulaire ou rendez-le transparent. Ce type de formulaire ne prend pas en charge les images d'arrière-plan. |
| Frontières | Utilisez cette option pour ajouter une bordure à votre formulaire. Les frontières sont définies comme une valeur de pixel. Vous pouvez augmenter ou réduire la bordure, modifier la couleur de la bordure et choisir parmi quatre types de bordure : Solide, Pointillé, Tiret et Double. |
| Les coins | Utilisez cette option pour rendre les coins de votre formulaire arrondis ou carrés. Le rayon du coin est défini comme une valeur en pixels. |
| Montrer l'image de marque d'ActiveCampaign | Cette option permet d'activer ou de désactiver l'image de marque d'ActiveCampaign sur le site . |
Texte
La zone "Texte" vous permet de personnaliser l'aspect du texte de votre formulaire. Le tableau ci-dessous présente toutes les options de personnalisation du texte.
| Options de personnalisation du texte | Description |
| Police | Vous pouvez choisir parmi environ 1 500 polices de caractères pour votre formulaire afin qu'il corresponde à votre marque. La police sélectionnée ici s'appliquera au bloc d'en-tête, au bloc de code HTML, aux champs et au bouton. |
| En-tête |
L'en-tête apparaîtra initialement en haut de votre formulaire. Vous pouvez ajuster les éléments suivants pour ce bloc :
*La possibilité de mettre du texte en gras dépend de la police sélectionnée. |
| Paragraphe (code HTML) |
Ce bloc apparaît initialement sous l'en-tête et fait office de "paragraphe" dans votre formulaire. Vous pouvez ajuster les éléments suivants pour ce bloc :
*La possibilité de mettre du texte en gras dépend de la police sélectionnée. |
Bouton
La case "Bouton" vous permet de personnaliser l'apparence du bouton d'envoi de votre formulaire. Vous trouverez ci-dessous un tableau affichant toutes les options de personnalisation des boutons.
| Options de personnalisation des boutons | Description |
|---|---|
| Contexte | Modifier la couleur d'arrière-plan du bouton "Envoyer". |
| Texte | Changez la couleur du texte du bouton. |
| Frontière | Utilisez cette option pour ajouter une bordure à votre bouton. Les frontières sont définies comme une valeur de pixel. Vous pouvez augmenter ou réduire la bordure, modifier la couleur de la bordure et choisir parmi quatre types de bordure : Solide, Pointillé, Tiret et Double. |
| Rayon du coin | Utilisez cette option pour rendre les coins de votre bouton arrondis ou carrés. Le rayon du coin est défini comme une valeur en pixels. |
| Marge intérieure | La marge intérieure est l'espace autour de votre bouton. Vous pouvez utiliser cette option pour augmenter ou diminuer la marge intérieure. Il s'agit d'une valeur en pixels. |
Notez que vous ne pourrez pas régler la hauteur ou la largeur du bouton ici. Vous devrez utiliser un CSS personnalisé pour effectuer ces ajustements.
Personnaliser un formulaire pop-up modal
Avec le formulaire modal pop-up, vous pouvez choisir une mise en page et personnaliser le style du formulaire, des champs de saisie et du bouton d'envoi.
Mise en page
Vous pouvez choisir parmi quatre options pour votre formulaire : pas d'image, image à gauche, image en haut ou image au milieu.
Style modal
La case "Style modal" vous permet de personnaliser la façon dont le formulaire apparaîtra aux visiteurs de votre site web. Vous trouverez ci-dessous un tableau affichant toutes les options de personnalisation de le modal
| Options de personnalisation du style modal | Description |
|---|---|
| Contexte | Cliquez sur le sélecteur de couleurs pour changer la couleur de votre formulaire ou ajouter une image de fond. |
| Contexte | Cliquez sur le sélecteur de couleurs pour changer la couleur de votre formulaire ou ajouter une image de fond. |
| Police | Modifiez le type de police du formulaire pour qu'il corresponde à votre marque. |
| Largeur | Utilisez cette option pour ajuster la largeur de votre formulaire. La largeur est définie comme une valeur en pixels. |
| Marge intérieure | La marge intérieure est l'espace qui entoure votre formulaire. Vous pouvez utiliser cette option pour augmenter ou diminuer la marge intérieure. Il s'agit d'une valeur en pixels. |
| Rayon du coin | Utilisez cette option pour rendre les coins de votre formulaire arrondis ou carrés. Le rayon du coin est défini comme une valeur en pixels. |
| Ombre | Utilisez ceci pour ajouter une ombre à votre formulaire. Cela l'aidera à se démarquer. Vous pouvez choisir parmi les options suivantes : Aucun, Léger, Moyen, et Lourd. |
Entrées
Les entrées se rapportent aux champs que les visiteurs du site web utiliseront pour vous soumettre leurs informations personnelles. Les options de personnalisation des entrées comprennent :
| Options de personnalisation des entrées | Description |
|---|---|
| Contexte | Cliquez sur le sélecteur de couleur pour changer la couleur des champs de saisie. |
| Couleur de la police | Cliquez sur le sélecteur de couleur pour changer la couleur du texte du champ de saisie. |
| Rayon du coin | Utilisez cette option pour rendre les coins des champs de saisie arrondis ou carrés. Le rayon du coin est défini comme une valeur en pixels. |
Bouton
La case "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 |
|---|---|
| Contexte | Changez la couleur de fond du bouton d'envoi. |
| Texte | Changez la couleur du texte du bouton. |
| Frontière | Utilisez cette option pour ajouter une bordure à votre bouton. Les frontières sont définies comme une valeur de pixel. Vous pouvez augmenter ou diminuer la bordure, modifier la couleur de la bordure et choisir parmi quatre types de bordure différents : Solide, pointillé, pointillé et double. |
| Rayon du coin | Utilisez cette option pour rendre les coins de votre bouton arrondis ou carrés. Le rayon du coin est défini comme une valeur en pixels. |
| Marge intérieure | Utilisez cette option pour ajuster la marge intérieure de votre bouton. La marge intérieure est définie comme une valeur de pixel. |
Notez que vous ne pourrez pas régler la hauteur ou la largeur du bouton ici. Vous devrez utiliser un CSS personnalisé pour effectuer ces ajustements.
Personnaliser un formulaire à case flottante
Avec le formulaire à case flottante, vous pouvez choisir une mise en page et personnaliser le style du formulaire, des champs de saisie et du bouton d'envoi.
Mise en page
Vous pouvez choisir parmi quatre options pour votre formulaire : pas d'image, image à gauche, image en haut ou image au milieu.
Style de la boîte
La case "Style du formulaire" vous permet de personnaliser la façon dont le formulaire apparaîtra aux visiteurs de votre site web. Les options de personnalisation du style de formulaire comprennent :
| Options de personnalisation du style de la boîte | Description |
|---|---|
| Contexte | Cliquez sur le sélecteur de couleurs pour changer la couleur de votre formulaire ou ajouter une image de fond. |
| Couleur de la police | Changez la couleur du texte qui apparaît sur votre formulaire. |
| Police | Modifiez le type de police du formulaire pour qu'il corresponde à votre marque. |
| Largeur | Utilisez cette option pour ajuster la largeur de votre formulaire. La largeur est définie comme une valeur en pixels. |
| Marge intérieure | La marge intérieure est l'espace qui entoure votre formulaire. Vous pouvez utiliser cette option pour augmenter ou diminuer la marge intérieure. Il s'agit d'une valeur en pixels. |
| Rayon du coin | Utilisez cette option pour rendre les coins de votre formulaire arrondis ou carrés. Le rayon du coin est défini comme une valeur en pixels. |
| Ombre | Utilisez ceci pour ajouter une ombre à votre formulaire. Cela l'aidera à se démarquer. Vous pouvez choisir parmi les options suivantes : Aucun, Léger, Moyen, et Lourd. |
Entrées
Les entrées se rapportent aux champs que les visiteurs du site web utiliseront pour vous soumettre leurs informations personnelles. Les options de personnalisation des entrées comprennent :
| Options de personnalisation des entrées | Description |
|---|---|
| Contexte | Cliquez sur le sélecteur de couleur pour changer la couleur des champs de saisie. |
| Couleur de la police | Cliquez sur le sélecteur de couleur pour changer la couleur du texte du champ de saisie. |
| Rayon du coin | Utilisez cette option pour rendre les coins des champs de saisie arrondis ou carrés. Le rayon du coin est défini comme une valeur en pixels. |
Bouton
La case "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 |
|---|---|
| Contexte | Changez la couleur de fond du bouton d'envoi. |
| Texte | Changez la couleur du texte du bouton. |
| Frontière | Utilisez cette option pour ajouter une bordure à votre bouton. Les frontières sont définies comme une valeur de pixel. Vous pouvez augmenter ou diminuer la bordure, modifier la couleur de la bordure et choisir parmi quatre types de bordure différents : Solide, pointillé, pointillé et double. |
| Rayon du coin | Utilisez cette option pour rendre les coins de votre bouton arrondis ou carrés. Le rayon du coin est défini comme une valeur en pixels. |
| Marge intérieure | Utilisez cette option pour ajuster la marge intérieure de votre bouton. La marge intérieure est définie comme une valeur de pixel. |
Notez que vous ne pourrez pas régler la hauteur ou la largeur du bouton ici. Vous devrez utiliser un CSS personnalisé pour effectuer ces ajustements.
Personnaliser un formulaire de barre flottante
Avec le formulaire à barre flottante, vous pouvez personnaliser le style du formulaire et le bouton d'envoi. Les options de mise en page ne sont pas disponibles avec ce type de formulaire.
Style du bar
La case "Style du bar" vous permet de personnaliser la façon dont le formulaire apparaîtra aux visiteurs de votre site web. Les options de personnalisation du style de bar comprennent :
| Options de personnalisation du style des barres | Description |
|---|---|
| Contexte | Changez la couleur de fond de votre formulaire. Les images de fond ne sont pas prises en charge par ce type de formulaire. |
| Couleur de la police | Changez la couleur du texte qui apparaît sur votre formulaire. |
| Police | Modifiez le type de police du formulaire pour qu'il corresponde à votre marque. |
Bouton
La case "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 |
|---|---|
| Contexte | Changez la couleur de fond du bouton d'envoi. |
| Texte | Changez la couleur du texte du bouton. |
| Frontière | Utilisez cette option pour ajouter une bordure à votre bouton. Les frontières sont définies comme une valeur de pixel. Vous pouvez augmenter ou diminuer la bordure, modifier la couleur de la bordure et choisir parmi quatre types de bordure différents : Solide, pointillé, pointillé et double. |
| Rayon du coin | Utilisez cette option pour rendre les coins de votre bouton arrondis ou carrés. Le rayon du coin est défini comme une valeur en pixels. |
| Marge intérieure | Utilisez cette option pour ajuster la marge intérieure de votre bouton. La marge intérieure est définie comme une valeur de pixel. |
Notez que vous ne pourrez pas régler la hauteur ou la largeur du bouton ici. Vous devrez utiliser un CSS personnalisé pour effectuer ces ajustements.
Modifier le texte du bouton "Envoyer"
Vous pouvez modifier le texte du bouton "Envoyer" pour n'importe quel formulaire.
- À partir de la page des formulaires, , cliquez sur le bouton "Modifier" pour le formulaire que vous souhaitez mettre à jour.
- Cliquez sur le bouton "Envoyer" dans le générateur de formulaire.
- Le menu de droite affiche l'étiquette du bouton et un champ. Tapez le texte que vous souhaitez utiliser pour le bouton.
Le texte du nouveau bouton sera enregistré automatiquement.
Personnalisation avancée
Chaque type de formulaire dans ActiveCampaign dispose d'une option CSS personnalisée. Il s'adresse aux utilisateurs avancés qui connaissent le CSS et sont à l'aise avec son utilisation. L'option CSS personnalisée se trouve sous l'onglet "Style" de chaque formulaire et peut être utilisée pour ajouter des modifications supplémentaires à tout élément du formulaire. Par exemple, vous pouvez utiliser cette option pour :
- Ajuster la largeur et la hauteur des champs de saisie
- Ajustez la largeur et la hauteur du bouton d'envoi
- Ajuster la taille de la police
- Ajustez le type de police pour les éléments singuliers. Par exemple, vous pouvez l'utiliser pour que la police du texte du bouton soit différente du reste du formulaire
Si vous souhaitez en savoir plus sur l'utilisation de CSS, consultez le tutoriel CSS de w3schools.com.
Pour utiliser l'option CSS personnalisé :
- Dans le Form Builder, , cliquez sur l'onglet "Style".
- Faites défiler la page jusqu'à ce que vous voyiez la case "Custom CSS".
- Cliquez sur le bouton "Inspecteur" puis cliquez sur l'élément de formulaire que vous souhaitez modifier.
- Une fois que vous avez cliqué sur l'élément que vous souhaitez personnaliser, il apparaîtra dans la zone CSS personnalisé. Tapez le CSS dans cette case.
Le CSS que vous ajoutez à l'élément de formulaire sera enregistré automatiquement.
Désactiver la marque ActiveCampaign
Si vous êtes sur un plan Plus, Professionnel ou Enterprise, vous pouvez supprimer la marque ActiveCampaign de votre formulaire. Les utilisateurs de la formule Lite Plan ne sont pas en mesure de désactiver la marque.
Désactiver la marque ActiveCampaign
- Dans le constructeur de formulaire, , cliquez sur l'onglet "Style".
- Faites défiler jusqu'au bas de la section "Général".
- Cliquez sur le commutateur à bascule de la marque AC pour le mettre sur la position "Off".
Ce paramètre sera sauvegardé automatiquement.