Comment afficher votre formulaire sur une seule ligne dans WordPress (méthode facile)

Afficher un formulaire sur une seule ligne est un excellent moyen de gagner de la place tout en donnant à votre site un aspect épuré.

Cela fonctionne particulièrement bien dans les en-têtes, les pieds de page ou les barres latérales, vous permettant de placer des formulaires dans des zones à fort trafic et d'augmenter les conversions.

Chez WPBeginner, nous avons testé différents emplacements de formulaires de contact pour optimiser notre processus de capture de prospects. Grâce à cette expérience, nous avons constaté que les formulaires simples entraînent souvent des taux d'achèvement plus élevés.

Dans cet article, nous vous montrerons comment afficher facilement votre formulaire sur une seule ligne dans WordPress, étape par étape.

Pourquoi afficher des formulaires sur une seule ligne dans WordPress ?

Les formulaires sur une seule ligne vous donnent plus de flexibilité quant à l'endroit où placer vos formulaires. Comme ce style de formulaire n'occupe qu'une seule ligne, il ne prend pas beaucoup de place et peut être facilement intégré à votre contenu existant sur un blog WordPress.

Par exemple, les formulaires d'inscription à la newsletter par e-mail sont souvent affichés sur une seule ligne au-dessus ou en dessous du contenu d'un article de blog. Ces types de formulaires fonctionnent également bien sur les pages de destination, les pages de contact et d'autres pages importantes de votre site web.

Au-delà de la génération de plus d'abonnés et de prospects, vous pouvez transformer n'importe quel type de formulaire en un formulaire sur une seule ligne.

Par exemple, il peut être judicieux d'afficher votre formulaire de contact sur une seule ligne pour économiser de l'espace sur le site WordPress et rendre votre formulaire plus réactif sur mobile.

Cela dit, nous allons vous montrer comment afficher un formulaire sur une seule ligne sur votre site WordPress.

Comment créer un formulaire sur une seule ligne dans WordPress

Pour ce tutoriel, nous utiliserons le plugin WPForms. Il dispose d'un constructeur par glisser-déposer qui vous permet de créer rapidement n'importe quel formulaire WordPress. De plus, il s'intègre aux outils de marketing par e-mail populaires afin que vous puissiez facilement développer votre liste d'e-mails.

Chez WPBeginner, nous utilisons cet outil pour créer des formulaires de contact et des enquêtes annuelles, et nous avons obtenu d'excellents résultats. Pour plus d'informations, consultez notre avis complet sur WPForms.

Tout d'abord, vous devez installer et activer le plugin WPForms. Pour plus de détails, consultez notre guide pour débutants sur comment installer un plugin WordPress. 

Après l'activation, visitez la page WPForms » Ajouter un nouveau dans la barre latérale d'administration de votre WordPress et donnez un nom à votre formulaire. Ensuite, vous devez choisir votre modèle de formulaire.

Nous sélectionnerons le modèle « Formulaire d'inscription ». Survolez simplement le modèle et cliquez sur le bouton « Utiliser le modèle ».

Cela lancera le constructeur de formulaires par glisser-déposer de WPForms à l'écran.

Vous verrez que le modèle que nous avons choisi inclut automatiquement les champs nom et e-mail ainsi qu'un bouton de soumission.

Chaque champ peut être modifié en cliquant dessus et en apportant des modifications dans la colonne de gauche.

Vous pouvez également faire glisser et déposer les champs pour changer leur ordre.

Une fois que vous avez terminé de personnaliser les champs, vous pouvez afficher votre formulaire sur une seule ligne.

Pour ce faire, passez à l'onglet Paramètres » Général dans le constructeur de formulaires, puis cliquez sur le menu déroulant « Avancé ».

Ensuite, tapez « inline-fields » dans la zone « Classe CSS du formulaire » (sans les guillemets).

Cela appliquera cette classe CSS au formulaire. Comme WPForms inclut un style pour la classe « inline-fields », il modifiera automatiquement la mise en page de votre formulaire entier et l'affichera joliment sur une seule ligne.

