This is the library => emailjs.com/docs/examples/reactjs
I need to sign up, they have free service.
Then I go to the admin panel => dashboard.emailjs.com/admin
I connect an email service (gmail in my case). Must allow "Send email on your behalf" permission during connection.
Then I go and create an email template (I'm still in the admin panel). I see it on the left bar.
The parameters I want to add and use in my application will go in mustache style => {{message}}
Example template =>
Hello {{to_name}},
You got a new message from {{from_name}} // {{from_email}}:
{{message}}
Best wishes,
EmailJS team
In order to use this service on my app, I need the following variables : service id
, template id
and public key
.
I find the service id in email services section, connected to my mail address.
I find the template id in email templates section.
Lastly, I find the public key in my account section. I save all three somewhere safe. I generally use env variables for that.
Application
In my application, I install the emailJs library with => yarn add emailjs/browser
and
I create a form and get the following input from user: name
, message
,email
.
I won't show a snippet of the form. I used ReactJs but you can use whatever framework you want, or Vanilla JS.
To the form's submit function I add the following snippet =>
emailjs.send(
process.env.REACT_APP_SERVICE_ID,
process.env.REACT_APP_TEMPLATE_ID,
{
to_name: "Murat",
from_name: name,
message: message,
from_email: email,
},
process.env.REACT_APP_PUBLIC_KEY
);
As you can see, the parameters I take are the same one's I've defined in EmailJs's email template.
That's it. I can receive 200 emails for free.