Concevez et personnalisez votre formulaire

Créé par Sarah Ferry, Modifié le  Mer, 19 Avr., 2023 à 1:25 H par  Sarah Ferry

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 formulaireDescription
ContexteChangez 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 policeChangez la couleur du texte qui apparaît sur votre formulaire.
PoliceModifiez le type de police du formulaire pour qu'il corresponde à votre marque. 
FrontièreUtilisez 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 coinUtilisez 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. 
LargeurUtilisez 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 boutonsDescription
ContexteChangez la couleur de fond du bouton d'envoi. 
TexteChangez la couleur du texte du bouton. 
FrontièreUtilisez 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 coinUtilisez 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érieureLa 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 modalDescription
ContexteCliquez sur le sélecteur de couleurs pour changer la couleur de votre formulaire ou ajouter une image de fond.
ContexteCliquez sur le sélecteur de couleurs pour changer la couleur de votre formulaire ou ajouter une image de fond.
PoliceModifiez le type de police du formulaire pour qu'il corresponde à votre marque. 
LargeurUtilisez cette option pour ajuster la largeur de votre formulaire. La largeur est définie comme une valeur en pixels.
Marge intérieureLa 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 coinUtilisez 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.
OmbreUtilisez 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éesDescription
ContexteCliquez sur le sélecteur de couleur pour changer la couleur des champs de saisie.
Couleur de la policeCliquez sur le sélecteur de couleur pour changer la couleur du texte du champ de saisie. 
Rayon du coinUtilisez 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 boutonsDescription
ContexteChangez la couleur de fond du bouton d'envoi. 
TexteChangez la couleur du texte du bouton. 
FrontièreUtilisez 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 coinUtilisez 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érieureUtilisez 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îteDescription
ContexteCliquez sur le sélecteur de couleurs pour changer la couleur de votre formulaire ou ajouter une image de fond.
Couleur de la policeChangez la couleur du texte qui apparaît sur votre formulaire.
PoliceModifiez le type de police du formulaire pour qu'il corresponde à votre marque. 
LargeurUtilisez cette option pour ajuster la largeur de votre formulaire. La largeur est définie comme une valeur en pixels. 
Marge intérieureLa 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 coinUtilisez 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. 
OmbreUtilisez 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éesDescription
ContexteCliquez sur le sélecteur de couleur pour changer la couleur des champs de saisie.
Couleur de la policeCliquez sur le sélecteur de couleur pour changer la couleur du texte du champ de saisie. 
Rayon du coinUtilisez 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 boutonsDescription
ContexteChangez la couleur de fond du bouton d'envoi. 
TexteChangez la couleur du texte du bouton. 
FrontièreUtilisez 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 coinUtilisez 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érieureUtilisez 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 barresDescription
ContexteChangez 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 policeChangez la couleur du texte qui apparaît sur votre formulaire.
PoliceModifiez 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 boutonsDescription
ContexteChangez la couleur de fond du bouton d'envoi. 
TexteChangez la couleur du texte du bouton. 
FrontièreUtilisez 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 coinUtilisez 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érieureUtilisez 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 a-t-il été utile ?

C'est super !

Merci pour votre commentaire

Désolé ! Nous n'avons pas pu vous être utile

Merci pour votre commentaire

Dites-nous comment nous pouvons améliorer cet article !

Sélectionner au moins l'une des raisons

Commentaires envoyés

Nous apprécions vos efforts et nous allons corriger l'article