Comment créer un formulaire de contact avec Formspree

Vous pouvez utiliser de nombreuses méthodes sur votre site Web pour permettre aux utilisateurs de vous envoyer des e-mails en toute sécurité. Un exemple est l'utilisation de l'attribut mailto sur un formulaire de contact. L'attribut mailto ouvre une application de messagerie installée permettant à l'utilisateur de saisir un message.

Pour une meilleure expérience, pensez à intégrer un outil comme Formspree. Formspree agit en tant qu'intermédiaire, enregistrant les données du formulaire et les envoyant à votre adresse e-mail spécifiée.

Qu'est-ce que Formspree et comment ça marche ?

Formspree est un service d'e-mailing que vous pouvez intégrer à un formulaire de contact personnalisé. Lorsque vous vous connectez à Formspree, vous pouvez spécifier votre adresse e-mail cible pour un formulaire. Formspree gère les soumissions de formulaires en votre nom. Il vous permet

Formspree générera un point de terminaison, que vous devrez ajouter à votre formulaire personnalisé. Lorsqu'un utilisateur appuie sur le bouton "Soumettre", le formulaire utilise le point de terminaison pour appeler le service API de Formspree. Cela générera un e-mail avec le contenu du formulaire de contact.

Formspree enverra cet e-mail à l'adresse e-mail cible que vous avez indiquée dans votre compte Formspree. Vous recevrez alors l'e-mail dans votre boîte de réception. Votre compte Formspree a également un endroit où vous pouvez voir vos soumissions de formulaire de contact.

Pour enregistrer votre adresse e-mail auprès de Formspree, connectez-vous et entrez l'adresse e-mail cible de votre formulaire.

1. Se connecter à Formspree. Si vous n'avez pas de compte, vous devrez saisir votre adresse e-mail et un mot de passe. Inscrivez-vous en utilisant l'adresse e-mail à laquelle vous souhaitez que le formulaire de contact envoie les soumissions. Vous devrez peut-être également vérifier cette adresse e-mail pendant le processus d'inscription.
2. Une fois le processus d'inscription terminé, la page "Formulaires" s'ouvrira. Cliquer sur Nouvelle forme.
3. Entrez n'importe quel nom pour votre formulaire de contact et laissez les paramètres de projet par défaut. Saisissez l'adresse e-mail cible dans le champ "Envoyer des e-mails à". C'est ici que Formspree enverra vos soumissions de formulaire de contact. Une fois terminé, cliquez sur Créer un formulaire.
4. Formspree vous fournira un point de terminaison et des exemples d'utilisation. Vous devrez ajouter ce point de terminaison à votre formulaire de contact personnalisé sur votre site Web (plus à ce sujet plus tard).
5. Par défaut, Formspree stocke votre formulaire dans un projet appelé "Mon premier projet". Si vous voulez changer le nom de celui-ci, retournez à la page "Formulaires". Cliquer sur Réglages à côté du nom du projet.
6. Ici, vous pouvez changer le nom de votre projet en autre chose. Par exemple, vous pouvez le renommer pour qu'il porte le même nom que votre site Web. Vous pouvez également ajouter l'URL de votre site Web.

Vous devrez ajouter le point de terminaison fourni par Formspree dans le formulaire de contact dans le code de votre site Web.

1. Ajoutez le point de terminaison dans l'attribut "action" du formulaire. Cela entraînera le navigateur d'un utilisateur à envoyer le formulaire à cette URL lorsqu'il le soumettra.

   <action du formulaire="https://formspree.io/f/xjvlaqpe" méthode="PUBLIER">
   <!-- Votre formulaire ici -->
   <type de bouton="nous faire parvenir" classe="bouton"> Soumettre </button>
   </form>

2. Ajoutez des entrées à votre formulaire. Vous pouvez utiliser cet exemple de formulaire qui utilise le framework CSS Bootstrap:

   <action du formulaire="https://formspree.io/f/mbjqjrdl" classe="rembourrage supplémentaire" méthode="PUBLIER">
   <classe div="groupe de formulaires">
   <étiquette pour="répondre à"> Votre adresse email </label>
   <type d'entrée="e-mail" classe="contrôle de formulaire" identifiant="répondre à" nom="_répondre à" ngModèle="Réponse" aria-descriptionpar="e-mailAide" espace réservé="[email protected]">
   <petit identifiant="e-mailAide" classe="formulaire-texte text-muted"> Votre e-mail ne sera partagé avec personne d'autre. </small>
   </div>
   <classe div="groupe de formulaires">
   <étiquette pour="message"> Votre message </label>
   <nom de la zone de texte="message" style="hauteur: 200px" classe="contrôle de formulaire" identifiant="message" espace réservé="Salut! je'je vous contacte parce que..."></textarea>
   </div>
   <type de bouton="nous faire parvenir" classe="bouton"> Soumettre </button>
   </form>
   

Pour tester si Formspree fonctionne, envoyez-vous un message via le formulaire de contact, appuyez sur Soumettre, et vérifiez la boîte de réception de votre e-mail.

1. Exécutez votre site Web et ouvrez la page contenant le formulaire de contact. Entrez un message dans le formulaire de contact et appuyez sur Soumettre.
2. Vous recevrez le message du formulaire de contact dans votre boîte de réception.
3. Si vous revenez à Formspree, cliquez sur le Soumissions languette. Ici, vous pourrez également voir les messages soumis à partir de votre formulaire de contact.

Formspree est l'un des nombreux services que vous pouvez utiliser pour intégrer un formulaire de contact personnalisé sur votre site. Il vous permet de commencer rapidement à accepter les commentaires des utilisateurs sans avoir à vous soucier des détails du backend.

Si vous débutez dans la création de formulaires avec HTML et JavaScript, vous pouvez également en savoir plus sur la validation de formulaire côté client. Cela permet de s'assurer que vos formulaires de contact peuvent valider toutes les entrées des utilisateurs.

A propos de l'auteur

Sharlene Von Drehnen (9 articles publiés)

Sharlene est rédactrice technique chez MUO et travaille également à plein temps dans le développement de logiciels. Elle est titulaire d'un baccalauréat en informatique et possède une expérience antérieure en assurance qualité et en tutorat universitaire. Sharlene adore jouer et jouer du piano.

Plus de Sharlene Von Drehnen