Geek Culture
Published in

Geek Culture

EmailJS: How I Connected the Multiple Step React Form to EmailJS.

What is EmailJS?

EmailJS is an incredible tool that send a submitted contact form from client-side javascript code to an email inbox without a backend server.

How to use EmailJS?

It’s easy to start. Create an account, connect the account to your email, then copy the react REST API code into your JS code. It’s free for 200 email submits a month. Here are some resources that I followed along step by step.

Travis Prol (a coder I met through Artists Who Code)’s blog
https://travisprol.medium.com/sending-emails-via-form-submit-in-react-8d87e55eca3a

https://medium.com/kirsten-werner/using-a-react-form-to-send-information-directly-to-your-email-2c9666f0d63a

These resources cover simple one page form. It should have worked for my form too but it just didn’t work. I created the EmailJS account, connected to my email, pasted the react code. So after multiple trials and errors, I found out some more details that these sources didn’t cover in detail. I broke down in more details so no one has to waste their precious time.

Solving the Multiple Input Problem

How to connect the `name of the input` to the email template? This might be obvious to some people but it wasn’t to me. When you create a template, there’re default texts. You have to change the text into your own `input name`.

email template

Your email template body needs to have name of the input in two curly braces such as below.

{{name}}
{{phone}}
{{email}}
{{shippingAddress}}
{{projectAddress}}
.
.
.
.

If you don’t know where to find the `name of the input`, please take a look at the image below. These input names are from your React JSX code.

input name from react JSX

and make sure to click save button because it doesn’t automatically save. Without saving the template and testing it, it would only use the old code. So Save it until EmailJS updates their client side.

make sure to save the template

congrats! Now all the input should be sending to your email inbox!

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

My contact form had multiple inputs and pages so the regular react example,sendEmail function from Email JS, that these tutorial videos and blogs suggested, didn’t work.

Solving the Multiple Page Issue

How did I solve this? First I emailed the EmailJS using their contact form. They got back to me the next day asking me to clarify the question then they didn’t get back to me after that. I assume their priority was paid customer.

So I asked my question on stack over flow. As many of you know the community of Stack Overflow is incredible. Only a few hours later, Amila Senadheera gave me some suggestions to consider.

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();
}

so I change the e.target to form but it still didn’t work. It’s because e.target is in HTML DOM and form was in JSON data structure.

e.target

<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>

form

{name: "john doe", phone: "", email: "", shippingAddress: "", projectAddress: "", …}

so I commented on the stack overflow mentioning that it didn’t work but thanks to Amila, it started to make sense to me what was the problem.

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

Amila mentioned about using send function but I didn’t fully understand. so I asked my coding coach, Jack Hilscher and walked him through my problem. I showed him EmailJS website. https://www.emailjs.com/docs/rest-api/send/ and he guided me and boost my confidence that using this document will solve my problem. The document was in jQuery form but Jack said this is correct and told me that it could be solve in 5 minutes. (I was so excited at this point)

reference to REST API EMAILJS in jQuery

So I changed this jQuery code to vanila JS for react file. I pulled up the mozilla JSON POST fetch document to refer.

reference to POST FETCH

Then after a multiple trial and errors, I finally found the working code. During this trial, I sent about 100 emails…

solution! multiple step form to emailJS

Reason why multiple step to emailJS wasn’t working

Amila from stack overflow pointed it correctly. The logic I used to have multiple step is React HOOK, for the form and step page count. There are count and setCount to update the count as page step. So if the next button is clicked, add 1 to the count and if the prev button is clicked, subtract 1 from the count. If the count is 1, show the step 1 page, and if the count is 2 show the second page. Otherwise null, which erases all the previous inputs from the DOM when submitted.

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

Solution 2. hide other steps using css, visibility

Here we have two working solutions.

Congrats!!!Finally it really works!

--

--

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