Formulaire de commentaires PHP prêt à l'emploi. Créer un formulaire de commentaires

Dans cette leçon, nous découvrirons la fonction mail(), en utilisant l'exemple de la création formes retour en PHP suivi de l'envoi des données reçues par email.

Pour ce faire, nous allons créer deux fichiers - format.php Et mail.php. Le premier fichier contiendra uniquement un formulaire avec des champs permettant à l'utilisateur de saisir des données. À l'intérieur d'une balise formulaire- bouton "Envoyer" et attribut action qui fait référence au gestionnaire - mail.php, c'est à cela que l'on accède aux données du formulaire lorsque l'on appuie sur le bouton "Envoyer". Dans notre exemple, les données du formulaire sont envoyées vers une page Web appelée "/mail.php". Cette page contient un script pour PHP qui traite les données du formulaire :

Voici à quoi ressemble visuellement le formulaire dans le navigateur.

Ensuite, nous écrivons le code du fichier mail.php. Nous trouvons nos propres noms pour les variables. DANS PHP la variable commence par un signe $ suivi du nom de la variable. Valeur du texte La variable est placée entre guillemets. À l'aide de variables, le contenu du formulaire est envoyé à l'e-mail de l'administrateur en plaçant simplement le nom de l'élément du formulaire entre crochets - la valeur nom.

$à = " [email protégé]"; // email du destinataire des données du formulaire
$tema = "Formulaire de commentaires en PHP"; // sujet de l'email reçu
$message = "Votre nom : ".$_POST["name"]."
";//attribuer à la variable la valeur obtenue à partir du formulaire nom=nom
$message .= "E-mail : ".$_POST["email"]."
"; //obtenu à partir du formulaire nom=email
$message .= "Numéro de téléphone : ".$_POST["phone"]."
"; //obtenu à partir du formulaire nom=téléphone
$message .= "Message : ".$_POST["message"]."
"; //obtenu à partir du formulaire nom=message
$headers = "Version MIME : 1.0" . "\r\n" ; // l'en-tête correspond au format plus le caractère de nouvelle ligne
$headers .= "Type de contenu : texte/html; charset=utf-8" . "\r\n" ; // indique le type de contenu envoyé
mail($à, $tema, $message, $headers); //envoie les valeurs des variables au destinataire par email
?>

Ainsi, les données du tableau $_POST sera transmis aux variables correspondantes et envoyé par email à l'aide de la fonction mail. Remplissez notre formulaire et appuyez sur le bouton Soumettre. N'oubliez pas d'inclure votre email. La lettre est arrivée instantanément.

Bonjour chers lecteurs, aujourd'hui je souhaite vous expliquer comment je crée des formulaires pour obtenir les coordonnées des utilisateurs.

Aujourd'hui, , fait partie de la structure de la page de destination. Après tout, c’est l’un des moyens d’accepter une commande ou d’envoyer un catalogue de vos produits, après avoir reçu au préalable l’e-mail du visiteur.

Création d'un formulaire de commentaires - balisage HTML

J'ai généralement besoin de trois champs, et dans la plupart des cas, j'utilise ce balisage pour créer un formulaire de contact :

Essayez de l'ouvrir dans votre navigateur ce code et regardez ce que vous obtenez, selon le navigateur Internet que vous utilisez, cela devrait ressembler à ceci :

Si vous avez des questions sur le balisage, n'hésitez pas à les poser dans les commentaires, j'essaierai d'y répondre en détail, et je ne décrirai pas chaque élément dans l'article pour ne pas augmenter sa taille. De plus, les éléments sont assez simples.

Création d'un formulaire de commentaires - balisage CSS

Stylisons notre formulaire et rendons-le lisible :

/* Styles de formulaire */ #application ( largeur : 475px ; marge : 0 auto ; ) /* Styles de champ de saisie */ #applicationName, #applicationEmail, #applicationTelephone ( largeur : 100% ; hauteur : 73px ; arrière-plan : aucun ; marge - haut : 25 px ; bordure : 1 px solide #fff ; border-radius : 40 px ; text-align : center ; couleur : #fff ; font-size : 24px ; ) /*Styles des champs en cliquant dessus*/ #applicationName:focus , #applicationEmail:focus, #applicationTelephone:focus ( bordure : 1px solide #30ad64 ; ) /*Styles de texte affiché dans l'espace réservé*/ ::-webkit-input-placeholder ( couleur : #efefef ; font-family : "PT Sans ", sans-serif; text-shadow : 0 1px 1px rgba(0, 0, 0, .3); ) ::-moz-placeholder ( couleur : #fff ; font-family : "PT Sans", sans-serif ; text-shadow : 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 19+ */ :-moz-placeholder ( couleur : #fff ; font-family : "PT Sans", sans- serif; text-shadow : 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 18- */ :-ms-input-placeholder ( couleur : #fff ; font-family : "PT Sans" , sans empattement ; text-shadow : 0 1px 1px rgba(0, 0, 0, .3); ) ::placeholder ( couleur : #fff ; text-shadow : 0 1px 1px rgba(0, 0, 0, .3); ) /*Styles de boutons*/ .applicationButton ( margin-top : 25px ; arrière-plan : #30ad64 ; bordure : aucune ; largeur : 100 % ; hauteur : 73 px ; rayon de bordure : 40 px ; couleur : #fff ; taille de police : 24 px ; transformation de texte : majuscules ; famille de polices : "PT Sans", sans-serif ; curseur : pointeur; ) .applicationButton:hover ( arrière-plan: #d68c18; )

Si vous souhaitez que la couleur du bouton change en douceur, ajoutez la ligne suivante à .applicationButton et .applicationButton:hover :

Transition : 0,6 s ;

Où,6s est la durée de l'animation en millisecondes.
Maintenant, notre forme a acquis belle vue, maintenant ça ressemble à ça :

Création d'un formulaire de commentaires - balisage php

Nous devons maintenant créer le fichier application.php. Il recevra les paramètres saisis depuis le formulaire et nous les enverra par email.

Sa structure est comme un fichier HTML classique ; il peut s'agir d'une page sur laquelle vous écrivez « Merci, votre candidature a été acceptée. Après traitement de la demande, nos responsables vous contacteront"

Autrement dit, lorsque l'utilisateur clique sur le bouton, il sera redirigé vers la page application.php. Il s'agit d'une page entière et vous devez la styler en conséquence.

"; $msg .= "

Message du site

\r\n"; $msg .= "

De qui:".$nom d'utilisateur."

\r\n"; $msg .= "

Mail:".$usermail."

\r\n"; $msg .= "

Site web:".$usertel."

\r\n"; $msg .= ""; // envoi d'un message if (@mail($sendto, $subject, $msg, $headers)) ( echo "

"; ) sinon ( écho "

"; } ?>

Expliquons un peu le code :

$envoyerà = " [email protégé]"; // mail auquel la lettre sera envoyée $username = $_POST["name"]; // sauvegarde les données reçues du champ portant le nom dans une variable $usertel = $_POST["telephone"]; / / sauvegarde les données dans une variable reçue du champ avec un numéro de téléphone $usermail = $_POST["email"]; // sauvegarde les données reçues du champ avec une adresse email dans une variable

Ici, je pense que c'est clair.

Créons maintenant l'en-tête de la lettre.

$sujet = "Nouveau message" ; $headers = "De : " . strip_tags($usermail) . "\r\n" ; $headers .= "Réponse à : ". strip_tags($usermail) . "\r\n" ; $headers .= "Version MIME : 1.0\r\n" ; $headers .= "Content-Type : text/html;charset=utf-8 \r\n";

Doubler $sujet = "Nouveau message" ;— est responsable du sujet de la lettre, peut y écrire : « Candidature depuis le site » ou ce qui vous convient le mieux.

Je propose de m'assurer que la lettre arrive de l'adresse indiquée dans le champ input type="email". C'est-à-dire celui à partir duquel l'utilisateur est entré en remplissant le formulaire. Pour ce faire, nous écrivons les lignes suivantes :

$headers = "De : " . strip_tags($usermail) . "\r\n" ;

Autrement dit, nous remplacerons les données de la variable $usermail, où sont stockées les informations du champ responsable de la saisie de l'adresse e-mail.

Définissons maintenant l'apparence de la lettre. Vous pouvez le concevoir comme bon vous semble, mais je suggère la structure suivante :

$msg = " "; $msg .= "

Message du site

\r\n"; $msg .= "

De qui:".$nom d'utilisateur."

\r\n"; $msg .= "

Mail:".$usermail."

\r\n"; $msg .= "

Téléphone:".$usertel."

\r\n"; $msg .= "

";

