0

Hi guys I would like to create a form that costumers fill out with their contact info and then send it to my email, I have this code so far: 

import React, { Component } from 'react';

import kontakthornavlnka 
from'../../assets/svg/kontakt-horna.svg';
import kontaktdolnavlnka 
from'../../assets/svg/kontakt-dolna.svg';

class Kontaktformular extends Component {
  state = {
    menoPriezvisko:'',
    email:'',
    telephone:'',
    message:'',
  }

  change = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state)
  };

  render() {

    {}


return (

<div className="kontaktformular" >


  <img src={kontakthornavlnka} alt="kontakthornavlnka" />

<center>

  <h3>Zaujal Vás niektorý produkt ?<br />Kontaktujte nás.</h3>

</center>
<form>
  <div className="tabulka">

    <div className="tabulkaleft">

      <div><input name="menoPriezvisko" value={this.state.menoPriezvisko} onChange={e => this.change(e)} className="form-control" placeholder="Meno a priezvysko"/></div>
      <div><input name="email" value={this.state.email} onChange={e => this.change(e)} className="form-control required email" placeholder="E-mail"/></div>
      <div><input name="telephone" value={this.state.telephone} onChange={e => this.change(e)} className="form-control required mobile"  placeholder="Telefón"/></div>

    </div>

    <div className="tabulkaright">

      <div><textarea name="message" value={this.state.message} onChange={e => this.change(e)} className="form-control textarea required">Dobrý deň chcel by som sa spýtať </textarea></div>

    </div>

  </div>



  <input onClick={e => this.onSubmit(e)} id="button"  type="submit" name="send_contact" data-loading-text="Please wait..." value="Odoslať" />


  <img id="img" src={kontaktdolnavlnka} alt="kontaktdolnavlnka" />

  <p>Vytvoril: Sebastián Danáč</p>



</div>



    );
  }
}

export default Kontaktformular;

The React console is showing the new values and it is recognized but I do not know how to send the values to my email, I am guessing that I will have to write something under onSummit

Rashik
  • 1,014
  • 2
  • 16
  • 36
  • Small comment to your code - please, use only pure english in your Class name, variables name, etc. – Klimenko Kirill Aug 09 '18 at 05:06
  • I posted an answer on sending emails with only a frontend by accesssing an api on emailJS for a similar question https://stackoverflow.com/a/61582486/6331353 – Sam May 03 '20 at 22:35

2 Answers2

1

You have to send request to your web server, where you will send email. Sending email directly from browser - impossible, what you can do - is to use next trick:

window.open('mailto:your@email.here.com');

Also, you can use some tricks to put there subject, body, etc. But it will not work stable on all OS, and probably even differently in different browsers.
P.S. Source of answear

Klimenko Kirill
  • 634
  • 2
  • 8
  • 22
  • I tried it but on my phone it sad: "This website has been blocked from automatically composing an email" and there is an allow button but when i allow it and i dont use the defaulte ios mail it sends me to appstore to download the default mail client, what to do to open the email client that is the user currently using ? –  Aug 10 '18 at 17:06
0

I would suggest sending a POST request - fetch will work - from your client component to your server. Then use a module such as Nodemailer within your server to send the information to your email address.

https://nodemailer.com/

You will need to write out some basic HTML for the body of the email within your server but this should be simple to do. Just save the HTML in a string and store it in a variable; then throw this variable into your Nodemailer instance. Have a look at the documentation in the link provided.

pa87901
  • 11
  • 2