Salut tout le monde! Dans cet article, vous apprendrez à créer un formulaire contextuel. retour pour les sites html et wordpress. Tout d'abord, de tels formulaires seront nécessaires pour les magasins en ligne, les pages de destination et les sites de cartes de visite simples, car ils sont très pratiques pour l'utilisateur.

Par exemple, un visiteur est venu sur votre site, a parcouru les informations dont il avait besoin, semble être prêt à commander votre produit ou service, mais il ne veut pas appeler une autre ville et dépenser beaucoup d'argent. C'est à de tels moments que le formulaire de rétroaction contextuel vient à la rescousse.

Créer un formulaire de contact html

Donc, disons que vous avez déjà un site Web et que vous souhaitez créer un formulaire, en le remplissant, l'utilisateur pourra obtenir des commentaires de votre part. Pour ce faire, tout d'abord, le cadre lui-même est créé.

Collez le code suivant au bon endroit sur le site :

Candidature en ligne

En option, vous pouvez ajouter des champs supplémentaires pour saisir des informations ou supprimer ceux qui existent déjà. Je vous déconseille fortement d'utiliser le captcha ou toute autre protection contre les bots dans de tels formulaires, ce qui rendra difficile pour l'utilisateur de remplir le formulaire.

Le code est inséré, que voit-on ?

Le formulaire est apparu, mais il faut lui donner un coup d'oeil. Pour ce faire, ajoutez les styles suivants :

/* Formulaire de contact */ #inline ( margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; ) .txt ( display:inline-block; color:#676767; width:190px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4 em; ) .txtarea ( display:inline-block; color:#676767; width:617px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; height:80px; ) .txt:focus, .txtarea:focus ( border-style:solid; border- color:#bababa; color:#444 ; ) input.error, textarea.error ( border-color:#973d3d; border-style:solid; background:#f0bebe; color:#a35959; ) input.error:focus, textarea.error:focus ( border-color:#973d3d; color:#a35959; ) #send ( color:#FFFFFF; display:block; curseur:pointeur; pad ding:5px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; margin-bottom:20px; ) #send:hover ( background:#979797; ) /* Formulaire de commentaires */

Tellement mieux déjà. Dans tous les cas, vous devrez ajuster le formulaire pour qu'il s'adapte conception générale site, donc le vôtre finira par être différent du mien.

Il ressemble à ceci :

Ce qui se produit? Le visiteur clique sur le champ, et le script lui substitue un masque tout fait, avec le code du pays. Assez pratique.

Pour ce faire, vous devez connecter le script de masque. Vous pouvez le télécharger à la toute fin de l'article avec le code source.

Nous connectons le script avant la balise de fermeture. N'oubliez pas de changer le chemin du fichier pour le vôtre. D'accord, le formulaire de commentaires a été créé, les styles sont définis, vous devez maintenant y mettre un gestionnaire pour que les notifications arrivent sur votre courrier.

Pour ce faire, insérez le script suivant avant la balise fermante :

Comment fonctionne ce script ?

1. Effectue la validation de l'e-mail saisi.
2. Spécifie les champs avec lesquels travailler.
3. Valide ces champs pour la complétion. Si les champs obligatoires ne sont pas spécifiés, il affiche un message indiquant qu'ils doivent être remplis.
4. Traite les informations saisies et initie l'envoi d'une notification par mail.
5. Envoie un message à l'utilisateur indiquant que sa demande a été acceptée à l'aide d'Ajax.

La dernière chose à faire est de créer le fichier sendmessage.php et d'y coller ce qui suit code php et téléchargez-le à la racine de votre site.

Nouveau message\r\n" ; $msg .= "

Nom:".$nom d'utilisateur."

\r\n"; $msg .= "

Numéro de téléphone:".$userphone."

\r\n"; $msg .= "

Poster:".$usermail."

\r\n"; $msg .= "

Message:".$contenu."

\r\n"; $msg .= " "; // envoie un message if(@mail($sendto, $subject, $msg, $headers)) ( echo "true"; ) else ( echo "false"; ) ?>

C'est tout, un simple formulaire de commentaires pour le site html est prêt. N'oubliez pas de changer simplement l'e-mail dans le fichier sendmessage.php pour le vôtre.

Ajout d'un formulaire de commentaires contextuel au site

Il y a des moments où vous avez besoin d'un formulaire contextuel qui s'ouvre lorsque vous cliquez sur un bouton. C'est très facile à faire. A titre d'exemple, prenons le formulaire que nous avons créé précédemment et travaillons avec lui.

Nous devons d'abord connecter jqury fancybox, que vous pouvez télécharger à la fin de l'article.

Ajoutez ces lignes avant la balise de fermeture du corps, changez simplement le chemin du fichier par le vôtre.

Et nous lui donnons des styles.

Modalbox ( couleur : #FFFFFF ; affichage : bloc ; curseur : pointeur ; rembourrage : 10px 11px ; taille de police : 1,2 em ; bordure : solide 1px #F9F9F9 ; rayon de bordure : 2px ; arrière-plan : #70C6B9 ; largeur : 210px ; décoration de texte : aucun ; alignement du texte : centre ; marge : 0 auto 20px ; ) .modalbox:hover ( arrière-plan : #9797 9 7;)

Veuillez noter que le bouton, lorsqu'il est cliqué, provoquera une fenêtre contextuelle, doit être affecté à la classe modalbox et au chemin href="#inline". Sans cela, le formulaire contextuel ne s'ouvrira pas sur le site.

Ensuite, nous masquons le formulaire que nous avons créé précédemment afin qu'il s'ouvre dans une fenêtre contextuelle. Pour ce faire, vous devez remplacer les styles #inline des anciens par les nouveaux.

#inline ( display:none; margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; )

En conséquence, nous obtenons un tel bouton.

Cliquer dessus ouvre une fenêtre pop-up avec des commentaires.

Encore une fois, les styles, la disposition des champs et des éléments peuvent être modifiés selon vos besoins. Par exemple, pour un rappel depuis le site, il suffira de ne laisser que 2 champs - nom et numéro de téléphone, et de supprimer le reste des champs.

N'oubliez pas que pour que le formulaire fonctionne, vous devrez ajouter le gestionnaire qui est publié ci-dessus à la fin du site et télécharger le fichier à la racine du site envoyermessage.php.

Formulaire de commentaires pour wordpress

Si votre site est propulsé par wordpress, vous pouvez utiliser des plugins spéciaux pour ajouter un formulaire de contact. Un des meilleurs plugins formulaire de contact 7. Vous pouvez le télécharger depuis le site officiel ou via le panneau d'administration dans la section Plugins.

Après avoir activé le plugin, un nouvel onglet apparaîtra dans le menu de gauche. Ouvrez-le et cliquez sur Ajouter nouveau.

Entrez un nom nouvelle forme, sélectionnez les champs qui doivent figurer dans le formulaire. Habituellement, les standards, qui sont ajoutés automatiquement, suffisent. Garder la forme.

Après l'enregistrement, un shortcode apparaîtra à l'écran, qu'il faudra insérer sur la page où le formulaire de contact doit être affiché, par exemple sur la page Contacts.

Copiez ce code, allez à page souhaitée, sélectionnez le format "Texte" dans l'éditeur visuel, collez ce shortcode et enregistrez la page.

Ensuite, nous vérifions si le formulaire s'affiche sur la page et fonctionne correctement. Pour ce faire, il suffira simplement d'aller sur la page où le code a été inséré. Vous devriez avoir un formulaire comme celui-ci :

Désormais, les visiteurs de votre site pourront vous contacter via le formulaire de contact créé sur le moteur wordpress.

Créer un formulaire de commentaires contextuel pour wordpress

Moi-même, je n'aime pas ajouter de plugins supplémentaires à ce moteur, car ils chargent le site, le ralentissant. Par conséquent, pour un formulaire contextuel, j'utilise généralement 2 options.

1. Nous attachons simplement le formulaire contextuel décrit ci-dessus dans l'article non pas au site html, mais au moteur.
2. Un formulaire créé avec le plugin contextuel Contact Form 7 avec quelques modifications mineures.

La première méthode a déjà été décrite ci-dessus, passons donc à la seconde.

Tout d'abord, collez le code suivant juste après la balise body d'ouverture.

X

Voyons ce qui est quoi :

• Un lien avec id="callme-open" lorsque vous cliquez dessus, notre formulaire s'ouvrira. Veuillez noter que ce lien ne doit pas être inséré après la balise d'ouverture, mais à l'endroit où vous souhaitez placer ce bouton. Il est généralement ajouté dans le coin droit de l'en-tête, à côté du numéro de téléphone de votre entreprise.
• Le bloc bg-b créera un fond de site grisé lorsque le formulaire contextuel est ouvert.
• Le bloc callme contiendra le formulaire de feedback lui-même.
• X - ce sera notre croix dans le coin du formulaire, lorsque vous cliquerez dessus, le formulaire se fermera.
• Eh bien, le code php dans lequel le shortcode du plugin Contact Form 7 sera lancé.

Veuillez noter que votre identifiant et votre nom de formulaire peuvent différer des miens. Nouveau code ajouté, maintenant nous lui donnons des styles.

Bg-b ( position :absolue ; largeur : 100 % ; hauteur : 100 % ; gauche : 0 ; haut : 0 ; arrière-plan : rgba(51,51,51,0,55); z-index : 1 000 ; ) corps ( position : relative ; ) ; background:#fff; padding:20px 20px 10px; border-radius:4px; )

Enregistrez le code et vérifiez. Le formulaire doit maintenant être positionné au milieu de votre écran, avec un arrière-plan sombre et translucide derrière. Tout va bien, mais il reste à ajouter la dernière chose - un script qui s'ouvrira et se cachera ce formulaire en cliquant sur les boutons souhaités.

Ce script doit être inséré dans le fichier de pied de page, avant la balise body de fermeture.

Les touches finales sont laissées et le formulaire pop-up sur wordpress sera prêt. Donnez aux classes .callme et .bg-b le style display:none. Ceci est nécessaire pour que le formulaire n'apparaisse pas à l'écran au démarrage du site.

Nous avons discuté avec vous de plusieurs options pour créer un formulaire de rappel. J'espère que vous n'aurez aucun problème avec la mise en place du formulaire sur votre site. Si vous avez des problèmes ou des questions, vous pouvez toujours obtenir des conseils dans les commentaires.

MISE À JOUR 06/06/2018

DANS dernières versions Wordpress Les scripts jQuery ne fonctionnent pas avec le symbole $, donc cela doit être pris en compte et remplacer $ par jQuery

Très souvent, il y a un tel problème dans lequel le formulaire de passage sur le site cesse d'envoyer à pages internes. Pour éviter que cela ne se produise, spécifiez le chemin d'accès complet au fichier sendmessage.php dans le gestionnaire. Par exemple, comme ceci :

URL : "http://site.ru/sendmessage.php"

Et vous pouvez télécharger les codes sources des deux premiers formulaires en

MISE À JOUR 07/04/2018

À la demande générale, le formulaire de rétroaction a été modernisé. Désormais, il prend en compte la case à cocher pour le consentement à l'envoi de données conformément à la législation de la Fédération de Russie n ° 152-FZ «Sur les données personnelles», l'adaptabilité à toute résolution d'écran a été améliorée, les fichiers js et css ont été compressés.

Vous pouvez maintenant afficher l'exemple, ainsi que télécharger les sources du formulaire de commentaires mis à jour et du formulaire contextuel en ligne, en suivant les liens.

Savez-vous que jusqu'à 80% des utilisateurs quittent votre site sans remplir de candidature car le formulaire de feedback sur votre site est loin d'être idéal ? Ou êtes-vous sûr que votre formulaire de candidature est parfait et a la conversion maximale ?

De plus en plus, nos nouveaux clients qui contactent notre studio, lorsqu'ils discutent de la création et de la promotion du site, s'interrogent sur la conversion. C'est absolument la bonne question quand nous parlons sur le marketing Internet, car si le site n'apporte pas de clients, il ne sert à rien d'y investir du temps et de l'argent. Dans le blog d'aujourd'hui, nous parlerons de l'un des facteurs qui affecte grandement le nombre de clients du site Web de l'entreprise. Ce facteur est les formulaires de rétroaction, ou comme on les appelle aussi, les « formulaires de capture ». Quelle est la forme idéale de rétroaction.

Notons tout de suite que selon les secteurs d'activité, cette forme peut différer, car chaque entreprise a ses propres tâches, ses propres formats pour interagir avec les clients. C'est le formulaire qui « communique » avec le client pendant que votre gestionnaire appelle d'autres contacts et attend de nouvelles candidatures.

Le formulaire de commentaires sur le site est important. Vous amenez l'acheteur à effectuer un achat ou à commander un service de manière discrète et discrète. Utilisez tout ce que vous pouvez, d'une interface conviviale à d'excellentes conditions de vente. Mais lorsque le client arrive au bon de commande, il s'en va. Tout le travail est à l'eau. Il est peu probable qu'il revienne un jour vers vous. Cela peut être évité en modifiant simplement le formulaire de commentaires.

A quoi sert le formulaire de feedback ?

Pas seulement pour passer une commande / un achat. À l'aide du formulaire de commentaires, vous découvrez auprès des utilisateurs ce qu'ils aiment/n'aiment pas, quels sont les "jambes" dans le travail de l'entreprise, et vous obtenez même des conseils prêts à l'emploi sur la façon de l'améliorer. La conversation avec les utilisateurs est :

a) accroître la fidélité à votre entreprise ;

b) la capacité de répondre rapidement à une demande, de réduire le négatif et de fidéliser le client ;

c) la possibilité d'améliorer le produit ou le service ;

d) un moyen d'augmenter les ventes.

La principale erreur commise par les propriétaires de sites inexpérimentés est un formulaire de commentaires surchargé. Les utilisateurs sont rebutés par le grand nombre de champs qui doivent être remplis afin de faire une demande à votre entreprise. Ils ne veulent pas fournir d'informations inutiles sur eux-mêmes, même si vous leur promettez la confidentialité. Nous avons rassemblé pour vous quelques règles pour la conception de la forme idéale.

Règle numéro 1. Gardez votre formulaire aussi simple que possible

Lequel de ces formulaires préférez-vous remplir ?

Ou tel

Ne laissez que les champs les plus importants. Les visiteurs de la plupart des sites n'aiment pas remplir un grand nombre de des champs

Si la règle de simplification du formulaire est suivie, nous devrions nous attendre à une augmentation de la conversion de 30 à 60 %.

Conseil. Supprimez tout ce qui n'est pas nécessaire, laissez 2-3 champs ou même 1. Il s'agit généralement de "Nom", "numéro de téléphone ou e-mail". Si vous avez une boutique en ligne et que vous faites un bon de commande, alors il y aura un peu plus de champs : "Nom", "Numéro de téléphone ou E-mail", "Option de livraison", "Quantité de marchandise", "Adresse". Voyez à quelles fins vous faites un formulaire de rétroaction et simplifiez-le autant que possible.

Règle numéro 2. Le formulaire doit être visible

Les commentaires ou le formulaire de candidature du site doivent être visibles, sinon le visiteur peut tout simplement ne pas le remarquer et ne pas le remplir. Vous pouvez même placer une sorte d'élément animé qui vous permettra de vous concentrer davantage.

Règle numéro 3. "Champs obligatoires" minimum

Un champ obligatoire - téléphone

Souvent sur les sites internet des entreprises, on peut observer non seulement un formulaire surchargé de champs supplémentaires, mais aussi l'obligation de remplir ces champs. La mention "champ obligatoire" est présente sur 99% des sites. Voulez-vous augmenter la conversion ? Supprimez le remplissage obligatoire de tous les champs, à l'exception du numéro de téléphone. Si une personne le souhaite, elle remplira elle-même les champs qu'elle juge nécessaires, mais le champ principal est le numéro de téléphone, qui vous permettra de rappeler le client et de clarifier tout le reste des informations. L'essentiel est de ne pas oublier d'écrire les bons scripts pour les managers.

Dans quels cas la conversion des formulaires tombe-t-elle:

• 3 % de baisse des conversions si vous demandez un champ d'âge
• Baisse des conversions 10% si vous devez entrer votre nom complet
• Baisse des conversions 2% si vous êtes intéressé par la localité dans laquelle vit le visiteur
• Baisse des conversions 4% si vous devez renseigner l'adresse de résidence

Si les champs concernant la livraison, l'adresse et le nom complet sont présents dans la boutique en ligne, l'utilisateur les remplit bien sûr et cela n'affecte pas la conversion. Mais si vous voulez qu'il remplisse les données afin de vous envoyer une candidature, alors la conversion tombera certainement.

Règle numéro 4. Liens dans le formulaire (conditions de contact)

Si vous avez besoin d'envoyer un visiteur prendre connaissance des conditions de contact, de traitement des candidatures, des commandes, etc., faites ces liens directement dans le bloc formulaire. Lorsque vous cliquez sur un tel lien, il est préférable d'afficher une fenêtre contextuelle contenant des informations faciles à fermer et de procéder au remplissage du formulaire.

Un exemple d'un tel formulaire :

Essayez de minimiser la quantité de texte et de conditions dans le formulaire, car l'utilisateur sera trop paresseux pour tout relire et il fermera simplement le formulaire sans vous envoyer ses données. Également des erreurs dans ce formulaire - trop de champs obligatoires.

Règle numéro 5. Consentement au traitement des données

Même si les données du formulaire peuvent être mal renseignées et ne pas être des données personnelles, cette case doit être cochée. Il y a déjà eu des requérants pour lesquels les prévenus ont dû payer une amende pour non-respect cette exigence Législation.

Règle numéro 6. Les listes déroulantes ne doivent pas être

Si votre formulaire est une calculatrice, la liste déroulante est acceptable. Mais si vous obligez une personne à choisir le service de votre entreprise auquel elle souhaite postuler, cela réduira la conversion, car les utilisateurs souhaitent remplir le formulaire rapidement sans penser aux informations inutiles.

Règle numéro 7. Supprimer le captcha du formulaire

La saisie d'un captcha peut réduire les conversions jusqu'à 40 %. Cela est dû au fait que souvent le captcha n'est pas lu du tout, ou lors de la saisie de données, il signale une saisie de caractères incorrecte. Si auparavant, le captcha était justifié par le fait que de nombreux spams pouvaient venir sans lui, il existe désormais des technologies qui protègent le formulaire de la saisie de données par des robots de spam sans saisir de captcha.

Dans le studio artcell, nous utilisons une telle technologie. Comme vous pouvez le voir, il n'y a pas de captchas dans nos formulaires et nous ne recevons pas de SPAM.

Règle numéro 8. Notification automatique que le formulaire a été soumis

Une fois le formulaire rempli et envoyé, un message doit apparaître indiquant que les données ont été envoyées et le responsable vous rappellera dans les plus brefs délais. S'il n'y a pas une telle notification, l'utilisateur ne comprend pas si les données ont été envoyées ou non, s'il faut s'attendre à un appel de l'entreprise ou non. Cette notification vous évitera de dupliquer les applications du même utilisateur.

Règle numéro 9. Notification par SMS

Envoyez une notification automatique au numéro du visiteur si votre formulaire comportait un champ permettant de saisir un numéro de téléphone. Cela vous permettra de personnaliser votre message, et l'utilisateur se verra à nouveau rappeler le nom de votre entreprise.

Alors, quelle est la forme idéale de rétroaction ?

Mise en évidence dans un cadre ou une couleur, ce qui lui permet d'être plus visible par rapport au reste des informations du site

Champs minimum à remplir

Un ou deux champs obligatoires

Champs déroulants manquants

La présence d'une case à cocher pour le consentement au traitement des données reçues

La présence de liens et de conditions supplémentaires immédiatement dans le formulaire sans transitions inutiles vers d'autres pages du site

Pas de capcha

Vous avez un formulaire de candidature idéal, mais encore peu de clients ? Lisez ce blog dans notre magazine et vous trouverez la réponse à votre question. Si votre site n'est pas performant dans moteurs de recherche alors ces informations vous seront utiles.

Si vous ne parvenez pas à rendre le formulaire de contact idéal et que vous souhaitez vous tourner vers des professionnels pour obtenir de l'aide, remplissez la demande ci-dessous et notre responsable vous rappellera dans les plus brefs délais.

2019.08.10 Viktar Haurylavets

Pour fournir des commentaires aux visiteurs du site, différents types de formulaires sont utilisés pour envoyer des informations de contact à l'administration du site. Il peut s'agir d'un numéro de téléphone, d'une adresse e-mail ou simplement d'un message.

Principes de base de l'organisation du feedback

La rétroaction peut être mise en œuvre à l'aide de diverses technologies, mais le principe de base reste le même. Sur diagrammeça ressemble à ça.

Schéma d'organisation des commentaires sur le site.

Nous ne nous attarderons que sur des points théoriques, vous pouvez retrouver la mise en oeuvre dans d'autres articles sur notre site, le lien est au dessus.

Former

Le formulaire lui-même fait partie Document HTML, donc pour l'utilisateur, il vous suffit d'afficher le formulaire approprié et il est plus facile de le faire dans les balises

, qui contiennent le bouton Soumettre ou Faire une demande, en cliquant sur lequel le formulaire sera traité ultérieurement.

Il est très important d'indiquer correctement et clairement les champs obligatoires, qui sont souvent indiqués par le symbole * . En principe, il est possible d'écrire le formulaire lui-même dans des balises

, Mais il y a une différence. Si

génère une requête POST spécifiée dans l'attribut action, ce qui est pratique à utiliser pour un traitement ultérieur sur le serveur avec en utilisant PHP, Python, Java, etc., dans le cas de div, vous devez utiliser JavaScript. De plus, en utilisant JavaScript, vous pouvez envoyer des données via des requêtes Ajax, auquel cas la page ne sera pas mise à jour dans la ligne du navigateur.

Cependant, le principe est le même - nous envoyons des données au serveur.

Quelles données doivent être obligatoires ?

Il s'agit soit d'un numéro de téléphone pour un rappel, soit E-mail pour les commentaires. Parfois, le champ du nom est rendu obligatoire, mais l'objectif est-il d'obtenir des informations de contact pour la communication ?

Traiter une requête sur le serveur

