The form that is usually on the 'Contact Us!' section of pages that lets you send them an email directly from filling out the form is a Contact form! Yes! On this blog we'll try to implement that in a React app!
For demonstration purposes, I will use
EmailJS. It's a free service, and you can also get that service from others like:
Installation
Install emailJs through an npm package. Docs are here if you need to dive deeper on the instructions.
Syntax to install:
npm install emailjs-com --save
OR
npm install emailjs-com
Then you would have to put this script inside the <head> tag in your index.html;
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script type="text/javascript">
(function(){
emailjs.init("YOUR_USER_ID");
})();
</script>
YOUR_USER_ID is provided to you when you sign up which was quick and easy.
You can find it in the Integration section which looks like this;
So on that screengrab, you can see how to begin on importing the module on you React components. In code, it should look like your typical imports but with your userID as an argument in a string. You will need your userID to one more thing so keep it handy.
Link your email account
On this phase you would have to go to the Email Services section of your account.
- Click 'Add New Service'.
Choose from their selection of email couriers. (Some service only allows 500 emails/day some are more. I chose my iCloud since its 1000/day)
A modal will pop up and you will need to provide your email account information;
(It was a little tricky with having my iCloud setup with two-factor auth but I clicked the link they provided and helped me figure out how to generate an app-specific password from my iCloud account)Once done, you should have received a test email and would confirm that the added service works!
Email Template
EmailJS provides a generic email template you can base your naming conventions from or you can also personalize it based on preference.
- Click Email Templates on the navigation bar.
A default email template will show and is pre-filled.
Naming conventions - the preset from the email template can be changed based on the values you wanted. For example we have a form that looks like this;
<form>
<label for="to_name">Name:</label>
<input type="text" id="to_name" name="to_name">
<label for="from_name">Name:</label>
<input type="text" id="from_name" name="from_name">
<label for="message">Message</label>
<input type="text" id="message" name="message">
</form>
So basically, the name attribute on your html form element corresponds to the variables on your email template.
- Don't forget to take a note of your template ID since we'll be using it in our code when submitting our form next.
But what if you have a React-Bootstrap component?
It is basically the same and would look something like this;
You would still have the name attribute passed in the Form.Control component and just add your onChange eventListener and your handleSubmit function on the form component.
A little breakdown:
<textarea
value={message} //{message} is a variable that corresponds to the data being grabbed when onChange is triggered.
id="message"
name="message" //what we need to match our variable on our email template on emailJS
rows="5"
cols="43"
placeholder="Message"
onChange={this.handleChange} //triggers our handleChange command that sets the state.
>
</textarea>
You can follow their React sample code here if you wanted to just use HTML/JSX.
Submitting the form
In submitting the form, we had to build a function that gets triggered when the Submit button gets clicked. You can definitely add validations to deter spam messages & get a complete object or keep it as is and send the form however they sent it.
In code it looks something like this:
sendEmail = (e) => {
e.preventDefault();
//YOU CAN PUT THIS INSIDE AN IF STATEMENT WHEN ADDING VALIDATIONS
emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
}
Sample code from EmailJS
Woohoo! You can definitely test it now and see if it sends you an email.
You will see how much you have left for the day using the counter at the top navigation bar on your emailJS account.
Let me know on the comments if you've tried it, if I have missed anything, or if I can be of help!
Until the next!
Top comments (1)
It's very detailed and high-quality step-by-step instructions!
I will correct only one small thing, the Default Email Address is taken from the used service, and if the service does not have the address, then the dashboard logic address will be used.