Créer un formulaire de contact avec EmailJS et Vue

Apprenez à envoyer et recevoir des e-mails à l’aide de Vue et EmailJS, avec Kendo UI pour Vue pour créer facilement un formulaire de contact.

Le formulaire de contact est ce que nous utilisons pour envoyer et recevoir des messages d’utilisateurs sur un site Web. CourrielJS est l’une des bonnes bibliothèques que nous pouvons utiliser pour valider notre formulaire de contact pour envoyer des messages en utilisant uniquement les technologies côté client. Nous pouvons intégrer d’autres services de messagerie de notre choix et utiliser la fonction de réponse automatique.

Cet article nous apprendra comment créer un formulaire de contact en utilisant EmailJS et Vue et intégrer EmailJS avec d’autres services de messagerie (Gmail). Pour créer l’interface utilisateur de notre formulaire de contact, nous utiliserons Interface utilisateur Progress Kendo pour Vue.

Prérequis

Cet article suppose que vous avez une connaissance de base de la création d’un projet Vue et de la façon de travailler avec des formulaires dans Vue, car cet article ne l’expliquera pas. Cependant, comme nous le couvrirons dans cet article, vous n’avez pas besoin d’expérience préalable avec EmailJS.

Table des matières

1. Introduction à EmailJS
2. Configurer un compte EmailJS
3. Installer EmailJS dans le projet Vue
4. Créer un formulaire de contact
5. Recevoir des messages via le formulaire de contact
6. Conclusion

Introduction à EmailJS

EmailJS est une bibliothèque que nous utilisons pour envoyer du courrier en utilisant uniquement des technologies côté client. L’implémentation d’Email JS dans votre projet est très simple, car elle ne nécessite aucun serveur. EmailJS vous donne accès à certains de vos services de messagerie préférés dans vos projets, tels que Gmail, Yahoo, iCloud et autres.

Configurer un compte EmailJS

Pour que nous puissions utiliser EmailJS, nous devrons créer un compte. Pour ce faire, nous visiterons le site Internet et créer un compte.

Après avoir créé un compte, nous serons redirigés vers notre tableau de bord d’administration, où nous pourrons créer notre modèle d’e-mail ou choisir nos services de messagerie préférés. Ensuite, nous sélectionnerons notre service de messagerie préféré. Dans cet article, nous choisirons Gmail pour notre service.

Après avoir choisi Gmail, nous recevrons un message nous demandant de lier le compte que nous voulons utiliser pour recevoir des messages.

Une fois la connexion au compte terminée, nous cliquerons ensuite sur « Créer un service ».

Créer un modèle d’e-mail

Notre modèle d’e-mail est la prochaine étape après que nous ayons fini de créer notre service de messagerie. Une caractéristique distinctive d’EmailJS est que nous pouvons ajuster le modèle d’e-mail en fonction de nos préférences. Voyons comment procéder dans l’exemple suivant.

Tout d’abord, nous allons nous diriger vers notre tableau de bord et sélectionner « Modèles d’e-mail » dans le menu de gauche.

Un exemple de notre modèle d’e-mail est illustré dans l’image ci-dessus. Nous pouvons rapidement modifier et personnaliser notre modèle d’e-mail en fonction de nos besoins.

Après avoir personnalisé nos modèles d’e-mails, l’étape suivante consiste à enregistrer les modifications et à cliquer sur le bouton « Tester » pour voir le résultat final.

Voici le résultat final de l’envoi d’un e-mail à l’aide du tableau de bord EmailJS.

Installer EmailJS dans le projet Vue

Pour installer la librairie EmailJS dans notre projet Vue, nous allons utiliser la commande ci-dessous :

npm install emailjs-com --save

Après avoir installé notre bibliothèque, nous importerons la bibliothèque dans notre fichier de composant à l’intérieur de la balise de script :

import emailjs from 'emailjs-com' 

Après avoir installé notre bibliothèque, nous allons créer notre formulaire de contact à l’aide de Kendo UI pour Vue, une vaste bibliothèque de composants d’interface utilisateur. Pour ce faire, nous allons installer notre former emballer:

npm install --save @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-licensing

