Voulez-vous créer un formulaire d’inscription personnalisé pour vos utilisateurs ?

Le formulaire d’inscription WordPress par défaut affiche l’image de marque de WordPress et ne correspond pas au thème WordPress de votre site web.

Si vous n’avez jamais installé WordPress, découvrez dans ce tutoriel Comment installer et configurer votre blog

Dans ce tutoriel, nous allons vous montrer comment créer un formulaire d’inscription personnalisé sur WordPress.

Pourquoi ajouter un formulaire d’inscription personnalisé sur WordPress

La page d’inscription par défaut de WordPress affiche l’image de marque et le logo de WordPress. Il ne correspond pas forcément au reste de votre site web.

La création d’un formulaire d’inscription personnalisé vous permet d’ajouter le formulaire d’inscription sur une page de votre site web. Il vous aide à fournir une expérience utilisateur plus cohérente au cours du processus d’inscription.

Avant de continuer vous pouvez découvrir Comment personnaliser les pages d’inscription et de connexion sur WordPress

Un formulaire d’inscription personnalisé permet également de rediriger les utilisateurs après l’inscription. Vous pouvez également afficher des champs de profil supplémentaires, les combiner avec le formulaire de connexion personnalisé, et les connecter avec votre service de marketing par courriel.

Cela dit, nous allons jeter un coup d’œil sur la façon de créer un formulaire d’inscription personnalisé sur WordPress.

Création d’un formulaire de connexion personnalisé

La première chose que vous devez faire est d’installer et d’activer le plugin WPForms. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Vous aurez au moins besoin du plan « Pro » pour avoir accès aux formulaires d’enregistrement des utilisateurs.

Après l’activation, vous devez visiter « WPForms »Settings » pour entrer votre clé de licence WPForms. Vous pouvez obtenir cette clé sur votre compte WPForms.

wpform-licence-cle

Ensuite, accédez à « WPForms > Addons ». Cliquez sur le bouton « Install Addon » sur l’extension « User Registration Forms ».

extension-user-registration-form

WPForms va télécharger et installer l’extension. Vous devrez cliquer sur le bouton «Activer» pour commencer à utiliser l’extension.

activer-lextension-sur-wordpress

Vous êtes maintenant prêt à créer votre formulaire d’inscription personnalisé.

Vous devez visiter « WPForms > Add new » pour utiliser le constructeur visuel de WPForms.

Tout d’abord, vous devez entrer un nom pour votre formulaire, puis sélectionnez le modèle «Formulaire d’inscription de l’utilisateur» (User Registration form).

constructeur-wpforms

WPForms va créer un simple formulaire d’inscription pour vous. Cet échantillon aura les champs suivants.

  • Nom – Prénom
  • Nom d’utilisateur
  • Email
  • Mot de passe
  • Courte biographie

Vous pouvez ajouter des champs à partir du panneau gauche. Vous aurez seulement à faire glisser des champs pour réorganiser leur ordre.

Ajout de champs personnalisés dans votre formulaire d’inscription personnalisé

WPForms vous permet également d’ajouter des champs de profil sur votre formulaire. Pour ce faire, vous aurez besoin d’un plugin spécialisé.

Dans cet exemple, nous utilisons le plugin gratuit « User Meta Manager ». 

La première chose que vous devez faire est d’installer et d’activer le plugin « User Meta Manager ». Pour plus de détails, consultez notre guide sur Comment installer (ajouter) un plugin sur WordPress

Après l’activation du plugin, vous devez vous rendre à l’emplacement suivant « Users > Manage Users » et ajouter des métas pour continuer.

ajouter-des-metas-personnalise-par-utilisateurs

Mais, vous devez d’abord entrer une clé. Cette clé vous permettra de savoir comment le champ du profil d’utilisateur personnalisé sera reconnu en interne.

Ensuite, vous devez choisir un type de champ. Dans cet exemple, nous utilisons un champ URL pour ajouter l’URL du profil Facebook. Sous « Label », vous devez entrer l’étiquette qui sera visible pour les utilisateurs lors du remplissage de ce champ.

Avant de continuer, découvrez Comment afficher des champs personnalisés sur WordPress

Cliquez sur le bouton « Submit » (Soumettre) pour ajouter le champ méta personnalisé. Vous pourrez ensuite visiter la section Utilisateurs » Votre profil » pour voir le champ.

nouveau-champ-facebook-profil

Maintenant que nous avons créé un champ personnalisé, ajoutons-le au formulaire d’inscription personnalisé dans WPForms.

Allez sur  WPForms » All forms » pour modifier votre formulaire d’inscription personnalisé ou pour créer un nouveau.

Après cela, cliquez sur un champ à partir du panneau de gauche pour l’ajouter à votre formulaire. Dans cet exemple, nous ajoutons un champ « URL du site web » à notre formulaire.

ajouter-un-nouveau-champ-wpforms

Le champ « Website/URL » va désormais apparaître dans la prévisualisation de votre formulaire. Vous devez juste cliquer sur ce dernier et WPForms affichera ses propriétés dans le panneau de gauche.

Nous devons changer l’étiquette du site web « Website / URL » pour « URL Profil Facebook». Vous pouvez également ajouter une description pour le champ.

modification d'un champ de connexion plugin WordPress WPForms

N’oubliez pas de cliquer sur le bouton « Enregistrer » dans le coin supérieur droit de l’écran pour sauvegarder votre formulaire.

Ensuite, vous devez cliquer sur le bouton « Paramètres » (Settings) pour les paramètres avancés du formulaire. Sur la page « Settings », cliquez sur l’onglet « User Registration ».

