Maison > Tutoriel CMS > WordPresse > Créer des formulaires personnalisés dans WordPress : un guide étape par étape

Créer des formulaires personnalisés dans WordPress : un guide étape par étape

WBOY
Libérer: 2023-09-06 20:29:05
original
991 Les gens l'ont consulté

Les formulaires vous permettent de collecter des informations sur les visiteurs du site Web. Qu'il s'agisse de créer un compte, de vous connecter à votre site Web, de vous fournir des commentaires sur un produit, de vous contacter ou de vous abonner à une newsletter, vous pouvez collecter des données via des formulaires.

Avec WordPress, il est très simple d’intégrer des formulaires à votre site internet. La plupart des thèmes vous fourniront des formulaires courants dès la sortie de la boîte, tels que des formulaires de connexion, d'inscription et de contact.

Mais le problème est que vous n'aimerez peut-être pas ce qui est inclus par défaut. Peut-être souhaitez-vous un outil qui s'intègre mieux à votre thème global ou qui collecte des données supplémentaires.

Dans cet article, je vais vous montrer comment créer de superbes formulaires qui correspondent à la conception de votre thème et à votre palette de couleurs sans écrire de code HTML ou CSS.

Installez le plugin de formulaire d'adhésion WordPress

Vous pouvez utiliser des dizaines de plugins gratuits et payants pour créer des formulaires personnalisés. Dans cet exemple, nous utiliserons un plugin gratuit appelé Ultimate Member.

La meilleure chose à propos de ce plugin est qu'il crée tout pour vous : formulaires, pages, newsletters par e-mail et plus encore. Il propose également un générateur de formulaires super personnalisable qui propose des tonnes de types de champs (tels que des sélecteurs de date et des téléchargements de fichiers), ainsi que des milliers d'icônes qui peuvent être incluses dans vos formulaires pour les rendre accrocheurs.

Avant de commencer, vous devez d'abord installer le plugin. Pour ce faire, suivez ces étapes :

  • Connectez-vous à votre tableau de bord d'administration WordPress.
  • Accédez à Plugins > Ajouter un nouveau plugin
  • Utilisez la barre de recherche pour rechercher "ULTIMATE MEMBERSHIP"
  • Installez et activez le plugin (options mises en évidence dans l'image ci-dessous)

在 WordPress 中创建自定义表单:分步指南

Une fois l'installation terminée, vous trouverez l'onglet Ultimate Membership dans le tableau de bord. Accédez à Adhésion ultime > Paramètres pour voir toutes les options.

Pages personnalisées et newsletters

Comme je l'ai mentionné au début de cet article, le plugin Ultimate Member vous aide à créer différents types de pages qui sont généralement requises dans votre site Web.

在 WordPress 中创建自定义表单:分步指南

Vous pouvez également ajouter une invite d'inscription à la newsletter sur votre site Web et personnaliser l'e-mail de bienvenue (E-mail d'activation de compte) à votre guise.

在 WordPress 中创建自定义表单:分步指南

Vous pouvez personnaliser diverses pages et formulaires à partir de l'onglet Apparence. Voyons maintenant comment créer un formulaire sur votre site Web.

Créer un formulaire

Accédez à Membres ultimes > Formulaires dans votre tableau de bord WordPress. Vous devriez y trouver les formulaires par défaut Connexion, Inscription, et Profil.

在 WordPress 中创建自定义表单:分步指南

Vous pouvez modifier l'un de ces formulaires ou en créer un nouveau à partir de zéro. Cliquez sur Modifier sur n'importe quel formulaire pour accéder au générateur de formulaire.

在 WordPress 中创建自定义表单:分步指南

Il y a des champs pour le nom d'utilisateur, le prénom, le nom, l'adresse e-mail et le mot de passe. Les quatre premiers sont tous des zones de texte, tandis que le mot de passe est un champ de type mot de passe, similaire à un champ de texte, mais avec une saisie masquée.

Vous pouvez ajouter de nouveaux champs ou personnaliser les champs existants. Pour personnaliser un champ existant, cliquez simplement sur l'icône en forme de crayon à côté du nom du champ et un schéma apparaîtra contenant les détails du champ.

在 WordPress 中创建自定义表单:分步指南

Ici, vous pouvez voir de nombreuses options de personnalisation des entrées. Vous pouvez obtenir plus d'informations sur chaque option en survolant l'icône en forme de point d'interrogation au-dessus de chaque option. Cela affichera une info-bulle.

Pour ajouter un nouveau champ, cliquez sur l'icône + sous les autres champs pour ouvrir le gestionnaire de champs.

在 WordPress 中创建自定义表单:分步指南

Utilisez cette entrée pour sélectionner le type qui correspond à ce que vous souhaitez collecter. Vous pouvez également sélectionner un champ personnalisé ci-dessous si vous en avez déjà créé un.

Après avoir sélectionné un champ, un nouveau modal apparaîtra dans lequel vous pourrez fournir des détails sur la saisie (titre, espaces réservés, etc.) et ajouter une icône. Une fois terminé, cliquez sur le bouton Ajouter pour ajouter le champ à votre formulaire.

Pour voir à quoi ressemblera votre formulaire, cliquez sur le bouton Aperçu en direct en haut du générateur de formulaire.

在 WordPress 中创建自定义表单:分步指南

Vous pouvez également ajouter des marges, un remplissage, une couleur de bordure, une radio de bordure et bien plus encore. Vous pouvez même utiliser l'éditeur de ligne pour lier les classes CSS à chaque entrée (cliquez sur l'icône en forme de crayon sous le Aperçu en direct).

在 WordPress 中创建自定义表单:分步指南

À l'aide de ces outils, vous pouvez facilement créer des formulaires attrayants et les intégrer à la conception globale de votre thème.

Conclusion

Bien qu'il existe de nombreux autres plugins pour créer des formulaires, Ultimate Member est certainement l'un des plus riches en fonctionnalités. Sans oublier que c'est gratuit !

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal