Formulaire de rétroaction personnalisable: comment créer en ligne? Comment faire un beau formulaire de rétroaction pop-up HTML et PHP avec un téléphone et envoyer une commande par e -mail?

Instructions pour créer un formulaire de rétroaction sur HTML et CSS, ainsi qu'une collection de formulaires prêts et guider pour les connecter et les configurer.

Aujourd'hui, toute personne qui n'a même pas de compétences en programmation peut facilement créer son propre site en téléchargeant un modèle prêt à partir du réseau et en l'installant sur le moteur utilisé.

Cependant, tous les modèles prêts à l'emploi ne peuvent pas satisfaire aux exigences de l'utilisateur. Beaucoup d'entre eux sont représentés sous forme de «fromage» et n'ont pas de sections et de fonctions aussi importantes telles que, par exemple, une forme de rétroaction.

Ce bloc de site est extrêmement important pour les propriétaires de magasins en ligne et de grands portails d'information. Dans notre article, vous trouverez des informations sur la façon de créer indépendamment un formulaire de rétroaction, où télécharger un modèle fini et comment l'installer sur votre site Web.

Figure 1. Qu'est-ce qu'un formulaire de rétroaction et pourquoi est-il si nécessaire?

Qu'est-ce qu'un formulaire de rétroaction et pourquoi est-il si nécessaire?

• L'une des fonctions les plus importantes de tout site décent est le formulaire de rétroaction. Il sert à l'interaction entre le visiteur et l'administration des ressources. Ainsi, avec son aide, vous pouvez rédiger un appel au support technique ou envoyer les données nécessaires aux administrations. Par exemple, les détails du paiement dans les magasins en ligne ou le nom des marchandises commandées. Il est fortement recommandé d'avoir un tel formulaire sur votre portail, car un contact constant avec ses visiteurs et ses clients est la clé de son développement réussi.

Le formulaire de rétroaction est une page ou un bloc (département) distinct, composé de plusieurs champs de l'entrée du texte et du bouton «Envoyer». En règle générale, le formulaire standard a les champs suivants:

• Nom et prénom
• E-mail (adresse e-mail)
• Numéro de téléphone portable
• Les adresses de votre site
• Champ pour saisir un SMS

Cependant, les champs peuvent être autant que vous le souhaitez, et ils peuvent être signés comme vous le souhaitez. Tout dépend de vos besoins et de votre imagination.

Figure 2. Qu'est-ce qu'un formulaire de rétroaction et pourquoi est-il si nécessaire?

• En outre, certains propriétaires ajoutent des cartes Google ou Yandex au formulaire de rétroaction, des formes d'entrée sur le site à l'aide des réseaux sociaux «Vkontakte», «Facebook», «Google+» et ainsi de suite. Mais nous parlerons de la création de la forme de rétroaction la plus simple, pour laquelle vous aurez besoin exclusivement de connaître les bases de la langue de marquage Html Et rien de plus.

Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

Afin de ne pas transformer l'article en un manuel ennuyeux complet, nous procéderons du fait que vous connaissez déjà les bases de la langue de marquage Html Et vous avez une idée générale de la façon dont cela fonctionne. Si vous n'avez pas de telles compétences, avant de prendre la création d'une forme, il est fortement recommandé de resserrer vos connaissances un peu sur une ressource gratuite htmlbook.ru. Sinon, vous pouvez non seulement abandonner cette entreprise, mais aussi gâcher le code de votre site.

Pour recréer la forme de rétroaction de travail, vous avez besoin de trois éléments importants, dont l'un est responsable du marquage et de la structure de la forme ( Html), le second pour sa conception externe ( CSS), et le troisième pour le traitement et la transmission des données ( Php). Commençons dans l'ordre:

Écrire un code HTML pour les commentaires

• Étape 1. Afin d'indiquer la forme dans Html La balise est utilisée ‹Form› ‹/ Form›. À l'intérieur, il sera réglé des tailles, des styles et d'autres propriétés vitales de la forme. Lors de l'enregistrement de la balise elle-même, il doit définir une classe pour indiquer, ce qui aidera davantage à installer pour le formulaire CSS Modes.

