logo

Kontaktní formulář pomocí EmailJS!

Formulář, který je obvykle na 'Kontaktujte nás!' část stránek, která vám umožní poslat jim e-mail přímo z vyplnění formuláře, je Kontaktní formulář! Ano! Na tomto blogu se to pokusíme implementovat do aplikace React!

Pro demonstrační účely použiji
EmailJS. Je to bezplatná služba a můžete ji také získat od ostatních, jako jsou:

  • Formspree
  • Formspark
  • Netlify
  • GetForm

Instalace

Nainstalujte emailJs prostřednictvím balíčku npm. Dokumenty jsou zde, pokud se potřebujete ponořit hlouběji do pokynů.

Syntaxe k instalaci:

npm install emailjs-com --save
OR
npm install emailjs-com

Pak byste museli tento skript vložit do <head> tag ve vašem index.html; 

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script type="text/javascript">
   (function(){
      emailjs.init("YOUR_USER_ID");
   })();
</script>

YOUR_USER_ID je vám poskytnuto, když se zaregistrujete, což bylo rychlé a snadné.

Najdete jej v sekci Integrace, která vypadá takto;

Takže na tomto screengrabu můžete vidět, jak začít s importem modulu do vašich komponent React. V kódu by to mělo vypadat jako vaše typické importy, ale s vaším ID uživatele jako argumentem v řetězci. Své uživatelské ID budete potřebovat ještě na jednu věc, takže je mějte po ruce.

Propojte svůj e-mailový účet

V této fázi byste museli přejít do sekce E-mailové služby svého účtu.

  • Klikněte na 'Přidat novou službu'.

  • Vyberte si z jejich nabídky e-mailových kurýrů. (Některé služby umožňují pouze 500 e-mailů denně, některé více. Vybral jsem si svůj iCloud, protože je to 1000 denně )

  • Zobrazí se modální okno a budete muset zadat informace o svém e-mailovém účtu;

    (Bylo to trochu složité s nastavením iCloudu s dvoufaktorovým ověřením, ale kliknul jsem na odkaz, který mi poskytli, a pomohl mi zjistit, jak vygenerovat heslo pro konkrétní aplikaci z mého účtu iCloud )

  • Po dokončení byste měli obdržet zkušební e-mail a potvrdit, že přidaná služba funguje!

Šablona e-mailu

EmailJS poskytuje obecnou e-mailovou šablonu, ze které můžete založit své konvence pojmenování, nebo si ji můžete také přizpůsobit podle svých preferencí.

  • Klikněte na možnost Šablony e-mailu na navigačním panelu.

  • Zobrazí se výchozí šablona e-mailu, která je předvyplněná.

  • Konvence pojmenování – předvolbu ze šablony e-mailu lze změnit na základě vámi požadovaných hodnot. Máme například formulář, který vypadá takto; 

<form>
  <label for="to_name">Name:</label>
  <input type="text" id="to_name" name="to_name">

  <label for="from_name">Name:</label>
  <input type="text" id="from_name" name="from_name">

  <label for="message">Message</label>
  <input type="text" id="message" name="message">
</form>

V zásadě tedy atribut name ve vašem prvku formuláře HTML odpovídá proměnným ve vaší e-mailové šabloně.

  • Nezapomeňte si poznamenat ID šablony, protože je použijeme v našem kódu při příštím odesílání formuláře.

Co když ale máte komponentu React-Bootstrap?
Je to v podstatě totéž a vypadalo by to nějak takto;

Atribut name byste stále měli předán v Form.Control a do komponenty formuláře přidejte svůj onChange eventListener a funkci handleSubmit.

Malý rozpis:

<textarea
   value={message} //{message} is a variable that corresponds to the data being grabbed when onChange is triggered.
   id="message"
   name="message" //what we need to match our variable on our email template on emailJS
   rows="5"
   cols="43"
   placeholder="Message"
   onChange={this.handleChange} //triggers our handleChange command that sets the state.
>
</textarea>

Pokud chcete použít pouze HTML/JSX, můžete se řídit jejich ukázkovým kódem React zde.

Odeslání formuláře

Při odesílání formuláře jsme museli vytvořit funkci, která se spustí po kliknutí na tlačítko Odeslat. Určitě můžete přidat ověření, abyste odrazili od spamových zpráv a získali kompletní objekt, nebo jej ponechat tak, jak je, a odeslat formulář, jakkoli jej odeslali.

V kódu to vypadá asi takto:

sendEmail = (e) => {
    e.preventDefault();

//YOU CAN PUT THIS INSIDE AN IF STATEMENT WHEN ADDING VALIDATIONS
    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  }

Ukázkový kód z EmailJS

Woohoo! Určitě to teď můžete otestovat a zjistit, jestli vám pošle e-mail.

Pomocí počítadla v horní navigační liště na vašem emailJS účtu uvidíte, kolik vám zbývá za den.

Dejte mi vědět do komentářů, jestli jste to zkusili, jestli mi něco uniklo nebo jestli vám mohu pomoci!

Do příštího!