Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to receive emails with EmailJs (React) custom email?

On the site, the user fills out a form in which the name, phone and email are located. How to use EmailJs to send an email from the address specified by the user in the form?
In Docs there are no info about it.

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

You can use the EmailJS send method to capture the user’s name, phone number, and email address in a form and send an email using this information:

import * as EmailJS from 'emailjs-com';
import * as React from 'react';

// Initialize EmailJS
EmailJS.init('YOUR-USER-ID');

const App = () => {
  // State to hold the user's name, phone number, and email address
  const [senderName, setSenderName] = React.useState('');
  const [senderPhone, setSenderPhone] = React.useState('');
  const [senderEmail, setSenderEmail] = React.useState('');

  // Handle the form submit event
  const handleSubmit = (event) => {
    event.preventDefault();

    // Send the email using the EmailJS send method
    EmailJS.send('YOUR-SERVICE-ID', 'YOUR-TEMPLATE-ID', {
      senderName,
      senderPhone,
      senderEmail,
      recipientEmail: 'recipient@example.com',
      emailBody: 'Hello, this is an email from EmailJS',
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="sender-name">Sender's name:</label>
      <input
        id="sender-name"
        type="text"
        value={senderName}
        onChange={(event) => setSenderName(event.target.value)}
      />
      <label htmlFor="sender-phone">Sender's phone number:</label>
      <input
        id="sender-phone"
        type="text"
        value={senderPhone}
        onChange={(event) => setSenderPhone(event.target.value)}
      />
      <label htmlFor="sender-email">Sender's email address:</label>
      <input
        id="sender-email"
        type="email"
        value={senderEmail}
        onChange={(event) => setSenderEmail(event.target.value)}
      />
      <button type="submit">Send email</button>
    </form>
  );
};

The send method from the EmailJS library to send an email from the address specified by the user in the senderEmail state variable. The user’s name and phone number are also included in the email by passing them as additional parameters to the send method.

You will need to replace YOUR-USER-ID, YOUR-SERVICE-ID, and YOUR-TEMPLATE-ID with the appropriate values for your EmailJS account. You can find these values in the EmailJS dashboard, under the "Services" and "Templates" sections.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading