Creating a contact form with Google Captcha in React JS is a great way to enhance the security and functionality of your web application. In this article, we’ll walk you through the steps to build a simple yet effective contact form with Google Captcha integration.
Why Use Google Captcha in Your Contact Form?
Google Captcha helps protect your website from spam and abuse by ensuring that the form submissions are made by real users. This additional layer of security can significantly reduce the amount of spam your website receives, making it a valuable tool for any contact form.
Setting Up Your React Project
First, let’s set up a new React project. If you haven’t already installed create-react-app, you can do so by running the following command:
npx create-react-app contact-form cd contact-form npm start
This will create a new React project and start the development server.
Installing Required Packages
To integrate Google Captcha, we’ll need to install the react-google-recaptcha package. Run the following command to add it to your project:
npm install react-google-recaptcha
Creating the Contact Form Component
Next, let’s create a new component for our contact form. Create a file named ContactForm.js in the src directory and add the following code:
import React, { useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
const ContactForm = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [captchaValue, setCaptchaValue] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
if (!captchaValue) {
alert('Please complete the captcha');
return;
}
// Handle form submission logic
console.log('Form submitted:', { name, email, message });
};
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Name</label>
<input
type="text"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="message">Message</label>
<textarea
id="message"
value={message}
onChange={(e) => setMessage(e.target.value)}
required
></textarea>
</div>
<div>
<ReCAPTCHA
sitekey="YOUR_RECAPTCHA_SITE_KEY"
onChange={(value) => setCaptchaValue(value)}
/>
</div>
<button type="submit">Submit</button>
</form>
);
};
export default ContactForm;
Replace YOUR_RECAPTCHA_SITE_KEY with your actual Google Captcha site key. You can obtain this key by registering your site on the Google reCAPTCHA admin console.
Integrating the Contact Form into Your App
Now, let’s integrate the ContactForm component into our main app. Open src/App.js and update it as follows:
import React from 'react';
import './App.css';
import ContactForm from './ContactForm';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Contact Us</h1>
<ContactForm />
</header>
</div>
);
}
export default App;
Adding Styling to the Contact Form
To make our contact form look better, let’s add some basic CSS. Open src/App.css and add the following styles:
.App {
text-align: center;
}
form {
max-width: 400px;
margin: 0 auto;
}
div {
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 5px;
}
input, textarea {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
Conclusion
You’ve now created a contact form in React JS with Google Captcha integration. This form not only collects user data but also ensures that submissions are made by real users, enhancing the security of your website.
For more details on using Google Captcha with React, you can refer to the official react-google-recaptcha documentation.
Other
Happy coding!
Writing by Kanha Jatthap
Development Query