Figure 1. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

• Étape 2. Plus pour créer le premier champ de notre forme à l'intérieur de la balise \u003cFormer\u003e Vous devez écrire une balise de bloc ‹P›qui est responsable de la création d'une nouvelle ligne.

Figure 2. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

• Étape 3. Tag à l'intérieur ‹P› De la nouvelle ligne, nous entrons la balise suivante: ‹Étiquette pour \u003d" nom "›Nom \u003c/Étiqueter\u003e. Il est responsable des noms du futur champ de forme.

Figure 3. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

• Étape 4. Sur la nouvelle ligne, tout est dans la même balise ‹P› Nous prescrivons l'étiquette de création d'un champ avec les valeurs suivantes: ‹Input type \u003d" text »name \u003d" name "placeholder \u003d"Entrez votre nom "Requis \\\u003e. Paramètre " type \u003d "texte"" Définit le type de champ de texte et le paramètre " placeholder \u003d "Entrez votre nom «» Définit le texte initial dans ce champ de texte même. Paramètre " rEQUIS»Il est clair au visiteur du site que ce champ est obligatoire pour remplir. En conséquence, vous devez obtenir un formulaire avec un champ, comme indiqué dans la capture d'écran ci-dessous.

Figure 4. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

• Étape 5. Par l'exemple ci-dessus, ajoutez les champs restants dont vous avez besoin, à chaque fois à partir de la balise ‹P›. Pour installer un champ avec un SMS, utilisez la balise ‹Textarea name \u003d" message "cols \u003d" 50 "rows \u003d" 6 "requis› ‹/ textarea›. Options " col" Et " lignes»Sont responsables de la largeur et de la hauteur du champ de texte. Vous pouvez définir les paramètres que vous aimez plus. Vous devriez obtenir quelque chose comme ça montré dans la capture d'écran ci-dessous.

Figure 5. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

• Étape 6. Pour vous protéger des bots, qui sont beaucoup sur Internet aujourd'hui, créez une autre ligne avec TAG ‹Entrée name \u003d" bezspama "type \u003d" text »style \u003d" display: non "value \u003d" "/›. En raison du paramètre " style \u003d "Affichage: aucun"»Ce champ ne sera pas visible par de simples mortels, mais les bots seront remplis automatiquement. Ainsi, vous pouvez toujours distinguer une personne vivante du programme.

Figure 6. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

• Étape 7. La dernière étape du marquage sera la création du bouton d'envoi. La balise est utilisée pour cela \u003cBouton\u003e. Créer un nouveau bloc ‹P› Et à l'intérieur, entrez le code du bouton avec les paramètres suivants: ‹Button class \u003d" soumi "type \u003d" soumettre "›envoyer un message \u003c/Bouton\u003e. Un résultat similaire devrait se révéler, comme le montre la capture d'écran.

Figure 7. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

Travailler avec des styles en cascade (CSS)

• Comme vous l'avez déjà remarqué en train de marquer, nous avons avéré quelque chose de très tordu, indéfinissable et dégoûtant. Afin de donner au formulaire de rétroaction une apparence plus ou moins soignée, une langue Html Ce ne sera pas suffisant. À cette fin, vous devrez recourir à l'utilisation des styles CSS.
• Dans le cas où vous aviez profité des conseils pour resserrer vos compétences de base sur la ressource htmlbook.ru, ensuite définir certains paramètres de conception pour toutes les parties du formulaire en utilisant CSS Ce ne sera pas difficile pour vous. Si vous n'avez pas le désir ou le temps de jouer avec tout cela, nous vous fournirons un code prêt et vous dire comment le connecter.

Figure 8. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

Connecter les styles CSS Pour Html Vous pouvez deux façons:

• Copiez le code de notre table en cascade en bas du fichier style.cssqui est présent sur l'hébergement du site
• Déplacez notre fichier Styles vers votre hébergement et connectez-le

