Contact Form<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Isolated Contact Form Styles *\/\r\n .contact-form-container {\r\n --cf-bg: #000000;\r\n --cf-text: #ffffff;\r\n --cf-border: #ffffff;\r\n --cf-font: 'Montserrat', sans-serif;\r\n --cf-font-size: 22px;\r\n\r\n background-color: var(--cf-bg);\r\n font-family: var(--cf-font);\r\n font-size: var(--cf-font-size);\r\n color: var(--cf-text);\r\n padding: 60px 40px;\r\n max-width: 700px;\r\n margin: 0 auto;\r\n box-sizing: border-box;\r\n }\r\n\r\n .contact-form-container *,\r\n .contact-form-container *::before,\r\n .contact-form-container *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n .contact-form-container .cf-title {\r\n font-size: 32px;\r\n font-weight: 500;\r\n margin: 0 0 40px 0;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .contact-form-container .cf-row {\r\n display: flex;\r\n gap: 20px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .contact-form-container .cf-field {\r\n display: flex;\r\n flex-direction: column;\r\n margin-bottom: 24px;\r\n flex: 1;\r\n }\r\n\r\n .contact-form-container .cf-row .cf-field {\r\n margin-bottom: 0;\r\n }\r\n\r\n .contact-form-container .cf-label {\r\n font-size: var(--cf-font-size);\r\n margin-bottom: 10px;\r\n font-weight: 400;\r\n }\r\n\r\n .contact-form-container .cf-input,\r\n .contact-form-container .cf-textarea {\r\n background-color: transparent;\r\n border: 1px solid var(--cf-border);\r\n border-radius: 0;\r\n color: var(--cf-text);\r\n font-family: var(--cf-font);\r\n font-size: var(--cf-font-size);\r\n padding: 14px 16px;\r\n width: 100%;\r\n outline: none;\r\n transition: border-color 0.2s ease;\r\n }\r\n\r\n .contact-form-container .cf-input::placeholder,\r\n .contact-form-container .cf-textarea::placeholder {\r\n color: rgba(255, 255, 255, 0.4);\r\n }\r\n\r\n .contact-form-container .cf-input:focus,\r\n .contact-form-container .cf-textarea:focus {\r\n border-color: #ffffff;\r\n border-width: 2px;\r\n }\r\n\r\n .contact-form-container .cf-textarea {\r\n resize: vertical;\r\n min-height: 150px;\r\n }\r\n\r\n .contact-form-container .cf-button-row {\r\n text-align: right;\r\n margin-top: 16px;\r\n }\r\n\r\n .contact-form-container .cf-submit {\r\n background-color: transparent;\r\n border: 1px solid var(--cf-border);\r\n border-radius: 0;\r\n color: var(--cf-text);\r\n font-family: var(--cf-font);\r\n font-size: var(--cf-font-size);\r\n padding: 16px 48px;\r\n cursor: pointer;\r\n transition: background-color 0.2s ease, color 0.2s ease;\r\n }\r\n\r\n .contact-form-container .cf-submit:hover {\r\n background-color: var(--cf-text);\r\n color: var(--cf-bg);\r\n }\r\n\r\n .contact-form-container .cf-submit:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n\r\n .contact-form-container .cf-message {\r\n margin-top: 20px;\r\n font-size: 18px;\r\n display: none;\r\n text-align: right;\r\n }\r\n\r\n .contact-form-container .cf-message.success {\r\n color: #ffffff;\r\n display: block;\r\n }\r\n\r\n .contact-form-container .cf-message.error {\r\n color: #ff6b6b;\r\n display: block;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .contact-form-container {\r\n padding: 40px 24px;\r\n }\r\n\r\n .contact-form-container .cf-row {\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n\r\n .contact-form-container .cf-row .cf-field {\r\n margin-bottom: 24px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body style=\"margin: 0; background: #000;\">\r\n\r\n <div class=\"contact-form-container\">\r\n \r\n <form id=\"contactForm\">\r\n <div class=\"cf-row\">\r\n <div class=\"cf-field\">\r\n <label class=\"cf-label\" for=\"cf-name\">Name<\/label>\r\n <input type=\"text\" id=\"cf-name\" name=\"name\" class=\"cf-input\" required>\r\n <\/div>\r\n <div class=\"cf-field\">\r\n <label class=\"cf-label\" for=\"cf-surname\">Surname<\/label>\r\n <input type=\"text\" id=\"cf-surname\" name=\"surname\" class=\"cf-input\" required>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cf-field\">\r\n <label class=\"cf-label\" for=\"cf-phone\">Phone Number<\/label>\r\n <input type=\"tel\" id=\"cf-phone\" name=\"phone\" class=\"cf-input\" required>\r\n <\/div>\r\n\r\n <div class=\"cf-field\">\r\n <label class=\"cf-label\" for=\"cf-email\">Email<\/label>\r\n <input type=\"email\" id=\"cf-email\" name=\"email\" class=\"cf-input\" required>\r\n <\/div>\r\n\r\n <div class=\"cf-field\">\r\n <label class=\"cf-label\" for=\"cf-subject\">Subject<\/label>\r\n <input type=\"text\" id=\"cf-subject\" name=\"subject\" class=\"cf-input\" required>\r\n <\/div>\r\n\r\n <div class=\"cf-field\">\r\n <label class=\"cf-label\" for=\"cf-message\">Message<\/label>\r\n <textarea id=\"cf-message\" name=\"message\" class=\"cf-textarea\" required><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"cf-button-row\">\r\n <button type=\"submit\" class=\"cf-submit\" id=\"cf-submit-btn\">Send<\/button>\r\n <\/div>\r\n \r\n <div id=\"formMessage\" class=\"cf-message\"><\/div>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n const WEBHOOK_URL = 'https:\/\/profenergygroup.com\/wp-json\/telegram-notifier\/v2\/1';\r\n\r\n const form = document.getElementById('contactForm');\r\n const messageEl = document.getElementById('formMessage');\r\n const submitBtn = document.getElementById('cf-submit-btn');\r\n\r\n form.addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n\r\n const formData = {\r\n name: document.getElementById('cf-name').value.trim(),\r\n surname: document.getElementById('cf-surname').value.trim(),\r\n phone: document.getElementById('cf-phone').value.trim(),\r\n email: document.getElementById('cf-email').value.trim(),\r\n subject: document.getElementById('cf-subject').value.trim(),\r\n message: document.getElementById('cf-message').value.trim()\r\n };\r\n\r\n \/\/ Basic validation\r\n if (!formData.name || !formData.surname || !formData.phone ||\r\n !formData.email || !formData.subject || !formData.message) {\r\n showMessage('Please fill in all fields.', 'error');\r\n return;\r\n }\r\n\r\n \/\/ Email validation\r\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n if (!emailRegex.test(formData.email)) {\r\n showMessage('Please enter a valid email address.', 'error');\r\n return;\r\n }\r\n\r\n \/\/ Disable button during submission\r\n submitBtn.disabled = true;\r\n submitBtn.textContent = 'Sending...';\r\n\r\n try {\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 showMessage('Message sent successfully.', 'success');\r\n form.reset();\r\n } else {\r\n throw new Error('Server responded with status ' + response.status);\r\n }\r\n } catch (error) {\r\n console.error('Submission error:', error);\r\n showMessage('Something went wrong. Please try again later.', 'error');\r\n } finally {\r\n submitBtn.disabled = false;\r\n submitBtn.textContent = 'Send';\r\n }\r\n });\r\n\r\n function showMessage(text, type) {\r\n messageEl.textContent = text;\r\n messageEl.className = 'cf-message ' + type;\r\n\r\n setTimeout(function() {\r\n messageEl.className = 'cf-message';\r\n }, 5000);\r\n }\r\n })();\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>", "protected": false }, "excerpt": { "rendered": "<p>\u2014 Get In Touch Let’s Talk Address: RA Yerevan , Teryan street 91 Call Us +374 12 77 17 17 +374 95 01 70 05 Mail Us info@profenergygroup.com hr@profenergygroup.com architecture@profenergygroup.com marketing@profenergygroup.com Linkedin Instagram Facebook Contact Form Name Surname Phone Number Email Subject Message Send<\/p>", "protected": false }, "author": 1, "featured_media": 0, "parent": 0, "menu_order": 0, "comment_status": "closed", "ping_status": "closed", "template": "elementor_header_footer", "meta": { "inline_featured_image": false, "footnotes": "" }, "class_list": [ "post-21611", "page", "type-page", "status-publish", "hentry" ], "_links": { "self": [ { "href": "https:\/\/profenergygroup.com\/en\/wp-json\/wp\/v2\/pages\/21611", "targetHints": { "allow": [ "GET" ] } } ], "collection": [ { "href": "https:\/\/profenergygroup.com\/en\/wp-json\/wp\/v2\/pages" } ], "about": [ { "href": "https:\/\/profenergygroup.com\/en\/wp-json\/wp\/v2\/types\/page" } ], "author": [ { "embeddable": true, "href": "https:\/\/profenergygroup.com\/en\/wp-json\/wp\/v2\/users\/1" } ], "replies": [ { "embeddable": true, "href": "https:\/\/profenergygroup.com\/en\/wp-json\/wp\/v2\/comments?post=21611" } ], "version-history": [ { "count": 52, "href": "https:\/\/profenergygroup.com\/en\/wp-json\/wp\/v2\/pages\/21611\/revisions" } ], "predecessor-version": [ { "id": 28407, "href": "https:\/\/profenergygroup.com\/en\/wp-json\/wp\/v2\/pages\/21611\/revisions\/28407" } ], "wp:attachment": [ { "href": "https:\/\/profenergygroup.com\/en\/wp-json\/wp\/v2\/media?parent=21611" } ], "curies": [ { "name": "wp", "href": "https:\/\/api.w.org\/{rel}", "templated": true } ] } }