Contact Us Successful Image #75
@@ -3609,11 +3609,11 @@ header.fix_style.white_header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.contact_body {
|
||||
/* .contact_body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
@@ -3622,24 +3622,25 @@ header.fix_style.white_header {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
} */
|
||||
|
||||
/* Animations */
|
||||
.animate.pop {
|
||||
.animate-image {
|
||||
animation-name: animate-pop;
|
||||
animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: linear;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes animate-pop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5, 0.5);
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
+107
-101
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user