Déposer style.css Se connecte à l'intérieur de la balise ‹Tête› ‹/ tête› Utilisation d'un script ‹Link rel \u003d" Stylesheet "media \u003d" écran "href \u003d" style.css "›. Dans le cas où un fichier avec des styles ne réside pas dans le même dossier que le fichier HTML principal, vous devez alors spécifier le chemin d'accès. Dans notre fichier avec Styles, chaque élément a une désignation. Si vous le souhaitez, vous pouvez modifier les paramètres par vous-même, guidé uniquement par des compétences en programmation de base.

Connexion de fichier PHP et le définir

Comme mentionné précédemment, le script Php est responsable de l'exécution du formulaire de rétroaction. Cependant, afin de comprendre plus ou moins le principe du travail linguistique Php, vous devez lire un grand volume de littérature et passer un nombre décent d'heures pour la pratique. Par conséquent, comme dans le cas de CSS, nous vous fournirons un fichier prêt à l'emploi avec un script PHP, qui n'aura qu'à attacher au document avec le formulaire.

Contrairement au fichier style.css, un fichier avec un script PHP est joint dans les propriétés du formulaire lui-même. Commençons dans l'ordre:

• Étape 1. Ouvrez le code écrit précédemment et trouvez une ligne avec une balise de formulaire ouvert. Ajouter des propriétés à lui " action \u003d "contact-forme.php"" Et " méthode \u003d "post"". Regardez un exemple dans la capture d'écran.

Figure 9. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

• Étape 2. Téléchargez notre fichier PHP et placez-le sur l'hébergement dans le même dossier où se trouve le document HTML. Ainsi, les fichiers PHP et HTML interagiront les uns avec les autres.

Figure 10. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

• Étape 3. Ensuite, vous devez configurer le script par vous-même. Ouvrez le fichier et définissez les variables, en leur attribuant les mêmes noms que dans le script HTML. Si vous avez ajouté des champs supplémentaires au formulaire, ajoutez-les dans le script PHP exactement comme indiqué dans la capture d'écran.

Figure 11. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

• Étape 4. Ensuite, vous devez ajouter deux autres variables avec l'adresse de votre e-mail et le sujet de la lettre qui sera affichée sur votre boîte. Dans une ligne avec une variable " $ Adresse"Indiquez le courrier électronique et dans la ligne" $ sub»Le thème de la lettre est indiqué dans la capture d'écran.

Figure 12. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

• Étape 5. Dans une ligne avec une variable " $ ms»Le format de la lettre que vous recevrez par courrier est configuré. Vous pouvez le réécrire inchangé ou modifier votre goût.

Figure 13 Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

• Étape 6. Toutes les autres lignes sont responsables de l'envoi du message et contiennent les paramètres de protection contre les bots, ils doivent donc être laissés inchangés. En conséquence, le code complet devrait ressembler à quelque chose comme celui montré dans la capture d'écran ci-dessous.

Figure 14. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

Téléchargez les fichiers CSS et PHP pour les commentaires

Après avoir effectué toutes les actions à la sortie, vous recevrez un formulaire de rétroaction soigné aussi simple

Figure 15. Comment créer le formulaire de rétroaction le plus simple pour le site sur HTML et PHP?

Une sélection de belles formes de conception de rétroaction sur HTML et CSS à différentes fins

• Sur la base des instructions ci-dessus, vous pouvez facilement «dessiner» le formulaire de rétroaction à votre goût. Cependant, si vous n'avez pas le temps ou le désir de créer un formulaire à partir de zéro vous-même, vous pouvez trouver des formulaires de conception prêts sur Internet et avoir des compétences de base Html Modifiez-les par vous-même.

Figure 1. Une sélection de belles formes de conception de rétroaction sur HTML et CSS à différentes fins

• Après avoir cherché un peu, nous vous avons trouvé une sélection de 35 belles formes de conception pop-up de rétroaction, qui sont écrites sur Html Et CSS. Ces formes conviennent aux moteurs tels que Wordpress Et JoomlaIls ont des paramètres simples et légers du panneau de commande et sont également parfaits pour les sites sans moteur.

Téléchargez une sélection de formes de commentaires de concepteurs pour les sites

Vidéo: ReadPress recadré les commentaires des commentaires