Comment créer des formulaires d'inscription et de connexion WordPress personnalisés

Comment créer des formulaires WordPress personnalisés

Il existe plusieurs plugins qui vous aideront à créer un formulaire d'inscription pour votre site WordPress. Mais sur la base de la facilité d'utilisation et des fonctionnalités, nous avons trouvé que ProfilePress était le meilleur plugin de formulaire sur le marché.

ProfilePress propose de superbes formulaires prédéfinis que vous pouvez personnaliser selon vos besoins à l'aide de fonctionnalités de glisser-déposer. Cela dit, le plugin est bien plus qu'un générateur de formulaires. En utilisant ProfilePress, vous pouvez créer :

• Beaux profils d'utilisateurs
• Répertoires de membres consultables et filtrables
• Restreindre l'accès aux publications, aux pages et aux pages enfants
• Restreindre l'accès aux catégories, balises, types de publication personnalisés et taxonomies

En plus de tout cela, vous pouvez étendre les fonctionnalités du plug-in en utilisant des modules complémentaires tels que Google reCAPTCHA, Polylang, l'authentification à deux facteurs, etc. Vous pouvez en savoir plus sur les fonctionnalités du plug-in sur leur page de liste des fonctionnalités.

ProfilePress est un plugin premium et pour l'utiliser, vous devrez acheter une licence qui coûte 79 $ par an pour un seul site. Si vous souhaitez l'utiliser pour plusieurs sites Web, souscrivez à des forfaits supérieurs.

Utilisons le plugin pour créer des formulaires WordPress personnalisés.

Création d'un enregistrement personnalisé

Installez et activez ProfilePress sur votre site WordPress.

Étape 1 : Pour vous assurer que vous pouvez utiliser des champs personnalisés sur votre formulaire, vous devez activer les champs personnalisés en accédant à ProfilePress > Addons > Champs personnalisés et basculez le bouton sur .

Étape 2 : Allez maintenant dans ProfilePress > Formulaires et profils > Ajouter un nouveau > Enregistrement .

Étape 3 : Ensuite, vous avez la possibilité de modifier un modèle prédéfini ou de créer le formulaire à partir de zéro.

Construire un formulaire à partir de zéro nécessite une connaissance du codage et beaucoup d'entre vous lisant cet article ne savent probablement pas comment coder. Dans ce cas, choisissez le Drag & Drop Builder .

Étape 4 : Sur la page suivante, vous devrez nommer le formulaire et choisir un modèle . Ensuite, vous procéderez à la conception du formulaire à l'aide du générateur de glisser-déposer.

Étape 5 : Créez le formulaire en utilisant les champs personnalisés suivants :

• Nom d'utilisateur
• Adresse e-mail
• Confirmez votre email
• Mot de passe
• Confirmez le mot de passe
• Fiabilité du mot de passe
• Site Internet
• Surnom
• Afficher un nom
• Prénom
• Nom de famille
• Télécharger une photo de profil
• Télécharger la photo de couverture
• Biographie
• Sélectionnez un rôle
• HTML personnalisé
• reCAPTCHA

Étape 6 : Cliquez sur le bouton Aperçu en direct pour prévisualiser le formulaire avant d'enregistrer les modifications.

Étape 7 : Ensuite, faites défiler jusqu'à Paramètres du formulaire . Ici, vous pouvez modifier les étiquettes des boutons, la couleur, le titre et les paramètres d'enregistrement.

Étape 8 : Lorsque vous êtes prêt, appuyez sur le bouton Enregistrer les modifications . C'est ça. Votre nouveau formulaire d'inscription est maintenant prêt.

IMPORTANT : Vous souhaitez ajouter Google reCAPTCHA, les connexions sociales ou l'authentification à deux facteurs à votre formulaire ? Le plugin vous permet d'étendre et de personnaliser les fonctionnalités de votre site Web. Apprendre encore plus

Ensuite, il y a deux choses que vous devez faire :

1. Vous devrez publier le formulaire sur une nouvelle page ou poster
2. Ensuite, faites du nouveau formulaire votre formulaire d'inscription WordPress par défaut

