DEV Community

loading...
Cover image for Implement React Bootstrap Forms with EmailJS in React App.

Implement React Bootstrap Forms with EmailJS in React App.

Rajat Chauhan
.....
・7 min read

This article will glide you through the process of building a React-Bootstrap form component with a working mailing system using EmailJS.

PREREQUISITES:

npm or yarn
Any Editor
EmailJS Account

INSTALLATION:

We will be using create-react-app for this particular project. Open Terminal / cmd in the directory you want your project to reside on and enter the command:

npx create-react-app <app-name>
Enter fullscreen mode Exit fullscreen mode

In this example our app name is 'form'.

Enter into the directory:

cd form
Enter fullscreen mode Exit fullscreen mode

In the folder you can see we have a framework ready and working, this tree directory consists of a folder named as 'node_modules' which essentially contains all the components provided by create-react-app.

We are going to need the react-bootstrap module and we can install it using the command:

npm install react-bootstrap bootstrap
Enter fullscreen mode Exit fullscreen mode

Now we have the modules ready you can test run the app by using the command:

npm start
Enter fullscreen mode Exit fullscreen mode

After running this command, the default react app will be hosted at your localhost.

It would look like this:

React App

Getting Started

In the src folder you can see a file named App.js. This is where your application components resides in.

In this src folder create a new file named Form.js and add import the following components into it:

import React from 'react';
import { Form, Col, Button } from 'react-bootstrap';
Enter fullscreen mode Exit fullscreen mode

Now, lets create a Form compnent with our required fields, In this example the fields will be:

1. Name
2. Email
3. Mobile No.
4. Query
Enter fullscreen mode Exit fullscreen mode

In the src/Form.js add this:

export const FormPage = (props) => {
    return (

        <Form>
            <Form.Group as={Col} controlId="formGridName">
                <Form.Label>Name*</Form.Label>
                <Form.Control name="name" type="name" placeholder="Name" />
            </Form.Group>

            <Form.Group as={Col} controlId="formGridEmail">
                <Form.Label>Email*</Form.Label>
                <Form.Control name="email" type="email" placeholder="Enter email"
                />
            </Form.Group>
            <Form.Group as={Col} controlId="formGridMobile">
                <Form.Label>Mobile no.*</Form.Label>
                <Form.Control name="mobile" placeholder="" />
            </Form.Group>
            <Form.Group as={Col} id="formGridQuery">
                <Form.Label>Query*</Form.Label>
                <Form.Control name="query" as="textarea" rows={3} />
            </Form.Group>

            <Button variant="primary" type="submit">
                Submit
                </Button>
        </Form >

    )
}
Enter fullscreen mode Exit fullscreen mode

Now let us break down this code:

<Form.Group as={Col} controlId="formGridName">
    <Form.Label>Name*</Form.Label>
    <Form.Control name="name" type="name" placeholder="Name" />
</Form.Group>
Enter fullscreen mode Exit fullscreen mode

First, We create a Form using the <Form> tag we imported from react-bootstrap. We utilise the <Form.Group> tag for our different entries and <Form.Label> to Label those entries.

The <Form.Control> is used for the inline box which recives the input.

The as={Col} is used to form grid system which is provided by react-bootstrap, All <Form.Group> will be in a column.

We can also adjust the amount of rows an inline box must have by adding rows = {n} in <Form.Control> tag where 'n' is the number of rows.

<Form.Control name="query" as="textarea" rows={3} />
Enter fullscreen mode Exit fullscreen mode

We then add a Button to submit all the data:

<Button variant="primary" type="submit">
    Submit
</Button>
Enter fullscreen mode Exit fullscreen mode

Now, that our FormPage is ready we only have to import this component to our App.js.

In src/App.js replace it all with this:

import React from 'react'
import { FormPage } from './Form';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <>
      <React.Fragment>
        <FormPage></FormPage>
      </React.Fragment>
    </>
  )
}
export default App;
Enter fullscreen mode Exit fullscreen mode

We simply import the component : import { FormPage } from './Form';

And here we also import the styling for the bootstrap form:
import 'bootstrap/dist/css/bootstrap.min.css';

When you run npm start the result will look like this:
Form

Congratulations, We are 50% completed with the process. Now the last thing left for us is to make an EmailJS account and connect it to our form!!!

Setting up EmailJS Account

Create EmailJS account here

After signing up, your dashboard will look like this:
Dashboard

Now you can add a service and connect it to your email.

Service

After you have connected your email, your service is ready!

Servie done

Take note of the serviceID we will need that later.

Go to Integration -> Browser to get script needed to use our service into our app.

Browser

Copy the provided script and paste it in the <head> tag of the public/index.html file.

Next step is to make a template, Go to Email Templates and click on create new template.
Template

You can change the template values here represented as {{ value }}, these will essentially match the data values in our code as well.

This is the template been used in this example:
Template

Template Done

Take note of the template Id, we will be needing that.

Implementing the Service

Back to our src/Form.js, The only thing left for us is to store the data provided through our form. For this will be declaring a const that stores these values for us.

There are several methods to do this but one of the simpler one is by using Object.freeze.

Hence we introduce initialFormData as a storing constant:

const initialFormData = Object.freeze({
    username: "",
    email: "",
    mobile: "",
    query: ""
  });
Enter fullscreen mode Exit fullscreen mode

As you can observe all these values matches our Form components.

Add this under FormPage component:

