Geek Culture
Published in

Geek Culture

EmailJS: How to Connect React Form to EmailJS.

What is EmailJS?

How to use EmailJS?

Solving the Multiple Input Problem

email template
{{name}}
{{phone}}
{{email}}
{{shippingAddress}}
{{projectAddress}}
.
.
.
.
input name from react JSX
make sure to save the template

But only the inputs from the last page are being sent. :-(

Solving the Multiple Page Issue

Amila’s suggestion 1. send "form” instead of "e.target"

const sendEmail = (e) => {
e.preventDefault();

emailjs.sendForm(
'service_z3p8h0m',
'template_svmf3nm',
form, //e.target, <---- change here
'user_7Pf1rN0FgZQwrrMpFSw55'
)
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
e.target.reset();
}
<form class = "emailjs-success"> <div className = "field4"> <label> more info </label> <input type ="text" className = "form-input" name ="designText" placeholder="Text in the design" value ="hello world" /> </form>
{name: "john doe", phone: "", email: "", shippingAddress: "", projectAddress: "", …}

Solution 1. REST API : "send” function instead of “sendEmail” function.

reference to REST API EMAILJS in jQuery
reference to POST FETCH
solution! multiple step form to emailJS

Reason why multiple step to emailJS wasn’t working

//conditional logic(count === current_step? (show fields): null)

Solution 2. hide other steps using css, visibility

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store