Résumé IA
Souhaitez-vous centrer vos formulaires sur vos pages WordPress ? Bien que les formulaires WPForms occupent par défaut 100 % de la largeur de leur conteneur, vous pouvez facilement les centrer à l'aide de CSS personnalisé.
Ce guide vous montrera comment centrer parfaitement vos formulaires et leurs éléments.
Configuration du formulaire
Tout d'abord, vous devrez créer votre formulaire. Si vous avez besoin d'aide pour cela, vous pouvez toujours consulter cette documentation pour obtenir de l'aide.
Une fois que vous avez créé votre formulaire et ajouté vos champs, vous devrez définir chaque Taille de champ sur Grande.
Pour ce faire, cliquez sur l'onglet Avancé et sélectionnez Grande dans le menu déroulant Taille de champ.
Ajout de la classe CSS
Après avoir défini la taille du champ sur Grande, vous devrez ensuite ajouter une classe CSS spéciale. Pour ce faire, ouvrez le constructeur de formulaire et accédez à Paramètres » Général. Faites ensuite défiler jusqu'à la section Avancé et localisez le champ Classe CSS du formulaire. Entrez wpf-center dans ce champ.
Ajout du code CSS
Voici le code CSS de base pour centrer votre formulaire :
Ce code :
- Centre le formulaire en utilisant
margin: 0 auto - Définit une largeur maximale de 500px. Vous pouvez jouer avec ce montant jusqu'à ce que vous trouviez celui qui répond à vos besoins
- Assure la réactivité mobile en ajustant la largeur sur les petits écrans
Centrage de tous les éléments du formulaire
Si vous souhaitez centrer tout ce qui se trouve à l'intérieur du formulaire (libellés, descriptions, boutons), utilisez cette version étendue :
Personnalisation de la largeur
Pour ajuster la largeur du formulaire, modifiez ces deux lignes dans le CSS :
max-width: 500px !important;
width: 500px !important;
Remplacez 500px par la largeur souhaitée. Par exemple, pour un formulaire plus large :
max-width: 800px !important;
width: 800px !important;
Questions fréquemment posées
Q : Pourquoi le CSS ne fonctionne-t-il pas pour moi ?
R : Tout d'abord, vérifiez que vous avez ajouté le nom de classe wpf-center dans la page Paramètres » Général de votre formulaire. C'est la raison la plus courante pour laquelle le CSS ne fonctionne pas. Si cela ne fonctionne toujours pas, videz le cache de votre navigateur et actualisez la page.
Q : Comment centrer uniquement le bouton de soumission ?
R : Utilisez ce CSS simplifié et ajoutez la classe wpf-center-button (au lieu de wpf-center) dans le champ Classe CSS de votre formulaire :
Ensuite, ajoutez ce CSS à votre site.
.wpforms-container.wpf-center-button .wpforms-submit-container {
text-align: center;
}
Et c'est tout ce dont vous avez besoin pour centrer votre formulaire. Ensuite, souhaitez-vous pouvoir changer la couleur du bouton de soumission sur vos formulaires ? Jetez un œil à notre article sur la modification de la couleur du bouton de soumission.