const [formData, updateFormData] = React.useState(initialFormData);
Enter fullscreen mode Exit fullscreen mode

This will hook the data without in need of any classes.

Now, Inside our FormPage component we add handleChange constant to grab values from the form groups.

const handleChange = (e) => {
        updateFormData({
          ...formData,

          [e.target.name]: e.target.value.trim()
        });
      };
Enter fullscreen mode Exit fullscreen mode

The above code will actively take input values as well as trim trailing white spaces.

Now we change our form groups to utilize this:


<Form>
    <Form.Group as={Col} controlId="formGridName">
        <Form.Label>Name*</Form.Label>
        <Form.Control onChange= {handleChange} name="name" type="name" placeholder="Name" />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridEmail">
        <Form.Label>Email*</Form.Label>
        <Form.Control onChange= {handleChange} name="email" type="email" placeholder="Enter email"
        />
    </Form.Group>
    <Form.Group as={Col} controlId="formGridMobile">
        <Form.Label>Mobile no.*</Form.Label>
        <Form.Control onChange= {handleChange} name="mobile" placeholder="" />
    </Form.Group>
    <Form.Group as={Col} id="formGridQuery">
        <Form.Label>Query*</Form.Label>
        <Form.Control onChange= {handleChange} name="query" as="textarea" rows={3} />
    </Form.Group>

    <Button variant="primary" type="submit">
        Submit
        </Button>
</Form >

Enter fullscreen mode Exit fullscreen mode

In the above snippet we simply added onChange = {handleChange} to each Form groups's Control attribute.

Now we need to submit these stored values, we can simply implement this by introducing another const inside FormPage:

const handleSubmit = (e) => {
    e.preventDefault()
    alert(`Thank you for your message. Your query has been forwarded.`);
    const templateId = 'template_4oug267';
    const serviceID = "service_kqkanza";
    sendFeedback(serviceID, templateId, { from_name: formData.name, mobile: formData.mobile, message_html: formData.query, email: formData.email })

    console.log(formData);
    };
Enter fullscreen mode Exit fullscreen mode

We will be adding another variable sendFeedback that we will send all the data with the serviceID and templateID of our EmailJS service. The above snippet does just that and also makes a prompt alerting the user that their email is being sent.
e.preventDefault() overrides the default submit method of bootstrap.

We will now make the variable to process sendFeedback(serviceID, templateId, { from_name: formData.name, mobile: formData.mobile, message_html: formData.query, email: formData.email }):

    const sendFeedback = (serviceID, templateId, variables) => {
        window.emailjs.send(
            serviceID, templateId,
            variables
        ).then(res => {
            console.log('Email successfully sent!')
        })
            .catch(err => console.error('There has been an Error.', err))
    }
Enter fullscreen mode Exit fullscreen mode

Ener the serviceID and templateID provided by your service which you noted earlier on.

We bind this function to the Submit button:

<Button onClick={handleSubmit} variant="primary" type="submit">
    Submit
</Button>
Enter fullscreen mode Exit fullscreen mode

Your final src/Form.js will look like this:

import React from 'react';
import { Form, Col, Button } from 'react-bootstrap';

const initialFormData = Object.freeze({
    username: "",
    email: "",
    mobile: "",
    query: ""
  });


export const FormPage = (props) => {
    const [formData, updateFormData] = React.useState(initialFormData);

    const sendFeedback = (serviceID, templateId, variables) => {
        window.emailjs.send(
            serviceID, templateId,
            variables
        ).then(res => {
            console.log('Email successfully sent!')
        })
            .catch(err => console.error('There has been an Error.', err))
    }

    const handleChange = (e) => {
        updateFormData({
          ...formData,

          [e.target.name]: e.target.value.trim()
        });
      };

    const handleSubmit = (e) => {
        e.preventDefault()
        alert(`Thank you for your message. Your query has been forwarded.`);
        const templateId = 'template_4oug267';
        const serviceID = "service_kqkanza";
        sendFeedback(serviceID, templateId, { from_name: formData.name, mobile: formData.mobile, message_html: formData.query, email: formData.email })

        console.log(formData);
      };

    return (

        <Form>
            <Form.Group as={Col} controlId="formGridName">
                <Form.Label>Name*</Form.Label>
                <Form.Control onChange= {handleChange} name="name" type="name" placeholder="Name" />
            </Form.Group>

            <Form.Group as={Col} controlId="formGridEmail">
                <Form.Label>Email*</Form.Label>
                <Form.Control onChange= {handleChange} name="email" type="email" placeholder="Enter email"
                />
            </Form.Group>
            <Form.Group as={Col} controlId="formGridMobile">
                <Form.Label>Mobile no.*</Form.Label>
                <Form.Control onChange= {handleChange} name="mobile" placeholder="" />
            </Form.Group>
            <Form.Group as={Col} id="formGridQuery">
                <Form.Label>Query*</Form.Label>
                <Form.Control onChange= {handleChange} name="query" as="textarea" rows={3} />
            </Form.Group>

            <Button onClick={handleSubmit} variant="primary" type="submit">
                Submit
                </Button>
        </Form >

    )
}

Enter fullscreen mode Exit fullscreen mode

Voila!!

Your App is done. Here is snapshots of how it works:
entries
sent
recieved

You can find the github repo here

There you have it, Thanks for reading.

Discussion (2)

Collapse
user_194e29d5f6 profile image

Helpful Sir🙌🏻

Collapse
anshbansall profile image
Ansh

bery helpful thank you so much