Share
Dans ce didacticiel, nous allons examiner un moyen simple d’ajouter des formulaires dynamiques et flexibles à vos sites Web statiques..
Imaginez que vous venez de créer un site Web à l'aide de pages statiques, que ce soit à l'aide de Jekyll ou simplement à l'aide de fichiers HTML, mais vous souhaitez maintenant ajouter un formulaire de contact. Vous pouvez vous connecter à un service en ligne, installer quelque chose prédéfini sur votre serveur ou créer quelque chose à partir de zéro avec PHP. Cela signifie que vous êtes soit totalement limité dans la conception, soit que vous déployez plus d'efforts dans un seul formulaire que pour l'ensemble du site..
Et si vous pouviez utiliser un service qui vous donne un contrôle total sur le formulaire, sans pour autant vous demander d’installer quoi que ce soit sur votre serveur? Entrez Formspree, un service en ligne qui vous permet de créer des formulaires HTML fonctionnels sans utiliser PHP ou JavaScript..
Permettez-moi de vous décrire brièvement les étapes nécessaires pour que votre propre formulaire soit opérationnel..
La première chose dont vous aurez besoin est un formulaire, que nous allons construire à partir de zéro en HTML. Mon formulaire va être un moyen très simple pour les gens de me contacter. Je vais avoir un champ pour leur nom, leur adresse électronique et leur message. Voici le balisage de mon formulaire:
Vous verrez que j'ai ajouté un soumettre entrée et enveloppé tous les champs avec un élément.
Nous pouvons appeler cette forme comme nous le voulons. Il n'y a pas iframe ou quoi que ce soit d'autre pour limiter ce à quoi il ressemble.
Pour que Formspree gère votre formulaire, vous devez ajouter l'attribut d'action suivant à votre élément:
Notez que les champs Nom et Message sont nommés correctement, mais j’ai utilisé le caractère spécial “_répondre à”Valeur pour le champ email. Formspree reconnaîtra cette valeur d'attribut et me permettra donc de répondre directement au courrier électronique saisi sur le formulaire lors de son envoi..
Je peux aussi ajouter _suivant vers une autre entrée masquée pour spécifier l'URL que je souhaite que les utilisateurs soient envoyés à celle à laquelle ils ont soumis le formulaire.
Pour que je sache d'où vient la soumission, je vais ajouter une ligne d'objet. Je peux le faire en ajoutant l'entrée cachée suivante:
Ce champ n'apparaît pas lorsqu'un utilisateur consulte le formulaire, mais la valeur sera utilisée pour la ligne d'objet lorsque je reçois une soumission..
Formspree intègre une méthode «anti-spam» de prévention du spam. La technique du pot de miel est assez simple; vous cachez un champ dans votre formulaire que les utilisateurs ne voient pas, mais que les spambots voient. Le spambot remplira le champ, tandis que les utilisateurs ne le feront pas. Toute soumission avec ce champ rempli sera considérée comme spam.
Vous pouvez utiliser cette technique en ajoutant ce qui suit à votre formulaire:
Il est important d'utiliser un attribut de style pour masquer le champ. Le navigateur de l'utilisateur masquera le champ à l'aide de CSS, mais le spambot ignorera (probablement) complètement le CSS et continuera à remplir le champ. En nommant le champ “_je t'ai eu”, Formspree le reconnaîtra et ignorera toutes les soumissions faites avec ce formulaire rempli.
Pour plus de sécurité, vous pouvez envelopper votre courrier électronique en JavaScript. Cela réduira la probabilité que les robots spammeurs fouillent et choisissent votre courrier électronique à partir du code HTML. Regardez ce que j'ai fait ci-dessous:
Ici j'ai enlevé le action attribut de la élément, puis a utilisé un petit morceau de JavaScript pour le définir à la place. J'ai également décomposé la chaîne de courrier électronique en segments pour le rendre encore plus obscur pour les spambots. N'hésitez pas à copier ceci et à remplacer les segments de l'email par vos propres.
La dernière étape consiste à vérifier que votre formulaire fonctionne. Visitez la page contenant votre formulaire dans votre navigateur Web, remplissez-le et envoyez-le comme un utilisateur normal. Vous devriez recevoir un email de Formspree vous demandant de confirmer votre email.
Cliquez sur le lien de confirmation et vous serez tous ensemble!
Remarque: vous aurez besoin de passer par ce processus de confirmation chaque fois que vous ajoutez le formulaire à une nouvelle page.
L'API Formspree offre un moyen simple et très flexible d'ajouter des formulaires à une page Web. Parfait pour les sites statiques!
Accentsconagua