Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Vous souhaitez afficher votre formulaire sur une seule ligne dans WordPress ?

Les formulaires à ligne unique vous offrent une plus grande flexibilité quant à l’emplacement des formulaires. Cela signifie que vous pouvez facilement ajouter des formulaires dans des zones très fréquentées de votre site et améliorer vos conversions.

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

How to display your form in a single line in WordPress (easy way)

Pourquoi afficher des formulaires à ligne unique dans WordPress ?

Les formulaires à ligne unique vous offrent plus de flexibilité lorsque vous choisissez l’emplacement de vos formulaires. Comme ce type de formulaire tient uniquement sur une ligne, il ne prend pas beaucoup de place et peut facilement être intégré à votre contenu existant sur le blog WordPress.

Par exemple, les formulaires d’inscription aux newsletters par e-mail sont souvent affichés sur une ligne unique au-dessus ou en dessous du contenu de la publication du blog. Ce type de formulaires fonctionne également bien sur les pages d’atterrissage, les pages de contact et d’autres pages importantes de votre site.

Au-delà de la génération de plus d’abonnés/abonnées et de prospects, vous pouvez transformer n’importe quel type de formulaire en un formulaire à ligne unique.

Par exemple, il peut être judicieux d’afficher votre formulaire de contact sur une seule ligne pour enregistrer de l’espace sur le site WordPress et rendre votre formulaire plus responsive pour les mobiles.

Ceci étant dit, nous allons vous afficher comment afficher un formulaire d’une seule ligne sur votre site WordPress.

Comment créer un formulaire à ligne unique dans WordPress

Pour ce tutoriel, nous utiliserons le plugin WPForms pour créer un formulaire à une ligne car c’est l’un des meilleurs plugins de génération de prospects pour WordPress utilisé par plus de 6 millions de sites.

Vous pouvez utiliser le Constructeur par glisser-déposer pour créer rapidement n’importe quel formulaire WordPress. De plus, il s’intègre aux outils de marketing par e-mail les plus répandus afin que vous puissiez facilement développer votre liste d’e-mails.

En savoir plus, consultez notre Avis complet sur WPForms.

WPForms

Note : WPForms dispose également d’une version premium vers laquelle vous pouvez vous mettre à niveau. Cependant, nous utiliserons WPForms Lite pour ce tutoriel car il vous permet de créer un formulaire de contact simple et de le connecter à Constant Contact pour la génération de prospects.

Tout d’abord, vous devez installer et activer l’extension WPForms. Pour plus de détails, consultez notre guide du débutant sur l’installation d’une extension WordPress.

Une fois activé, visitez la page WPForms  » Add New dans votre colonne latérale d’administration WordPress et donnez un nom à votre formulaire. Ensuite, vous devez choisir votre modèle de formulaire.

Nous allons sélectionner le modèle « Formulaire d’accord ». Il suffit de survoler le modèle et de cliquer sur le bouton « Utiliser le modèle ».

Select form template

Cela lancera le Constructeur de formulaires WPForms par glisser-déposer sur l’écran.

Vous verrez que le Modèle que nous avons choisi inclut automatiquement les champs Nom et E-mail ainsi qu’un bouton Envoyer.

WPForms drag and drop form builder

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

Vous pouvez également faire glisser les champs pour en modifier l’ordre.

WPForms form editor panel

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

Pour ce faire, passez à l’onglet Réglages  » Général dans le Constructeur de formulaires et cliquez sur le menu déroulant ‘Avancé’.

Go to form advanced settings

Ensuite, tapez « inline-fields » dans la case « Form CSS Class » (sans les guillemets).

Cela appliquera cette classe CSS au formulaire. Puisque WPForms inclut le style pour la classe ‘inline-fields’, il modifiera automatiquement toute la mise en page de votre formulaire et l’affichera joliment sur une seule ligne.

Add inline CSS class

Ensuite, vous pouvez rendre votre formulaire encore plus petit en masquant les libellés des champs.

Pour ce faire, il suffit de cliquer sur un champ du formulaire pour ouvrir ses Réglages dans la colonne de gauche.

Ensuite, sélectionnez l’option de menu « Avancé » et cliquez sur le permutateur « Masquer le libellé » pour l’activer.

Hide form labels toggle

Ensuite, vous devez faire la même chose pour tous les libellés des champs du formulaire.

Ensuite, dans la même section « Avancé », vous pouvez saisir du texte dans la case « Texte indicatif ».

Elle indique aux utilisateurs/utilisatrices la fonction de chaque champ du formulaire.

Add form placeholder text

Une fois que vous avez fini de personnaliser votre formulaire, n’oubliez pas de cliquer sur le bouton « Enregistrer » pour stocker vos Réglages.

Si vous utilisez votre formulaire pour générer des prospects, vous pouvez le connecter à votre fournisseur de marketing e-mail. Pour plus de détails, consultez notre guide sur la création d’une newsletter par e-mail dans les règles de l’art.

Ajouté votre formulaire à ligne unique à votre site WordPress

Il est maintenant temps d’ajouter votre formulaire à ligne unique à 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.

Il vous suffit d’ouvrir la page où vous souhaitez insérer un formulaire à ligne unique et de cliquer sur le bouton « Ajouter un bloc » (+) pour ouvrir le menu des blocs.

Add WPForms block

Cliquez ensuite sur le bloc « WPForms » pour l’ajouter à votre site.

Choisissez ensuite le formulaire à ligne unique que vous avez créé précédemment dans le menu déroulant du bloc lui-même.

Select single line form from drop down

Une fois que vous avez choisi votre formulaire, l’extension chargera une Prévisualisation de votre formulaire à l’intérieur de l’éditeurs/éditrices de contenu. Cliquez ensuite sur le bouton « Mettre à jour » ou « Publier » pour rendre votre nouveau formulaire direct.

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

Single line form example

Bonus : Utiliser OptinMonster pour Version des fenêtres surgissantes et des bannières

Version de formulaires à ligne unique, vous pouvez également créer des fenêtres surgissantes et des bannières d’opt-in sur votre site pour capturer des prospects par e-mail.

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

OptinMonster vous autorise à créer de magnifiques formulaires d’optin qui affichent des informations personnalisées et pertinentes en fonction de l’intérêt de votre compte et vous permet de capturer des prospects en toute simplicité.

Pour des instructions détaillées, vous pouvez consulter notre tutoriel sur la création d’une fenêtre surgissante de formulaire de contact dans WordPress.

Fill contact form popup

Par ailleurs, vous pouvez également créer des bannières attrayantes pour votre site en demandant aux utilisateurs/utilisatrices de s’inscrire et de faire partie de votre bulletin d’information.

De cette façon, vous êtes en mesure de saisir les détails de l’utilisateur sans occuper beaucoup d’espace sur le site ou ennuyer les utilisateurs/utilisatrices.

Pour plus de détails, Veuillez consulter notre guide du débutant sur la façon de construire une liste d’e-mails avec OptinMonster.

Newsletter banner with OptinMonster

Nous espérons que cet article vous a aidé à apprendre comment afficher votre formulaire sur une seule ligne dans WordPress. Vous pouvez également consulter notre guide sur la façon d’obtenir un domaine d’e-mail gratuit, et nos choix d’experts des meilleures applications de numéro de téléphone d’entreprise virtuel avec des options gratuites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

3 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.