CODEWITHSUNDEEP
reactjs
Adele
Adele

Reputation: 321

How to send form data to email in React JS?

I have to send form datas to an email address. How can I do? I did some research and I understand that you have to use a library to do this. correct? What do you suggest?

Upvotes: 3

Views: 14547

Answers (4)

andre1melo
andre1melo

Reputation: 1

Just to mention that I also achieved this with the very simple https://formsubmit.co solution.

<form action="https://formsubmit.co/[email protected]" method="POST">
     <input type="text" name="name" required>
     <input type="email" name="email" required>
     <button type="submit">Send</button>
</form>

Upvotes: 0

Bert
Bert

Reputation: 838

I recommend using EmailJS library. I made an account with the free tier (200 free emails/month) added my gmail account, setup a test template and followed the docs https://www.emailjs.com/docs/examples/reactjs/ and was able to get something working in less than 30 mins.

Upvotes: 1

SUMIT KUMAR SINGH
SUMIT KUMAR SINGH

Reputation: 45

If you are looking for implementation for Reactjs then use like this :

// install @emailjs/browser
import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

export const ContactUs = () => {
const form = useRef();

const sendEmail = (e) => {
e.preventDefault();
// service_id, templte_id and public key will get from Emailjs website when you create account and add template service and email service 
emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 
'YOUR_PUBLIC_KEY')
  .then((result) => {
      console.log(result.text);
  }, (error) => {
      console.log(error.text);
  });
};

return (
<form ref={form} onSubmit={sendEmail}>
  <label>Name</label>
  <input type="text" name="user_name" />
  <label>Email</label>
  <input type="email" name="user_email" />
  <label>Message</label>
  <textarea name="message" />
  <input type="submit" value="Send" />
</form>
);
};

Upvotes: 0

Simeon Gavalyugov
Simeon Gavalyugov

Reputation: 331

I think this one might be worth looking into - https://www.emailjs.com/docs/sdk/send-form/

Upvotes: 5

Related Questions