Après cela, vous pouvez rendre votre formulaire encore plus petit en masquant les étiquettes des champs.

Pour ce faire, cliquez simplement sur un champ dans le formulaire pour ouvrir ses paramètres dans la colonne de gauche.

Une fois que vous avez fait cela, sélectionnez l'option de menu « Avancé » et cliquez sur le bouton « Masquer l'étiquette » pour l'activer.

Ensuite, vous devez faire la même chose pour toutes les étiquettes des champs du formulaire.

Après cela, dans la même section « Avancé », vous pouvez saisir du texte dans la zone « Placeholder ». 

Cela indique à vos utilisateurs à quoi sert chaque champ du formulaire. 

Une fois que vous avez terminé de personnaliser votre formulaire, assurez-vous de cliquer sur le bouton « Enregistrer » pour stocker vos paramètres. 

Si vous utilisez votre formulaire pour générer des prospects, vous pouvez connecter votre formulaire à votre fournisseur de marketing par e-mail. Pour plus de détails, consultez notre guide sur comment créer une newsletter par e-mail de la bonne manière. 

Ajout de votre formulaire sur une seule ligne à votre site WordPress

Il est maintenant temps d'ajouter votre formulaire sur une seule ligne à votre site WordPress. Vous pouvez l'ajouter à n'importe quelle page, publication ou zone de widget.

Nous allons l'ajouter à une page existante, mais le processus sera similaire si vous l'ajoutez à une autre zone de votre blog WordPress.

Ouvrez simplement la page où vous souhaitez le formulaire sur une seule ligne et cliquez sur le bouton « Ajouter un bloc » (+) pour ouvrir le menu des blocs.

Ensuite, cliquez sur le bloc « WPForms » pour l'ajouter à votre site.

Ensuite, choisissez le formulaire sur une seule ligne que vous avez créé précédemment dans le menu déroulant du bloc lui-même.

Une fois que vous avez choisi votre formulaire, le plugin chargera un aperçu de votre formulaire dans l'éditeur de contenu. Ensuite, cliquez sur le bouton « Mettre à jour » ou « Publier » pour rendre votre nouveau formulaire actif.

Vous pouvez maintenant visiter votre site web pour voir votre nouveau formulaire en action. 

Bonus : Utilisez OptinMonster pour créer des pop-ups et des bannières

En plus de créer des formulaires à ligne unique, vous pouvez également créer des formulaires de contact flottants, des pop-ups d'inscription et des bannières sur votre site web pour capturer des prospects par e-mail.

Pour ce faire, vous pouvez utiliser OptinMonster, qui est le meilleur outil d'optimisation de la conversion WordPress sur le marché.

Nous l'utilisons constamment chez WPBeginner pour créer des pop-ups et des bannières qui promeuvent nos services professionnels et notre newsletter, et nous l'adorons. Pour en savoir plus, consultez notre avis complet sur OptinMonster.

L'outil vous permet de créer de magnifiques formulaires d'inscription qui affichent des informations personnalisées et pertinentes en fonction des intérêts de votre utilisateur et facilite grandement la capture de prospects.

Pour des instructions détaillées, vous pourriez vouloir consulter notre tutoriel sur comment créer un pop-up de formulaire de contact dans WordPress.

En dehors de cela, vous pouvez également créer des bannières attrayantes pour votre site web, demandant aux utilisateurs de s'inscrire et de faire partie de votre newsletter.

De cette façon, vous êtes en mesure de capturer les détails de l'utilisateur sans prendre trop de place sur le site web ni agacer les utilisateurs.

Pour plus de détails, veuillez consulter notre guide du débutant sur comment créer une liste d'e-mails avec OptinMonster.

Nous espérons que cet article vous a aidé à apprendre comment afficher votre formulaire sur une seule ligne dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment créer des formulaires plus interactifs ou notre sélection d'experts des meilleures alternatives à Typeform.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.