Concevez et personnalisez votre formulaire Activecampagne

Avec Activecampagne, 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 :

  1. Cliquez sur "Site web" > "Formulaires" dans le menu de gauche. 
  2. Modifiez ou créez un nouveau formulaire. 
  3. 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.

    Form_builder_style_tab.png

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.

Mise en page

Cliquez sur l'une des options pour choisir une disposition horizontale ou verticale de votre formulaire.

Form_builder_layout.png

Style du formulaire

La case "Style du formulaire" 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 de personnalisation du style de formulaire Description
Contexte Changez la couleur de fond de votre formulaire ou rendez-le transparent.

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. 
Frontière Utilisez cette option pour ajouter une bordure à votre formulaire. 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 formulaire arrondis ou carrés. Le rayon du coin est défini comme une valeur en pixels. 
Largeur Utilisez cette option pour ajuster la largeur de votre formulaire. La largeur est définie comme une valeur en pixels. 

 

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 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 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.

modal_form_layout_options.png

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 à boîte flottante

Avec le formulaire à boîte 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.

Boîte_flottante_mise en page.png

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 "Soumettre

Vous pouvez modifier le texte du bouton "Soumettre" pour n'importe quel formulaire.

  1. À partir de la page des formulaires, , cliquez sur le bouton "Modifier" pour le formulaire que vous souhaitez mettre à jour.
  2. Cliquez sur le bouton "Soumettre" dans le générateur de formulaire.
  3. Le menu de droite affiche l'label du bouton et un champ. Tapez le texte que vous souhaitez utiliser pour le bouton.

    Bouton_texte.png

Le texte du nouveau bouton sera enregistré automatiquement.

Personnalisation avancée

Chaque type de formulaire dans Activecampagne 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é :

  1. Dans le Form Builder, , cliquez sur l'onglet "Style".
  2. Faites défiler la page jusqu'à ce que vous voyiez la case "Custom CSS".
  3. Cliquez sur le bouton "Inspecteur" puis cliquez sur l'élément de formulaire que vous souhaitez modifier.
  4. 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 Activecampagne

Si vous êtes sur un plan Plus, Professionnel ou Enterprise, vous pouvez supprimer la marque Activecampagne de votre formulaire. Les utilisateurs de la formule Lite Plan ne sont pas en mesure de désactiver la marque.

Désactiver la marque Activecampagne

  1. Dans le Form Builder, , cliquez sur l'onglet "Style".
  2. Faites défiler le site jusqu'à ce que vous voyiez la case "Divers".
  3. Cliquez sur le commutateur à bascule de la marque AC pour le mettre sur la position "Off".

Ce paramètre sera sauvegardé automatiquement.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 5 sur 38

Have more questions? Submit a request

Start free trial