Résumé IA
Souhaitez-vous que les champs de votre formulaire s'affichent sur une seule ligne ? Avoir votre formulaire sur une seule ligne peut vous aider à le placer dans des zones clés de votre site (comme la section supérieure de votre page d'accueil) pour une exposition maximale.
Dans ce tutoriel, nous vous montrerons comment afficher votre formulaire sur une seule ligne.
Note : Si vous préférez une option simple de glisser-déposer pour personnaliser la mise en page de votre formulaire, nous vous suggérons d'utiliser le champ Mise en page. Cependant, la classe inline-fields abordée dans ce tutoriel est toujours prise en charge et est recommandée si vous souhaitez aligner le bouton de soumission sur la même ligne que les champs de votre formulaire.
Pour notre exemple, nous allons créer un formulaire avec trois champs : Nom, Téléphone et E-mail.
Pour afficher les champs du formulaire sur une seule ligne, accédez à Paramètres » Général dans votre constructeur de formulaire et ajoutez la classe CSS inline-fields au champ Classe CSS du formulaire.
Note : Veuillez noter que l'utilisation de la classe inline-fields dans WPForms peut parfois entrer en conflit avec les styles de votre thème WordPress. Par conséquent, l'apparence pourrait ne pas correspondre à vos attentes.
Ensuite, pour réduire la hauteur de votre formulaire, ouvrez la section Avancé de chaque champ et sélectionnez l'option Masquer le libellé.
Ensuite, nous allons configurer un texte d'espace réservé pour guider les utilisateurs. Pour notre exemple, nous ajouterons E-mail comme texte d'espace réservé pour notre champ E-mail.
Note : Si vous souhaitez modifier l'apparence du bouton de soumission pour qu'elle corresponde au style de votre formulaire, vous pouvez suivre notre guide sur la personnalisation du bouton de soumission.
Voici à quoi ressemblera le formulaire sur le frontend du site :
Note : Si vous recherchez un autre exemple ou un modèle prêt à l'emploi pour un formulaire sur une seule ligne, consultez notre modèle de formulaire d'inscription à la newsletter en ligne.
C'est tout ! Vous pouvez maintenant créer des formulaires qui s'afficheront sur une seule ligne.
Ensuite, souhaitez-vous recevoir une copie des informations soumises par vos utilisateurs via vos formulaires ? Assurez-vous de consulter notre tutoriel sur la configuration des notifications de formulaire pour plus de détails.