MyFit/www-myfit
4
0
Fork 0
Code Issues Pull Requests Releases Activity

Added contact us successful image

Browse Source
This commit was merged in pull request #75.
This commit is contained in:
victorAnumudu
2023-02-03 08:18:48 +01:00
parent ddb5cab8b2
commit 350da5a215
3 changed files with 116 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/Contact/Main.js
+107 -101
View File
@@ -6,7 +6,7 @@ import Bredcrumb from "../Bredcrumb/Main";
import BGImg from "../../assets/images/bread_crumb_bg.png";
import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
import SuccessImg from "../../assets/images/experts_01.png"
import SuccessImg from "../../assets/images/confirmed-letter.jpg"
import SiteService from "../../vendors/service/siteService";
@@ -51,10 +51,11 @@ const FormInput = (props) => {
const Main = ({ brdcum }) => {
let response = document.getElementById("contact_loader");
let contact_body = document.getElementById("contact_body");
let errText = document.getElementById("errText");
let navigate = useNavigate();
let [showSuccessfulImage, setShowSuccessfulImage] = useState(false) // Handles when sucess image is shown
// Form Validation
const [values, setValues] = useState({
name: "",
@@ -100,10 +101,8 @@ const Main = ({ brdcum }) => {
}else {
response.innerHTML = `<p> SEND MESSAGE </p>`;
contact_body.innerHTML = `<div class='contact_body animate pop'>
<div><img src=${SuccessImg} /></div>
<p>We have received your message and will follow up promptly.</p>
</div>`;
setShowSuccessfulImage(true) // sets show success image to true
setTimeout(() => {
navigate("/");
}, 10000);
@@ -177,107 +176,114 @@ const Main = ({ brdcum }) => {
id="contact">
<div className="container">
<div className="contact_inner">
<div
className="contact_form"
id="contact_body">
<div className="section_title">
<h2>
<span>Leave a</span> message
</h2>
<p>Fill up form below, our team will get back soon</p>
</div>
{/* Contact Form */}
<form onSubmit={handleSubmit}>
<FormInput
name="name"
type="text"
placeholder="Name"
errorMessage="Please enter your first and last name. (e.g: Mark John)"
required={true}
maxLenght={35}
value={values.name}
onChange={onChange}
pattern="^\w+( \w+)$"
/>
<FormInput
name="email"
type="email"
placeholder="Email"
errorMessage="It should be a valid email address!"
required={true}
maxLenght={35}
value={values.email}
onChange={onChange}
/>
<div className="form-group">
<select
className="form-control"
name="country"
value={values.country}
onChange={onChange}
required>
<option value={""}>
Country
</option>
{countries.length > 0 &&
countries.map((country, index) => (
<option
key={index}
value={country[0]}>
{country[1]}
</option>
))}
</select>
<div className="contact_form" id="contact_body">
{showSuccessfulImage ? (
<>
<div><img className="img-fluid animate-image" src={SuccessImg} alt='success image' /></div>
<p>We have received your message and will follow up promptly.</p>
</>
) : (
<>
<div className="section_title">
<h2>
<span>Leave a</span> message
</h2>
<p>Fill up form below, our team will get back soon</p>
</div>
<FormInput
name="phone"
type="number"
placeholder="Phone"
errorMessage="It should be a valid phone number!"
maxLenght={15}
value={values.phone}
onChange={onChange}
pattern="^[0-9]{15}$"
/>
<div className="form-group">
<textarea
name="message"
className="form-control"
placeholder="Your message"
value={values.message}
{/* Contact Form */}
<form onSubmit={handleSubmit}>
<FormInput
name="name"
type="text"
placeholder="Name"
errorMessage="Please enter your first and last name. (e.g: Mark John)"
required={true}
maxLenght={35}
value={values.name}
onChange={onChange}
maxLength={300}
pattern="^[A-Za-z0-9]{5, 300}$"
pattern="^\w+( \w+)$"
/>
</div>
<div className="form-group term_check">
<input
type="checkbox"
id="term"
<FormInput
name="email"
type="email"
placeholder="Email"
errorMessage="It should be a valid email address!"
required={true}
maxLenght={35}
value={values.email}
onChange={onChange}
required
/>
<label htmlFor="term">
I agree to the terms and conditions
</label>
</div>
<div className="form-group mb-0">
<button
type="submit"
className="btn puprple_btn contact_btn"
aria-label="submit form"
id="contact_loader">
<p> SEND MESSAGE </p>
</button>
</div>
</form>
{/* Error Tag */}
<p id="errText"></p>
<div className="form-group">
<select
className="form-control"
name="country"
value={values.country}
onChange={onChange}
required>
<option value={""}>
Country
</option>
{countries.length > 0 &&
countries.map((country, index) => (
<option
key={index}
value={country[0]}>
{country[1]}
</option>
))}
</select>
</div>
<FormInput
name="phone"
type="number"
placeholder="Phone"
errorMessage="It should be a valid phone number!"
maxLenght={15}
value={values.phone}
onChange={onChange}
pattern="^[0-9]{15}$"
/>
<div className="form-group">
<textarea
name="message"
className="form-control"
placeholder="Your message"
value={values.message}
onChange={onChange}
maxLength={300}
pattern="^[A-Za-z0-9]{5, 300}$"
/>
</div>
<div className="form-group term_check">
<input
type="checkbox"
id="term"
onChange={onChange}
required
/>
<label htmlFor="term">
I agree to the terms and conditions
</label>
</div>
<div className="form-group mb-0">
<button
type="submit"
className="btn puprple_btn contact_btn"
aria-label="submit form"
id="contact_loader">
<p> SEND MESSAGE </p>
</button>
</div>
</form>
{/* Error Tag */}
<p id="errText"></p>
</>
)}
</div>
{/* Contact Info */}