Après avoir installé les packages, nous importerons les entrées de formulaire dont nous avons besoin dans notre balise de script dans le composant de formulaire :

import { Input } from '@progress/kendo-vue-inputs';

Voici à quoi ressemblerait le code après l’avoir importé :

<script>
import { Input, TextArea } from "@progress/kendo-vue-inputs";
import { Button } from "@progress/kendo-vue-buttons";
export default { components: {
    KInput: Input,
    KButton: Button,
    KTtextarea: TextArea,
  },
};
</script>

À l’avenir, la prochaine étape consiste à créer notre formulaire de contact.

   <template>
  <div>
    <card class="card-section" style="width: 450px; margin: auto">
      <h1>Contact Form</h1>
      <form ref="values" @submit.prevent="sendEmail">
        <div class="form-group">
          <KInput
            class="form-input"
            :style="{ width: '290px' }"
            name="name"
            v-model="user_name"
            placeholder="Name"
          ></KInput>
        </div>
        <div class="form-group">
          <KInput
            class="form-input"
            :style="{ width: '290px' }"
            name="email"
            v-model="user_email"
            placeholder="email address"
          ></KInput>
        </div>
        <div class="form-group">
          <kTextarea
            class="form-input"
            :style="{ width: '290px' }"
            name="message"
            v-model="user_message"
            placeholder="Message"
            :rows="4"
          />
        </div>
        <div class="example-col">
          <kButton
            :style="{ width: '100px' }"
            id="submit-btn"
            >Submit form</kButton
          >
        </div>
      </form>
    </card>
  </div>
</template>

Note: Kendo UI pour Vue est une bibliothèque de composants d’interface utilisateur commerciale, et dans le cadre de cela, vous devrez fournir une clé de licence lorsque vous utilisez les composants dans vos projets Vue. Vous pouvez obtenir une clé de licence via un essai gratuit ou en possédant une licence commerciale. Pour plus d’informations, vous pouvez vous diriger vers Kendo UI pour la page des licences Vue.

Dans l’exemple précédent, nous avons vu comment envoyer un e-mail à quelqu’un via le tableau de bord EmailJS. Dans cet exemple, nous allons voir comment recevoir un message via notre formulaire de contact.

Pour ce faire, nous allons créer des données qui renvoient trois entrées (nom, email et message) et une méthode avec une fonction appelée « sendEmail ». Cette fonction contiendra nos données, TemplateID, ServiceID et Public Key.

<script>
import emailjs from 'emailjs-com';
import {
  Card,
} from "@progress/kendo-vue-layout";
// ES2015 module syntax
import { Input, TextArea } from "@progress/kendo-vue-inputs";
import "@progress/kendo-theme-default";
import { Button } from "@progress/kendo-vue-buttons";
export default {
  name: "CardComponent",
  components: {
    card: Card,
    KInput: Input,
    "k-textarea": TextArea,
    kbutton: Button,
  },
  data() {
    return {
      user_name: "",
      user_email: "",
      user_message: "",
    };
  },
  methods: {
    sendEmail() {
      emailjs
        .sendForm(
          "Service ID",
          "Template ID",
          "Public Key"
        )
        .then(
          (result) => {
            console.log(
              "You have successfully submitted your message",
              result.text
            );
          },
          (error) => {
            console.log(
              "This form failed to submit, please kindly check your internet connection",
              error.text
            );
          }
        );
    },
  },
};
</script>

Remplacez l’espace pour la clé de service, l’identifiant du modèle et la clé publique par celui que nous avons créé :

.sendForm(
          "Service ID",
          "Template ID",
          "Public Key"
        )

Et nous sommes prêts !

Vous pouvez consulter le code complet sur GitHub.

Conclusion

L’une des bibliothèques JavaScript faciles à utiliser pour envoyer et recevoir des e-mails s’appelle EmailJS. Vous pouvez également personnaliser certaines fonctionnalités, telles que les options de réponse automatique. Nous avons appris à envoyer et recevoir des e-mails en utilisant Vue et EmailJS dans cet article, et nous avons également utilisé Interface utilisateur de Kendo pour Vue pour créer notre formulaire de contact en toute simplicité.