Using a React form to send information directly to your email
When designing my personal website, it occurred to me that it would be really cool if I people could contact me directly from my page, without having to go through the trouble of copying my email address, opening their own email server, pasting my address, and THEN getting whatever they wanted to say off of their chest.
So what obstacles does this present? For one, I didn’t want to create a backend just for email purposes, and I also don’t want to any personal information saved in my code, like my own email server API! The way that I found to get around this, is to use an intermediary service called EmailJS. According to the EmailJS docs, “EmailJS helps sending emails using client side technologies only. No server is required — just connect EmailJS to one of the supported email services, create an email template, and use our Javascript library to trigger an email.”
Creating an account with EmailJS is free, and allows 200 emails to be sent a month - which I imagine to be WAY more than any contact I will be getting from my personal website. You connect your account by hitting the “Connect account” button, selecting the email provider of your choosing, and then pressing the “Add Service” button to complete the process. The selected email service will then be marked as the default. You can connect either a personal email service if you want to connect to your own email address, or you can add a transactional email service from something like Mailgun or Mandril to serve as the email server.
Once you’ve connected the email server, the next step is to create a template for what the email sent will look like. To do this, open the Email Templates page from the dashboard, click on “Create new template”, and fill out the template properties. The really cool part here, is that you can create dynamic properties that, paired with the magic of React state, can grab information from the form displayed on your React web page (what the user has entered) and populate your email template!!
Okay, Okay, getting ahead of myself. Let’s back up a little bit, and switch around to the React side of this whole ordeal. In my form component, we need to do what we just talked about — write the code for the content form, including state and event handler to set the state with whatever someone fills it out with.
export default class extends React.Component {
constructor(props) {
super(props);this.state = {
name: "",
email: "",
feedback: "",
};
}handleInputChange(event) {
event.preventDefault();
const target = event.target;
const name = target.name;
const value = target.value;this.setState({ [name]: value });
}
Then I write the render function to display the form that I want my users to see, making sure that my event handlers are set to my different input text fields like so:
render() {
return (
<div>
<form
className="ui form"
id={this.props.id}
name={this.props.name}
method={this.props.method}
action={this.props.action}
>
<textarea
id="name"
name="name"
onChange={this.handleInputChange.bind(this)}
placeholder="your name"
required
value={this.state.name}
style={{ width: "100%" }}
rows={1}
/>
<br />
<textarea
id="email"
name="email"
onChange={this.handleInputChange.bind(this)}
placeholder="your email address"
required
value={this.state.email}
error={this.state.errors.email}
style={{ width: "100%" }}
rows={1}
/>
<br />
<textarea
id="feedback"
name="feedback"
onChange={this.handleInputChange.bind(this)}
placeholder="what would you like to chat about?"
required
value={this.state.feedback}
style={{ width: "100%", height: "250px" }}
/>
<br />
<input
type="button"
value="Send"
className="ui button"
style={{
fontFamily: "Amatic SC",
fontSize: "20px",
color: "blue"
}}
onClick={this.sendMessage.bind(this)}
/>
</form>
</div>
);
};Okay, great. Now for connecting my form to my EmailJS. As I used create-react-app to start my project file tree, I already have a public/index.html file. In this file, I added script for EmailJS directly into the document head, like so:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2.4.0/dist/email.min.js">
<script type="text/javascript">
(function(){
emailjs.init("%REACT_APP_EMAILJS_USERID%");
})();
</script>You also can instal EmailJS as an npm package, using:
$ npm install emailjs-com --saveFinally, in my form component, I added a sendMessage() function. This function uses the EmailJS send() function (described in the documentation here) that includes the parameters that I am going to set in my email template — from_name, to_name, and feedback.
sendMessage(event) {
event.preventDefault();if (!this.validateMail()) {
return;
}const templateParams = {
from_name: this.state.name + " (" + this.state.email + ")",
to_name: {wherever you are sending the email},
feedback: this.state.feedback
};emailjs
.send("gmail", "portfoliositecontact", templateParams, {id given from your EmailJS template})
.then(
function(response) {
toast.success("Your message has successfully sent!", {
position: toast.POSITION.BOTTOM_CENTER
});
console.log("SUCCESS!", response.status, response.text);
},
function(err) {
toast.error("Your message was not able to be sent");
}
);this.setState({
name: "",
email: "",
feedback: ""
});
}
Finally, now that I have my form and state set up on the React side, I can go back to the EmailJS email template that I was talking about before, and dynamically set the properties to accept whatever has been stored in the state of my React form. Properties wrapped in double curly braces ({{ }}) will fill in dynamically.
And bam! Your React app can now send information entered in a contact form directly to your personal email account!
Happy coding!
