Innovative Contact Form<\/title>\n\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Poppins\", sans-serif;\n }\n\n body {\n background: #F1F7FF;\n color: #10213F;\n }\n\n .contact-section {\n min-height: 100vh;\n padding: 80px 7%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .contact-wrapper {\n width: 100%;\n max-width: 1150px;\n display: grid;\n grid-template-columns: 0.9fr 1.1fr;\n gap: 35px;\n }\n\n \/* LEFT SIDE *\/\n\n .contact-info {\n padding: 45px;\n border-radius: 30px;\n background: linear-gradient(145deg, #102A56, #164B91);\n color: white;\n position: relative;\n overflow: hidden;\n }\n\n .contact-info::before {\n content: \"\";\n position: absolute;\n width: 220px;\n height: 220px;\n border-radius: 50%;\n background: rgba(255,255,255,0.08);\n top: -80px;\n right: -70px;\n }\n\n .contact-info::after {\n content: \"\";\n position: absolute;\n width: 150px;\n height: 150px;\n border-radius: 50%;\n background: rgba(255,255,255,0.06);\n bottom: -60px;\n left: -50px;\n }\n\n .small-title {\n color: #7CC7FF;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 2px;\n margin-bottom: 15px;\n }\n\n .contact-info h1 {\n font-size: 42px;\n line-height: 1.15;\n margin-bottom: 20px;\n }\n\n .contact-info h1 span {\n color: #7CC7FF;\n }\n\n .contact-info > p {\n color: #DCEBFA;\n line-height: 1.8;\n margin-bottom: 35px;\n }\n\n .contact-item {\n display: flex;\n align-items: center;\n gap: 15px;\n margin: 22px 0;\n }\n\n .contact-icon {\n width: 48px;\n height: 48px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255,255,255,0.12);\n font-size: 20px;\n border: 1px solid rgba(255,255,255,0.15);\n }\n\n .contact-item h4 {\n font-size: 14px;\n margin-bottom: 4px;\n color: #7CC7FF;\n }\n\n .contact-item p {\n font-size: 14px;\n color: #EAF3FF;\n }\n\n\n \/* FORM *\/\n\n .contact-form {\n background: #FFFFFF;\n padding: 45px;\n border-radius: 30px;\n box-shadow: 0 20px 60px rgba(36, 85, 130, 0.12);\n border: 1px solid #DCEAF7;\n }\n\n .form-heading {\n margin-bottom: 30px;\n }\n\n .form-heading h2 {\n font-size: 32px;\n color: #10213F;\n margin-bottom: 8px;\n }\n\n .form-heading p {\n color: #718096;\n font-size: 14px;\n }\n\n .input-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 18px;\n }\n\n .input-box {\n position: relative;\n margin-bottom: 22px;\n }\n\n .input-box label {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: #334E68;\n margin-bottom: 8px;\n }\n\n .input-box input,\n .input-box select,\n .input-box textarea {\n width: 100%;\n border: 1.5px solid #D8E6F2;\n background: #F8FBFF;\n border-radius: 14px;\n padding: 15px 17px;\n outline: none;\n color: #10213F;\n font-size: 14px;\n transition: 0.3s ease;\n }\n\n .input-box textarea {\n height: 135px;\n resize: none;\n }\n\n .input-box input:focus,\n .input-box select:focus,\n .input-box textarea:focus {\n border-color: #3182CE;\n background: #FFFFFF;\n box-shadow: 0 0 0 4px rgba(49,130,206,0.10);\n }\n\n .submit-btn {\n width: 100%;\n border: none;\n padding: 16px;\n border-radius: 14px;\n background: linear-gradient(90deg, #1769AA, #3182CE);\n color: white;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n transition: 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .submit-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 25px rgba(49,130,206,0.30);\n }\n\n .submit-btn span {\n margin-left: 8px;\n transition: 0.3s;\n }\n\n .submit-btn:hover span {\n margin-left: 15px;\n }\n\n .form-note {\n text-align: center;\n margin-top: 15px;\n font-size: 12px;\n color: #8A9AAF;\n }\n\n\n \/* RESPONSIVE *\/\n\n @media (max-width: 850px) {\n\n .contact-wrapper {\n grid-template-columns: 1fr;\n }\n\n .contact-info h1 {\n font-size: 34px;\n }\n }\n\n @media (max-width: 550px) {\n\n .contact-section {\n padding: 50px 20px;\n }\n\n .contact-info,\n .contact-form {\n padding: 30px 22px;\n border-radius: 22px;\n }\n\n .input-row {\n grid-template-columns: 1fr;\n gap: 0;\n }\n\n .contact-info h1 {\n font-size: 30px;\n }\n\n .form-heading h2 {\n font-size: 26px;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n\n<section class=\"contact-section\">\n\n <div class=\"contact-wrapper\">\n\n \n\n <div class=\"contact-info\">\n\n <div class=\"small-title\">GET IN TOUCH<\/div>\n\n <h1>\n Let's Create\n <span>Something Great.<\/span>\n <\/h1>\n\n <p>\n Have a project in mind? Tell us about your business,\n your goals, and how we can help you grow online.\n <\/p>\n\n <div class=\"contact-item\">\n <div class=\"contact-icon\">\u2709<\/div>\n <div>\n <h4>Email<\/h4>\n <p>vsaini35778@gmail.com<\/p>\n <\/div>\n <\/div>\n\n <div class=\"contact-item\">\n <div class=\"contact-icon\">\u260e<\/div>\n <div>\n <h4>Phone<\/h4>\n <p>+91 9053884527<\/p>\n <\/div>\n <\/div>\n\n <div class=\"contact-item\">\n <div class=\"contact-icon\">\u2316<\/div>\n <div>\n <h4>Location<\/h4>\n <p>Karnal, Haryana, India<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n\n\n \n\n <div class=\"contact-form\">\n\n <div class=\"form-heading\">\n <h2>Send Us a Message<\/h2>\n <p>\n Fill in the details below and our team will get back to you.\n <\/p>\n <\/div>\n\n <form id=\"contactForm\">\n\n <div class=\"input-row\">\n\n <div class=\"input-box\">\n <label>Full Name *<\/label>\n <input\n type=\"text\"\n placeholder=\"Enter your name\"\n required>\n <\/div>\n\n <div class=\"input-box\">\n <label>Email Address *<\/label>\n <input\n type=\"email\"\n placeholder=\"Enter your email\"\n required>\n <\/div>\n\n <\/div>\n\n\n <div class=\"input-row\">\n\n <div class=\"input-box\">\n <label>Phone Number<\/label>\n <input\n type=\"tel\"\n placeholder=\"+91 XXXXX XXXXX\">\n <\/div>\n\n <div class=\"input-box\">\n <label>Company Name<\/label>\n <input\n type=\"text\"\n placeholder=\"Your company name\">\n <\/div>\n\n <\/div>\n\n\n <div class=\"input-box\">\n\n <label>What Service Do You Need? *<\/label>\n\n <select required>\n\n <option value=\"\">Select a service<\/option>\n\n <option>Digital Marketing<\/option>\n <option>Social Media Marketing<\/option>\n <option>SEO<\/option>\n <option>Google Ads<\/option>\n <option>Graphic Designing<\/option>\n <option>Video Editing<\/option>\n <option>Website Development<\/option>\n\n <\/select>\n\n <\/div>\n\n\n <div class=\"input-box\">\n\n <label>Your Message *<\/label>\n\n <textarea\n placeholder=\"Tell us about your project...\"\n required><\/textarea>\n\n <\/div>\n\n\n <button type=\"submit\" class=\"submit-btn\">\n Send Message <span>\u2192<\/span>\n <\/button>\n\n <div class=\"form-note\">\n \ud83d\udd12 Your information is safe and will never be shared.\n <\/div>\n\n <\/form>\n\n <\/div>\n\n <\/div>\n\n<\/section>\n\n\n<script>\n\n document.getElementById(\"contactForm\").addEventListener(\"submit\", function(e) {\n\n e.preventDefault();\n\n alert(\"Thank you! Your message has been submitted.\");\n\n this.reset();\n\n });\n\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>GET IN TOUCH Contact Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Innovative Contact Form GET IN TOUCH Let’s Create Something Great. Have a project in mind? Tell us about your business, your goals, and how we can help you grow online. \u2709 Email vsaini35778@gmail.com […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1264","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vishaltechnical.top\/index.php?rest_route=\/wp\/v2\/pages\/1264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vishaltechnical.top\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vishaltechnical.top\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vishaltechnical.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vishaltechnical.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1264"}],"version-history":[{"count":37,"href":"https:\/\/vishaltechnical.top\/index.php?rest_route=\/wp\/v2\/pages\/1264\/revisions"}],"predecessor-version":[{"id":1499,"href":"https:\/\/vishaltechnical.top\/index.php?rest_route=\/wp\/v2\/pages\/1264\/revisions\/1499"}],"wp:attachment":[{"href":"https:\/\/vishaltechnical.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}