L'implémentation finale dépend de la technologie et du langage de programmation utilisé. Vous pouvez soit envoyer une lettre indiquant qu'une nouvelle application est apparue à partir du formulaire de commentaires, soit créer une piste dans le CRM (système de gestion de la relation client, où tous les clients de l'entreprise sont enregistrés). Cependant, vous devez vous assurer que les lettres sont envoyées depuis le serveur et livrées rapidement.

Réponse du serveur

Après traitement sur le serveur, nous envoyons une réponse, qu'il ait été possible d'envoyer une lettre ou qu'une demande ait été enregistrée, afin que l'utilisateur sache attendre qu'il réponde ou non. En règle générale, il est mis en œuvre soit via une fenêtre contextuelle avec un message, soit via une redirection vers une page distincte avec un message sur l'envoi réussi de la demande.

Pour une analyse directe du code en HTML et PHP, voir.

1. Plugin de création de formulaires en ligne "jFormer"

Création de formulaires de contact : commentaires, commentaires, formulaire de connexion, formulaire d'inscription avec vérification de l'exactitude des informations saisies.

2. Formulaire d'inscription étape par étape à l'aide de jQuery

Forme soignée avec remplissage étape par étape. Vous trouverez ci-dessous un indicateur de l'achèvement du formulaire.

3. Formulaire étape par étape

Remplir le formulaire en plusieurs étapes avec vérification de l'exactitude du remplissage.

4. Formulaire de contact du site

La vérification de l'exactitude des informations saisies est effectuée "à la volée" avant l'envoi d'un message à l'aide de javascript.

5. Commutation animée entre les formulaires sur jQuery

Switch animé à l'aide de jQuery entre le formulaire de connexion, le formulaire d'inscription et le champ de récupération du mot de passe. Sur la page de démonstration, cliquez sur le lien jaune pour voir l'effet.

6. Formulaire de contact PHP contextuel

Une telle solution peut être utilisée pour donner au visiteur la possibilité de contacter rapidement le propriétaire du site à partir de n'importe quelle page. Sur la page de démonstration, cliquez sur la flèche ci-dessous pour ouvrir le formulaire.

7. Formulaire d'inscription PHP avec jQuery et CSS3

Formulaire avec validation des informations saisies.

8. Formulaire d'inscription PHP de style Facebook

Joli formulaire d'inscription implémenté avec CSS, PHP et jQuery.

9. Formulaire de contact jQuery "SheepIt"

Implémentation de la possibilité d'ajouter de nouveaux champs avant d'envoyer un message.

10. Formulaire de contact AJAX fantaisie

mignon soigné Formulaire PHP rétroaction avec vérification de l'exactitude des informations saisies. Technologies : CSS, PHP, jQuery.

11. Système d'autorisation / d'enregistrement sur le site

12. Formulaire de soumission

Avec vérification de l'exactitude du remplissage.

13. Plug-in jQuery "Contactable"

Mettre en œuvre un formulaire de rétroaction sortant pour envoyer rapidement un message.

Tout site devrait avoir un formulaire de commentaires, donc tôt ou tard, chacun de nous pense à son développement. Il existe de nombreuses options sur le réseau, quelqu'un utilise des plugins populaires, quelqu'un a sa propre expérience personnelle, mais la plupart recherchent des solutions toutes faites. En tout cas, notre formulaire de commentaires sur le site Web sera fonctionnel et fonctionnel, et tout cela dans l'ordre.

HTML

Commençons donc, comme toujours, avec l'habituel blank - html . Nous avons d'abord besoin d'un formulaire avec plusieurs champs. Nous prendrons 3 champs pour plus de clarté et la norme de tous les formulaires. Ceux. ce sera Nom, Email et Téléphone.

Chaque entrée que nous avons a son propre nom unique name , nous en aurons besoin plus tard pour envoyer des messages. Vous pouvez également ajouter librement vos propres champs et non seulement input , mais aussi select , textarea . N'oubliez pas de donner à chacun d'eux son propre nom, que nous utiliserons lors de l'envoi d'informations par courrier. Pour plus de commodité, j'ai ajouté à chaque champ attribut requis, grâce à quoi le navigateur ne permettra pas à l'utilisateur de soumettre des valeurs vides et l'informera de la nécessité de les remplir.

CSS

Lorsque le formulaire est prêt, vous pouvez le modifier un peu. Tout dépend aussi de vos besoins et de vos fantasmes. Pour plus de clarté, j'ai esquissé quelques styles pour chaque élément afin que tout ne semble pas si plat. Mais si vous êtes trop paresseux ou ne savez pas comment faire, alors vous pouvez utiliser ma version :

Form( max-width : 400px ; width : 100 % ; margin : 0 auto ; ) input( box-sizing : border-box ; display : block ; border : none ; box-shadow : inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11); rembourrage : 10px 20px ; largeur : 100 % ; margin : 10px 0 ; contour : aucun ; ) input ( arrière-plan : rouge ; bordure : aucune ; box-shadow : 0px 2px 0 1px #C50909 ; border-radius : 5px ; couleur : blanc ; text-transform : majuscule ; font-weight : 600 ; largeur : 200px ; curseur : pointeur ; transition : 0,3 s ; )

Côté client

Ici, il vaut déjà la peine de comprendre plus en détail, il est plus précis de choisir l'option appropriée pour vous-même. Pour envoyer des messages à la messagerie, nous devons utiliser le langage php, c'est-à-dire créer fichier séparé, à qui nous transférerons toutes ces données. Mais nous cette méthode nous ne l'envisagerons pas ici, car c'est beaucoup plus beau quand tout se passe sans recharger la page. Par conséquent, nous envisagerons d'envoyer des données via ajax .

Si vous voulez faire les choses à l'ancienne, vous devrez modifier légèrement le code HTML supérieur et définir la valeur de l'attribut method du formulaire (post ou get). Tout dépend de la manière dont vous souhaitez soumettre les données du formulaire. Et n'oubliez pas non plus d'écrire action , qui indiquera le chemin vers le fichier php.

Et nous allons utiliser une méthode plus avancée et envoyer des données sans recharger la page, et recevoir une réponse du serveur, nous donnerons à l'utilisateur un message sur une opération réussie ou une erreur. Cependant, nous avons également besoin de 2 fichiers, disons contact.php Et personnalisé.js.

Tout d'abord, n'oubliez pas d'inclure la bibliothèque Jquery, avec son aide, nous réduirons le code plusieurs fois et pourrons facilement effectuer toutes les actions à l'aide de solutions prêtes à l'emploi.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( type: "POST", url: "contact.php", data: str, success: function(msg) ( if(msg == "ok") ( alert("Email sent"); ) else ( alert("Erreur! Vous avez peut-être mal rempli les champs."); ) ) )); return false; ));

Examinons maintenant le schéma d'actions et pourquoi nous avons besoin de toutes ces bibliothèques et fichiers. Lorsque l'utilisateur clique sur le bouton d'envoi, nous avons un événement d'envoi, que nous écrivons dans custom.js et sur la base duquel nous obtenons toutes les données du formulaire et les transmettons au fichier contact.php. Ici, nous vérifions à nouveau si les champs sont vides (afin d'éviter une autre possibilité de spam), envoyons un message par e-mail et informons l'utilisateur des résultats, qui sont transmis en réponse à custom.js.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail"]); $txtphone = trim($_POST["mfbPhone"]); // de qui $fromMail = " [courriel protégé]"; // Entrez votre email ici $emailTo = " [courriel protégé]"; $subject = "Feedback"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "De : Exemple de formulaire<$fromMail>\n"; $headers .= "Type de contenu : text/plain ; charset="utf-8"\r\n"; $headers .= "MIME-Version : 1.0\r\n"; $headers .= "Date : ". date("D, d M Y h:i:s O") ."\r\n"; // corps du message $body = "Un e-mail reçu de ".$site." \n\nNom : ".$txtname."\nTéléphone : ".$txtphone."\ne-mail : ".$txtemail."\nMessage : ".$txtmessage ; mail($emailTo, $subject, $body, $headers); echo "ok"; )

C'est l'exemple le plus élémentaire du fonctionnement d'un formulaire de contact. Il existe de nombreuses options pour modifier le fichier de vérification php, créer vos propres classes, etc. Mais notre tâche était de créer un exemple simple et fonctionnel que vous pouvez utiliser sur votre site.

démo

des dossiers

Plugins prêts

Puisque vous êtes sur WordPressblog, alors vous êtes probablement prêt et désireux d'utiliser toutes sortes de plugins, surtout si vous êtes un fin connaisseur en programmation et en mise en page. Et je ne vous blâme pas pour cela, et je peux même porter l'un d'entre eux à votre attention pour plus de clarté. Le but de ce paragraphe n'est pas une recommandation, mais seulement un exemple, puisque j'ai utilisé le plugin Formulaire de contact 7 dans plusieurs projets.

Il est très facile à installer et fonctionne presque toujours parfaitement. Si vous avez besoin de créer votre propre design unique, vous pouvez le faire. Il vous suffit d'ajouter les champs nécessaires dans le constructeur, de traduire et de modifier les notifications d'erreurs et de soumissions réussies à votre manière, et le tour est joué. Ensuite, copiez le shortcode et collez-le au bon endroit de la sortie du formulaire.

Je n'ai jamais eu de problèmes avec le plugin et si vous avez besoin d'une solution rapide et prête, alors c'est tout. Si vous avez vos propres exigences fonctionnelles et de conception pour le formulaire, il est préférable d'utiliser la première option, qui nécessite des connaissances dans ce secteur.