{"id":58,"date":"2026-05-05T01:45:17","date_gmt":"2026-05-05T01:45:17","guid":{"rendered":"https:\/\/staging.wellservemarketing.tech\/?page_id=58"},"modified":"2026-05-05T01:45:18","modified_gmt":"2026-05-05T01:45:18","slug":"main","status":"publish","type":"page","link":"https:\/\/staging.wellservemarketing.tech\/","title":{"rendered":"Main"},"content":{"rendered":"
\n
\n
\n
\n\n\n\n \n \n WellServe Marketing \u2014 Contact<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\"\/>\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --green: #1a7a4a;\n --green-d: #134f32;\n --green-l: #e6f4ed;\n --gold: #c9a84c;\n --dark: #0f1f17;\n --light: #f7faf8;\n --grey: #6b7f72;\n --border: #ccddd4;\n --error: #c0392b;\n --success: #1a7a4a;\n }\n\n body {\n font-family: 'DM Sans', sans-serif;\n background: var(--light);\n color: var(--dark);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n }\n\n \/* \u2500\u2500 HEADER \u2500\u2500 *\/\n header {\n background: var(--dark);\n padding: 1.2rem 2.5rem;\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n .logo-mark {\n width: 38px; height: 38px;\n background: var(--gold);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-family: 'Playfair Display', serif;\n font-size: 1.1rem;\n color: var(--dark);\n font-weight: 700;\n flex-shrink: 0;\n }\n .logo-text {\n font-family: 'Playfair Display', serif;\n color: #fff;\n font-size: 1.15rem;\n letter-spacing: 0.02em;\n }\n .logo-text span { color: var(--gold); }\n\n \/* \u2500\u2500 MAIN LAYOUT \u2500\u2500 *\/\n main {\n flex: 1;\n display: grid;\n grid-template-columns: 1fr 1fr;\n min-height: calc(100vh - 64px);\n }\n\n \/* \u2500\u2500 LEFT PANEL \u2500\u2500 *\/\n .panel-left {\n background: var(--green);\n padding: 4rem 3rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n overflow: hidden;\n }\n .panel-left::before {\n content: '';\n position: absolute;\n top: -80px; right: -80px;\n width: 320px; height: 320px;\n border: 60px solid rgba(255,255,255,0.06);\n border-radius: 50%;\n }\n .panel-left::after {\n content: '';\n position: absolute;\n bottom: -60px; left: -60px;\n width: 240px; height: 240px;\n border: 40px solid rgba(201,168,76,0.15);\n border-radius: 50%;\n }\n .panel-left h1 {\n font-family: 'Playfair Display', serif;\n font-size: 2.6rem;\n color: #fff;\n line-height: 1.2;\n margin-bottom: 1.2rem;\n }\n .panel-left h1 em {\n font-style: normal;\n color: var(--gold);\n }\n .panel-left p {\n color: rgba(255,255,255,0.75);\n font-size: 1rem;\n line-height: 1.7;\n max-width: 340px;\n margin-bottom: 2.5rem;\n }\n .slogan {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n color: var(--gold);\n font-size: 1.05rem;\n border-left: 3px solid var(--gold);\n padding-left: 1rem;\n margin-top: auto;\n }\n .info-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.9rem;\n }\n .info-list li {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n color: rgba(255,255,255,0.85);\n font-size: 0.9rem;\n }\n .info-list li .icon {\n width: 32px; height: 32px;\n background: rgba(255,255,255,0.12);\n border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n font-size: 1rem;\n flex-shrink: 0;\n }\n\n \/* \u2500\u2500 RIGHT PANEL (FORM) \u2500\u2500 *\/\n .panel-right {\n background: #fff;\n padding: 4rem 3rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n .form-header {\n margin-bottom: 2rem;\n }\n .form-header h2 {\n font-family: 'Playfair Display', serif;\n font-size: 1.9rem;\n color: var(--dark);\n margin-bottom: 0.4rem;\n }\n .form-header p {\n color: var(--grey);\n font-size: 0.9rem;\n }\n\n \/* \u2500\u2500 FORM FIELDS \u2500\u2500 *\/\n .form-group {\n margin-bottom: 1.3rem;\n }\n label {\n display: block;\n font-size: 0.8rem;\n font-weight: 500;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--grey);\n margin-bottom: 0.45rem;\n }\n input, textarea {\n width: 100%;\n padding: 0.85rem 1rem;\n border: 1.5px solid var(--border);\n border-radius: 8px;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.95rem;\n color: var(--dark);\n background: var(--light);\n transition: border-color 0.2s, box-shadow 0.2s;\n outline: none;\n }\n input:focus, textarea:focus {\n border-color: var(--green);\n box-shadow: 0 0 0 3px rgba(26,122,74,0.1);\n background: #fff;\n }\n input.error, textarea.error {\n border-color: var(--error);\n box-shadow: 0 0 0 3px rgba(192,57,43,0.1);\n }\n textarea {\n resize: vertical;\n min-height: 120px;\n }\n .field-error {\n display: none;\n color: var(--error);\n font-size: 0.78rem;\n margin-top: 0.3rem;\n }\n .field-error.visible { display: block; }\n\n \/* \u2500\u2500 SUBMIT BUTTON \u2500\u2500 *\/\n .btn-submit {\n width: 100%;\n padding: 1rem;\n background: var(--green);\n color: #fff;\n border: none;\n border-radius: 8px;\n font-family: 'DM Sans', sans-serif;\n font-size: 1rem;\n font-weight: 500;\n letter-spacing: 0.03em;\n cursor: pointer;\n transition: background 0.2s, transform 0.1s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.6rem;\n margin-top: 0.5rem;\n }\n .btn-submit:hover { background: var(--green-d); }\n .btn-submit:active { transform: scale(0.98); }\n .btn-submit:disabled { background: #a0b8aa; cursor: not-allowed; }\n .spinner {\n width: 18px; height: 18px;\n border: 2px solid rgba(255,255,255,0.4);\n border-top-color: #fff;\n border-radius: 50%;\n animation: spin 0.7s linear infinite;\n display: none;\n }\n .btn-submit.loading .spinner { display: block; }\n .btn-submit.loading .btn-label { display: none; }\n\n \/* \u2500\u2500 STATUS MESSAGES \u2500\u2500 *\/\n .status-box {\n display: none;\n padding: 1rem 1.2rem;\n border-radius: 8px;\n font-size: 0.92rem;\n margin-top: 1rem;\n align-items: flex-start;\n gap: 0.75rem;\n }\n .status-box.visible { display: flex; }\n .status-box.success {\n background: var(--green-l);\n border: 1.5px solid #a8d5b8;\n color: var(--green-d);\n }\n .status-box.error-msg {\n background: #fdf0ef;\n border: 1.5px solid #e8b4af;\n color: #8b2020;\n }\n .status-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }\n\n \/* \u2500\u2500 FOOTER NOTE \u2500\u2500 *\/\n .form-footer {\n margin-top: 1.5rem;\n font-size: 0.78rem;\n color: var(--grey);\n text-align: center;\n }\n\n @keyframes spin { to { transform: rotate(360deg); } }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n @media (max-width: 768px) {\n main { grid-template-columns: 1fr; }\n .panel-left { padding: 2.5rem 1.8rem; }\n .panel-left h1 { font-size: 2rem; }\n .panel-right { padding: 2.5rem 1.8rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n<header>\n <div class=\"logo-mark\">W<\/div>\n <div class=\"logo-text\">WellServe <span>Marketing<\/span><\/div>\n<\/header>\n\n<main>\n <!-- LEFT PANEL -->\n <div class=\"panel-left\">\n <h1>Get in <em>Touch<\/em><br\/>With Us<\/h1>\n <p>Send us a message and our team will get back to you promptly. Every submission is processed instantly through our automated workflow.<\/p>\n\n <ul class=\"info-list\">\n <li>\n <span class=\"icon\">\u26a1<\/span>\n Instant automated acknowledgement\n <\/li>\n <li>\n <span class=\"icon\">\ud83d\udd12<\/span>\n Your data is handled securely\n <\/li>\n <li>\n <span class=\"icon\">\ud83d\udcec<\/span>\n Response within 1 business day\n <\/li>\n <\/ul>\n\n <p class=\"slogan\">\"Connecting Your World,<br\/>One Workflow at a Time.\"<\/p>\n <\/div>\n\n <!-- RIGHT PANEL -->\n <div class=\"panel-right\">\n <div class=\"form-header\">\n <h2>Send a Message<\/h2>\n <p>All fields are required. We'll respond to the email address you provide.<\/p>\n <\/div>\n\n <form id=\"contactForm\" novalidate>\n\n <div class=\"form-group\">\n <label for=\"name\">Full Name<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"e.g. John Smith\" autocomplete=\"name\"\/>\n <div class=\"field-error\" id=\"nameError\">Please enter your full name.<\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"email\">Email Address<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"e.g. john@example.com\" autocomplete=\"email\"\/>\n <div class=\"field-error\" id=\"emailError\">Please enter a valid email address.<\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"message\">Message<\/label>\n <textarea id=\"message\" name=\"message\" placeholder=\"How can we help you?\"><\/textarea>\n <div class=\"field-error\" id=\"messageError\">Please enter your message.<\/div>\n <\/div>\n\n <button type=\"submit\" class=\"btn-submit\" id=\"submitBtn\">\n <span class=\"spinner\"><\/span>\n <span class=\"btn-label\">Send Message \u2192<\/span>\n <\/button>\n\n <!-- Status messages -->\n <div class=\"status-box success\" id=\"successMsg\">\n <span class=\"status-icon\">\u2705<\/span>\n <div>\n <strong>Message sent successfully!<\/strong><br\/>\n Thank you \u2014 our team will be in touch with you shortly.\n <\/div>\n <\/div>\n <div class=\"status-box error-msg\" id=\"errorMsg\">\n <span class=\"status-icon\">\u26a0\ufe0f<\/span>\n <div>\n <strong>Submission failed.<\/strong><br\/>\n <span id=\"errorDetail\">Please try again or contact us directly.<\/span>\n <\/div>\n <\/div>\n <\/form>\n\n <p class=\"form-footer\">\n By submitting this form you agree to our privacy policy.<br\/>\n \u00a9 2026 WellServe Marketing. All rights reserved.\n <\/p>\n <\/div>\n<\/main>\n\n<script>\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \/\/ CONFIGURATION \u2014 update this URL to switch between test \/ live\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n const WEBHOOK_URL = \"https:\/\/n8n.wellservemarketingn8n.com\/webhook-test\/54764cfd-210b-44cd-b677-d189f95ef881\";\n \/\/ For PRODUCTION (workflow active), use:\n \/\/ const WEBHOOK_URL = \"https:\/\/n8n.wellservemarketingn8n.com\/webhook\/54764cfd-210b-44cd-b677-d189f95ef881\";\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n const form = document.getElementById('contactForm');\n const submitBtn = document.getElementById('submitBtn');\n const successMsg = document.getElementById('successMsg');\n const errorMsg = document.getElementById('errorMsg');\n const errorDetail = document.getElementById('errorDetail');\n\n function validate() {\n let valid = true;\n\n const name = document.getElementById('name');\n const email = document.getElementById('email');\n const message = document.getElementById('message');\n\n \/\/ Reset\n [name, email, message].forEach(el => {\n el.classList.remove('error');\n });\n ['nameError','emailError','messageError'].forEach(id => {\n document.getElementById(id).classList.remove('visible');\n });\n\n if (!name.value.trim()) {\n name.classList.add('error');\n document.getElementById('nameError').classList.add('visible');\n valid = false;\n }\n\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n if (!email.value.trim() || !emailRegex.test(email.value.trim())) {\n email.classList.add('error');\n document.getElementById('emailError').classList.add('visible');\n valid = false;\n }\n\n if (!message.value.trim()) {\n message.classList.add('error');\n document.getElementById('messageError').classList.add('visible');\n valid = false;\n }\n\n return valid;\n }\n\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n\n successMsg.classList.remove('visible');\n errorMsg.classList.remove('visible');\n\n if (!validate()) return;\n\n \/\/ Loading state\n submitBtn.classList.add('loading');\n submitBtn.disabled = true;\n\n const payload = {\n name: document.getElementById('name').value.trim(),\n email: document.getElementById('email').value.trim(),\n message: document.getElementById('message').value.trim()\n };\n\n try {\n const response = await fetch(WEBHOOK_URL, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload)\n });\n\n if (response.ok) {\n successMsg.classList.add('visible');\n form.reset();\n } else {\n errorDetail.textContent = `Server responded with status ${response.status}. Please try again.`;\n errorMsg.classList.add('visible');\n }\n } catch (err) {\n errorDetail.textContent = 'Could not reach the server. Please check your connection and try again.';\n errorMsg.classList.add('visible');\n } finally {\n submitBtn.classList.remove('loading');\n submitBtn.disabled = false;\n }\n });\n<\/script>\n\n<\/body>\n<\/html>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"footnotes":""},"class_list":["post-58","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/staging.wellservemarketing.tech\/index.php\/wp-json\/wp\/v2\/pages\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.wellservemarketing.tech\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.wellservemarketing.tech\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.wellservemarketing.tech\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.wellservemarketing.tech\/index.php\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":4,"href":"https:\/\/staging.wellservemarketing.tech\/index.php\/wp-json\/wp\/v2\/pages\/58\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/staging.wellservemarketing.tech\/index.php\/wp-json\/wp\/v2\/pages\/58\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/staging.wellservemarketing.tech\/index.php\/wp-json\/wp\/v2\/media?parent=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}