Souhaitez-vous que les champs de votre formulaire soient affichés sur une seule ligne ? L'affichage de votre formulaire sur une seule ligne peut vous aider à le placer dans des zones clés de votre site (comme la partie supérieure de votre page d'accueil) afin d'obtenir une exposition maximale.
Dans ce tutoriel, nous allons vous montrer comment afficher votre formulaire sur une seule ligne.
Remarque : 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 la fonction Champ de présentation. Toutefois, le inline-fields couverte dans ce tutoriel est toujours supportée et est recommandée si vous souhaitez aligner le bouton d'envoi 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 Courriel.
Pour afficher les champs du formulaire sur une seule ligne, naviguez jusqu'à Paramètres " Général dans votre constructeur de formulaires et ajoutez la classe CSS inline-fields à la Classe CSS du formulaire domaine.
Remarque : Il est à noter que l'utilisation de la fonction inline-fields dans WPForms peut parfois entrer en conflit avec les styles de votre thème WordPress. En conséquence, l'apparence peut 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 l'étiquette.
Ensuite, nous allons définir un texte de remplacement pour guider les utilisateurs. Dans notre exemple, nous ajouterons Email comme texte de remplacement pour notre champ Email.
Note : Si vous souhaitez modifier l'apparence du bouton d'envoi pour l'adapter au style de votre formulaire, vous pouvez suivre notre guide sur la personnalisation du bouton d'envoi.
Voici à quoi ressemblera le formulaire sur la page d'accueil du site :
Remarque : si vous cherchez un autre exemple ou un modèle prêt à l'emploi pour un formulaire à ligne unique, consultez notre modèle de formulaire d'inscription à la lettre d'information en ligne.
Voilà, c'est fait ! Vous pouvez désormais 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 ? N'hésitez pas à consulter notre tutoriel sur la mise en place des notifications de formulaires pour plus de détails.