I am making a form using react.js and want to send form field data to email. i try this (action="mailto:[email protected]") but nothing happen.

i tried action mailto but nothing happens. i want to see all fields data on my mail

CodePudding user response：

One approach is to append all the form data attributes manually and open the email app like this

window.open("mailto:[email protected]?subject=Example Subject&body=all attributes here")

You can use back ticks instead of double quotes to easily add attributes like

`name: ${data.name}`

CodePudding user response：

simple way to use emailjs:

1. first sign-up

2. then add-service (keep the service id)

3. create email templates(keep the template id)

4. go to the account and keep the public key

5. go to your code:

6. create a component for email form, here is an example:

import { useRef } from "react";
import emailjs from "@emailjs/browser";

const MailForm = () => {
  const form = useRef();
  const sendData = (e) => {
    e.preventDefault();

    emailjs
      .sendForm(
        "service_id",
        "template_id",
        form.current,
        "public key "
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

  return (
    <form ref={form} onSubmit={(e) => sendData(e)}>
      FirstName:
      <input type="text" name="FirstName" />
      Email:
      <input type="text" name="Email" />
      <input type="submit" name="submit" value="Submit" />
    </form>
  );
};
export default MailForm;

7. inside sendDate function in emailjs insert your service id, template id , and public key

Note: more appropriate to send the form first to your backend server and then send an email from the server