Menu
I am working on a website that I used create-react-app to create. I need to make a contact page where the information entered will be sent to a specified email.
After doing some research I discovered this is going to require me to setup some back-end. I am very unfamiliar with back-end programming. I know about nodejs and am somewhat capable of setting up a basic server using that, but I have no clue how to connect it to the react site, or if I even need a node server (just mentioned it because I found Nodemailer).
What's a good back-end setup I should use? All I need to use it for is sending an input field's value to a specific email.
I'm sorry this is such a noob/vague question, I am just looking for some direction on what to start researching and learning. I don't expect a detailed answer on the purpose and precise operations of a back-end server, just some helpful guidance or somewhere to start learning!
Any help is really appreciated!
437
sendForm method in your React app. Make sure you set the 'To Email' field on the right correctly because this is the email that will receive the contents from the form when someone sends a message. Click on save. We are done with the setup.
Send Emails in a React App Using Mailto It's the simplest way to send an email from a frontend app. Put the email address that you want to receive the email after mailto: That's all it takes to open the user's default email client on their machine and populate the “recipient” field with the intended email.
EmailJS is a JavaScript library that helps send emails using only client-side technologies. The cool thing about EmailJS is that no servers are required; all you have to do is connect it to one of the supported email services, create an email template, and use EmailJS to trigger an email.
I can think of two options to connect to the back-end to send an email.
API: You create an endpoint on your backend (i.e. https://yourdomain.com/api/sendemail). Using expressjs, or some other server side library, you create that endpoint to receive a POST request. (https://expressjs.com/en/starter/basic-routing.html) You then use the front-end (fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) to call the endpoint with the data needed in the email and in turn the endpoint calls your send email function with Nodemailer or whatever.
Form Submit: The other option is similar to the first in that it sends a POST request with the form data to the back-end. This requires that the server send back a new page and your browser will then reload. Where as the first option can be done without a page reload.
Not an expert on this but those are the two options I know of. Good luck!
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