WPForms affichera vos champs et un menu déroulant ci-dessous pour vous permettre de sélectionner le champ d’inscription que vous pouvez « mapper» (Connecter ou harmoniser) .

Découvrez nos 8 plugins WordPress premium pour créer des champs personnalisés

Vous remarquerez que WPForms « mappe » automatiquement vos champs par défaut comme nom, e-mail, mot de passe, etc….

Vous pouvez sélectionner une page où vous souhaitez que les utilisateurs soient redirigés, une fois qu’ils valideront le formulaire.

Vous aurez besoin pour le faire de défiler jusqu’à la section « Custom User Meta ». Ici vous pouvez entrer la clé méta personnalisée créée précédemment, puis sélectionnez le champ du formulaire que vous souhaitez « mapper ».

mapper-un-champ-personnaliser-wpforms

N’oubliez pas de sauvegarder vos réglages

Comment ajouter un formulaire d’inscription sur WordPress

Avant de commencer cette partie nous vous invitons à découvrir Comment créer une page d’inscription personnalisée sur WordPress

Si c’est fait, ajoutons ensemble un formulaire sur WordPress

WPForms simplifie l’ajout de widget dans la sidebar ou dans vos pages et articles. Vous devez commencer par éditer un article/page.

Sur l’écran d’édition, vous remarquerez le nouveau bouton WPForms.

ajouter-un-formulaire-wpforms

En cliquant dessus, cela fera apparaître un menu contextuel. Vous devez sélectionner votre formulaire à partir du menu déroulant, puis cliquez sur le bouton «  Add Form ».

Vous remarquerez que le shortcode « WPForms » apparaîtra dans l’éditeur du contenu de votre article. Vous pourrez désormais publier ou enregistrer votre articles/page puis prévisualiser votre formulaire.

previsualisation-de-formulaire-personnalise

WPForms vous permet également d’ajouter votre formulaire d’inscription personnalisé dans la barre latérale. Visitez le menu  Apparence >> Widgets >>, et ajouter un widget « WPForms » à une barre latérale.

formulaire-sur-la-barre-laterale

Vous devez sélectionner le formulaire que vous voulez afficher dans le menu déroulant dans les paramètres du widget. N’oubliez pas de sauvegarder les paramètres du widget.

C’est tout, vous pouvez maintenant visiter votre site web pour voir votre formulaire d’inscription personnalisé en action.

formulaire-personnalise-wordpress

 

Ainsi prend fin la création d’un formulaire personnalisé d’inscription. Mais avant d’aller de l’avant, nous vous proposons de consultez l’article WPForms : Le meilleur plugin WordPress pour créer un formulaire de contact

Si vous recherchez d’autres solutions premium pour créer accomplir bien évidemment la même tâche, consultez nos 3 plugins WordPress ci-dessous.

1. WP Custom Admin Login

WP Custom Admin Login est un plugin WordPress premium de personnalisation de la page de connexion par défaut de WordPress. Il vous permet de personnaliser cette page à partir du Customizer de WordPress, et est livré avec avec plus de 25 superbes modèles de page qui seront totalement au choix.

Wp custom admin login wordpress plugin to make a customized admin login page

Même si vous ne possédez pas de compétences dans le codage, vous pourrez créer une page de connexion exceptionnelle en un rien de temps. Son interface visuelle est très intuitive, ce qui vous permettra de configurer votre page de connexion selon vos préférences. Il prend en charge des vidéos et des images qui pourront être utilisées comme arrière-plan sur votre page.

Télécharger | Démo | Hébergement Web

2. Flex-Register

Flex-Register est un plugin WordPress qui vous permet d’ajouter un formulaire d’inscription  ou de connexion dans une lightbox. Un rafraichissement de la page ne sera pas nécessaire et il fonctionnera immédiatement après son installation. Aucune configuration ne sera donc nécessaire.

Flex register bootstrap 3 lightbox for register wordpress

Il s’occupera également de faire correspondre votre formulaire avec le style du thème WordPress actif sur votre site web. Comme fonctionnalité, il propose entre autre : un design épuré et un code bien commenté, son apparence entièrement personnalisable, la compatibilité avec la majorité ds thèmes WordPress populaires, le support de plusieurs navigateurs et autres.

Télécharger | Démo | Hébergement Web

3. Login Ninja

Ce plugin WordPress vous permet de personnaliser votre page de connexion. C’est plus qu’une simple personnalisation de votre formulaire de connexion. Vous pouvez personnaliser la page entière, en changeant la couleur de celle-ci, ajouter une image en arrière-plan, ajouter un logo et plus encore.Login ninja plugin wordpress

Ses autres fonctionnalités sont : la protection des formulaires de connexion et d’enregistrement avec captcha, le bannissement automatique et manuel des IP qui vous attaquent par force brute, un journal détaillé de toutes les activités liées à la connexion, la redirection des utilisateurs en fonction des rôles et des noms d’utilisateur, la réception des notifications par e-mail  pour tous les événements de connexion, une interface graphique facile à utiliser, une documentation détaillée et autres.

Télécharger | Démo | Hébergement Web

Autres ressources recommandées

Auriez-vous peut-être envie de créer d’autres types de formulaires ? n’hésitez pas à consulter cette liste de ressources recommandées. 

Conclusion

Voila ! C’est tout pour ce tutoriel. J’espère qu’il vous permettra de créer facilement un formulaire personnalisé d’inscription sur WordPress. Nous vous invitons aussi à consulter nos ressources si vous êtes un blogueur débutant

Si vous avez des suggestions ou des remarques, elles seront les bienvenues. Mais, si vous avez aimé n’hésitez pas à  partager cet article sur vos différents réseaux sociaux.

…