La première ligne définit la police des lettres. Deuxièmement, nous affichons un message, par exemple : « Demande depuis le formulaire de commentaires sur le premier écran ». Les troisième, quatrième et cinquième lignes transmettent les données du formulaire. Chacun sur une nouvelle ligne.

Vous devez maintenant envoyer une lettre à l'aide de la fonction de courrier et déterminer ce qui se passera si la lettre est envoyée avec succès ou non :

Si (@mail($sendto, $subject, $msg, $headers)) ( echo "

"; ) sinon ( écho "

"; } ?>

J'ai fait en sorte que dans tous les cas, une image avec le texte correspondant soit affichée. Vous pouvez afficher une page entière au lieu d'une image. Écrivez simplement le code au lieu de l'image.

Quelques secondes après l'affichage de l'image, je redirige (redirection automatique) vers page d'accueil. Vous pouvez le faire en insérant la ligne suivante entre les balises head ;

Autrement dit, après 4 secondes, l'utilisateur sera automatiquement renvoyé à la page principale !

Je ne suis pas un expert en PHP - c'est un langage de programmation back-end ; j'ai été attiré par l'apprentissage du front-end toute ma vie. Alors ne jugez pas durement. Oui, ici vous pouvez effectuer des vérifications pour remplir les formulaires de contact, etc., mais cela m'a toujours suffi, donc si quelqu'un a une suggestion sur la façon d'améliorer ce code, veuillez l'écrire dans les commentaires ou par e-mail, je corrigerai le leçon, merci!

À propos, si vous avez besoin d'un formulaire de commentaires sans recharger la page, vous pouvez découvrir comment l'installer dans

Peut-être que certaines personnes ne comprennent pas très bien le contenu, mais si vous répétez exactement mes étapes, votre formulaire de contact fonctionnera certainement. Si vous avez des questions, écrivez dans les commentaires, j'essaierai d'y répondre ! Rendez-vous sur le blog !

P.s. Depuis que j'ai commencé à recevoir très souvent des questions sur les raisons pour lesquelles le formulaire ne fonctionne pas et que les e-mails n'arrivent pas, j'ai décidé de décrire plusieurs des raisons les plus courantes pour lesquelles cela peut se produire :

Vous testez le formulaire pas sur le serveur.
Testez le formulaire sur un hébergement gratuit.
Vous testez le formulaire sur un hébergement payant, mais pendant la période d'essai gratuite.

Dans ces cas, les lettres ne seront pas envoyées à votre adresse e-mail.

Si vous êtes trop paresseux pour le comprendre et créer le formulaire vous-même, je vous recommande d'y prêter attention.

23/07/2014 12/07/2018

dimadv7

Salut tout le monde! Dans cet article, vous apprendrez comment créer un formulaire de commentaires contextuel pour les sites HTML et WordPress. Tout d'abord, de tels formulaires seront nécessaires pour les boutiques en ligne, les pages de destination et même les simples sites de cartes de visite, car ils sont très pratiques pour l'utilisateur.

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

Créer un formulaire de commentaires en HTML

Supposons donc que vous ayez déjà un site Web et que vous souhaitiez créer un formulaire qui, une fois rempli, permettra à l'utilisateur de recevoir des commentaires de votre part. Pour ce faire, le cadre lui-même est tout d'abord créé.

Insérer dans Bon endroit Le site Web a le code suivant :

Candidature en ligne

Si vous le souhaitez, vous pouvez ajouter des champs supplémentaires pour saisir des informations ou supprimer ceux existants. Je vous déconseille fortement d'utiliser un captcha ou une autre protection contre les robots dans de tels formulaires, ce qui rendra difficile pour l'utilisateur de remplir le formulaire.

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

La forme est apparue, mais il faut lui donner forme. Pour ce faire, ajoutez les styles suivants :

/* Formulaire de commentaires */ #inline ( margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; ) .txt ( display:inline-block; color:#676767 ; largeur : 190 px ; marge inférieure : 10 px ; bordure : 1 px solide #ccc ; rembourrage : 5 px 9 px ; taille de police : 15 px ! important ; hauteur de ligne : 1,4em ; ) .txtarea ( affichage : bloc en ligne ; couleur : # 676767 ; largeur : 617 px ; marge inférieure : 10 px ; bordure : 1px solide #ccc ; remplissage : 5px 9px ; taille de police : 15px ! important ; hauteur de ligne : 1,4em ; hauteur : 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; couleur:#a35959; ) #send ( couleur:#FFFFFF; affichage:bloc; curseur:pointeur; remplissage:5px 11px ; taille de police : 1,2 em ; bordure : solide 1 px #F9F9F9 ; rayon de bordure : 2 px ; arrière-plan : # 70C6B9 ; largeur : 210 px ; marge inférieure : 20 px ; ) #send : survol ( arrière-plan : #979797 ; ) /* Formulaire de commentaires */

Ceci est vraiment mieux. Dans tous les cas, vous devrez adapter le formulaire à la conception globale du site, pour que le vôtre soit finalement différent du mien.

Cela ressemble à ceci :

Ce qui se produit? Le visiteur clique sur le champ et le script lui présente un masque prêt à l'emploi 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 incluons le script avant la balise de fermeture. N'oubliez pas de remplacer le chemin d'accès au fichier par le vôtre. Bon, le formulaire de commentaires a été créé, les styles ont été configurés, vous devez maintenant lui attribuer un gestionnaire pour que les notifications soient envoyées à votre e-mail.

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

Comment fonctionne ce script ?

Vérifie l'e-mail saisi.
Spécifie les champs avec lesquels travailler.
Vérifie que ces champs sont remplis. Si les champs obligatoires ne sont pas précisés, un message apparaît indiquant qu'ils doivent être remplis.
Traite les informations saisies et lance l'envoi d'une notification par e-mail.
Affiche 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 un fichier sendmessage.php et d'y insérer 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:".$téléphone utilisateur."

\r\n"; $msg .= "

Mail:".$usermail."

\r\n"; $msg .= "

Message:".$contenu."

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

C'est tout, forme simple les commentaires pour le site HTML sont prêts. N'oubliez pas de remplacer l'e-mail dans le fichier sendmessage.php par le vôtre.

Ajout d'un formulaire de commentaires contextuel au site

Il arrive parfois que vous ayez besoin d'un formulaire contextuel qui s'ouvre lorsque vous cliquez sur un bouton. C'est très facile à faire. À titre d'exemple, prenons le formulaire que nous avons créé précédemment et travaillons avec lui.

Tout d’abord, nous devons connecter jQury fancybox, que vous pouvez télécharger à la fin de l’article.

Ajoutez ces lignes avant la balise body de fermeture, remplacez simplement le chemin d'accès aux fichiers par le vôtre.

Et nous lui donnons des styles.

Modalbox ( couleur : #FFFFFF ; affichage : bloc ; curseur : pointeur ; remplissage : 10px 11px ; taille de police : 1.2em ; bordure : solide 1px # F9F9F9 ; rayon de bordure : 2px ; arrière-plan : #70C6B9 ; largeur : 210px ; texte -decoration:none; text-align:center; margin:0 auto 20px; ) .modalbox:hover ( background:#979797; )

Veuillez noter que le bouton, lorsque vous cliquez dessus, provoquera une fenêtre pop-up, doit se voir attribuer la classe modalbox et le chemin href=”#inline”. Sans cela, le formulaire pop-up 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 de l'ancien par le nouveau.

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

En conséquence, nous obtenons un bouton comme celui-ci.

Lorsque vous cliquez dessus, une fenêtre contextuelle avec des commentaires s'ouvre.

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

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

Formulaire de commentaires pour WordPress

Si votre site fonctionne sur Moteur WordPress, vous pouvez utiliser plugins spéciaux pour ajouter un formulaire de contact. L'un des meilleurs plugins Contact Form 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, il apparaîtra dans le menu de gauche nouvel encart. Ouvrez-le et cliquez sur Ajouter nouveau.

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

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

Copiez ce code et allez sur page souhaitée, V éditeur visuel sélectionnez le format « Texte », collez ce shortcode et enregistrez la page.

Ensuite, nous vérifions si le formulaire s'affiche sur la page et s'il fonctionne correctement. Pour cela, il vous suffit de vous rendre sur la page où vous avez inséré le code. Vous devriez voir un formulaire comme celui-ci :

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

Créer un formulaire de commentaires contextuel pour WordPress

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

Nous attachons simplement le formulaire pop-up décrit ci-dessus dans l'article non pas au site html, mais au moteur.
Un formulaire créé à l'aide du plugin de formulaire 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.

Pour commencer, collez le code suivant juste après la balise body d’ouverture.

Voyons ce que c'est :

Un lien avec id=”callme-open”, lorsque vous cliquez dessus, notre formulaire s’ouvrira. Attention, ce lien ne doit pas être inséré après la balise open, mais à l'endroit où vous souhaitez que ce bouton se trouve. Habituellement, il est 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 arrière-plan de site sombre lorsque le formulaire contextuel sera ouvert.
Le bloc callme contiendra le formulaire de commentaires 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 l'identifiant et le nom de votre formulaire peuvent différer des miens. Nouveau code ajouté, maintenant nous lui donnons des styles.

Bg-b ( position : absolu ; largeur : 100 % ; hauteur : 100 % ; gauche : 0 ; haut : 0 ; arrière-plan : rgba (51,51,51,0.55) ; z-index : 1000 ; ) corps ( position : relatif; ) .callme ( position:fixed; top:30%; left:50%; width:300px; margin-left:-150px; z-index:1100; background:#fff; padding:20px 20px 10px; border- rayon:4px; ) .callme small ( position:absolue; droite:10px; haut:10px; taille de police:15px; curseur:pointeur; )

Enregistrez le code et vérifiez-le. Le formulaire doit maintenant être positionné au milieu de votre écran, avec un fond sombre et translucide derrière lui. Tout va bien, mais la dernière chose à ajouter est un script qui s'ouvrira et se cachera ce formulaire lorsque vous cliquez sur les boutons requis.

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

Il reste les dernières touches et le formulaire pop-up sur WordPress sera prêt. Ajoutez le style display:none aux classes .callme et .bg-b. Ceci est nécessaire pour que le formulaire n'apparaisse pas à l'écran au lancement 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 à implémenter le 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 devrait être pris en compte et remplacer $ par jQuery

Très souvent, il y a un problème dans lequel un formulaire de bout en bout sur un site Web cesse d'être envoyé à pages internes. Pour éviter que cela ne se produise, spécifiez un let complet dans le fichier sendmessage.php du gestionnaire. Par exemple, comme ceci :

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

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

MISE À JOUR 07/04/2018

En raison de nombreuses demandes, le formulaire de commentaires 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é à n'importe quelle résolution d'écran a été améliorée, les fichiers js et css ont été compressés.

Vous pouvez désormais consulter un exemple et télécharger en ligne les sources du formulaire de commentaires mis à jour et du formulaire contextuel, en utilisant les liens.

Bonjour, chers lecteurs du site blog. Aujourd'hui, je souhaite parler des moyens de créer des commentaires, des commandes, des contacts et d'autres types de formulaires dont un webmaster peut avoir besoin pour organiser une communication pratique avec ses visiteurs ou clients.

Il est clair que lors de l'utilisation de Joomla et WordPress, le problème des commentaires ou de l'ordre peut être résolu à l'aide de diverses extensions ou plugins, mais il existe des méthodes qui conviennent à absolument tout projet construit soit en HTML pur, soit utilisant (scripts, cms, concepteurs et retour des générateurs de formulaires).

Cependant, il existe des solutions qui ne nécessitent pas le support de PHP, et elles seront également mentionnées dans cet article. Il n'y aura pas de descriptions particulièrement détaillées de l'installation et de la configuration dans cet article, car il ne s'agit que d'un aperçu des options disponibles que l'on peut désormais trouver sur Internet.

Je vous serais extrêmement reconnaissant si vous fournissez dans les commentaires votre exemple de création de systèmes de feedback (de préférence originaux, beaux et fonctionnels) avec un lien vers la description et une page avec un exemple (je suis toujours en train de trouver la solution idéale).

Formulaires de commentaires pour Joomla et WordPress

Voyons comment organiser les commentaires dans Joomla et WordPress moyens standards ou en utilisant des extensions.

Joomla dispose déjà d'une option par défaut qui implémente cette fonctionnalité, dont vous pouvez lire les paramètres sur le lien fourni. En règle générale, la distribution de ce moteur comprend par défaut les extensions les plus stables, mais pas toujours les plus fonctionnelles. Et les développeurs ne dorment pas et de nouvelles solutions plus fonctionnelles apparaissent périodiquement.

Vous pouvez donc télécharger un module de feedback distinct pour Joomla appelé Contact rapide, qui peut vous offrir de nouvelles fonctionnalités (voir démo). Vous pouvez en savoir plus sur la configuration et les capacités de ce module. En plus, composant standard Joomla n'a pas assez de flexibilité pour mettre en œuvre les retours d'information et ne permet pas l'utilisation de la protection anti-spam (captcha), et ne permet pas non plus de créer plusieurs formulaires de contact différents sur le site.

Ces problèmes sont résolus en utilisant un composant alternatif pour ce moteur appelé aiContactSafev, qui vous permet de créer un nombre illimité de formulaires de commentaires sur le site (vous pouvez les lier à différents Adresse e-mail am) et a la possibilité d'ajouter un champ de téléchargement de fichier, ainsi que tout autre type de champ.

Il vérifie le remplissage correct des champs et affiche les messages d'erreur, et aiContactSafev stocke également une archive de toutes les données envoyées et vous permet de les visualiser à partir de .

Ce composant inclut un captcha très souple (saisie d'un code lors de l'envoi de données pour se protéger du spam). Il peut être téléchargé gratuitement pour différentes versions Joumla, a.

Parlons maintenant de WordPress. Personnellement, je n'ai pas encore décidé de cela et j'ai un e-mail régulier sur ma page de contacts, ce qui en général n'est pas très cool, car il est depuis longtemps dans la base de données spam, et si je n'avais pas pu associez-le à un autre normal, alors le flot de spam m'aurait submergé depuis longtemps.

Mais la suppression du spam de la messagerie Google fonctionne bien et même trop bien, car vos lettres, chers lecteurs, tombent parfois sous sa main brûlante, ce pour quoi, profitant de ce moment, je m'excuse.

En général, c'est le principal avantage du formulaire de commentaires : il vous permet de conserver votre adresse postale pour les spammeurs. Eh bien, il est également généralement conçu dans une coque plutôt agréable, ce qui peut ajouter un plus à l'attitude des utilisateurs envers votre projet, cela est particulièrement vrai pour les ressources commerciales, lorsqu'une commande pratique ou un formulaire de commentaires peut augmenter la conversion (revenus).

En fait, à propos de WordPress. Il existe un plugin très populaire et très puissant appelé Formulaire de contact 7. Sa popularité est tout simplement hors du commun, ce qui signifie qu’il a quelque chose de spécial chez lui. Certes, pour implémenter la fonction captcha, vous devrez installer un plugin Really Simple CAPTCHA supplémentaire.

Le formulaire de commentaires peut être inséré dans n’importe quelle page ou article de votre blog WordPress, ainsi que dans un widget. En fait, il s'agit d'une sorte de constructeur pour WordPress qui permet de mettre à jour les informations du formulaire sans rafraîchir la page (grâce à la technologie ajax). Personnellement, j'ai testé ce plugin pour le site il y a environ quelques années, et il m'a alors semblé très lourd et inapproprié pour atteindre mes objectifs (retour d'expérience).

Il est clair que pendant cette période, le formulaire de contact 7 aurait pu devenir beaucoup plus adapté à la mise en œuvre des tâches qui nous attendent et je vous suggère donc de l'essayer vous-même, en vous appuyant sur tout Description détaillée. Si vous utilisez un autre plugin bon et léger, veuillez en écrire quelques mots dans les commentaires.

Nous avons donc parlé de la mise en œuvre des commentaires dans Joomla et WordPress en utilisant les extensions appropriées.

Mais il y a aussi plusieurs façons:

Créez le formulaire vous-même. Pour ce faire, vous devrez écrire son code et concevoir son apparence en utilisant Styles CSS, et écrivez également un gestionnaire pour cela en Php (en principe, les connaissances acquises grâce au cours vidéo de Popov sur Php seront suffisantes), puis vérifiez que les champs sont correctement remplis et autre chose. Laissez-moi vous dire tout de suite que cela ne sera pas facile.

Pour décrire le processus d'installation et de configuration de ce script, vous devrez écrire un article séparé, je vous suggère donc de télécharger et regarder un didacticiel vidéo détailléà ce sujet, qui décrira également le processus d'intégration du script dans la conception de votre site.

Concepteurs et générateurs de formulaires de commentaires

Il existe de nombreux concepteurs et générateurs de formulaires de commentaires en ligne. Par exemple, ce service vous offre un moyen assez pratique et interface fonctionnelle pour créer des structures de presque n'importe quelle complexité. Dans un premier temps, il vous sera demandé de choisir une palette de couleurs :

Après quoi, vous devez sélectionner les champs requis pour le futur formulaire dans la partie gauche de la fenêtre, puis, en cliquant dessus, les rendre plus grands. réglage fin(définissez les étiquettes des champs en russe, sélectionnez la largeur du champ, modifiez le type et saisissez le texte préliminaire) :

Les champs ajoutés peuvent être échangés en faisant simplement glisser la souris, supprimés et réédités :

En général, l'interface de ce concepteur en ligne très, très moderne et confortable. Après avoir placé tous les champs dont vous avez besoin dans l'ordre souhaité et fourni tous les paramètres dont ils ont besoin, vous pouvez cliquer sur le bouton Enregistrer (situé en bas). Sur page suivante vous serez invité à afficher et télécharger le script de commentaires ou à revenir à l'édition :

Commentaires pour les sites HTML (sans Php)

Manger services en ligne, fournissant gratuitement leurs propres gestionnaires Php, qui seront situés sur leurs serveurs. Ce type comprend :

Ce n'est pas une fontaine, bien sûr, en termes de sophistication du design, mais un tel formulaire peut être créé en cinq secondes et placé en une minute sur absolument n'importe quel site Web, même situé sur un hébergement sans support PHP.

Après la configuration apparence et en ajoutant les champs obligatoires, cliquez sur le bouton « Afficher », puis sur le bouton « Configuré » et copiez le code. Collez-le dans la page des contacts et cliquez sur le bouton « Insérer » situé sous le code.

Après cela, entrez l'adresse de la page de votre site où vous avez inséré le code et l'adresse e-mail à laquelle les messages des utilisateurs envoyés via ce même formulaire doivent être envoyés.

Il existe un autre générateur de formulaires de commentaires dont les fonctionnalités sont très similaires. Les conceptions créées avec celui-ci peuvent également être placées sur des sites d'hébergement sans support PHP (spécifiez simplement l'adresse de la page et l'e-mail auquel les messages seront envoyés). Je n’en parlerai pas beaucoup, car il est essentiellement très similaire au constructeur décrit juste au-dessus.

Bonne chance à toi! A bientôt sur les pages du site blog

Vous pouvez regarder plus de vidéos en allant sur

Vous pourriez être intéressé

Google Forms - comment créer une enquête en ligne sur un site Web dans Google Forms
EnvoyerPulse- Notifications push pour le site et option gratuite leurs connexions depuis SandPulse Éditeurs HTML en ligne - visuels, IDE et éditeurs pour installation sur un site Web
Accélérez et protégez votre site Web en service cloud Airi.rf

Aujourd'hui, nous allons travailler sur la création beau HTML formulaire de commentaires pour le site, fonctionnant sur PHP et doté d'une protection anti-spam intégrée. Vous n'avez besoin d'aucune connaissance particulière, cela suffira les bases du HTML et la logique élémentaire. Je fournirai des fichiers prêts à l'emploi que vous pourrez insérer dans le site sans modifications ni ajuster selon vos besoins.

J'ai récemment écrit un article sur la façon d'en créer un à l'aide du plugin Contact Form 7. Vous pouvez également facilement créer un formulaire de commentaires sur Joomla et d'autres CMS populaires.

Mais que doivent faire les sites qui n’utilisent pas de CMS populaires ? – Il ne reste plus qu’à tout faire à la main.

De plus, l’utilisation des commentaires sans plugins est également possible pour WordPress. Les plugins inutiles créent une charge importante sur les serveurs, et leur suppression permet d'accélérer le site.

Vous pouvez commander ici l'installation et la configuration du formulaire fini pour 500 roubles (c'est pour ceux qui sont trop paresseux pour travailler de leurs mains ou qui n'ont pas suffisamment de compétences).

Comment fonctionne le formulaire de commentaires HTML

Notre formulaire comportera 5 champs pour la saisie des données - nom, adresse e-mail, numéro de téléphone, adresse du site Web, texte du message (vous pouvez les supprimer ou les modifier vous-même).

Tous les champs seront obligatoires à l'exception de l'adresse du site Web (vous pouvez également la configurer vous-même).

Pour les champs avec adresse e-mail et le site procédera à un contrôle obligatoire de l'exactitude de la saisie des données.

La forme finale de communication ressemblera à ceci :

Un formulaire de contact créé en html nécessite 3 éléments pour fonctionner.

Le premier est responsable de la structure du formulaire lui-même, du type et du nombre de champs de saisie de données. C'est normal Code HTML.

Le second est responsable du traitement des données que l'utilisateur saisit dans les champs du formulaire. Il détermine quoi, où et sous quelle forme envoyer après avoir appuyé sur le bouton d'envoi. Un script PHP spécial est utilisé pour l'implémentation.

Le troisième est responsable de l'apparence. Définit la taille et l'emplacement des champs de saisie de données, ajoute diverses couleurs et effets. Tout cela est défini par les styles CSS.

Version démo du formulaire

Nous vous guiderons pas à pas dans la configuration de chacun de ces éléments.

Création d'une mise en page HTML

Afin de ne pas rendre l'article trop long et de ne pas ajouter chaque élément séparément, je fournirai le code html complet, et ci-dessous je décrirai chaque bloc et les modifications possibles.

La balise est utilisée pour désigner des formulaires en HTML

, à l'intérieur duquel les paramètres nécessaires sont remplis.

Commençons par la première ligne.

classe="contact_form"– spécifiez la classe afin de définir les styles CSS à l'avenir.

action="contact-form.php"– précisez le nom du fichier avec le script qui traitera les données du formulaire et enverra le message. Si le fichier se trouve dans le même dossier que la page contenant le formulaire, il suffit alors d'indiquer uniquement le nom du fichier ; s'il se trouve dans un dossier différent, vous devrez alors indiquer le chemin d'accès au fichier.

Viennent ensuite 4 blocs

Responsable de l'affichage des champs de saisie des données, les noms indiquent clairement qui est responsable de quoi. Les champs eux-mêmes sont affichés à l'aide de balises , au sein duquel les caractéristiques suivantes sont définies :

Taper– est responsable du type de données saisies, texte – texte brut, e-mail – adresse e-mail, l'exactitude de ces champs est automatiquement vérifiée (@ doit être présente), téléphone – numéro de téléphone, url – adresse du site Web.

Nom– le nom propre de l'élément lui-même, il est nécessaire pour que le script sache utiliser les données de chaque champ. Si vous créez plusieurs champs du même type, vous devez alors attribuer à chaque champ son propre nom.

Espace réservé– il s’agit d’une info-bulle située à l’intérieur du champ, texte qui remplace le champ vide de l’élément. Il peut être modifié ou supprimé ; cela n’affecte pas le fonctionnement du formulaire.

Requis– ce paramètre indique que le champ est obligatoire. Vous pouvez décider vous-même quels éléments sont requis et lesquels ne le sont pas.

motif=”(http|https)://.+”– cette construction sert à vérifier l'exactitude du champ du site web, indiquant que l'adresse doit contenir http://text ou https://text, dans sinon il y aura une erreur.

Certains champs comportent une info-bulle qui apparaît lorsque vous sélectionnez un élément. Elle est blessée , où form_hint est la classe de l'élément (ses propriétés sont écrites en CSS). Vous pouvez définir n'importe quel texte dans l'info-bulle pour chaque champ du formulaire de contact. Si vous n'avez pas besoin d'une telle fonctionnalité, supprimez simplement la balise entière.

Les champs de saisie du message lui-même sont marqués de la balise , dans lequel cols spécifie le nombre de caractères dans la largeur du champ et rows spécifie le nombre de lignes.</p><p><b>Protection contre les spams</b>– champ invisible nommé name=bezspama. Il a le style display:none - cela signifie que le champ est invisible pour les gens, mais les robots le rempliront automatiquement.</p><p>Et le dernier élément de tout formulaire est le bouton d'envoi de message, il est spécifié par la balise <button> </button>, qui possède sa propre classe pour personnaliser l’apparence et le type « soumettre ».</p><p>Pour ajouter ou supprimer des champs, supprimez simplement ceux qui sont inutiles ou insérez-en de nouveaux par analogie avec ceux existants, en spécifiant toutes leurs propriétés et leurs noms.</p><h2>Décorer avec des styles CSS</h2><p>Si vous regardez le résultat dans un navigateur, vous verrez quelque chose de maladroit et peu attrayant. Pour que nous ayons un beau formulaire de feedback, nous devrons travailler sur ses styles (le HTML ne suffira pas).</p><p>Si vous connaissez CSS, vous pouvez définir la conception de tous les éléments du formulaire sans aucun problème, vous n'avez même pas besoin de mon aide.</p><p>Si vous n'êtes pas familier avec les styles, je vais simplement vous donner <a href="https://rokwell.ru/fr/kak-sozdat-proshivku-dlya-svoego-androida-poisk-i-ustanovka-neobhodimogo-dlya-proshivki-po-izmenenie/">fichier prêt</a>, dans lequel tout est déjà écrit de telle manière que votre formulaire sera identique à celui de l'exemple.</p><p>Vous pouvez connecter des styles de deux manières :</p><ol><li>Copiez le contenu du fichier dans le fichier style.css qui est déjà sur votre site (ajoutez à la toute fin)</li><li>Placez le fichier que j'ai donné sur votre hébergement et connectez-le.</li> </ol><p>Les fichiers de style sont connectés à l'aide du code suivant <link rel=”stylesheet” media=”screen” href=”styles.css” >, placé à l'intérieur <head></head>. Si le fichier avec les styles (styles.css) ne se trouve pas dans le même dossier que <a href="https://rokwell.ru/fr/sozdat-odnotonnuyu-shapku-poshagovaya-instrukciya-css-shapka-stranicy-shapka-stranicy/">page HTML</a>, puis écris <a href="https://rokwell.ru/fr/pokazat-polnyi-put-znakomimsya-s-adb/">chemin complet</a> avant lui.</p><p>Dans le fichier de style que j'ai donné, chaque élément est étiqueté, vous pouvez donc y apporter des modifications - changer les couleurs, les tailles, les formes, les effets. Posséder le plus <a href="https://rokwell.ru/fr/polnyi-kurs-raboty-v-fotoshope-bazovye-znaniya-i-osnovy-dlya/">notions de base</a>, vous pouvez facilement le modifier.</p><h2>Mise en place du code PHP (protection anti-spam ajoutée)</h2><p>Comme pour les styles, je vais vous donner <a href="https://rokwell.ru/fr/small-basic-gotovye-kody-alternativy-dlya-zameny-microsoft-small-basic-spisok/">code prêt</a>, traitement <a href="https://rokwell.ru/fr/html-formy-sozdanie-html-form/">Formulaire HTML</a> commentaires et anti-spam. Ce fichier est personnalisé pour une configuration spécifique et si vous souhaitez définir de nouveaux champs ou supprimer ceux existants, vous devrez y apporter des modifications. Par conséquent, je vais vous expliquer comment cela fonctionne afin que vous compreniez ce qui doit être changé.</p><blockquote><p>Pour les sites utilisant le codage Windows-1251 et <a href="https://rokwell.ru/fr/determining-the-version-of-the-browser-php-or-javascript-how-to-determine-the-version-of-internet-explorer-in-javascript/">version php</a> 5.4+, vous devrez ajouter un ajout au code lié à la fonction htmlspecialchars. Je vais le montrer ci-dessous. Sinon, des champs vides apparaîtront à la place de l'alphabet cyrillique.</p> </blockquote><p>N'oubliez pas que dans le formulaire Propriétés (dans <a href="https://rokwell.ru/fr/konvertirovanie-faila-html-do-jpg-konvertirovanie-faila-html-do-jpg-paketnoe/">fichier HTML</a>) nous avons spécifié le paramètre action="contact-form.php". Vous devez créer un fichier appelé contact-form.php et y placer le code ci-dessous.</p><p><?php /* Задаем переменные */ $name = htmlspecialchars($_POST["name"]); $email = htmlspecialchars($_POST["email"]); $tel = htmlspecialchars($_POST["tel"]); $website = htmlspecialchars($_POST["website"]); $message = htmlspecialchars($_POST["message"]); $bezspama = htmlspecialchars($_POST["bezspama"]); /* Ваш адрес и тема сообщения */ $address = "pochta@kakoy-to-sajt.com"; $sub = "Сообщение с сайта ХХХ"; /* Формат письма */ $mes = "Сообщение с сайта ХХХ.\n Имя отправителя: $name Электронный адрес отправителя: $email Телефон отправителя: $tel Сайт отправителя: $website Текст сообщения: $message"; if (empty($bezspama)) /* Оценка поля bezspama - должно быть пустым*/ { /* Отправляем сообщение, используя mail() функцию */ $from = "From: $name <$email>\r\n Répondre à : $email \r\n"; if (mail($address, $sub, $mes, $from)) ( header("Refresh: 5; URL=https://site") ; écho " <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body><script type="text/javascript">  </script><br> <br> </body>";) else ( header("Actualiser : 5; URL=https://site"); echo " <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body><script type="text/javascript">  </script><br> <br> </body>";) ) exit; /* Quitter sans message si le champ bezspama est rempli de robots spammeurs */ ?></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p><?php </p><p>/* Définir les variables */</p><p>$nom = htmlspecialchars($_POST["nom"]);</p><p>$email = htmlspecialchars($_POST["email"]);</p><p>$tel = htmlspecialchars($_POST["tel"]);</p><p>$site Web = htmlspecialchars($_POST["site Web"]);</p><p>$message = htmlspecialchars($_POST["message"]);</p><p>$bezspama = htmlspecialchars ($_POST [ "bezspama" ] ) ;</p><p>/* Votre adresse et sujet du message */</p><p>$sous = <span>"Message du site XXX"</span>; </p><p>/* Format de lettre */</p><p>$mes = <span>"Message du site XXX.\n</p><p>Nom de l'expéditeur : $nom</p><p>Adresse email de l'expéditeur : $email</p><p>Numéro de téléphone de l'expéditeur : $tel</p><p>Site Web de l'expéditeur : $website</p><p>Texte du message :</p><p>$message" ;</p><p>si (vide ($bezspama) ) <span>/* Évaluation du champ bezspama - doit être vide */</p><p>/* Envoie un message en utilisant la fonction mail() */</p><p>$de = <span>"De : $nom<$email>\r\n Répondre à : $email \r\n"</span>; </p><p>if (mail ($address, $sub, $mes, $from)) (</p><p>entête();</p><p>écho " <head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>La lettre a été envoyée, dans 5 secondes vous reviendrez à la page XXX<script type="text/javascript">  </script><br> <br> </body>" </span>; } </p><p>autre(</p><p>entête( <span>"Actualiser : 5 ; URL=https://site"</span>) ; </p><p>écho " <head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>L'email n'a pas été envoyé, dans 5 secondes vous serez renvoyé sur la page YYY<script type="text/javascript">  </script><br> <br> </body>" </span>; } </p><p>sortie ; <span>/* Quitte sans message si le champ bezspama est rempli de robots spammeurs */</p> </td> </tr></table><p>Tout d'abord, nous devons définir les variables qui seront traitées par le code PHP. Afin de ne pas se tromper, nous leur attribuons les mêmes noms que dans le formulaire lui-même, seules toutes les variables commencent par le signe $. La commande d'attribution de valeur elle-même ressemble à ceci :</p><p>$titre = htmlspecialchars($_POST["titre"]);</p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p>$title=htmlspecialchars($_POST["titre"]) ;</p> </td> </tr></table><p>Si vous avez ajouté des champs de données supplémentaires, ajoutez leurs noms dans le bloc de variables.</p><p>Nous ne retirons pas toutes les variables du formulaire. Au minimum, l'adresse e-mail à laquelle la lettre sera envoyée (votre adresse) est indiquée séparément. Dans ce cas, il s'agit de la variable $address - entrez votre adresse e-mail dans sa valeur.</p><p>De plus, dans cet exemple, la valeur de la variable $sub est explicitement définie - elle affichera le sujet de la lettre. Vous pouvez ajouter le sujet du message au formulaire HTML sous forme de champ de texte (comme le nom) et prendre la valeur de cette variable à partir de là.</p><p>Dans le bloc format lettre, vous configurez le message que vous recevrez. Cela peut différer de ce qui a été écrit dans le champ de zone de texte appelé message. J'ai simplement créé une autre variable $mes et y ai inclus du texte supplémentaire et des données importantes sur l'expéditeur (nom, e-mail, téléphone, site Web). Vous pouvez configurer cette partie comme vous le souhaitez.</p><p>Pour garantir que les lettres que vous recevez sont signées avec le nom de l'expéditeur et incluent son adresse de retour, et non l'adresse du serveur sur lequel se trouve votre fichier php, nous définissons une nouvelle variable $from, qui inclut le nom et email de l'expéditeur de la lettre.</p><p>Ensuite, la fonction mail envoie la lettre selon les paramètres spécifiés. Si l'envoi est réussi, un message apparaît indiquant que la lettre a été envoyée, et après 5 secondes, l'utilisateur est redirigé vers une page de votre site Web (vous pouvez modifier l'adresse de la page et le délai). Si la lettre n'a pas pu être envoyée, un message apparaît indiquant que la lettre n'a pas été envoyée et après 5 secondes, elle passe à la page du site. De la même manière, vous pouvez définir l'adresse et l'heure de la page.</p> <h2>Insérer un formulaire sur une page de site Web</h2><p>Afin d'insérer le formulaire de commentaires que vous avez créé, vous devez copier le code HTML du formulaire et le coller dans la partie du code de la page où vous souhaitez afficher les commentaires pour le site.</p><p>Encore une fois, je voudrais vous rappeler que si le fichier avec le programme PHP ne se trouve pas dans le même dossier que la page sur laquelle se trouve le code html, alors dans le code du formulaire lui-même, vous devez écrire le chemin complet d'accès. , sinon cela ne fonctionnera pas, puisque le formulaire ne trouvera pas de gestionnaire de fichiers.</p><p><b><span>Télécharger les fichiers du formulaire de contact</span> </b></p><h2>Anti-spam actif avec saisie des données sur le terrain</h2><p>Les spammeurs fonctionnent à l'aide de divers outils logiciels, et certains robots sont capables de contourner la protection des champs vides intégrée à la version de base. S'ils commencent à vous harceler, vous pouvez utiliser une protection simple à la place ou en plus en saisissant des données dans un champ spécial. Par exemple, créez une expression mathématique vous demandant de saisir une réponse ou de poser une question simple. Cela ne nécessitera pas de changements de forme majeurs.</p><p>Je vais vous montrer comment modifier le code du formulaire et le gestionnaire PHP pour utiliser cette méthode antispam. Si vous le souhaitez, vous ne pouvez pas modifier la protection avec un champ vide, mais ajoutez les lignes correspondantes au code et vous aurez 2 méthodes fonctionnant simultanément - en théorie, cela devrait être plus efficace.</p><p>Tout d'abord, nous devons ajouter un champ de saisie et une question au code HTML. Nous avons déjà la ligne 25 (nom d'entrée = « bezspama ») comme base. Ce champ est invisible. Nous le transformons en ordinaire. Pour ce faire, remplacez toute la ligne par ce bloc :</p><p><p> <label for="bezspama">2+2*2=:</label> <input name="bezspama" type="text" required /> </p></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p><p><label for = "bezspama" > 2+2*2=: </label> </p><p><input name = "bezspama" type = "text" required /> </p> </p> </td> </tr></table><p>Au lieu de l'expression mathématique 2+2*2, vous pouvez saisir n'importe quelle donnée - il s'agit d'une question visuelle pour l'utilisateur. Nous avons supprimé le style display:none du champ de saisie et ajouté un remplissage obligatoire.</p><p>L'étape suivante consiste à modifier les données dans le gestionnaire PHP afin qu'il vérifie non pas le vide de ce champ, mais l'exactitude des données saisies. Nous avons vérifié la ligne 25 avec l'expression vide ($bezspama) . Nous modifions cette expression et vérifierons si le champ rempli est égal à un nombre prédéterminé. Dans mon exemple, l’expression mathématique est 6, donc la ligne entière ressemblera à ceci.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <footer> <div class="td-post-source-tags"> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://rokwell.ru/gotovaya-forma-obratnoi-svyazi-php-sozdanie-formy-obratnoi/" content="https://rokwell.ru/gotovaya-forma-obratnoi-svyazi-php-sozdanie-formy-obratnoi/" /><span style="display: none;"><span style="display: none;"><meta itemprop="url" content="/assets/logo.svg"></span> <meta itemprop="name" content="Готовая форма обратной связи php. Создание формы обратной связи"> </span> <meta itemprop="headline " content="Сбербанк Копилка онлайн"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://i2.wp.com/myrusakov.ru/images/articles/php-feedback_00.png"> <meta itemprop="width" content="366"><meta itemprop="height" content="262"></span> </footer> </article> <style> .ads-border { overflow: hidden; } .ads-content { width: 930px; display: block; } @media(max-width: 1140px) { .ads-content { width: 910px; } } @media(max-width: 1018px) { .ads-content { width: 970px; } } @media (max-width: 767px) { .ads-content { width: 134%; } } @media (max-width: 479px) { .ads-content { width: 100%; height: 490px; } } </style> <div class="ads-block"> <h4 class="td-related-title"><span class="td-related-left td-cur-simple-item">ARTICLES LIÉS</span></h4> <div class="ads-border"> <div class="ads-content"> <div id="fofuny1" style="height:90px;width:690px;" align="center"></div> </div> </div> </div> <style> #mc-container { padding: 10px; } </style> <dblock></dblock> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> <aside class="widget widget_text" id="text-23"> <div class="block-title"><span>Utile</span></div> <div class="textwidget" align="center"><div id="fofuny2" style="height:200px;width:300px;" align="center"></div></div> </aside> <aside class="widget widget_text" id="text-24"> <div class="block-title"><span>Publicité</span></div> <div class="textwidget" align="center"><div id="fofuny3" style="height:200px;width:300px;" align="center"></div></div> </aside> <aside class="widget widget_text" id="text-25"> <div class="textwidget"> <p style="text-align: center;"> </p> </div> </aside> <aside class="widget rpwe_widget recent-posts-extended" id="rpwe_widget-4"> <div class="block-title"><span>Nouveau</span></div> <dblock></dblock> <div class="rpwe-block "> <ul class="rpwe-ul"> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://rokwell.ru/fr/kak-dolzhen-vyglyadet-fail-hosts-hosts-fail-ustranyaem-posledstviya-virusnoi/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/remontcompa.ru/uploads/posts/2012-11/1354042393_101.jpg" alt="Fichier Hosts : éliminer les conséquences d'une attaque de virus À quoi ressemble l'hôte" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/kak-dolzhen-vyglyadet-fail-hosts-hosts-fail-ustranyaem-posledstviya-virusnoi/" title="Fichier Hosts : éliminer les conséquences d'une attaque de virus À quoi ressemble l'hôte" rel="bookmark">Fichier Hosts : éliminer les conséquences d'une attaque de virus À quoi ressemble l'hôte</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://rokwell.ru/fr/posle-formatirovaniya-karta-pamyati-ne-rabotaet-kak-vosstanovit/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/computer-setup.ru/wp-content/uploads/2018/01/image1-1-998x1024.jpeg" alt="Comment restaurer une carte mémoire micro SD sans se rendre dans un centre de service ?" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/posle-formatirovaniya-karta-pamyati-ne-rabotaet-kak-vosstanovit/" title="Comment restaurer une carte mémoire micro SD sans se rendre dans un centre de service ?" rel="bookmark">Comment restaurer une carte mémoire micro SD sans se rendre dans un centre de service ?</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://rokwell.ru/fr/pochta-gmail-vhod-na-svoyu-stranicu-kak-sozdat-i-zashchitit-svoi/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/public-pc.com/wp-content/uploads/2015/04/%D1%8F.png" alt="Comment créer et protéger votre boîte mail Gmail Réseau social gmail com" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/pochta-gmail-vhod-na-svoyu-stranicu-kak-sozdat-i-zashchitit-svoi/" title="Comment créer et protéger votre boîte mail Gmail Réseau social gmail com" rel="bookmark">Comment créer et protéger votre boîte mail Gmail Réseau social gmail com</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://rokwell.ru/fr/gugl-google-pochta-vhod-registraciya-kak-sozdat-i-zashchitit-svoi-pochtovyi/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/v-pc.ru/wp-content/uploads/2018/03/%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C-%D0%B0%D0%BA%D0%BA%D0%B0%D1%83%D0%BD%D1%82-gmail.png" alt="Comment créer et protéger votre boîte mail Gmail Mail jmail com login" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/gugl-google-pochta-vhod-registraciya-kak-sozdat-i-zashchitit-svoi-pochtovyi/" title="Comment créer et protéger votre boîte mail Gmail Mail jmail com login" rel="bookmark">Comment créer et protéger votre boîte mail Gmail Mail jmail com login</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://rokwell.ru/fr/gugl-google-pochta-vhod-registraciya-gugl-google-pochta-vhod-registraciya/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/hsl.guru/wp-content/uploads/2017/01/Create-Gmail-Account.png" alt="Google mail - connexion (inscription) Connexion à la messagerie Google" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/gugl-google-pochta-vhod-registraciya-gugl-google-pochta-vhod-registraciya/" title="Google mail - connexion (inscription) Connexion à la messagerie Google" rel="bookmark">Google mail - connexion (inscription) Connexion à la messagerie Google</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://rokwell.ru/fr/tarify-bilain-vs-mo-servis-bilain-moya-set-pravila-ispolzovaniya-opcii/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/beeline365.ru/wp-content/uploads/2017/02/1520-9.jpg" alt="Service Beeline « Mon réseau Règles d'utilisation de l'option" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/tarify-bilain-vs-mo-servis-bilain-moya-set-pravila-ispolzovaniya-opcii/" title="Service Beeline « Mon réseau Règles d'utilisation de l'option" rel="bookmark">Service Beeline « Mon réseau Règles d'utilisation de l'option</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://rokwell.ru/fr/sohranenie-i-ustanovka-svoego-konfiga-v-cs-go-sozdaem-svoi-cfg/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/all-csgo.com/uploads/posts/2019-06/medium/1560342336_screenshot_1.png" alt="Sauvegarder et installer votre configuration dans CS:GO" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/sohranenie-i-ustanovka-svoego-konfiga-v-cs-go-sozdaem-svoi-cfg/" title="Sauvegarder et installer votre configuration dans CS:GO" rel="bookmark">Sauvegarder et installer votre configuration dans CS:GO</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://rokwell.ru/fr/otzyv-youtube-instrukciya-po-primeneniyu-kak-zarabotat-na-youtube-yutub-dengi-za/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/1zaicev.ru/wp-content/uploads/2016/12/predupregdenie.png" alt="Comment gagner de l'argent sur YouTube grâce aux vues, est-ce possible et combien, mode d'emploi Mode d'emploi YouTube" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/otzyv-youtube-instrukciya-po-primeneniyu-kak-zarabotat-na-youtube-yutub-dengi-za/" title="Comment gagner de l'argent sur YouTube grâce aux vues, est-ce possible et combien, mode d'emploi Mode d'emploi YouTube" rel="bookmark">Comment gagner de l'argent sur YouTube grâce aux vues, est-ce possible et combien, mode d'emploi Mode d'emploi YouTube</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://rokwell.ru/fr/avtomaticheskii-sposob-zarabotka-programmy-dlya-zarabotka-kak-eto/" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/web-zarabotok.info/wp-content/uploads/2016/11/%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B0-%D0%B4%D0%BB%D1%8F-%D0%B7%D0%B0%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0-socpublic.png" alt="Un moyen automatique de gagner de l'argent" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/avtomaticheskii-sposob-zarabotka-programmy-dlya-zarabotka-kak-eto/" title="Un moyen automatique de gagner de l'argent" rel="bookmark">Un moyen automatique de gagner de l'argent</a> </li> </ul> </div> </aside> </div> </div> </div> </div> </div> <div class="td-footer-wrapper td-footer-template-3"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12"> </div> </div> <div class="td-pb-row"> <div class="td-pb-span3 logo-footer"> <div class="td-footer-info"> <div class="footer-logo-wrap"><a href="https://rokwell.ru/fr/"><img class="td-retina-data" src="/logo/logo.png" data-retina="/logo/logo.png" alt="Site sur l'informatique" title="Site sur l'informatique" / loading=lazy loading=lazy></a></div> <div class="footer-text-wrap"></div> <div class="footer-social-wrap td-social-style-2"></div> </div> <aside class="widget widget_text" id="text-16"> <div class="textwidget"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <span class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter"></span></div> </aside> </div> <div class="td-pb-span9 footer-discription"> <aside class="widget widget_text" id="text-5"> <div class="textwidget"> <p> <font size="2" color="grey"> </font> </p>© Site Web sur la technologie informatique, 2024</div> </aside> </div> </div> </div> </div> <div class="td-sub-footer-container"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12 td-sub-footer-menu"> <div class="td-sub-footer-main"> <div class="menu-foot-container"><ul id="menu-foot" class="td-subfooter-menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu"><a href="https://rokwell.ru/fr/feedback/">Retour</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="https://rokwell.ru/fr/sitemap.xml">Plan du site</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="">À propos du site</a></li> </ul></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("span.ancored").replaceWith(function () { $this = jQuery(this); href = $this.attr("title"); text = $this.html(); return '<a href="' + href + '">' + text + '</a>'; } ) } ) </script> <link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' /> <link rel='stylesheet' id='su-content-shortcodes-css' href='/assets/content-shortcodes.css' type='text/css' media='all' /> <link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' /> <script type='text/javascript' src='/assets/jquery.form.min.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = { "recaptcha":{ "messages":{ "empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."} },"cached":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='/assets/scripts.js'></script> <script type='text/javascript' src='/assets/front.min.js'></script> <script type='text/javascript' src='/assets/imagesloaded.min.js'></script> <script type='text/javascript' src='/assets/masonry.min.js'></script> <script type='text/javascript' src='/assets/jquery.masonry.min.js'></script> <script type='text/javascript' src='/assets/rsvp.js'></script> <script type='text/javascript' src='/assets/tagdiv_theme.js'></script> <script type='text/javascript' src='/assets/comment-reply.min.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "td-default", "margin_top" : 25, "margin_bottom" : 320, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-13'] } ; </script> <script type='text/javascript' src='/assets/q2w3-fixed-widget.min.js'></script> <script type='text/javascript' src='/assets/wp-embed.min.js'></script> <style type='text/css'> /*** Shortcodes Ultimate - box elements ***/ /* Common styles ---------------------------------------------------------------*/ .su-clearfix:before, .su-clearfix:after { display: table; content: " "; } .su-clearfix:after { clear: both; } /* Tabs + Tab ---------------------------------------------------------------*/ .su-tabs { margin: 0 0 1.5em 0; padding: 3px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #eee; } .su-tabs-nav span { display: inline-block; margin-right: 3px; padding: 10px 15px; font-size: 13px; min-height: 40px; line-height: 20px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; color: #333; cursor: pointer; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .su-tabs-nav span:hover { background: #f5f5f5; } .su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; } .su-tabs-nav span.su-tabs-disabled { opacity: 0.5; filter: alpha(opacity=50); cursor: default; } .su-tabs-pane { padding: 15px; font-size: 13px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; background: #fff; color: #333; } .su-tabs-vertical:before, .su-tabs-vertical:after { content: " "; display: table; } .su-tabs-vertical:after { clear: both; } .su-tabs-vertical .su-tabs-nav { float: left; width: 30%; } .su-tabs-vertical .su-tabs-nav span { display: block; margin-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; } .su-tabs-vertical .su-tabs-panes { float: left; width: 70%; } .su-tabs-vertical .su-tabs-pane { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .su-tabs-nav, .su-tabs-nav span, .su-tabs-panes, .su-tabs-pane { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-tabs-nav span { display: block; } .su-tabs-vertical .su-tabs-nav { float: none; width: auto; } .su-tabs-vertical .su-tabs-panes { float: none; width: auto; } } /* Spoiler + Accordion ---------------------------------------------------------------*/ .su-spoiler { margin-bottom: 1.5em; } .su-spoiler .su-spoiler:last-child { margin-bottom: 0; } .su-accordion { margin-bottom: 1.5em; } .su-accordion .su-spoiler { margin-bottom: 0.5em; } .su-spoiler-title { position: relative; cursor: pointer; min-height: 20px; line-height: 20px; padding: 7px 7px 7px 34px; font-weight: bold; font-size: 13px; } .su-spoiler-icon { position: absolute; left: 7px; top: 7px; display: block; width: 20px; height: 20px; line-height: 21px; text-align: center; font-size: 14px; font-family: FontAwesome; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; *margin-right: .3em; } .su-spoiler-content { padding: 14px; -webkit-transition: padding-top .2s; -moz-transition: padding-top .2s; -o-transition: padding-top .2s; transition: padding-top .2s; -ie-transition: padding-top .2s; } .su-spoiler.su-spoiler-closed > .su-spoiler-content { height: 0; margin: 0; padding: 0; overflow: hidden; border: none; opacity: 0; } .su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f068"; } .su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f067"; } .su-spoiler-icon-plus-circle .su-spoiler-icon:before { content: "\f056"; } .su-spoiler-icon-plus-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f055"; } .su-spoiler-icon-plus-square-1 .su-spoiler-icon:before { content: "\f146"; } .su-spoiler-icon-plus-square-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0fe"; } .su-spoiler-icon-plus-square-2 .su-spoiler-icon:before { content: "\f117"; } .su-spoiler-icon-plus-square-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f116"; } .su-spoiler-icon-arrow .su-spoiler-icon:before { content: "\f063"; } .su-spoiler-icon-arrow.su-spoiler-closed .su-spoiler-icon:before { content: "\f061"; } .su-spoiler-icon-arrow-circle-1 .su-spoiler-icon:before { content: "\f0ab"; } .su-spoiler-icon-arrow-circle-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0a9"; } .su-spoiler-icon-arrow-circle-2 .su-spoiler-icon:before { content: "\f01a"; } .su-spoiler-icon-arrow-circle-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f18e"; } .su-spoiler-icon-chevron .su-spoiler-icon:before { content: "\f078"; } .su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon:before { content: "\f054"; } .su-spoiler-icon-chevron-circle .su-spoiler-icon:before { content: "\f13a"; } .su-spoiler-icon-chevron-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f138"; } .su-spoiler-icon-caret .su-spoiler-icon:before { content: "\f0d7"; } .su-spoiler-icon-caret.su-spoiler-closed .su-spoiler-icon:before { content: "\f0da"; } .su-spoiler-icon-caret-square .su-spoiler-icon:before { content: "\f150"; } .su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before { content: "\f152"; } .su-spoiler-icon-folder-1 .su-spoiler-icon:before { content: "\f07c"; } .su-spoiler-icon-folder-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f07b"; } .su-spoiler-icon-folder-2 .su-spoiler-icon:before { content: "\f115"; } .su-spoiler-icon-folder-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f114"; } .su-spoiler-style-default { } .su-spoiler-style-default > .su-spoiler-title { padding-left: 27px; padding-right: 0; } .su-spoiler-style-default > .su-spoiler-title > .su-spoiler-icon { left: 0; } .su-spoiler-style-default > .su-spoiler-content { padding: 1em 0 1em 27px; } .su-spoiler-style-fancy { border: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #fff; color: #333; } .su-spoiler-style-fancy > .su-spoiler-title { border-bottom: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #f0f0f0; font-size: 0.9em; } .su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; } .su-spoiler-style-fancy > .su-spoiler-content { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .su-spoiler-style-simple { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .su-spoiler-style-simple > .su-spoiler-title { padding: 5px 10px; background: #f0f0f0; color: #333; font-size: 0.9em; } .su-spoiler-style-simple > .su-spoiler-title > .su-spoiler-icon { display: none; } .su-spoiler-style-simple > .su-spoiler-content { padding: 1em 10px; background: #fff; color: #333; } /* Quote ---------------------------------------------------------------*/ .su-quote-style-default { position: relative; margin-bottom: 1.5em; padding: 0.5em 3em; font-style: italic; } /*.su-quote-style-default.su-quote-has-cite { margin-bottom: 3em; } */ .su-quote-style-default:before, .su-quote-style-default:after { position: absolute; display: block; width: 20px; height: 20px; background-image: url('../images/quote.png'); content: ''; } .su-quote-style-default:before { top: 0; left: 0; background-position: 0 0; } .su-quote-style-default:after { right: 0; bottom: 0; background-position: -20px 0; } .su-quote-style-default .su-quote-cite { display: block; text-align: right; font-style: normal; } .su-quote-style-default .su-quote-cite:before { content: "\2014\0000a0"; } .su-quote-style-default .su-quote-cite a { text-decoration: underline; } /* Pullquote ---------------------------------------------------------------*/ .su-pullquote { display: block; width: 30%; padding: 0.5em 1em; } .su-pullquote-align-left { margin: 0.5em 1.5em 1em 0; padding-left: 0; float: left; border-right: 5px solid #eee; } .su-pullquote-align-right { margin: 0.5em 0 1em 1.5em; padding-right: 0; float: right; border-left: 5px solid #eee; } /* Row + Column ---------------------------------------------------------------*/ .su-row { clear: both; zoom: 1; margin-bottom: 1.5em; } .su-row:before, .su-row:after { display: table; content: ""; } .su-row:after { clear: both; } .su-column { display: block; margin: 0 4% 0 0; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .su-column-last { margin-right: 0; } .su-row .su-column { margin: 0 0 0 4%; } .su-row .su-column.su-column-size-1-1 { margin-left: 0; margin-right: 0; } .su-row .su-column:first-child { margin-left: 0; } .su-column-centered { margin-right: auto !important; margin-left: auto !important; float: none !important; } .su-column img, .su-column iframe, .su-column object, .su-column embed { max-width: 100%; } @media only screen { [class*="su-column"] + [class*="su-column"]:last-child { float: right; } } .su-column-size-1-1 { width: 100%; } .su-column-size-1-2 { width: 48%; } .su-column-size-1-3 { width: 30.66%; } .su-column-size-2-3 { width: 65.33%; } .su-column-size-1-4 { width: 22%; } .su-column-size-3-4 { width: 74%; } .su-column-size-1-5 { width: 16.8%; } .su-column-size-2-5 { width: 37.6%; } .su-column-size-3-5 { width: 58.4%; } .su-column-size-4-5 { width: 79.2%; } .su-column-size-1-6 { width: 13.33%; } .su-column-size-5-6 { width: 82.66%; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-column { width: 100% !important; margin: 0 0 1.5em 0 !important; float: none !important; } .su-row .su-column:last-child { margin-bottom: 0 !important; } } /* Service ---------------------------------------------------------------*/ .su-service { position: relative; margin: 0 0 1.5em 0; } .su-service-title { display: block; margin-bottom: 0.5em; color: #333; font-weight: bold; font-size: 1.1em; } .su-service-title img { position: absolute; top: 0; left: 0; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .su-service-title i { position: absolute; top: 0; left: 0; display: block !important; width: 1em; height: 1em; text-align: center; line-height: 1em; } .su-service-content { line-height: 1.4; } /* Box ---------------------------------------------------------------*/ .su-box { margin: 0 0 1.5em 0; border-width: 2px; border-style: solid; } .su-box-title { display: block; padding: 0.5em 1em; font-weight: bold; font-size: 1.1em; } .su-box-content { background-color: #fff; color: #444; padding: 1em; } .su-box-style-soft .su-box-title { background-image: url('../images/styles/style-soft.png'); background-position: 0 0; background-repeat: repeat-x; } .su-box-style-glass .su-box-title { background-image: url('../images/styles/style-glass.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-bubbles .su-box-title { background-image: url('../images/styles/style-bubbles.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-noise .su-box-title { background-image: url('../images/styles/style-noise.png'); background-position: 0 0; background-repeat: repeat-x; } /* Note ---------------------------------------------------------------*/ .su-note { margin: 0 0 1.5em 0; border-width: 0px; border-style: solid; } .su-note-inner { padding: 1em; border-width: 0px; border-style: solid; box-shadow: 3px 3px 6px #d0d0d0; } /* Expand ---------------------------------------------------------------*/ .su-expand { margin: 0 0 1.5em 0; } .su-expand-content { overflow: hidden; } .su-expand-link { margin-top: 0.5em; cursor: pointer; } .su-expand-link:hover { opacity: 0.7; filter: alpha(opacity=70); } .su-expand-link a, .su-expand-link a:hover, .su-expand-link a:active, .su-expand-link a:visited, .su-expand-link a:focus { display: inline; text-decoration: none; background: transparent; border: none; } .su-expand-link-style-default .su-expand-link a, .su-expand-link-style-default .su-expand-link a:hover { text-decoration: none; } .su-expand-link-style-underlined .su-expand-link span { text-decoration: underline; } .su-expand-link-style-dotted .su-expand-link span { border-bottom: 1px dotted #333; } .su-expand-link-style-dashed .su-expand-link span { border-bottom: 1px dashed #333; } .su-expand-link-style-button .su-expand-link a { display: inline-block; margin-top: 0.2em; padding: 0.2em 0.4em; border: 2px solid #333; } .su-expand-link-more { display: none; } .su-expand-link-less { display: block; } .su-expand-collapsed .su-expand-link-more { display: block; } .su-expand-collapsed .su-expand-link-less { display: none; } .su-expand-link i { display: inline-block; margin: 0 0.3em 0 0; vertical-align: middle; color: inherit; } .su-expand-link img { display: inline-block; width: 1em; height: 1em; margin: 0 0.3em 0 0; vertical-align: middle; } /* Lightbox content ---------------------------------------------------------------*/ .su-lightbox-content { position: relative; margin: 0 auto; } .mfp-content .su-lightbox-content, #su-generator .su-lightbox-content { display: block !important; } .su-lightbox-content-preview { width: 100%; min-height: 300px; background: #444; overflow: hidden; } .su-lightbox-content h1, .su-lightbox-content h2, .su-lightbox-content h3, .su-lightbox-content h4, .su-lightbox-content h5, .su-lightbox-content h6 { color: inherit; } /* Common margin resets for box elements ---------------------------------------------------------------*/ .su-column-inner > *:first-child, .su-accordion > *:first-child, .su-spoiler-content > *:first-child, .su-service-content > *:first-child, .su-box-content > *:first-child, .su-note-inner > *:first-child, .su-expand-content > *:first-child, .su-lightbox-content > *:first-child { margin-top: 0; } .su-column-inner > *:last-child, .su-tabs-pane > *:last-child, .su-accordion > *:last-child, .su-spoiler-content > *:last-child, .su-service-content > *:last-child, .su-box-content > *:last-child, .su-note-inner > *:last-child, .su-expand-content > *:last-child, .su-lightbox-content > *:last-child { margin-bottom: 0; } </style> <script> (function(){ var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/assets/style2.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,''); } ); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } } ); } } )(); </script> <script type="text/javascript">  </script><br> <br> </body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>