I used contact form 7 for multiple project but using with ReactJS for the first time I thought i need to write blog on this.
My requirement:
- I will be able to collect Email from customer who enter info on my portfolio website.
- And I need to store this in some where in my WordPress dashboard
If you want integrate contact form 7 then I assuming you will know how to install WordPress and contact form 7 plugin installation.
Follow below steps to configure rest API using CF7
Step 1:
Create a contact form with fields you want
- On Mail tab change you reciever email address
Step 2: Test your CF7 API
How to get API router to post data
https://testwebsite.com/wp-json/contact-form-7/v1/contact-forms/<post_id>/feedbackHow to get this <post_id>
On your contact form post id is your post_id. So with this Id the final route will look like this.
https://testwebsite.com/wp-json/contact-form-7/v1/contact-forms/1841/feedback
You can test API using Postman
Step 3: Creating React Component Form for submitting a Contact Form 7 form using Axios:
import React, { useState } from 'react';
import axios from 'axios';
const ContactForm = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [response, setResponse] = useState(null);
const [error, setError] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
// Create form data
const formData = new FormData();
formData.append('your-name', name);
formData.append('your-email', email);
formData.append('your-message', message);
try {
const res = await axios.post(
'https://chethanspoojary.com/wp-json/contact-form-7/v1/contact-forms/1841/feedback',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
);
setResponse(res.data);
setError(null);
} catch (error) {
setError('Error submitting form. Please try again later.');
setResponse(null);
}
};
return (
<div>
<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>
<button type="submit">Submit</button>
</form>
{response && <p>Form submitted successfully!</p>}
{error && <p>{error}</p>}
</div>
);
};
export default ContactForm;
Install Axios: If you haven’t already, install Axios in your project using npm or yarn:
npm install axios
# or
yarn add axiosImport and Use the Component: Import the ContactForm component and use it in your application:
import React from 'react';
import ContactForm from './ContactForm'; // Adjust the path as necessary
const App = () => {
return (
<div>
<h1>Contact Us</h1>
<ContactForm />
</div>
);
};
export default App;
A complete contact form JSX Code
import React, { useContext, useState } from 'react';
import axios from 'axios';
import { StoreContext } from '../../context/StoreContext';
import styles from './Footer.module.css'; // Import your CSS module
const ContactForm = () => {
const { root_url } = useContext(StoreContext);
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [response, setResponse] = useState(null);
const [error, setError] = useState(null);
const hideMessage = () => {
// Hide error message after 2.5 seconds
setTimeout(() => {
setError(null);
setResponse(null);
}, 2500);
};
const handleSubmit = async (event) => {
event.preventDefault();
// Basic client-side validation
if (!name.trim() || !email.trim() || !message.trim()) {
setError('Please fill out all fields');
hideMessage();
return;
}
// Create form data
const formData = new FormData();
formData.append('senderName', name);
formData.append('senderEmail', email);
formData.append('senderMessage', message);
formData.append('_wpcf7_unit_tag', Math.random);
try {
const res = await axios.post('https://chethanspoojary.com/wp-json/contact-form-7/v1/contact-forms/1841/feedback', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
setResponse(res.data.message);
setError(null);
hideMessage();
// Clear form fields after successful submission
setName('');
setEmail('');
setMessage('');
} catch (err) {
setError(err.response ? err.response.data.message : 'An error occurred');
setResponse(null);
hideMessage();
}
};
return (
<div>
<form className={styles.contact__form} onSubmit={handleSubmit}>
<div className={styles.contact__control}>
<label htmlFor="name" className="visually-hidden">Name</label>
<input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} name="name" placeholder="Name" required />
</div>
<div className={styles.contact__control}>
<label htmlFor="email" className="visually-hidden">Email</label>
<input type="email" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" required />
</div>
<div className={styles.contact__control}>
<label htmlFor="message" className="visually-hidden">Message</label>
<textarea name="message" id="message" cols="30" rows="3" placeholder="Message" value={message} onChange={(e) => setMessage(e.target.value)} required></textarea>
</div>
<div className={`${styles.contact__control} ${styles.align_right}`}>
<button type="submit">Send Message</button>
</div>
</form>
{response && <p className={styles.response}>{response}</p>}
{error && <p className={styles.error}>{error}</p>}
</div>
);
};
export default ContactForm;