Construire un formulaire d'enregistrement en plusieurs étapes pour WordPress

Les plats clés

• Les formulaires par défaut fournis par WordPress ne correspondent souvent pas à la conception et à la marque du site, conduisant à une demande croissante de formulaires de connexion, d'enregistrement et de mot de passe personnalisés.
• Le didacticiel explique comment créer un formulaire d'enregistrement en plusieurs étapes WordPress à l'aide d'un plugin appelé ProfilePress, qui gère la validation, l'authentification et l'autorisation de PHP côté serveur des formulaires personnalisés.
• Le processus consiste à ajouter des champs d'informations de contact à un profil utilisateur WordPress, à construire le formulaire en plusieurs étapes avec HTML, CSS et JavaScript, et convertir la forme en un formulaire d'enregistrement WordPress fonctionnel à l'aide de la fonction de mélange du plugin.
• Le formulaire en plusieurs étapes peut être personnalisé via CSS, et il peut être intégré à d'autres outils ou services. Il est crucial de s'assurer que le formulaire est adapté aux mobiles et de valider la saisie des utilisateurs. Si le formulaire est long, il est possible d'économiser les progrès de l'utilisateur à l'aide de cookies ou de stockage local.

Les formulaires par défaut de connexion, d'enregistrement et de réinitialisation de mot de passe inclus dans WordPress (en dehors du site Web développé avec lui) ne sont souvent pas conformes à la conception et à la marque du site.

Dans le passé, lorsque WordPress était un moteur de blogs, c'était bien. WordPress est depuis devenu un système de gestion de contenu, conduisant à une demande toujours croissante de formulaires de connexion, d'enregistrement et de réinitialisation de mot de passe personnalisés.

Dans ce tutoriel, nous apprendrons comment créer un formulaire d'enregistrement en plusieurs étapes WordPress à l'aide d'un plugin que j'ai développé appelé ProfilePress.

Il convient de noter que nous avons précédemment couvert comment créer des formulaires de connexion, d'enregistrement et de réinitialisation de mot de passe personnalisés avec ProfilePress et un widget de connexion et d'inscription à onglets.

Vous trouverez ci-dessous la conception du formulaire d'enregistrement en plusieurs étapes que nous aurons construit à la fin de ce tutoriel.

Voir le formulaire d'enregistrement en plusieurs étapes avec une barre de progrès en utilisant jQuery et CSS3 par Agbonghama Collins (@ Colzo4Sky) sur Codepen.

Si vous voulez passer de l'avance sur ce tutoriel, voici une démo en direct du formulaire dans un site propulsé par WordPress.

sans plus tarder, passons directement à la construction du formulaire d'enregistrement en plusieurs étapes.

plonger dans le codage

Dans la démo ci-dessus, la section Social Profiles contient un champ Facebook, Twitter et Google, qui ne sont pas présents dans le profil utilisateur WordPress par défaut. En conséquence, nous devons créer des méthodes de contact pour les champs de profil social ci-dessus afin que WordPress puisse enregistrer les données entrées dans les champs par rapport au profil des utilisateurs enregistrés.

Ajout de champs de contact à l'aide du fichier «functions.php»

Il existe un certain nombre de tutoriels en ligne qui décrivent comment ajouter des champs d'informations de contact à un profil utilisateur WordPress, notamment:

• Personnaliser les coordonnées du profil utilisateur WordPress
• Ajouter des méthodes de contact supplémentaires aux profils utilisateur
• étendre les informations de contact de l'utilisateur dans wordpress

Ces tutoriels expliquent que si le code suivant est collé dans le fichier fonctions de votre thème.PHP, il ajoutera un champ Facebook, Twitter et Google à la section des informations de contact dans un profil utilisateur WordPress.

<span>function add_contact_methods( $user_contact ){
</span>    <span>/* Add user contact methods */
</span>    <span>$user_contact['facebook'] = __('Facebook Username'); 
</span>    <span>$user_contact['twitter'] = __('Twitter Username');
</span>    <span>$user_contact['google'] = __('Google+ Profile');
</span> 
    <span>return $user_contact;
</span><span>}
</span> 
<span>add_filter('user_contactmethods', 'add_contact_methods');</span>

