How to easily add a Netlify Contact Form in React App with email notifications

0

Hello guys, I hope you already know how to create a build version of React project. Have you ever tried to host on a free hosting server on Netlify?

If you don't know how to create a build version in React project click on Deploy React App on Netlify, you will also know how to deploy react project using the build version.

I would like to inform you that Netlify also provides a free form service. Now you don't need to connect the backend API with React apps that are hosted on Netlify.

So first of all, we will write some of the code for index.html, which will be in the public folder as shown in the below.

index.html Location react-project/public/index.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#5f19dd" />
    <meta
      name="description"
      content="website created by Jeamshiv"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>How to form in Netlify with React</title>


  </head>
  <body>
    <form name="PortfolioContactForm" netlify action="/thank-you" hidden>
      <input type="text" name="name" />
      <input type="email" name="email" />
      <input type="tel" name="phone" />
      <textarea name="message"></textarea>
    </form>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->


    

  </body>
</html>

In the above code, I have just added a simple form snippet with the attribute netlify, so Netlify can understand that this form should be controlled by the Netlify Form service. We have also added a hidden attribute because we don't want to show these unstyled html snippets to the user. One more thing: the form name will be visible on Netlify's dashboard in the form session.

Creating form component in React for Netlify.

Form component file

import React from 'react'


export default function ContactForm() {

    return (
        <>
            <section className="contact container py-5 my-5" id="contact">
                <div className="text-center mb-3">
                    <h5>Get in Touch</h5>
                    <h1 className="style-title">Contact Me</h1>
                </div>

                <div className="row">
                    <div className="col-lg-8 my-3 mb-lg-5 wow bounceInUp">

                        <div className="wrapper p-4">

                            <p><b>SAY SOMETHING</b></p>

                            <form method="POST" name='PortfolioContactForm' className='PortfolioContactForm' action='/thank-you'>

                                <input type="hidden" name="form-name" value="PortfolioContactForm" />

                                <input className="form-control mt-3" name="name" label="Your Name" required />

                                <input className="form-control mt-3" name="email" label="Your Email" type="email" required />

                                <input className="form-control mt-3" name="phone" label="Your Phone" type="number" required />

                                <input className="form-control mt-3" label="Message" name="message" rows={4} required />

                                <div className="mt-5">
                                    <button className="primary-button">Send Message</button>
                                </div>

                            </form>

                        </div>

                    </div>
                </div>

            </section>
        </>
    )
}

I have also added the name attribute name as in the index.html file. When the user submits this form, the user will be redirected to the thank-you.html page as I have mentioned in the form attribute action. You can also create a confimation page as you want.

When you make a build version of your project after this process, I would like to make sure that you will get to see your form name in the form section of the Netlify dashboard. For that, you need to click on your site in the Netlify dashboard, and you will see the form link at the top of the navigation bar.

When you click on the form name on the Netlify dashboard, you will get to see all the submissions that have been named by the users.

How to get email notification when someone submit in Netlify Form.

As I told you in that title, we will also send an email notification for the Netlify contact form. To get an email notification when the user submits the form. You need to go to the Settings link on the Netlify dashboard. Where you will see a form link, as mentioned in the below-attached picture.

Now, click on "Add notification." There will be email, slack, and webhook notification options. Currently, we will choose the email option here. You can also choose Slack too, but for the Webhook option, you need to create an API which will handle the webhook's response.

After that, a pop-up will appear asking for your email address. After that, a pop-up will get an email notification when the user submits the form. 

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)
Our website uses cookies to enhance your experience. Learn More
Accept !