Contact Form<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n background: linear-gradient(135deg, #f0f4f7 0%, #e8f0f5 100%);\r\n padding: 40px 20px;\r\n }\r\n\r\n .container {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .form-container {\r\n background: transparent;\r\n border-radius: 20px;\r\n padding: 50px;\r\n }\r\n\r\n .form-row {\r\n display: flex;\r\n gap: 20px;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .form-group {\r\n flex: 1;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .form-group.full-width {\r\n width: 100%;\r\n }\r\n\r\n label {\r\n display: block;\r\n margin-bottom: 8px;\r\n color: #32C8D4;\r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .form-group.full-width label {\r\n margin-top: 15px;\r\n }\r\n\r\n .form-row .form-group label {\r\n margin-top: 0;\r\n }\r\n\r\n .form-row + .form-group.full-width {\r\n margin-top: 15px;\r\n }\r\n\r\n input[type=\"text\"],\r\n input[type=\"email\"],\r\n input[type=\"tel\"],\r\n textarea {\r\n width: 100%;\r\n padding: 15px 20px;\r\n border: 2px solid #e8f0f5;\r\n border-radius: 20px;\r\n font-size: 1rem;\r\n color: #333;\r\n background: white;\r\n transition: all 0.3s ease;\r\n font-family: inherit;\r\n }\r\n\r\n input[type=\"text\"]:focus,\r\n input[type=\"email\"]:focus,\r\n input[type=\"tel\"]:focus,\r\n textarea:focus {\r\n outline: none;\r\n border-color: #32C8D4;\r\n background: white;\r\n box-shadow: 0 0 0 3px rgba(50, 200, 212, 0.1);\r\n }\r\n\r\n input.error,\r\n textarea.error {\r\n border-color: #ff6b6b !important;\r\n background: #fff5f5 !important;\r\n box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1) !important;\r\n }\r\n\r\n textarea {\r\n resize: vertical;\r\n min-height: 120px;\r\n }\r\n\r\n .submit-btn {\r\n background: linear-gradient(135deg, #32C8D4 0%, #2ba8b5 100%);\r\n color: white;\r\n padding: 18px 40px;\r\n border: none;\r\n border-radius: 20px;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n width: 100%;\r\n margin-top: 20px;\r\n }\r\n\r\n .submit-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 25px rgba(50, 200, 212, 0.3);\r\n }\r\n\r\n .submit-btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .submit-btn:disabled {\r\n opacity: 0.7;\r\n cursor: not-allowed;\r\n }\r\n\r\n .form-group {\r\n position: relative;\r\n }\r\n\r\n .alert {\r\n padding: 15px 20px;\r\n border-radius: 12px;\r\n margin-bottom: 20px;\r\n display: none;\r\n animation: slideIn 0.3s ease;\r\n }\r\n\r\n .alert.show {\r\n display: block;\r\n }\r\n\r\n .alert.success {\r\n background: #d1fae5;\r\n color: #065f46;\r\n border-left: 4px solid #10b981;\r\n }\r\n\r\n .alert.error {\r\n background: #fee2e2;\r\n color: #991b1b;\r\n border-left: 4px solid #ef4444;\r\n }\r\n\r\n @keyframes slideIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .form-container {\r\n padding: 30px 25px;\r\n }\r\n \r\n .form-row {\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n \r\n .form-group {\r\n margin-bottom: 25px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n body {\r\n padding: 20px 15px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"form-container\">\r\n <div id=\"alertBox\" class=\"alert\"><\/div>\r\n \r\n <form id=\"contactForm\" action=\"#\" method=\"POST\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"firstName\">First Name *<\/label>\r\n <input type=\"text\" id=\"firstName\" name=\"firstName\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"lastName\">Last Name *<\/label>\r\n <input type=\"text\" id=\"lastName\" name=\"lastName\" required>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"phone\">Phone Number<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"phone\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"email\">Email Address *<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" required>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group full-width\">\r\n <label for=\"subject\">Subject *<\/label>\r\n <input type=\"text\" id=\"subject\" name=\"subject\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group full-width\">\r\n <label for=\"message\">Message *<\/label>\r\n <textarea id=\"message\" name=\"message\" required><\/textarea>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"submit-btn\">Send Message<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const WEBHOOK_URL = 'https:\/\/milkin.am\/index.php?rest_route=\/telegram-notifier\/v2\/1';\r\n\r\n function showAlert(message, type) {\r\n const alertBox = document.getElementById('alertBox');\r\n alertBox.textContent = message;\r\n alertBox.className = `alert ${type} show`;\r\n \r\n setTimeout(() => {\r\n alertBox.classList.remove('show');\r\n }, 5000);\r\n }\r\n\r\n document.getElementById('contactForm').addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n \r\n \/\/ Clear any previous error states\r\n document.querySelectorAll('input, textarea').forEach(field => {\r\n field.classList.remove('error');\r\n });\r\n \r\n \/\/ Check required fields\r\n const requiredFields = document.querySelectorAll('input[required], textarea[required]');\r\n let hasErrors = false;\r\n \r\n requiredFields.forEach(field => {\r\n if (!field.value.trim()) {\r\n field.classList.add('error');\r\n hasErrors = true;\r\n }\r\n });\r\n \r\n if (hasErrors) {\r\n showAlert('Please fill in all required fields', 'error');\r\n return;\r\n }\r\n \r\n \/\/ Collect form data\r\n const formData = {\r\n firstName: document.getElementById('firstName').value.trim(),\r\n lastName: document.getElementById('lastName').value.trim(),\r\n phone: document.getElementById('phone').value.trim(),\r\n email: document.getElementById('email').value.trim(),\r\n subject: document.getElementById('subject').value.trim(),\r\n message: document.getElementById('message').value.trim(),\r\n timestamp: new Date().toISOString()\r\n };\r\n \r\n \/\/ Update button state\r\n const button = document.querySelector('.submit-btn');\r\n const originalText = button.textContent;\r\n button.textContent = 'Sending...';\r\n button.disabled = true;\r\n \r\n try {\r\n \/\/ Send data to webhook\r\n const response = await fetch(WEBHOOK_URL, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n },\r\n body: JSON.stringify(formData)\r\n });\r\n \r\n if (response.ok) {\r\n \/\/ Success\r\n button.textContent = 'Message Sent!';\r\n button.style.background = 'linear-gradient(135deg, #4ade80 0%, #22c55e 100%)';\r\n showAlert('Your message has been sent successfully!', 'success');\r\n \r\n \/\/ Reset form after delay\r\n setTimeout(() => {\r\n button.textContent = originalText;\r\n button.disabled = false;\r\n button.style.background = 'linear-gradient(135deg, #32C8D4 0%, #2ba8b5 100%)';\r\n document.getElementById('contactForm').reset();\r\n }, 2000);\r\n } else {\r\n throw new Error('Failed to send message');\r\n }\r\n } catch (error) {\r\n console.error('Error sending form:', error);\r\n button.textContent = originalText;\r\n button.disabled = false;\r\n showAlert('Failed to send message. Please try again.', 'error');\r\n }\r\n });\r\n\r\n \/\/ Enhanced focus effects\r\n document.querySelectorAll('input, textarea').forEach(input => {\r\n input.addEventListener('focus', function() {\r\n this.parentElement.style.transform = 'translateY(-2px)';\r\n });\r\n \r\n input.addEventListener('blur', function() {\r\n this.parentElement.style.transform = 'translateY(0)';\r\n });\r\n \r\n \/\/ Remove error state when user starts typing\r\n input.addEventListener('input', function() {\r\n if (this.classList.contains('error') && this.value.trim()) {\r\n this.classList.remove('error');\r\n }\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\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\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-29d77949 e-flex e-con-boxed e-con e-parent\" data-id=\"29d77949\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-679e05ab e-flex e-con-boxed e-con e-child\" data-id=\"679e05ab\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-33de282d e-flex e-con-boxed e-con e-child\" data-id=\"33de282d\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-7dcac293 e-flex e-con-boxed e-con e-child\" data-id=\"7dcac293\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8e3c264 e-flex e-con-boxed e-con e-child\" data-id=\"8e3c264\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a8cc979 elementor-widget elementor-widget-google_maps\" data-id=\"3a8cc979\" data-element_type=\"widget\" data-widget_type=\"google_maps.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-custom-embed\">\n\t\t\t<iframe loading=\"lazy\"\n\t\t\t\t\tsrc=\"https:\/\/maps.google.com\/maps?q=28%2F3%20Ardyunaberakan%202nd%20district%2C%20Abovyan%2C%20Armenia&t=m&z=16&output=embed&iwloc=near\"\n\t\t\t\t\ttitle=\"28\/3 Ardyunaberakan 2nd district, Abovyan, Armenia\"\n\t\t\t\t\taria-label=\"28\/3 Ardyunaberakan 2nd district, Abovyan, Armenia\"\n\t\t\t><\/iframe>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\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\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n <ul>\n\t\t\t <\/ul>\n <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Contact Us call us for more information We’d love to hear from you! Whether you have a question or want to discuss a project, there are several ways to reach our team Number Phone +37433301122\u202c Email Address marketing@milkin.am Send Your Message Contact Form First Name * Last Name * Phone Number Email Address * Subject […]<\/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":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-180","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/milkin.am\/index.php?rest_route=\/wp\/v2\/pages\/180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/milkin.am\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/milkin.am\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/milkin.am\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/milkin.am\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=180"}],"version-history":[{"count":43,"href":"https:\/\/milkin.am\/index.php?rest_route=\/wp\/v2\/pages\/180\/revisions"}],"predecessor-version":[{"id":1088,"href":"https:\/\/milkin.am\/index.php?rest_route=\/wp\/v2\/pages\/180\/revisions\/1088"}],"wp:attachment":[{"href":"https:\/\/milkin.am\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}