Ajout de champs de contact à l'aide du plugin ProfilePress

À l'aide du plugin, les champs d'informations de contact peuvent être ajoutés en remplissant un formulaire de clé / étiquette (voir l'image ci-dessous). Ceci est situé dans la page des paramètres des informations de contact, où la clé est un nom unique utilisé en interne par WordPress pour reconnaître le champ et étiqueter la description du champ affichée aux utilisateurs.

Pour plus d'informations, jetez un œil à l'ajout d'informations de contact au profil WordPress avec le plugin ProfilePress.

Accédez à votre profil WordPress pour voir le champ Facebook, Twitter et Google affiché.

Ayant ajouté les champs d'informations de contact Facebook, Twitter et Google à votre profil WordPress, vous devez ensuite créer le formulaire en plusieurs étapes via la fonction MELANGE.

Construire la forme en plusieurs étapes

Je ne vais pas nous guider à travers le processus de la façon dont le formulaire en plusieurs étapes est construit avec HTML, CSS et JavaScript. N'hésitez pas à fouiller le code source pour en savoir plus. Nous allons plutôt apprendre à convertir la forme en un formulaire d'enregistrement WordPress réel et fonctionnel.

La fonction de mélange du plugin est capable de convertir à peu près n'importe quelle connexion, réinitialiser le mot de passe d'enregistrement et peut même modifier le modèle de formulaire de profil afin qu'un équivalent WordPress de travail soit disponible (bien que cela ne soit disponible que dans la version premium de la version de la version de la version préalable de plugin).

Avec le plugin installé, cliquez sur le menu Melange comme indiqué dans l'image ci-dessous, puis le nouveau bouton Ajouter pour initier le processus de construction.

Un formulaire vous sera présenté. Remplissez les champs comme suit.

Entrez un nom pour le formulaire dans le champ Nom. Appelons cela le formulaire d'inscription à plusieurs étapes.

Copiez le code HTML du formulaire en plusieurs étapes dans l'éditeur de Melange Design TinyMCE, puis remplacez les champs d'entrée par leurs équivalents de shortcode respectifs comme SO:

<span><form method="post" novalidate>
</span>    <span><div id="msform">
</span>        <span><!-- progressbar -->
</span>        <span><ul id="progressbar">
</span>            <span><li class="active">Account Setup</li>
</span>            <span><li>Social Profiles</li>
</span>            <span><li>Personal Details</li>
</span>        <span></ul>
</span>        <span><!-- fieldsets -->
</span>        <span><fieldset>
</span>            <span><h2 class="fs-title">Create your account</h2>
</span>
            <span><h3 class="fs-subtitle">This is step 1</h3>
</span>            <span>[reg-username placeholder="Username"]
</span>            <span>[reg-email placeholder="Email"]
</span>            <span>[reg-password placeholder="Password"]
</span>            <span><input type="button" name="next" class="next action-button" value="Next"/>
</span>        <span></fieldset>
</span>        <span><fieldset>
</span>            <span><h2 class="fs-title">Social Profiles</h2>
</span>
            <span><h3 class="fs-subtitle">Your presence on social networks</h3>
</span>            <span>[reg-cpf key="twitter" type="text" placeholder="Twitter"]
</span>            <span>[reg-cpf key="facebook" type="text" placeholder="Facebook"]
</span>            <span>[reg-cpf key="google" type="text" placeholder="Google Plus"]
</span>            <span><input type="button" name="previous" class="previous action-button" value="Previous"/>
</span>            <span><input type="button" name="next" class="next action-button" value="Next"/>
</span>        <span></fieldset>
</span>        <span><fieldset>
</span>            <span><h2 class="fs-title">Personal Details</h2>
</span>
            <span><h3 class="fs-subtitle">We will never sell it</h3>
</span>            <span>[reg-first-name placeholder="First Name"]
</span>            <span>[reg-last-name placeholder="Last Name"]
</span>            <span>[reg-nickname placeholder="Nickname"]
</span>            <span>[reg-bio placeholder="Biography"]
</span>            <span><input type="button" name="previous" class="previous action-button" value="Previous"/>
</span>            <span>[reg-submit class="submit action-button" value="Submit"]
</span>        <span></fieldset>
</span>    <span></div>
</span><span></form></span>

Nous aurions pu laisser les champs sous la forme de la façon dont ils étaient sans les remplacer par leur équivalent de Shortcode ProfilePress. Cependant, l'utilisation des shortcodes s'occupe d'ajouter l'attribut de nom correct pour les champs d'entrée.

Si vous pouvez déterminer l'attribut de nom pour les champs (par exemple, pour le champ de nom d'utilisateur, l'attribut de nom est Reg_Username), vous pourriez aussi bien supprimer leur shortcodes.

Étant donné que ProfilePress n'inclut pas de zone de texte pour insérer JavaScript, le code JavaScript ira dans le champ de conception de Melange immédiatement après le code HTML du formulaire.

Remarque: l'attribut novaliate a été ajouté à la balise

pour contourner l'erreur ennuyeuse «un formulaire invalide avec name =» n'est pas focalisable »dans les navigateurs basés sur les clignotements (tels que Chrome et Opera) qui empêchent le formulaire d'être soumis.

<span>function add_contact_methods( $user_contact ){
</span>    <span>/* Add user contact methods */
</span>    <span>$user_contact['facebook'] = __('Facebook Username'); 
</span>    <span>$user_contact['twitter'] = __('Twitter Username');
</span>    <span>$user_contact['google'] = __('Google+ Profile');
</span> 
    <span>return $user_contact;
</span><span>}
</span> 
<span>add_filter('user_contactmethods', 'add_contact_methods');</span>

Explication du code: Premièrement, nous avons inclus un appel différé à la bibliothèque de soulagement jQuery. Cela a été fait pour ajouter un effet d'assouplissement au formulaire suivi des codes JavaScript qui gèrent réellement le multi-stepping.

Collez le CSS de la forme en plusieurs étapes dans la zone de code de feuille de style CSS.

Remarque: Les erreurs générées par les formulaires d'enregistrement alimentées par ProfilePress sont enveloppées dans une div avec nom de classe ProfilePress-Reg-status, d'où la classe de la feuille de style.

Entrez le code ci-dessous dans le champ de réussite d'enregistrement pour afficher un avis personnalisé sur l'inscription réussie des utilisateurs.

Enregistrer le formulaire et revenir au catalogue Melange.

Copiez le shortcode généré et collez-le sur une page WordPress de votre choix.

Enregistrez la page, puis prévisualisez pour voir l'enregistrement en plusieurs étapes en action.

Une démo en direct du formulaire d'enregistrement en plusieurs étapes est disponible ici.

Résumé

Dans ce tutoriel, nous avons appris à créer un formulaire d'enregistrement en plusieurs étapes WordPress à l'aide d'un plugin que j'ai développé appelé ProfilePress. Ce plugin gère la validation PHP du serveur, l'authentification et l'autorisation de la connexion personnalisée, l'enregistrement, la réinitialisation du mot de passe et les formulaires de profil de modification frontal.

Si vous avez des questions, des suggestions ou des contributions, veuillez me le faire savoir dans les commentaires.

Questions fréquemment posées (FAQ) sur la création d'un formulaire d'enregistrement en plusieurs étapes pour WordPress

Comment puis-je créer une forme en plusieurs étapes sans utiliser de plugin?

Créer une forme en plusieurs étapes sans utiliser de plugin implique le codage. Vous devez avoir une compréhension de base de HTML, CSS et JavaScript. Le processus consiste à créer un formulaire HTML, à le coiffer avec CSS, puis à utiliser JavaScript pour contrôler les étapes du formulaire. Vous pouvez également utiliser Ajax pour soumettre le formulaire sans rafraîchir la page. Cependant, cette méthode nécessite une bonne compréhension de ces langues et du développement WordPress. Si vous n'êtes pas à l'aise avec le codage, l'utilisation d'un plugin peut être une meilleure option.

Puis-je utiliser un formulaire en plusieurs étapes à d'autres fins en plus de l'enregistrement?

Absolument! Les formulaires en plusieurs étapes peuvent être utilisés à diverses fins. Ils sont particulièrement utiles lorsque vous devez collecter beaucoup d'informations auprès des utilisateurs. Par exemple, vous pouvez les utiliser pour des enquêtes, des demandes d'emploi ou des formulaires de contact complexes. La clé consiste à décomposer les informations en morceaux gérables pour faciliter la fin des utilisateurs. de votre formulaire en plusieurs étapes peut être effectué via CSS. Vous pouvez modifier les couleurs, les polices, les styles de bouton et plus encore. Si vous utilisez un plugin, il peut être livré avec des options de personnalisation. Par exemple, certains plugins vous permettent de choisir parmi différents modèles de disposition ou d'ajouter des CSS personnalisés.

Est-il possible d'ajouter une logique conditionnelle à mon formulaire en plusieurs étapes?

Oui, il est possible d'ajouter Logique conditionnelle à votre formulaire en plusieurs étapes. Cela signifie que les étapes ou les champs du formulaire peuvent changer en fonction de l'entrée de l'utilisateur. Par exemple, vous voudrez peut-être afficher différentes questions en fonction des réponses précédentes de l'utilisateur. Cela peut être fait via JavaScript ou avec l'aide d'un plugin qui prend en charge la logique conditionnelle.

Comment puis-je m'assurer que mon formulaire en plusieurs étapes est convivial? Est-ce que les mobiles sont cruciaux pour l'expérience utilisateur. Vous pouvez le faire en utilisant des techniques de conception réactives. Cela signifie que la disposition et les éléments du formulaire s'ajusteront automatiquement pour s'adapter à différentes tailles d'écran. Si vous utilisez un plugin, assurez-vous qu'il prend en charge la conception réactive.

Puis-je enregistrer les progrès de l'utilisateur dans le formulaire en plusieurs étapes?

Oui, il est possible d'enregistrer les progrès de l'utilisateur la forme en plusieurs étapes. Cela peut être utile si le formulaire est long et que les utilisateurs peuvent ne pas le terminer en une seule session. Vous pouvez le faire en utilisant des cookies ou un stockage local dans le navigateur de l'utilisateur. Certains plugins offrent également cette fonctionnalité.

Comment puis-je valider l'entrée de l'utilisateur dans le formulaire en plusieurs étapes?

La validation des entrées de l'utilisateur est importante pour vous assurer que vous collectez les informations correctes. Vous pouvez le faire en utilisant JavaScript pour vérifier l'entrée avant la soumission du formulaire. Certains plugins proposent également des fonctionnalités de validation intégrées.

Puis-je intégrer mon formulaire en plusieurs étapes avec d'autres outils ou services?

Oui, vous pouvez intégrer votre formulaire en plusieurs étapes avec d'autres outils ou services. Par exemple, vous souhaiterez peut-être envoyer les données du formulaire à un service de marketing par e-mail ou à un CRM. Cela peut être fait via des API ou à l'aide d'un plugin qui prend en charge les intégrations.

Comment puis-je tester mon formulaire en plusieurs étapes pour vous assurer qu'il fonctionne correctement?

Tester votre formulaire en plusieurs étapes est crucial pour vous assurer qu'il fonctionne correctement. Vous pouvez le faire en remplissant le formulaire vous-même et en vérifiant si les données sont correctement enregistrées ou envoyées. Vous devez également tester le formulaire sur différents appareils et navigateurs pour vous assurer qu'il est réactif et compatible.

Que dois-je faire si je rencontre des problèmes tout en créant mon formulaire en plusieurs étapes?

Si vous rencontrez des problèmes Lors de la création de votre formulaire en plusieurs étapes, vous pouvez essayer de dépanner le problème vous-même en vérifiant vos paramètres de code ou de plugin. Si vous avez encore des problèmes, vous pouvez demander de l'aide dans les communautés en ligne, les forums ou l'équipe de soutien du plugin. N'oubliez pas, il est normal de demander de l'aide lorsque vous en avez besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!