Personnaliser les blocs Formulaire

Personnalisez les formulaires de contact de votre site en fonction de votre marque.

Dernière mise à jour le 10 septembre 2024

Utilisez les styles du site pour modifier l’apparence des blocs Formulaire sur votre site. Vous pouvez modifier les polices et les couleurs du texte et des boutons du formulaire, ainsi que le style et la forme des autres éléments de vos formulaires, tels que les champs de texte et les cases à cocher.

Tous les blocs Formulaire de votre site respectent ces paramètres de style, ce qui en fait un excellent moyen pour donner à vos formulaires un style unique tout en préservant leur cohérence.

Accéder à cette fonctionnalité

La majeure partie de ce guide se concentre sur les options de style des formulaires disponibles uniquement sur les sites utilisant la version 7.1. Si votre site utilise la version 7.0, consultez Personnaliser les blocs Formulaire dans la version 7.0.

Regarder une vidéo

Ouvrir les paramètres de style d’un bloc Formulaire

Pour ouvrir les paramètres de style des blocs Formulaire :

  1. Ouvrez le panneau Pages et cliquez sur une page contenant un bloc Formulaire afin de consulter les modifications apportées à l’aperçu du site à mesure de leur application.
  2. Ouvrez le panneau Styles du site, puis cliquez sur >  à côté de Formulaires.
  3. Cliquez sur Changer pour choisir un pack de formulaires prédéfini.
  4. Cliquez sur Effets pour personnaliser les animations des champs de formulaire et du bouton d’envoi. 
  5. Cliquez sur Options du champ pour personnaliser le style des cases à cocher, des boutons Radio et des champs Enquête.
  6. Cliquez sur Polices pour personnaliser le style du texte des blocs Formulaire.
  7. Cliquez sur Couleurs pour personnaliser le style des couleurs des blocs Formulaire.
  8. Cliquez sur Espacement du formulaire pour personnaliser la quantité d’espaces blancs dans votre formulaire.
  9. Une fois que vous avez effectué vos modifications, cliquez sur Enregistrer.

N’oubliez pas que ces paramètres de style sont appliqués à tous les blocs Formulaire de votre site. Il n’est pas possible d’attribuer différents paramètres de style à différents blocs Formulaire, à l’exception des couleurs, qui peuvent varier d’un bloc Formulaire à l’autre s’ils se trouvent dans des sections avec des thèmes de couleurs différents.

D’autres types de formulaires, tels que les blocs Newsletter, les formulaires des pages de couverture et les formulaires Produit, ont leurs propres paramètres de style. Pour en savoir plus sur les autres types de formulaires, consultez l’article Ajouter des formulaires à votre site.

Choisir et personnaliser un pack de formulaires

Les packs de formulaires sont des styles de formulaires prédéfinis que vous pouvez choisir comme point de départ pour votre style. Gardez en tête que si vous modifiez vos paramètres après avoir sélectionné un pack de formulaires, puis que vous passez à un autre pack de formulaires, les modifications apportées au pack de formulaires initial ne seront pas sauvegardées.

Chaque pack de formulaires inclut des paramètres prédéfinis pour les options de style qui apparaissent dans votre panneau Formulaires :

  • Forme du champ : définit la forme des champs de formulaire. Choisissez parmi les coins suivants : Carrés, Rectangle arrondi, Pilule ou Personnalisés.
  • Remplissage du champ : activez cette option pour ajouter une couleur d’arrière-plan au champ du formulaire. Lorsque cette option est désactivée, les champs du formulaire correspondent à la couleur du bloc Formulaire.
  • Bordure : choisissez Aucune pour aucune bordure ou Toutes pour que la bordure apparaisse sur tous les côtés. En fonction de vos autres paramètres, Aucune peut ne pas être disponible. Si votre forme est définie sur Carré, vous pouvez également choisir En bas, pour une bordure qui s’étend uniquement le long de la partie inférieure du champ, pour souligner par exemple.
  • Épaisseur de la bordure : définissez l’épaisseur des lignes de bordure autour des champs de formulaire. Cette option n’apparaîtra pas si vous avez sélectionné Aucune pour votre bordure.
  • Marge intérieure : choisissez le niveau de marge intérieure qui apparaît autour du texte dans le champ. Choisissez S, M ou L, ou cliquez sur ... pour définir une marge intérieure personnalisée.
  • Options des champs : personnalisez l’apparence des éléments Case à cocher, Radio et Enquête pour certains champs.

Après avoir sélectionné un pack de formulaires, vous pouvez personnaliser davantage ces paramètres de style dans le panneau Formulaires.

Modifier les polices

Dans le panneau de style Formulaires, cliquez sur Police pour modifier la police de chaque champ :

  • Titre : texte au-dessus de chaque champ
  • Épaisseur des bords : texte que vos visiteurs saisissent dans chaque champ
  • Description : texte se trouvant sous chaque champ
  • Légende : texte situé sous la description, comme « Prénom » et « Nom de famille » dans les champs relatifs au nom
  • Espace réservé : texte que vous pouvez afficher dans chaque champ
  • Option : texte pour les options sélectionnables dans les champs de case à cocher, Radio et Enquête
  • Titre du sondage : texte de la question du sondage
  • Menu déroulant : texte du menu déroulant

Le texte du bouton Envoyer suit les styles des boutons principaux, secondaires ou tertiaires de votre site, en fonction de ce que vous sélectionnez dans l’onglet Design du bloc Formulaire.

Message post-envoi

Si vous ajoutez un message post-envoi, le texte suit les options de style suivantes dans les styles généraux de votre site :

  • Police : paramètres Paragraphe dans le panneau Polices
  • Taille : curseur Paragraphe 2 dans la section Paragraphes du panneau Polices
  • Couleur : couleur de Paragraphe (moyen) dans le thème de section choisi ou de Paragraphe (moyen) sur arrière-plan si vous avez activé un arrière-plan sur le bloc

Modifier les couleurs

Par défaut, les blocs Formulaire utilisent les couleurs de la palette de votre site. Dans le panneau Style du formulaire, cliquez sur Couleurs, puis activez l’option Utiliser les couleurs du thème pour personnaliser manuellement les couleurs des éléments de vos blocs Formulaire en fonction du thème de couleur de leur section.

Si le réglage inclut « En arrière-plan », il ne s’appliquera qu’aux blocs Formulaire dont la couleur d’arrière-plan est activée, ou aux blocs Formulaire qui s’ouvrent avec un effet lightbox. Les réglages sans « En arrière-plan » s’appliquent aux blocs Formulaire sans couleur d’arrière-plan ou sans effet lightbox activé.

Personnaliser les blocs Formulaire dans la version 7.0

Dans la version 7.0, le style des blocs Formulaire suivent généralement le corps du texte et les ajustements apportés aux boutons de votre template, mais les options varient en fonction de votre template, et certains intitulés de champs de formulaire ont une taille fixe. Par exemple, il n’est pas possible de modifier la taille des intitulés « Prénom » et « Nom de famille » qui apparaissent sous les champs « Nom ». Il se peut également qu’il ne soit pas possible de modifier la couleur du texte d’espace réservé dans les champs.

Le formulaire lightbox a un style fixe. Il n’est pas possible de modifier la plupart des paramètres de police ou de couleur. Pour en savoir plus sur la personnalisation du style de votre site, consultez l’article Réaliser des changements de style.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.