Nous couvrons les deux tutoriels dans deux sections différentes ci-dessous. Mais d'abord, regardons rapidement comment créer un formulaire de connexion WordPress personnalisé.

Création d'un formulaire de connexion personnalisé

Les étapes à suivre sont identiques à celles du formulaire d'inscription à deux exceptions près :

Accédez à ProfilePress > Formulaires et profils > Ajouter nouveau > Drag & Drop Builder. Et au lieu de choisir Enregistrement, choisissez Connexion .

Puis après avoir nommé le formulaire et choisi un template , vous remarquerez que les champs personnalisés sont limités par rapport au formulaire d'inscription. De toute façon, vous n'avez pas vraiment besoin d'autant de champs personnalisés pour un formulaire de connexion.

Voici une liste des champs personnalisés que vous pouvez utiliser sur votre formulaire de connexion :

• Connexion utilisateur (nom d'utilisateur ou e-mail)
• Mot de passe
• N'oubliez pas de vous connecter
• HTML personnalisé
• reCAPTCHA

Tout le reste est exactement le même que le formulaire d'inscription.

Lorsque votre nouveau formulaire de connexion est prêt, passez à la section suivante où vous apprendrez comment publier les nouveaux formulaires (inscription et connexion) et comment les définir comme formulaires WordPress par défaut.

Comment publier les nouveaux formulaires sur votre site

C'est facile.

Accédez à ProfilePress > Formulaires et profils et sélectionnez Connexion ou Inscription . Sur le côté droit des formulaires, vous devriez pouvoir voir un shortcode. Copiez le shortcode du formulaire que vous venez de créer.

Ensuite, créez une nouvelle page en allant dans Pages > Ajouter un nouveau et collez le shortcode. Nommez la page et appuyez sur Publier .

Votre formulaire est maintenant en ligne sur votre site Web.

Voici à quoi ressemble le formulaire d'inscription sur notre site de démonstration :

Et voici à quoi ressemble le formulaire de connexion :

L'étape suivante consiste à faire du nouveau formulaire votre formulaire de connexion ou d'inscription par défaut.

Comment définir les nouveaux formulaires comme formulaire WordPress par défaut

Accédez à ProfilePress > Paramètres > Global .

Dans l'option Page de connexion , il y a un menu déroulant. Dans le menu déroulant, sélectionnez la nouvelle page sur laquelle vous avez publié le formulaire de connexion.

Et dans l'option Page d'inscription , sélectionnez la nouvelle page où vous avez publié le formulaire d'inscription.

C'est ça. Chaque fois que quelqu'un essaie de s'inscrire ou de se connecter à votre site, il rencontre de nouveaux formulaires.

Comment créer des formulaires personnalisés pour WooCommerce

Vous êtes nombreux à lire cet article à vous demander si vous pouvez remplacer les formulaires de votre site WooCommerce ? Sûr que vous pouvez. Voici comment:

Activez et installez ProfilePress sur votre site Web WooCommerce. Comme nous l'avons dit plus tôt, d'après notre expérience personnelle, ProfilePress est le meilleur plugin que vous pouvez utiliser pour créer des formulaires car il est facile à utiliser et offre une tonne de fonctionnalités.

Ensuite, vous devez activer l'intégration de WooCommerce en accédant à ProfilePress > Addon > WooCommerce et en basculant le bouton sur .

Création d'un formulaire d'inscription et de connexion personnalisé pour WooCommerce

Nous avons déjà couvert les étapes que vous devez suivre pour créer un formulaire d'inscription et de connexion plus haut dans l'article. Vous devrez suivre les étapes exactes pour créer des formulaires sur votre site WooCommerce.

Lorsque les formulaires sont prêts, publiez-les sur deux pages distinctes. Nous avons également couvert cela dans la section "Comment publier les nouveaux formulaires sur votre site".

Nous vous avons également montré comment définir les nouveaux formulaires comme formulaire d'inscription et de connexion par défaut sur votre site Web. Vous devrez suivre les mêmes étapes sur votre site WooCommerce.

Ajout de champs personnalisés aux formulaires de paiement WooCommerce

Il existe deux types de formulaires de paiement : l'inscription et la connexion. Dans cette section, vous apprendrez à créer des formulaires d'inscription ou de connexion à la caisse personnalisés.

Formulaire de connexion à la caisse personnalisé

Vous souhaitez remplacer votre formulaire de connexion à la caisse par défaut par un formulaire de connexion à la caisse personnalisé ?

Commençons par créer un formulaire de connexion à la caisse personnalisé. Nous vous avons déjà montré comment faire cela dans une section précédente. Veuillez suivre les étapes de la section "Création d'un formulaire de connexion personnalisé".

Fait? Maintenant, allez dans ProfilePress > Paramètres > Général > WooCommerce .

Vous devriez voir une option appelée Checkout Login Form . Il est livré avec un menu déroulant. Sélectionnez le nouveau formulaire dans le menu déroulant et enregistrez votre paramètre.

Vos clients devraient pouvoir utiliser le nouveau formulaire pour se connecter lors du paiement.

Commander le formulaire d'inscription

En ce qui concerne le formulaire d'inscription, ProfilePress vous permet d'ajouter des champs personnalisés au formulaire d'inscription à la caisse WooCommerce. Vous n'avez pas besoin de créer un formulaire d'inscription à partir de zéro. Votre site Web utilisera votre formulaire d'inscription par défaut comme formulaire d'inscription à la caisse, mais vous pouvez ajouter des champs personnalisés au formulaire.

Pour ajouter des champs personnalisés à votre formulaire d'inscription à la caisse, vous devez d'abord créer les champs personnalisés.

Accédez à WooCommerce > Paramètres > Comptes et confidentialité et activez l'option « Autoriser les clients à créer un compte lors du paiement ».

Allez ensuite dans ProfilePress > Paramètres > Champs personnalisés > Ajouter nouveau . Sur la page suivante, saisissez le libellé, la clé, la description et le type de champ. Enregistrez votre réglage.

Lorsque vous avez terminé de créer tous les champs personnalisés, ajoutez-les au formulaire d'inscription à la caisse.

Accédez à ProfilePress > Paramètres > Général > WooCommerce > Champs d'inscription à la caisse et les champs que vous venez de créer doivent apparaître sous forme de liste déroulante. Sélectionnez-les .

Dans la section suivante (c.-à-d. Champs d'inscription obligatoires), vous pouvez insérer les champs personnalisés que vous souhaitez rendre obligatoires.

Formulaires personnalisés d'inscription et de connexion à Mon compte

Avec ProfilePress, vous avez la possibilité de définir un formulaire d'inscription et de connexion personnalisé. Vous devrez d'abord créer les formulaires sur votre site WordPress. Suivez simplement les étapes que nous avons couvertes dans « Comment créer des formulaires WordPress personnalisés ».

Allez ensuite dans ProfilePress > Paramètres > Général > WooCommerce > Formulaire de connexion à mon compte et sélectionnez le nouveau formulaire de connexion que vous venez de créer.

Ensuite, rendez-vous sur Formulaire d'inscription à Mon compte et sélectionnez le nouveau formulaire d'inscription que vous venez de créer.

Vous trouverez ci-dessous un aperçu de ce à quoi cela pourrait ressembler sur la page Mon compte WooCommerce.

C'est tout, les amis. Avec cela, nous sommes arrivés à la fin de ce tutoriel.

Dernières pensées

Créer une inscription WordPress personnalisée et le formulaire de connexion est une excellente idée. Vous pouvez ajouter des champs personnalisés, collecter plus de données d'utilisateurs et concevoir le formulaire d'une manière qui convient à votre marque.

Bien qu'il existe de nombreux plugins qui vous aideront à créer des formulaires sur votre site Web WordPress, nous avons trouvé que ProfilePress était le meilleur plugin de formulaire d'enregistrement et de connexion des utilisateurs. Il est très facile à utiliser et s'intègre aux magasins WooCommerce.