283 lines
20 KiB
TypeScript
283 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import Image from "next/image";
|
|
|
|
export default function ContactForm() {
|
|
const socialIconSpacing = {
|
|
"--grid-column-gap": "52px",
|
|
"--grid-row-gap": "18px",
|
|
columnGap: "52px",
|
|
rowGap: "18px",
|
|
} as React.CSSProperties;
|
|
|
|
const [formData, setFormData] = useState({
|
|
fullName: "",
|
|
email: "",
|
|
subject: "",
|
|
message: "",
|
|
});
|
|
const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!formData.fullName || !formData.email || !formData.subject || !formData.message) {
|
|
setFormStatus("error");
|
|
return;
|
|
}
|
|
|
|
setFormStatus("submitting");
|
|
try {
|
|
console.log("Contact form submitted:", formData);
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
setFormStatus("success");
|
|
setFormData({ fullName: "", email: "", subject: "", message: "" });
|
|
} catch {
|
|
setFormStatus("error");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="elementor elementor-6585">
|
|
<div className="elementor-element elementor-element-3cd920c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="3cd920c" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-b29b8fc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="b29b8fc" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
|
<div className="e-con-inner">
|
|
<div className="elementor-element elementor-element-ef6fa6d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="ef6fa6d" data-element_type="container" data-e-type="container">
|
|
{/* Left Dark Panel */}
|
|
<div className="elementor-element elementor-element-9990148 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9990148" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-8899bdf elementor-absolute elementor-widget elementor-widget-image" data-id="8899bdf" data-element_type="widget" data-e-type="widget" data-settings="{"_position":"absolute"}" data-widget_type="image.default">
|
|
<div className="elementor-widget-container">
|
|
<Image width={965} height={474} src="/images/bg-map.png" className="attachment-full size-full wp-image-1148" alt="" />
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-a0e7516 elementor-widget elementor-widget-logico_heading" data-id="a0e7516" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-title">/ get in touch /</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-51cdf4f elementor-widget elementor-widget-logico_heading" data-id="51cdf4f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<h3 className="logico-title">
|
|
We are always ready to help you and answer your questions
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-670d1b2 elementor-widget elementor-widget-text-editor" data-id="670d1b2" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
|
<div className="elementor-widget-container">
|
|
<p>Connecting businesses with fast, secure, smart deliveries.</p>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-2631b42 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="2631b42" data-element_type="container" data-e-type="container">
|
|
<div className="e-con-inner">
|
|
<div className="elementor-element elementor-element-df89993 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="df89993" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-69b6892 elementor-widget elementor-widget-logico_heading" data-id="69b6892" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-title">Call Center</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-87be926 elementor-widget elementor-widget-text-editor" data-id="87be926" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
|
<div className="elementor-widget-container">
|
|
<p>Tel : +91 86886 97941</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-f5d8e63 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f5d8e63" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-774e540 elementor-widget elementor-widget-logico_heading" data-id="774e540" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-title">Our Location</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-9c1cf03 elementor-widget elementor-widget-text-editor" data-id="9c1cf03" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
|
<div className="elementor-widget-container">
|
|
<p>5th Floor, Vision Ultima, Street No.3, Jayabheri Enclave, Gachibowli, Hyderabad, Telangana 500032.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-645be8d e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="645be8d" data-element_type="container" data-e-type="container">
|
|
<div className="e-con-inner">
|
|
<div className="elementor-element elementor-element-a96d151 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="a96d151" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-37e647f elementor-widget elementor-widget-logico_heading" data-id="37e647f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-title">Email</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-ba67644 elementor-widget elementor-widget-text-editor" data-id="ba67644" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
|
<div className="elementor-widget-container">
|
|
<p>
|
|
<a href="mailto:care@doormile.com">care@doormile.com</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-9ba4b82 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ba4b82" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-e9a5d79 elementor-widget elementor-widget-logico_heading" data-id="e9a5d79" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-title">Social network</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-a6bccba elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="a6bccba" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="elementor-social-icons-wrapper elementor-grid" role="list" style={socialIconSpacing}>
|
|
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
|
<a className="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-3fbe893" href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
|
|
<span className="elementor-screen-only">Facebook</span>
|
|
<svg aria-hidden="true" className="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
|
<a className="elementor-icon elementor-social-icon elementor-social-icon-x-twitter elementor-repeater-item-64ac94e" href="https://x.com" target="_blank" rel="noopener noreferrer">
|
|
<span className="elementor-screen-only">X</span>
|
|
<svg aria-hidden="true" className="e-font-icon-svg e-fab-x-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
|
<a className="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in elementor-repeater-item-38e1bcc" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">
|
|
<span className="elementor-screen-only">LinkedIn</span>
|
|
<svg aria-hidden="true" className="e-font-icon-svg e-fab-linkedin-in" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
|
<a className="elementor-icon elementor-social-icon elementor-social-icon-youtube elementor-repeater-item-b0d5e1f" href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">
|
|
<span className="elementor-screen-only">YouTube</span>
|
|
<svg aria-hidden="true" className="e-font-icon-svg e-fab-youtube" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right White Form Card */}
|
|
<div className="elementor-element elementor-element-a5c503d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="a5c503d" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
|
<div className="elementor-element elementor-element-535776a elementor-widget elementor-widget-logico_heading" data-id="535776a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-title">Get in Touch</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-0e6fedf elementor-widget elementor-widget-logico_wpforms" data-id="0e6fedf" data-element_type="widget" data-e-type="widget" data-widget_type="logico_wpforms.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-wpforms-widget">
|
|
<div className="wpforms-container wpforms-render-modern" id="wpforms-369-contact">
|
|
<form id="wpforms-form-369-contact" className="wpforms-validate wpforms-form" onSubmit={handleSubmit}>
|
|
<div className="wpforms-field-container" style={{ marginTop: "30px" }}>
|
|
<div className="wpforms-field wpforms-field-wrapper logico-form-field" style={{ marginBottom: "20px" }}>
|
|
<div className="logico-label-wrapper" >
|
|
<div className="logico-label-placeholder" >
|
|
<div className="logico-label-placeholder-text">Full name</div>
|
|
</div>
|
|
<label className="wpforms-field-label" htmlFor="contact-field-name" >Full name</label>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="contact-field-name"
|
|
className="wpforms-field-large"
|
|
name="fullName"
|
|
value={formData.fullName}
|
|
onChange={handleInputChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="wpforms-field wpforms-field-wrapper logico-form-field" style={{ marginBottom: "20px" }}>
|
|
<div className="logico-label-wrapper">
|
|
<div className="logico-label-placeholder">
|
|
<div className="logico-label-placeholder-text">Email</div>
|
|
</div>
|
|
<label className="wpforms-field-label" htmlFor="contact-field-email">Email</label>
|
|
</div>
|
|
<input
|
|
type="email"
|
|
id="contact-field-email"
|
|
className="wpforms-field-large"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="wpforms-field wpforms-field-wrapper logico-form-field" style={{ marginBottom: "20px" }}>
|
|
<div className="logico-label-wrapper">
|
|
<div className="logico-label-placeholder">
|
|
<div className="logico-label-placeholder-text">Subject</div>
|
|
</div>
|
|
<label className="wpforms-field-label" htmlFor="contact-field-subject">Subject</label>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="contact-field-subject"
|
|
className="wpforms-field-large"
|
|
name="subject"
|
|
value={formData.subject}
|
|
onChange={handleInputChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="wpforms-field wpforms-field-wrapper logico-form-field" style={{ marginBottom: "20px" }}>
|
|
<div className="logico-label-wrapper">
|
|
<div className="logico-label-placeholder">
|
|
<div className="logico-label-placeholder-text">Message</div>
|
|
</div>
|
|
<label className="wpforms-field-label" htmlFor="contact-field-message">Message</label>
|
|
</div>
|
|
<textarea
|
|
id="contact-field-message"
|
|
className="wpforms-field-large"
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleInputChange}
|
|
required
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
<div className="wpforms-submit-container" style={{ marginTop: "30px" }}>
|
|
<button
|
|
type="submit"
|
|
id="wpforms-submit-369-contact"
|
|
className="logico-alter-button wpforms-submit"
|
|
disabled={formStatus === "submitting"}
|
|
>
|
|
{formStatus === "submitting" ? "Sending..." : "Send a message"}
|
|
</button>
|
|
{formStatus === "success" && (
|
|
<div style={{ color: "#4caf50", marginTop: "10px", fontSize: "14px" }}>
|
|
Message sent successfully!
|
|
</div>
|
|
)}
|
|
{formStatus === "error" && (
|
|
<div style={{ color: "#f44336", marginTop: "10px", fontSize: "14px" }}>
|
|
Something went wrong. Please try again.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|