Résumé IA
Voulez-vous changer l'apparence des boutons de vos formulaires ?
WPForms vous permet de personnaliser les styles des boutons à l'aide des contrôles de style intégrés dans l'éditeur de blocs ou via CSS.
Personnalisez les styles des boutons de formulaire maintenant !
Dans cet article, nous vous montrerons comment personnaliser les styles des boutons en utilisant les deux méthodes. Voyez celle qui vous convient le mieux !
Dans cet article
Comment personnaliser les styles des boutons dans WPForms avec CSS
Avant de commencer, vous devrez installer et activer le plugin WPForms sur votre site. De plus, vous devrez créer au moins un formulaire. Consultez notre tutoriel sur la création d'un formulaire de contact simple à titre d'exemple pour commencer.
Option 1 : Personnalisation sur l'ensemble du site (CSS)
La personnalisation des styles de vos boutons de formulaire est assez facile une fois que vous avez le code CSS que vous souhaitez utiliser. Si vous le souhaitez, vous pouvez simplement copier et coller l'un des exemples ci-dessous ou même les combiner.
L'extrait de code doit être collé dans votre section CSS additionnel dans le panneau Personnaliser. Cela peut être fait en naviguant vers Apparence » Personnaliser » CSS additionnel. Cliquez ensuite sur Enregistrer et publier, et vous avez terminé.
Une méthode encore plus simple consiste à utiliser un plugin comme WPCode, qui vous permet d'ajouter différents types d'extraits de code à votre site. Dans ce cas, il vous suffira de coller le code CSS pour le style du bouton en cliquant sur le bouton Utiliser l'extrait.
Examinons maintenant quelques façons différentes de styliser vos boutons de formulaire avec CSS.
Comment créer un bouton avec un arrière-plan transparent
Voulez-vous créer un arrière-plan transparent pour votre bouton WPForms ? Les boutons à arrière-plan transparent, également connus sous le nom de boutons fantômes, sont une tendance populaire en matière de conception Web.
Ils sont généralement utilisés dans les formulaires et les appels à l'action placés sur des images d'arrière-plan larges. Jetez un œil à quelques exemples de boutons transparents sur différents sites Web.
Exemple n° 1 : Bouton de formulaire transparent
Exemple n° 2 : Bouton d'appel à l'action transparent
Pour créer un bouton à arrière-plan transparent, il vous suffit de copier l'extrait de code ci-dessous dans votre section CSS additionnel .
div.wpforms-container-full .wpforms-form button[type=submit] {
color: #0099CC; /* Text color */
background-color: transparent; /* Remove background color */
border: 2px solid #0099CC; /* Border thickness, line style, and color */
border-radius: 5px; /* Adds curve to border corners */
text-transform: uppercase; /* Make letters uppercase */
}
Voici à quoi ressemblera le bouton :
Comment créer un bouton avec un dégradé de couleurs
Contrairement aux boutons fantômes, l'utilisation d'un bouton dégradé n'est pas une nouvelle tendance. Cependant, si ces boutons de style dégradé multicolores conviennent le mieux à votre site Web, vous pouvez suivre ce tutoriel.
Comme cela est fait avec CSS, vous pouvez facilement l'agrandir ou le réduire sans perte de résolution. Si vous recherchez un outil pour créer des dégradés CSS, vous pouvez utiliser l'éditeur de dégradés de ColorZilla.
Dans le CSS ci-dessous, nous avons utilisé des styles spécifiques au navigateur pour garantir que le dégradé apparaisse sur autant de navigateurs différents que possible.
div.wpforms-container-full .wpforms-form button[type=submit] {
border-radius: 30px; /* Curve of border corners */
text-transform: uppercase; /* Make letters uppercase */
color: white; /* Text color */
background: #0099cc; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* Standard syntax */
}
Voici à quoi ressemblera le bouton :
Comment créer un bouton aux coins arrondis
Vous voulez attirer le regard des utilisateurs sur les appels à l’action ? Selon certaines recherches, les coins arrondis améliorent le traitement de l’information et attirent notre regard vers le centre de l’élément.
Si vous cherchez à attirer l’attention des utilisateurs, vous pourriez vouloir tester vos taux de conversion de formulaires en créant un bouton aux coins arrondis pour votre formulaire WordPress.
div.wpforms-container-full .wpforms-form button[type=submit] {
background-color: #0099CC; /* Blue background color */
border-radius: 30px; /* Curve of border corners */
text-transform: uppercase; /* Make letters uppercase */
color: white; /* Text color */
}
Voici à quoi ressemblera le bouton :
Comment remplacer votre bouton par une image
Utiliser un bouton graphique est probablement le moyen le plus simple de personnaliser le bouton de votre formulaire.
Vous pouvez facilement trouver plusieurs boutons graphiques à télécharger et à utiliser sur des sites de photos d’archives. Ensuite, vous pouvez remplacer le bouton de votre formulaire par un bouton graphique.
Assurez-vous de téléverser le graphique du bouton dans le téléchargeur de médias en allant dans Média » Ajouter. Remplacez ensuite l’URL ci-dessous par l’URL de votre image :
http://yoursite.com/your-image.jpg
div.wpforms-container-full .wpforms-form button[type=submit] {
background-image: url(http://yoursite.com/your-image.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: transparent; /* Hide the 'submit' text */
border: none; /* Remove the border */
}
Comment créer un bouton multiligne
Avant de soumettre leur formulaire, vos utilisateurs auront plusieurs questions en tête. Pour augmenter les conversions, vous pouvez répondre à ces questions avec le texte approprié dans ou autour de votre bouton.
Lorsque vous créez un bouton pour votre formulaire, regardez-le à travers les yeux de vos visiteurs. Cela vous aide à rédiger le texte approprié pour votre bouton, orienté vers la conversion.
Dans la plupart des cas, pour inclure tous ces détails dans votre bouton, vous devrez créer un bouton multiligne. Voici comment créer un bouton de formulaire multiligne dans WPForms.
div.wpforms-container-full .wpforms-form button[type=submit]:after {
content: 'Second line text'; /* Text for second line of button */
display: block; /* Puts this text on its own line */
font-size: 10px;
margin-top: 5px; /* Add distance from first line of text */
font-weight: normal; /* Remove bold style */
}
Voici à quoi ressemblera le bouton :
Option 2 : Personnalisation individuelle d'un style de bouton
Et si vous voulez simplement que votre nouveau style soit utilisé sur un seul formulaire WPForms, mais pas sur tous les formulaires de votre site ?
Si vous préférez modifier le style du bouton d’un bouton de formulaire individuel à l’aide de CSS, vous devez trouver l’ID unique de votre formulaire.
Tout d’abord, ouvrez une page contenant le formulaire que vous souhaitez modifier. Placez votre souris sur n’importe quel champ du formulaire, clic droit » Inspecter l’élément.
L’écran du navigateur se divisera et vous verrez le code source de la page. Dans le code source, vous devez localiser la ligne de départ du code du formulaire.
Comme vous pouvez le voir dans la capture d’écran ci-dessus, le code de notre formulaire de contact commence par la ligne :
div class="wpforms-container wpforms-container-full" id="wpforms-14"
Nous utiliserons cet ID dans notre CSS pour styliser notre formulaire de contact. Nous remplacerons .wpforms dans notre premier extrait CSS par #wpforms-14.
L’attribut id est un identifiant unique généré par WPForms pour ce formulaire particulier, de sorte que le style ne s’appliquera nulle part ailleurs.
Par exemple, vous pouvez simplement insérer l’extrait suivant au début du premier extrait de code.
div#wpforms-14 {background-color: transparent; !important}
Pour une méthode plus directe de localisation de votre ID de formulaire, allez simplement dans Tous les formulaires et localisez la colonne Shortcode. Vous y trouverez l’ID du formulaire en un rien de temps.
Personnalisez les styles des boutons de formulaire maintenant !
Comment personnaliser les styles des boutons sans CSS
Avant d’ajouter du CSS, déterminez si les contrôles de style intégrés dans WPForms vous aideront à obtenir plus facilement le style de bouton que vous souhaitez.
Cet article sur comment styliser les formulaires de contact dans WordPress explique davantage les options de style de formulaire sans code de WPForms dans l’éditeur de blocs WordPress.
Le processus est simple. Ouvrez un formulaire, et dans l’éditeur de blocs, cliquez sur le formulaire pour ouvrir des options de style supplémentaires pour le bloc WPForms.
Options de style pour le bloc WPForms
Vous pouvez modifier le thème de couleur, les champs du formulaire, les étiquettes, les boutons, ainsi que les styles du conteneur et de l’arrière-plan sans écrire de CSS dans les paramètres du bloc WPForms.
Accéder aux paramètres de style des boutons
Sous Styles de bouton, vous pouvez modifier la taille, la couleur, la bordure, l’épaisseur de la bordure, le rayon de la bordure et le style de la bordure de vos boutons. Voici les options parmi lesquelles vous pouvez choisir.
- Taille : Cette option indique la taille du bouton. Vous pouvez choisir parmi Petit, Moyen et Grand.
- Bordure : Avec ce paramètre, vous pouvez donner à vos boutons une bordure pleine, discontinue ou pointillée.
- Épaisseur de la bordure : Ceci indique à vos boutons l’épaisseur de leurs bords. Vous pouvez choisir une unité différente si les pixels (px) ne correspondent pas à ce dont vous avez besoin pour votre design.
- Rayon de la bordure : Vous pouvez modifier la rondeur des coins de vos boutons pour les rendre plus doux ou plus nets. Bien que les pixels (px) soient l’unité standard, vous pouvez la changer pour répondre aux besoins de votre design.
Vous pouvez également modifier les couleurs d’arrière-plan et de texte de votre bouton dans le panneau Couleurs ci-dessous.
Personnalisez les styles des boutons de formulaire maintenant !
FAQ sur la personnalisation des styles de bouton avec CSS
La personnalisation des styles de bouton est un sujet qui suscite beaucoup d’intérêt chez nos lecteurs. Voici les réponses à quelques questions courantes à ce sujet :
Comment changer le style d’un bouton en CSS ?
Pour modifier l’apparence d’un bouton à l’aide de CSS, vous pouvez spécifier des styles personnalisés pour des propriétés telles que la couleur d’arrière-plan, la bordure, la taille de la police, le remplissage, et plus encore. Dans WordPress, vous pouvez coller vos styles CSS dans CSS additionnel dans le personnalisateur.
Comment puis-je créer un formulaire avec des boutons personnalisés ?
Pour créer un formulaire avec des boutons personnalisés, envisagez d’utiliser un plugin WordPress tel que WPForms. Il fournit des outils de glisser-déposer pour faciliter la création de formulaires.
Pour des styles de bouton personnalisés, allez dans la section CSS additionnel de WordPress et saisissez votre code CSS, en ciblant les noms de classe spécifiques du formulaire ou du bouton que WPForms attribue.
Comment personnaliser mon bouton de soumission ?
Pour personnaliser votre bouton de soumission dans WPForms, modifiez le formulaire, sélectionnez le « Bouton de soumission », et modifiez directement l’étiquette du texte. Utilisez l’éditeur de blocs ou le CSS additionnel pour ajuster davantage les styles du bouton avec des couleurs, des polices et des tailles personnalisées.
Ensuite, découvrez comment personnaliser votre page de connexion dans WordPress
Maintenant que vous savez comment styliser les formulaires de contact avec CSS, vous voudrez peut-être jeter un coup d’œil à comment créer une page de connexion personnalisée pour votre site. Nous avons également quelques comparatifs de plugins pour vous aider à choisir les meilleurs plugins à mesure que votre site grandit :
- Meilleurs plugins SEO
- Meilleurs plugins de médias sociaux
- Meilleurs plugins de sauvegarde
- Meilleurs plugins de journalisation d'e-mails
- Meilleurs plugins TikTok
- Meilleurs plugins SMTP
Créez votre formulaire WordPress maintenant
Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.
Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.
Comment puis-je ajouter une fonction de quantité à un formulaire WP de base.
J’ai un certain nombre d’articles de boutique qui peuvent être sélectionnés à l’aide d’une case à cocher. Je dois pouvoir permettre à quelqu’un de choisir des quantités pour chaque article, puis de pouvoir le soumettre par e-mail.
L’article et le coût sont dans le même champ. J’ai juste besoin de pouvoir ajouter un bouton +/- à côté de chaque article.
Des idées sur la façon dont je peux faire cela facilement ?
Merci
Bonjour Paul,
Nous n’avons pas encore la possibilité d’inclure les quantités d’articles de cette manière, mais c’est à l’étude pour un ajout ultérieur !
Si vous êtes prêt à envisager une alternative modifiée, vous pouvez utiliser le champ "Éléments de liste déroulante" pour faire ce que vous demandez d'une manière légèrement différente. La démonstration la plus simple est de regarder la courte vidéo ici : https://cl.ly/3Y2f3o3q1C0M. En gros, vous créez un champ "Éléments de liste déroulante" pour chaque produit et vous remplissez les options de la liste déroulante avec différentes quantités et prix associés. Cela vous permet d'offrir à la fois plusieurs produits et différentes quantités de chacun de ces produits.
Je suis désolé de ne pas pouvoir offrir exactement ce que vous recherchez, mais j'espère que cela vous aidera !
Si vous avez d'autres questions à ce sujet, n'hésitez pas à nous contacter au support 🙂
Ce sont tous d'excellents exemples. Mais comment désactiver l'ombre au survol ? Je veux juste un bouton qui soit du pur texte en majuscules grasses disant "SOUMETTRE". Le texte devrait passer au gris au survol et à l'état actif. Pas de bordure, de fond, d'ombre...
Bonjour Gary,
Notre bouton de soumission n'inclut aucune ombre par défaut, donc si vous en voyez une, elle est probablement ajoutée par votre thème. Comme tous les thèmes le font un peu différemment, nous aurions besoin de voir un formulaire intégré pour vous aider à la supprimer.
Pour supprimer tous ces autres styles, vous aurez besoin de quelques lignes de CSS supplémentaires. Nous avons un tutoriel ici spécifiquement sur la personnalisation du bouton de soumission, y compris les styles de survol. Les exemples présentés devraient vous guider à travers tout ce dont vous avez besoin pour créer le look personnalisé que vous décrivez.
J'espère que cela vous aidera ! Si vous avez des questions, n'hésitez pas à nous le faire savoir ! Nous prenons en charge toutes les licences payantes dans notre canal de support privé et WPForms Lite dans notre forum 🙂
J'ai essayé de copier et coller le code du style de bouton transparent dans mon thème enfant Genesis et cela n'a eu aucun effet sur l'apparence des boutons. Pourquoi pensez-vous que c'est le cas ?
J'ai suivi les instructions – Apparence>Personnaliser>CSS additionnel>Enregistrer.
Merci !
Bonjour Toni,
C'est une excellente question, et la réponse peut varier considérablement d'un site à l'autre (même au sein du même thème). Je vous suggère de commencer par notre tutoriel Comment dépanner le CSS qui ne fonctionne pas, qui aborde tous les problèmes les plus courants et comment les résoudre.
Si vous essayez cela et que vous êtes toujours bloqué, n'hésitez pas à nous contacter au support afin que nous puissions vous aider à résoudre le problème plus en détail 🙂
Je n'arrive pas à comprendre pourquoi cela ne fonctionne pas. J'ai entré le code dans la section CSS personnalisable mais le bouton est resté le même.
Je veux le rendre transparent comme le premier exemple transparent que vous avez ci-dessus, mais cela ne fonctionne pas.
J'espère aussi pouvoir déplacer le formulaire réel plus bas sur la page, mais cela ne semble pas fonctionner non plus.
Bonjour Jeremy,
Désolé pour le désagrément ! Certains thèmes rendent l'application de CSS personnalisé plus difficile, bien que l'ajout de
!importantaide généralement. Voici un exemple simple pour démontrer comment l'ajouter :div.wpforms-container-full .wpforms-form button[type=submit] { background-color: transparent !important; }Nous avons encore plus d'astuces pour faire fonctionner le CSS dans ce tutoriel de dépannage CSS.
Si vous essayez ces idées de dépannage et que vous rencontrez toujours des problèmes, veuillez nous en informer ! Nous fournissons une assistance à nos utilisateurs de licences payantes ici et à nos utilisateurs Lite ici.
J'espère que cela vous aide ! 🙂
Je voulais juste vous remercier d'avoir créé ce post… Excellent travail, cela m'a beaucoup aidé !
Nancy,
Je suis vraiment heureux de voir que vous trouvez le post utile 🙂
Bonjour,
Comment puis-je changer la hauteur du bouton de soumission. Sa hauteur est plus grande que les autres boutons dans Wordpress et je ne sais pas quel CSS utiliser.
Merci d'avance.
Salut Lewis,
Le moyen le plus simple de personnaliser la hauteur du bouton de soumission est d'ajuster son remplissage (la distance entre le texte du bouton et la bordure). Voici le CSS dont vous auriez besoin pour cela :
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit] { padding-top: 10px; padding-bottom: 10px; }Ceux-ci sont actuellement définis sur les valeurs par défaut (10 pixels en haut et en bas), mais vous pouvez les modifier à n'importe quel nombre que vous souhaitez. Pour garder le texte centré verticalement, assurez-vous simplement de conserver le même remplissage en haut et en bas.
Et au cas où cela vous aiderait, vous pouvez trouver notre tutoriel complet sur la personnalisation du bouton de soumission ici.
J'espère que cela vous aide ! 🙂
Bonjour,
Comment puis-je changer la taille des cases à cocher pour les rendre plus petites ?
Merci d'avance.
Salut Lewis,
Je m'excuse, mais les cases à cocher sont générées par le navigateur et nous ne pouvons donc pas personnaliser leur taille. Bien que certains thèmes fournissent des modifications de code étendues pour styliser les cases à cocher de manière personnalisée, celles-ci ont tendance à causer des problèmes (conflits sur certains navigateurs, parfois même à casser certaines fonctionnalités, etc.), c'est pourquoi elles sont généralement évitées.
Bonjour @ JESS, j'ai remarqué que vous êtes la rockstar ici, j'ai actuellement un problème avec mon bouton de soumission, dès que vous passez la souris sur le bouton de soumission, la couleur de survol s'étend au-delà du bouton de soumission et c'est très laid et non professionnel, comment puis-je résoudre cela. Je soupçonne qu'il prend la couleur de mon thème, mais je ne sais pas comment la désactiver. Voici le lien pour une meilleure compréhension. Survolez simplement le bouton de soumission et voyez l'effet laid. [URL supprimé]
Salut Emmanuel,
Nous serions heureux de vous aider ! Quand vous aurez un moment, envoyez-nous un message au support afin que nous puissions vous aider.
Si vous avez une licence WPForms, vous avez accès à notre support par e-mail, veuillez donc soumettre un ticket de support.
Sinon, nous offrons un support limité et gratuit sur le forum de support WPForms Lite sur WordPress.org.
Merci 🙂
Avez-vous des projets de création d'un pack d'extensions avec quelques styles de boutons de soumission différents ?
Salut Alex — Nous n’avons pas de projets pour cela actuellement, mais j’ai noté l’idée dans notre liste de demandes de fonctionnalités. Merci pour la suggestion ! 🙂
Bonjour
Je me demandais juste comment nous pouvons ajouter cela à tous les champs de formulaire ? J’ai mon formulaire sur une image et j’aimerais une bordure blanche autour d’une police blanche avec un fond transparent. Merci
Bonjour Jennifer,
Bien sûr, les exemples ci-dessus sont spécifiquement pour les boutons, mais nous avons également des tutoriels pour vous aider à styliser vos formulaires dans leur ensemble ! Je suggérerais de commencer par notre guide du débutant (qui couvre l’ajout d’une bordure, etc.). Ensuite, si vous souhaitez un peu plus d’inspiration, vous pouvez consulter nos idées de style supplémentaires (CSS inclus).
J'espère que cela vous aide ! 🙂
Bonjour
Est-il possible de masquer le bouton d’envoi ? J’ai essayé différentes CSS mais je n’arrive pas à le faire fonctionner. Je veux utiliser le formulaire juste pour des informations, donc je n’ai pas besoin du bouton.
Merci
Bonjour Nicole,
Nous serions heureux de vous aider ! Pour ce faire, il vous suffit de nous contacter avec l’URL de votre formulaire (cela nous permettra de vous préparer un extrait CSS).
Si vous avez une licence WPForms, vous avez accès à notre support par e-mail, veuillez donc soumettre un ticket de support.
Sinon, nous offrons un support limité et gratuit sur le forum de support WPForms Lite sur WordPress.org.
Merci 🙂
Bonjour, merci pour l’article. J’aimerais changer la position du bouton d’envoi sur le côté droit. La norme est sur le côté gauche. Je ne trouve aucune description CSS sur la façon de faire cela. Pourriez-vous s’il vous plaît m’aider ?
Merci.
Efkan
Bonjour Efkan,
Vous pouvez repositionner le bouton d’envoi vers la droite en utilisant le code CSS suivant :
div.wpforms-container-full .wpforms-form .wpforms-submit-container { text-align: right !important; }Au cas où cela vous aiderait, voici un excellent tutoriel de WPBeginner sur la façon d’ajouter du CSS personnalisé comme celui-ci à votre site. 🙂
Bonjour !
Merci pour toutes ces informations utiles. J’ai toujours une question, cependant.
J’ai réussi à changer la couleur de fond du bouton d’envoi, et j’ai également réussi à ajouter une couleur distincte au survol – et au focus, de sorte que la couleur du bouton change lorsque les utilisateurs y accèdent par tabulation.
Ce que je n’arrive pas à comprendre, c’est comment conserver la couleur de survol une fois que le bouton a été cliqué et qu’il est en cours d’envoi. Une fois qu’un utilisateur éloigne le curseur du bouton, la couleur de survol revient à la couleur d’origine, ce qui peut donner l’impression que le bouton n’a pas été cliqué du tout (même si le texte indique « envoi . . . » ).
Est-ce un problème de sélecteur :active que j’ai manqué, ou y a-t-il autre chose que j’ai manqué ?
J’apprécie toute aide que vous pourrez m’apporter.
Salut Joe,
Nous devrons peut-être examiner le code lui-même. Ainsi, lorsque vous aurez le temps, veuillez contacter notre équipe de support et nous examinerons cela plus en détail et vous guiderons.
Je souhaite changer la couleur d'arrière-plan des messages de validation. Des recommandations ?
Bonjour Janine,
Vous pouvez utiliser l'extrait de code suivant pour changer la couleur d'arrière-plan :
div.wpforms-container-full .wpforms-form label.wpforms-error { background-color: #FFFFFF !important; }Et si cela peut vous aider, voici un excellent tutoriel de WPBeginner sur la façon d'ajouter du CSS personnalisé comme celui-ci à votre site.
J'espère que cela vous aide ! 🙂
Merci Daisy
J'ai essayé ce code pour changer la couleur d'arrière-plan du message de validation et cela n'a rien changé. Il continue de s'afficher dans la couleur vert clair avec laquelle il est venu à l'origine. Des suggestions ?
Bonjour Janine,
Si vous avez un plugin de mise en cache installé sur votre site (ou si votre hébergeur fait de la mise en cache), vous voudrez d'abord le vider/le purger, puis réessayer le code. Si le problème persiste et que vous avez une licence payante, veuillez contacter notre équipe de support et elle examinera la question. 🙂
Bonjour Daisy,
Je fais un suivi de ma demande concernant 5 messages plus haut. Comme indiqué, j'ai envoyé ma demande à l'équipe de support il y a environ trois semaines et je n'ai rien entendu.
J'ai trouvé une sorte de solution de contournement, mais je suis toujours intéressé à savoir s'il est possible de changer la couleur du bouton de soumission – et de la maintenir changée – lorsque les formulaires sont soumis.
Merci pour votre aide.
Salut Joe,
Je suis désolé pour la confusion – il semble qu'un membre de notre équipe de support ait répondu à votre e-mail le 25 mars, mais nous ne sommes pas sûrs que vous l'ayez jamais reçu (il a peut-être été filtré comme spam/indésirable, il serait donc utile de vérifier dans ce dossier juste au cas où).
Pour résumer leur réponse, malheureusement, nous n'avons aucun moyen d'accomplir ce que vous essayez de faire. Le problème est que le texte « Soumission » est affiché par JavaScript et ne modifie pas le CSS du bouton – et donc il n'y a rien de bon à « saisir » en termes de CSS personnalisé. Il serait peut-être possible d'y parvenir en utilisant du JavaScript/jQuery créatif, mais nous ne pouvons fournir aucun support pour ce degré de personnalisation. Je m'excuse pour la gêne occasionnée !
Bonjour, Comment puis-je aligner le bouton Soumettre avec les zones de texte Nom et E-mail.
J'ai aligné les zones de texte Nom et E-mail en utilisant l'option de mise en page.
Salut Mike,
Je vous recommande vivement de consulter notre guide qui vous montre comment afficher votre formulaire sur une seule ligne.
J'espère que cela vous aide ! 🙂
Bonjour ! Comment puis-je faire en sorte que mon bouton de soumission ne contienne qu'une seule ligne de texte ?
Maintenant, le bouton est énorme à cause des deux lignes de texte…
Le formulaire de contact est fait avec inline comme un formulaire d'une seule ligne.
Salut Thomas !
Bien sûr, vous pouvez essayer de personnaliser le bouton de soumission avec le CSS personnalisé. Nous avons un excellent tutoriel sur la façon de faire cela ici.
J'espère que cela vous aidera !
Passez une bonne journée 🙂
Bonjour !
Que se passe-t-il lorsque nous voulons que le bouton de soumission Wpforms ressemble aux autres boutons du thème ?
Je pensais qu'il suffirait de coller la classe CSS du bouton principal du thème dans le champ « Classe CSS du bouton de soumission » du constructeur de formulaires.
Cependant, le bouton ne change pas du tout d'apparence… Faut-il entrer le nom de la classe d'une manière spéciale ?
Salut Juanma.
Je m'excuse pour toute confusion !
Vous pouvez y parvenir avec du CSS personnalisé. Veuillez consulter cet article sur notre site pour plus de détails.
J'espère que cela vous aidera !
Passez une bonne journée 🙂
Bonjour l'équipe de support !
Quel code CSS dois-je utiliser pour changer l'emplacement du bouton ? Par exemple, j'aimerais déplacer le bouton de soumission au centre du formulaire et plus bas.
Merci !
Salut Jacqueline.
S'il vous plaît, notez que le code personnalisé est hors de notre portée de support, nous ne pouvons pas aider avec les personnalisations ou l'implémentation de code personnalisé.
Cependant, j'ai vérifié dans notre système et je vois que nous avons une suggestion pour réaliser ce que vous recherchez :
div.wpforms-container-full .wpforms-form .wpforms-submit-container { text-align: center !important; }J'espère que cela vous aidera.
Passez une bonne journée 🙂
Bonjour ! Comment changer la couleur d'arrière-plan du bouton pour la couleur qu'il a lorsqu'il est en cours d'envoi après avoir appuyé sur soumettre ? Merci !! (^_^)y
Salut Kate — Nous serions heureux de vous aider ! Quand vous aurez un moment, envoyez-nous un message au support afin que nous puissions vous aider.
Si vous avez une licence WPForms, vous avez accès à notre support par e-mail, veuillez donc soumettre un ticket de support. Sinon, nous offrons un support gratuit limité dans le forum de support WPForms Lite sur WordPress.org.
Merci 🙂
Comment puis-je changer la couleur d'arrière-plan au survol ?
Salut Francesco - Excellente question !
La façon la plus simple de personnaliser la couleur d'arrière-plan au survol du bouton de soumission est d'ajouter le code CSS comme montré ici dans le tutoriel
J'espère que cela vous aide !
Merci et bonne journée 🙂
Peut-être simple, mais je ne l'ai pas trouvé :
S'il vous plaît, comment faire pour que le bouton « Soumettre » ait une fonction de redirection (lien) vers une autre page ? Donc pas envoyer mais rediriger ?
Salut Roman – Bonne question !
Oui, vous pouvez rediriger vers une autre page en accédant à Constructeur de formulaires > Paramètres > Confirmation > sélectionnez « Type de confirmation » comme « Accéder à l'URL (Redirection) » > et ajoutez l'URL de redirection de confirmation. Voici un excellent guide à ce sujet.
J'espère que cela vous aide ! Merci, et passez une bonne journée 🙂
Aidez-moi s'il vous plaît. J'ai essayé de changer le bouton de soumission pour qu'il ait un rayon de 5px. Je ne sais pas si j'entre mal le code CSS ?
Merci !
Salut Jillian – Nous serions heureux de vous aider 🙂
Au cas où cela vous aiderait, voici un excellent tutoriel de WPBeginner sur la façon d'ajouter du CSS personnalisé comme celui-ci à votre site.
Si vous avez une licence WPForms, vous avez accès à notre support par e-mail, veuillez donc soumettre un ticket de support. De cette façon, nous pourrons discuter de plus de détails et examiner cela plus en profondeur.
Merci 🙂
Bonjour,
Voici le lien de mon site web où j'ai mis WPForms.
[URL supprimé]
Je veux que les boutons « Suivant, Précédent, Soumettre etc. » aient le même style que les boutons de mon thème.
Aidez-moi s'il vous plaît
Salut Abubakar – Merci de nous avoir contactés 🙂
Vous pouvez personnaliser les boutons de soumission sur votre site en vous référant à cet article. De plus, nous avons un excellent guide sur la personnalisation des champs de formulaire individuels.
Si vous avez besoin d'aide, n'hésitez pas à contacter notre équipe de support.
Merci, et passez une bonne journée 🙂
Salut ! Excellent article !
Comment ajouter une icône au survol du bouton de soumission ? J'ai littéralement cherché partout ce code et je ne le trouve pas.
Merci !
Salut JP – Merci de nous avoir contactés !
Pour faire ce que vous avez mentionné, vous pouvez envisager d'utiliser FontAwesome, et une façon d'ajouter Font Awesome à votre site est d'utiliser le plugin « Better Font Awesome »
Une fois que vous aurez ajouté Font Awesome à votre site, nous aurons besoin d'un CSS personnalisé pour ajouter une icône au bouton de soumission, que j'ai inclus ici
Ce snippet avec le code « \f1d8 » affichera une icône d'avion en papier, et vous pouvez la remplacer par le code de votre icône préférée en allant sur la galerie Font Awesome
J'espère que cela vous aide ! 🙂
Bonjour. J'utilise la version Lite. Lorsque je survole, le bouton bouge légèrement et semble avoir un contour blanc. Le CSS que j'utilise :
.wpforms-form button[type=submit] { border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background-color: #024488 !important; color: #fff !important; } .wpforms-form button[type=submit]:hover { background-color: #d62598 !important; }
Comment puis-je supprimer le survol ou le déplacement du bouton ? Merci
Salut Kas - Le code CSS me semble bon. Je suspecte un conflit de style de thème qui cause ce comportement étrange avec le style au survol.
Dans ce cas, veuillez contacter notre support gratuit sur le forum de support WPForms Lite sur WordPress.org.
Merci 🙂
Bonjour,
Je cherche de l'aide pour centrer mon bouton de soumission sur mes formulaires. Je n'ai vu aucun moyen de le faire, et le CSS de centrage normal ne fonctionne pas.
Comment résoudre cela ? Merci !
Salut Seth - Veuillez utiliser ce code CSS pour centrer le bouton de soumission.
J'espère que cela vous aide ! 🙂
Bonjour
J'ai un formulaire avec des champs en ligne, mais il n'accepte pas mes paramètres de padding sur le bouton de soumission, le texte de soumission est mal aligné.
J'ai déjà essayé les options ci-dessus :
padding-top, padding-bottom, et juste padding – mais rien n'a fonctionné…
Pouvez-vous m'aider ?
Merci d'avance !
Salut Rodrigo - Il semble que le style du thème surcharge le formulaire dans ce cas.
Si vous avez une licence WPForms, vous avez accès à notre support par e-mail, veuillez donc soumettre un ticket de support. Sinon, nous fournissons un support gratuit limité dans le forum de support WPForms Lite sur WordPress.org.
Merci 🙂
Salut
Absolument novice en CSS, mais je sais copier et coller 🙂 donc…
Comment puis-je ajouter un bouton de soumission PayPal "Acheter maintenant" ?
Merci pour toute aide. Google ne m'est pas d'une grande aide… 😉
Darren
Salut Robert ! Je m'excuse pour toute confusion. Les boutons PayPal sont spécifiquement fournis par PayPal, avec un code fourni par eux également. Vous pouvez consulter leur documentation ici : https://www.paypal.com/buttons/
Au cas où cela vous aiderait, notre plugin a la capacité de traiter les paiements avec PayPal via l'un de nos modules complémentaires. Il est disponible avec notre licence Pro, et vous pouvez en trouver plus de détails ici : https://wpforms.com/addons/paypal-standard-addon/
J'espère que cela vous aidera à clarifier 🙂 Si vous avez d'autres questions à ce sujet, veuillez nous contacter si vous avez un abonnement actif. Si ce n'est pas le cas, n'hésitez pas à nous poser des questions sur nos forums de support.
Comment puis-je faire clignoter le bouton de soumission pour que les gens ne le négligent pas sur un long formulaire ?
Salut David. Pour obtenir ce que vous recherchez, vous devrez utiliser des animations et des styles keyframes sur votre bouton. Cependant, ce n'est pas quelque chose que nous pouvons vous aider à résoudre de notre côté.
Pour plus de personnalisation, nous vous suggérons de faire appel à codeable ou WPBuff.
Merci et passez une bonne journée !
Cher personnel de WP Form,
J'aimerais savoir comment intégrer un formulaire dans un bouton Elementor.
J'ai déjà préparé le formulaire WP et j'ai essayé d'utiliser l'option d'intégration 'shortcode' sur le formulaire WP. Cependant, lorsque je copie et colle le shortcode dans l'URL du bouton en utilisant Elementor, cela redirige vers une page blanche.
Pouvez-vous s'il vous plaît m'aider avec cela sans avoir besoin de passer à un plan payant (que ce soit sur WP Form ou sur Elementor) ?
Merci
Salut Reni - Voici un guide complet pour intégrer WPForms sur une page Elementor.
J'espère que cela vous aide ! 🙂
Bon après-midi, ma question est la suivante :
Comment puis-je configurer les champs pour qu'au lieu d'un rectangle dans lequel on écrit, il y ait une ligne continue.
Merci
Salut Marcos, Afin de nous assurer de répondre à votre question aussi complètement que possible et d'éviter toute confusion.
Pourriez-vous nous contacter avec des détails supplémentaires afin que nous puissions vous aider davantage dans ce dossier ?
Merci.
Pouvez-vous modifier le code de l'URL de redirection de confirmation pour que le lien s'ouvre dans une nouvelle fenêtre ?
Salut Allison, pour y parvenir, vous devrez implémenter du code personnalisé, et voici notre guide du développeur à ce sujet.
Étant donné que ce que vous recherchez nécessiterait du code personnalisé, nous ne sommes pas en mesure de fournir une assistance pour le développement personnalisé requis. Si cela peut vous aider, vous pourriez envisager de faire appel à un service tel que Codeable ou Upwork pour des options de développeurs potentiels.
Merci !
Bonjour, personnel de WP Forms ! J'adore WP Forms et je crée actuellement un formulaire intelligent en utilisant les options de logique conditionnelle. J'adore ça, d'ailleurs. Pour perfectionner mon formulaire, existe-t-il un moyen d'appliquer la même logique conditionnelle au BOUTON DE SOUMISSION ? En d'autres termes, je veux que mon BOUTON DE SOUMISSION se masque jusqu'à ce que les cases appropriées soient cochées (ou que les champs requis soient remplis). Merci beaucoup pour toute aide !
Salut Christine,
Je suis désolé car nous n'avons actuellement pas de fonctionnalité intégrée pour masquer/afficher le bouton de soumission de manière conditionnelle. Cependant, cela peut être réalisé en utilisant un peu de code personnalisé, comme montré dans ce guide du développeur.
J'espère que cela vous aide 🙂
Bonjour,
Est-il possible d'ajouter une icône au bouton de soumission ?
Merci.
Salut Arnold – Vous pouvez envisager d'utiliser le CSS suivant pour ajouter une icône au bouton de soumission :
.wpforms-form button[type=submit]:after { content: "\f345"!important; vertical-align: middle!important; font-size: 1em!important; transition: all 0.5s ease!important; opacity: 1; }Salut !
J'ai remarqué que wpforms remplace la variable « –theme-button-padding » et définit la sienne :
.wpforms-submit { –theme-button-padding: 5px 35px; }
Puis-je demander pourquoi vous remplacez le paramètre de propriété personnalisée du thème ici, au lieu d'utiliser la propriété de remplissage moins spécifique ?
Merci 🙂
Bonjour l'équipe,
J'ai un formulaire multipage et je souhaite placer deux ensembles de boutons « suivant et précédent » sur le formulaire. Un ensemble en haut et un autre en bas de chaque page, est-ce possible ?
Merci
Bonjour Grant, nous n'avons pas cette fonctionnalité par défaut pour le moment. Pour des conseils personnalisés, vous pouvez contacter nos conseillers de confiance de l'équipe de support si vous avez une licence WPForms. Veuillez soumettre un ticket de support et ils vous répondront dès que possible (généralement sous 1 jour ouvrable). Si vous utilisez notre version gratuite, veuillez vous rendre sur le forum de support WPForms Lite sur WordPress.org et ouvrir un nouveau fil de discussion. Merci !