Comment créer un formulaire de contact dans WordPress ?

1. Que apprendrons dans ce cours court ?: Bonjour et bienvenue sur squishier. J'espère que tu vas bien. Dans cette vidéo, nous allons apprendre comment créer un formulaire de contact simple dans WordPress. Le formulaire de contact que nous allons créer ressemblera donc ceci. Tu peux le voir. Des théories simples étiquetées comme votre nom, l'objet de votre e-mail. Et ici, j'utilise un seul champ appelé d' où vous avez entendu parler de nous. Vous considérez les litiges comme de la nourriture et différentes formes de bandes dessinées à mentionner pour, vous savez, obtenir les commentaires des clients, comme l' endroit où ils ont entendu parler de nous, à propos de nous. Et puis le champ de message simple avec quelques options en ce moment ici. Et puis un magnifique bouton de soumission. Et vous pouvez voir des effets simples ici. Nous allons donc apprendre comment créer cet incroyable formulaire de contact dans WordPress. Alors plongeons-nous dans le vif du sujet. 2. Comment développer et personnaliser un formulaire de contact ?: Bonjour et bienvenue sur la deuxième vidéo de ce cours. Merci d'avoir suivi ce cours sur Neon Discharge. Donc, dans cette vidéo, nous allons en fait commencer comment créer le formulaire de contact sur un site Web WordPress. Il s'agit donc d'une nouvelle installation de WordPress. Et nous sommes prêts à utiliser une équipe supplémentaire pour créer le formulaire de contact à ce sujet, dans le cadre de ce cours. Et maintenant, vous allez installer un plugin que nous utilisons pour créer le formulaire de contrat. Allons-y et installons le plugin appelé contact form seven. Certainement dans son intégralité, très simple. Je vais vous montrer étape par étape comment configurer ce formulaire. Activation de ce plugin. Et vous trouverez le plugin ici. Contenu rebelle. suffit d'entrer et vous trouverez un formulaire de contact par défaut qui vous permettra de créer un nouveau formulaire adapté à nos besoins. Donc, en ajoutant un nouveau formulaire ici, vous trouverez ici un champ par défaut, les champs de saisie par défaut. Nettoyons donc ce formulaire, simple formulaire de contact, et voyons à quoi il va ressembler. Ce sera la valeur par défaut. Regardez le plugin, je vais personnaliser ce formulaire comme je viens de vous le signaler sur la vidéo de démonstration. Donc, pour l'instant, nous allons voir à quoi cela ressemble. Au fait, laissez-moi également vous dire comment installer le plug-in sur la page d'accompagnement. Afficher afficher le formulaire sur la pièce. Nous allons donc aller aux pages, créer une nouvelle page. Habituellement, vous voyez la page contact comme contactez-moi, contactez-nous. Alors entrez et nommez les pages, sous-traitants. Et ici, si vous utilisez le plugin Gutenberg, vous trouverez un contact d' extinction de formulaire de contact à proximité. Vous pouvez simplement entrer et sélectionner ceci. Et si vous n'utilisez pas Gutenberg ou s'il n'existe aucun autre plug-in, vous pouvez simplement copier ce code court à partir ici et le coller sur votre page. Et pour travailler. Dans notre cas, le voici à Göteborg. Vous pouvez donc voir ici le champ du formulaire de contact. Sélectionnez ici le contrat simple que nous allons publier et publier cette page. Il suffit de voir à quoi ressemble ce formulaire sur votre page. Et vous pouvez voir qu'il s' agit d'une configuration simple de ce plug-in, de la vue par défaut de cette entité de plugin. Alors maintenant, nous allons personnaliser ce plugin. Passons à la démo que nous venons de voir, nous venons de voir. Nous avons donc divisé cela, dépensé les trois premières lignes et les trois premières colonnes. Vous vous sentirez aussi étiqueté que d'où vous avez entendu parler de nous. Ensuite, nous ajouterons également quelques petits éléments CSS pour embellir ce formulaire. Alors allons-y. Tout d'abord, nous allons ajouter un nouveau champ. Pour ça. Vous pouvez utiliser l'étiquette et la livraison. Écoutez ce que vous avez à dire, entendu parler de nous. Et ici, nous allons utiliser le champ déroulant. Ce sont les champs que vous pouvez utiliser dans textes simples d'une entreprise dans un premier temps , ainsi que l'URL et le numéro de téléphone, ou dans un champ de date et vous pouvez le voir ainsi de suite. Il y a ici des périodes simples, différentes. Nous allons donc utiliser ce champ de menu déroulant, qui est virtuel et qui est en fait le menu de sélection que vous verrez sur différents sites Web. Appelons le terrain « amis ». Ici, nous allons ajouter quelques options comme YouTube. Facebook. Toujours sûr. Nous ajouterons également une option appelée autre, car certaines plateformes, vous savez, ne spécifieront pas la police de caractères afin que les utilisateurs puissent choisir le blanc. Nous allons donc le rendre obligatoire. C'est à vous de décider si vous avez rendu le champ obligatoire ou non. Mais voici la possibilité de rencontrer la fluidité silencieuse ou non. Je ne le rends pas obligatoire. Si vous le souhaitez, vous pouvez cliquer sur cette icône en forme de coche. Et la peur d'avoir inséré un tag ici. Et maintenant, vous allez voir à quoi ressemble ce champ. Économisez cet automne et actualisez la page ici. Et vous voyez cette période carotidienne, non ? Donc, comme ces champs sont obligatoires, ce message d'erreur continuera à s'afficher jusqu'à ce que nous les remplissions. Nous allons maintenant personnaliser le CSS de celui-ci pour embellir ce formulaire. Pour ce faire, nous allons devoir ajouter quelques balises ici, HTML ici pour utiliser les balises ces utilisateurs dans les zones HTML et CSS. Alors allons-y. Tout d'abord, nous allons ajouter des balises div pour enfreindre les règles. Dans cette vidéo, je vais utiliser les nuages, voir f tiret row. Et je vais utiliser une classe C, F, la colonne d'âge pour les colonnes et fermer celle-ci. Et nous verrons si Rich Paul classe, je vais aussi utiliser cette classe de taille. Ce sera un mandat. Parce que nous devons diviser ces trois premières périodes et ces trois colonnes. Je vais donc utiliser cette troisième classe. Et avant cela, je vais juste ajouter quelques CM initiaux, dont ces initiales sont très importantes si vous voulez voir si vos styles, votre CSS ne sont pas conflictuels. Parce que lorsque nous installons différents plugins, différents CSS sont intégrés au site Web et parfois ils sont construits. Nous ajoutons donc quelques initiales pour le différencier des différents plugins. Peut-être que vous pouvez utiliser CF ou peut-être que vous pouvez utiliser votre site Web, prénom ou quoi que ce soit d'autre qui le différenciera des autres classes de compétences. Donc pour l'instant, j'utilise le CF 1 tiers. 1 tiers est en fait le CSS que je vais faire pour faire 1 troisième colonne et tout ça. Je vais donc le copier trois fois. Je peux donc utiliser les trois meubles pour l'automne. Je vais copier ce champ de nom d'URL, et je vais le modifier ici. Et puis en copiant ce champ e-mail ajouté ici. Je vais copier le champ sujet et l'ajouter. Hein ? Clôturez donc l'audit CFR ici. Notre première ligne est donc terminée. Maintenant, je profite d'un jour de plus pour une autre LCF. On peut utiliser l'autre champ ici, non ? Copiez ce bloc ici et collez-le. Je voulais également ajouter CF appelé div ici. Parce que la ligne et la colonne se font avant la chirurgie en utilisant tous les sites Web. Donc maintenant, cette fois, nous allons utiliser CF one car ce sera la ligne complète. Deux espaces, généralement pour cela. Et maintenant, cette ligne est semi-automatique, ouvrant un autre CFO ou le champ de message, et une autre colonne cf. C, F, un cool, car ce sera aussi la rangée complète. Et fermer cet équipement détruit la saisie semi-automatique. Ouvrez maintenant un autre directeur financier pour un bouton d'envoi. Désolée, j'ai fait une erreur. Nous verrons si on l'appelle la colonne cf ici. Colonne. Vous pouvez voir Oakland car cela nécessitera également la ligne complète, le matériau de la colonne. Notre structure HTML de base est donc complète. Vous verrez à quel point il est beau avec un espacement approprié de Peano et tout ça. La raison pour laquelle j'utilise ces classes est en fait une habitude pour faciliter le CSS car ces classes seront capables de cibler facilement ces entrées de différentes tailles. Et nous pourrons le réutiliser plus tard sous différentes formes. Ou peut-être que si nous avons plusieurs formulaires, vous pouvez utiliser les mêmes classes pour minimiser le CSS et après tout, cela diminue pour Laura, le site Web. Et comme ça, si vous effectuez ces sites endométriaux, cela améliorera également les temps de chargement et tout ça. Donc oui, sauvegardons ce formulaire. Maintenant. y aura aucune différence ici car nous venons d'ajouter les balises HTML. Nous allons maintenant faire le CSS ici. C'est de la vraie magie. Ouvrez l'inspecteur ici. Et nous allons faire du CSS. Allons-y et là, je vais également utiliser le style CSS courant pour, comme je l'ai mentionné, avoir l'habitude de réutiliser le flux CSS. Donc je fais aussi cette rangée de mucoviscidose capillaire. Je vais faire en sorte que l'affichage soit flexible. Et ici, je vais utiliser l'espace de contenu justifié entre les deux. Et maintenant, je vais personnaliser l'appel à la mucoviscidose. Ciblons la courbe CF1. Et ici, je vais utiliser 3 %. Et réduisons-le davantage. 2.5. Je pense que c'est parfait. Et ici, je vais utiliser le merveilleux sélecteur CF pour créer les colonnes complètes COVID. Je vais utiliser un 100 %. Et vous voyez que tout est brièvement aligné. Hein ? Maintenant, je vais entrer et styliser nos étiquettes ici. Utilisons le CF all gloss. Parce qu'il est utilisé dans tous les éléments qui inspirent l' empathie. Étiquette. Faisons une transformation de texte. La transformation du texte est fondamentalement, elle modifie la transformation des textes, comme catalyser les minuscules, majuscules, connaître toutes ces choses. Je vais donc utiliser ici des majuscules, taille de police 12 px. Et je vais utiliser font-weight. Le poids de la police est en fait, il change le poids des polices. Vous voyez la fonction de la laine et son apparence très belle. Hein ? Maintenant, je vais également styliser les champs de saisie. Ici. Je vais utiliser cette entrée. Et après avoir utilisé les virgules, je vais également cibler les extérieurs et sélectionnés. Mais voilà, parce que nous utilisons des entrées avec la classe appelée CF. Il ciblera également cette entrée. Donc Melbourne, nous ne voulons pas changer cela fonction de ces champs de saisie parce que c'est une chose et des choses différentes. Donc exception ici et exocrine, vous en apprendrez également 11 autres : la tête de Zeus, qui n'est pas un support. Et ici, je vais ajouter le type d'attribut submit what, donc c'est un tibia, donc élément, c'est, vous savez, quand l'ignorer. Toutes les entrées qui ont cet attribut types d'hommes. Donc, nous sommes comme si tout allait ignorer ce bouton. Et nous allons aussi simplement, nous allons simplement parler de ces champs de saisie, à l'exception ce numéro, ici. Changeons l'arrière-plan en blanc, transparent en fait. Et la bordure doit être solide au px. Juste ici. Je vais utiliser un fond de teint. Si vous voulez plus de détails, vous savez, vidéo de célébration CSS, je vais la mettre en pause dans quelques jours. Mais en attendant, vous pouvez voir que le cours est dispensé par nos instructeurs. Tu peux l'utiliser comme ça. Vous pourrez en savoir plus sur le CSS dès maintenant. J'essaie juste de l'expliquer à un point de départ pour l'étendre à l'ensemble. Vous pouvez donc simplement avoir une idée. Et si vous connaissez certaines saisons, vous connaîtrez également toutes ces caractéristiques. Ce sont des éléments CSS de base. Pas trop complexe. Image rendue par Transition All East. Cela ajoutera simplement une transition simple lorsque changera quelque chose ou peut-être que vous vous concentrerez. Je vais vous le dire dans un instant. Hein ? Il s'agit donc des champs de saisie de base. Et si vous voyez la police, les résultats sont saisis en gras parce que nous avons changé l'étiquette ici trop en gras. Donc, ce que nous allons faire, c'est que vous allez modifier le poids de la police ici police normale de quatre cents bactéries. Tu vois que toutes ces choses sont réparées, n'est-ce pas ? Ceci est donc configuré ici. Nous allons maintenant pointer du doigt pour ajouter un effet simple sur la mise au point. Ajoutons donc un autre élément de tube. façon dont cela sera fait ajoutera une colonne supplémentaire ici et ajoutera une sélection de la zone de texte. Hein ? Concentrez donc le menu cible électrique. Je vais donc cliquer sur cette entrée. Il ciblera, ce domaine est ciblé. Nous pourrons donc faire le CSS ici pour le rendre un peu différent lorsque quelqu'un lit ou écrit dans un champ de saisie. Donc, ici, si vous utilisez Chrome, vous avez également la possibilité de cibler le champ afin de pouvoir créer correctement le CSS. Je vais ajouter une bordure. En fait, je vais changer la couleur de la bordure en bleu. Ou peut-être qu'il y a un peu de changement. Regarde ce qui est magnifique. Oui. En utilisant cela pour l'instant, les gens utilisent généralement les couleurs du thème. Donc ça correspond au site web, non ? C'est donc fait ici. Concentrons-nous à nouveau. Maintenant, je vais vous montrer comment cela fonctionne. Si quelqu'un clique sur cette entrée, cela va changer. Cela change magnifiquement la couleur de la bordure, non ? L'effet, l'effet que vous voyez ici et que vous changez la police, changez la couleur de la bordure, c'est en fait ce que fait l'élément de transition là-bas. Hein ? Si nous essayons de désactiver cette option, vous constaterez au sein de cette équipe que transition est réellement appliquée à l'échelle mondiale. Je vais donc essayer de vous le montrer, proposer la transition vers la natation et vous verrez à quoi ressemble cette série. Ça me revient juste et ça n'a pas l'air trop beau. La transition ajoutera donc un effet algèbre ici. Vous pouvez également augmenter le nombre de millisecondes pour le ralentir. Tu vois ça ? C'est ainsi que cela fonctionne. Et maintenant, nous manquons également de tester ces nombreux boutons de soumission. Pour cela, nous allons utiliser à nouveau le CF appelé. Et puis encore des types. Hein ? Donc, ici, je vais changer la taille de la police, 14 PX. Transformons les majuscules que vous avez mises en correspondance avec les étiquettes. Point supplémentaire. Le poids de la police sera de 700. Et peut-être que nous allons changer la taille de police à 14. Ajoutez un petit espacement entre les lettres ici. Peut-être un pixel, augmentez le bouton. Supprimer la personne avec un sélecteur de largeur minimale ou un attribut de largeur minimale. Changeons-le à 200. Ou peut-être un peu moins de 270. Ça a l'air bien. Hein ? Et faites une transition différente. Tu vois à quoi ça ressemble. C'est ainsi que se trouve le ventre, la frontière de contact. Et maintenant, nous allons passer à l'apparence des souris. Et il y a un CRC. CSS supplémentaire, publiez-le et trouvez-le pour rafraîchir la page. Et vous voyez que notre formulaire est rempli. C'est ainsi que nous créons des formulaires de contact. Et j'espère que vous avez apprécié la vidéo. Posez-moi toutes les questions que vous avez dans la section des commentaires ci-dessous, et je me ferai un plaisir d'y répondre. Merci Prends soin de toi Et n'oubliez pas non plus de regarder la vidéo complète de ce cours dans laquelle je vous expliquerai comment publier vos devoirs et reproduire toutes ces choses sur vous-même. Merci Prends soin de toi Au revoir. 3. Comment pouvons-nous modifier les paramètres de messagerie et configurer d'autres choses ?: Bonjour, dans cette vidéo, nous allons apprendre comment configurer les paramètres du formulaire de contact, où et comment obtenir les formulaires de contact. Les phases client. Le client a envoyé les pompes sur quel e-mail vous recevrez les réponses, et comment vous pouvez définir de nouveaux modèles et tout ça. Alors allons-y. Donc, tout d'abord, c'était un téléphone, la dernière vidéo de Belt and Road. Et maintenant, nous allons passer au tableau de bord. Et encore une fois, cette option de contact ici. Et notre formulaire était un simple contexte d'accueil. C'était un poignard. Nous avons configuré les paramètres de la ferme et tout ça. Vous pouvez maintenant voir ces trois onglets différents ici, messages électroniques et les paramètres supplémentaires. Donc, male est un onglet où nous allons configurer les e-mails et tout ça. Il y a donc différents champs pour un champ, l'e-mail sera envoyé, il y aura un champ auquel les réponses, n'est-ce pas ? Donc, par exemple, si je veux que la réponse teste cela, utilisez cet e-mail et elle enverra toutes les réponses à cette adresse e-mail. Et si vous souhaitez ajouter le tag dynamique des e-mails. Il enverra toutes les réponses à l'e-mail de l'administrateur du site, qui est en fait stocké en une seconde ici. Paramètres généraux. Et vous voyez cette adresse e-mail d' administration. Ce sera l'e-mail que nous appellerons ici. Et From est en fait une norme de courrier électronique utilisée pour envoyer les e-mails. Tu peux peut-être le garder tel quel. Ou si vous devrez peut-être changer de domaine de temps en temps. Ce domaine doit donc correspondre à votre domaine actuel, à votre adresse de domaine actuelle. Par exemple, je vais utiliser ce notch.com pour le faire correspondre à mon domaine actuel et au titre du site, vous pouvez le laisser tel quel, il appellera en fait le titre du site. Vous le verrez généralement ici. Donc, pour nous, cela appellera cette classe Skillshare ici. Et puis l'adresse e-mail de WordPress juste ici dans le sujet. Tu peux le changer. Vous pouvez peut-être écrire un sujet personnalisé ici. Ou encore, vous pouvez utiliser ce texte dynamique, citer un autre graphique, le titre du site, et votre sujet affichera le contenu de ce champ, de ce village, de n'importe quel sujet ici. Ou peut-être pouvez-vous utiliser un sujet statique ici. Quelqu'un tombe. Ou peut-être que vous pouvez l'utiliser ici. Il s'agit en fait du x que nous avons créé, des champs pour votre nom, adresse e-mail, votre sujet, votre référence et votre message. Alors peut-être que les gens ont l' habitude d'utiliser votre nom ici. Vous envoyer un message depuis le côté gauche. Ou vous pouvez utiliser le sujet de votre choix. En fait, c'est totalement de ta faute. Et puis il y aura des en-têtes supplémentaires. Vous pouvez simplement le garder tel quel. Et ici, il s'agit du corps du message qui constituera le principal contenu des e-mails que les utilisateurs recevront. Assurez-vous donc que si vous ajoutez de nouveaux champs, vous les conservez, vous ajoutez également un nouveau filtre. Donc, je vous le promets déjà. Le sujet est déjà présent à la référence. Ensuite, nous allons le copier à partir d'ici et le coller ici. Et puis le corps du message. Et peut-être que vous pouvez supprimer ces éléments ou, si vous le souhaitez, les conserver. Et vous pouvez peut-être ajouter plus de contenu ici comme vous le souhaitez. Il s'agit donc d'un simple paramètre de courrier électronique que vous pouvez effectuer pour obtenir les réponses immunitaires. Et ici, il y a un autre onglet, les messages principaux que vous pouvez utiliser pour modifier la réponse. Par exemple, cela permet de vérifier si le message de l'expéditeur a été envoyé avec succès. Vous pouvez facilement modifier ces messages à partir d'ici différentes conditions et différents messages sont utilisés ici. Et puis pour les paramètres supplémentaires, si nous voulons ajouter du JavaScript ou des paramètres avancés et complexes, nous l'utilisons. Alors peut-être que ça reste tel quel pour l'instant. Et ce sont les simples paramètres de conduite com que nous avons utilisés pour modifier le contrat à partir de différents paramètres, modifier les adresses e-mail entre les messages et configurer le formulaire. avec des litiges. Alors, faites-moi savoir si vous avez des questions. J'espère avoir pu expliquer les choses en détail. Et oui, c'est à votre tour maintenant, peut-être d'installer WordPress sur votre serveur local ou d' essayer de le reproduire sur vos sites Web. Installez à nouveau cet incroyable formulaire de contact 72 et essayez de créer ces os. Et si vous souhaitez publier vos projets sur Skillshare afin que les gens puissent les voir et les commenter. Vous pouvez utiliser une simple dette sous l' onglet Projet et ressources sous la vidéo ci-dessous. Et essayez de publier vos projets, vos missions. Et je serais heureuse de les voir, et différentes personnes verront également vos projets et les commenteront. Ce sera donc incroyable de pratiquer, de suivre ce cours. Et j'espère que c'était un cours incroyable pour vous. Alors merci d'avoir regardé ça. Et peut-être laisser vos commentaires et me dire en quoi ce cours vous a été destiné. Si cela répond à vos attentes, vos attentes sont dépassées. J'ai également essayé d'écrire quelques commentaires pour moi et je créerai d'autres cours à l'avenir. Alors suivez-moi et pour obtenir les dernières mises à jour sur Skillshare. Merci Prends soin de toi Au revoir.