{"id":1242,"date":"2025-04-14T02:37:16","date_gmt":"2025-04-14T00:37:16","guid":{"rendered":"https:\/\/www.ukrsportmed.com.ua\/?page_id=1242"},"modified":"2025-04-14T17:10:57","modified_gmt":"2025-04-14T15:10:57","slug":"%d0%b7%d0%b0%d0%bf%d0%b8%d1%81-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd","status":"publish","type":"page","link":"https:\/\/www.ukrsportmed.com.ua\/en\/%d0%b7%d0%b0%d0%bf%d0%b8%d1%81-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd\/","title":{"rendered":"Register online"},"content":{"rendered":"<div class=\"aligncenter wp-block-site-logo\"><img loading=\"lazy\" decoding=\"async\" width=\"76\" height=\"75\" src=\"https:\/\/www.ukrsportmed.com.ua\/wp-content\/uploads\/2024\/11\/logo-sport.png\" class=\"custom-logo\" alt=\"\u0423\u043a\u0440\u0430\u0457\u043d\u0441\u044c\u043a\u0438\u0439 \u043c\u0435\u0434\u0438\u0447\u043d\u0438\u0439 \u0446\u0435\u043d\u0442\u0440 \u0441\u043f\u043e\u0440\u0442\u0438\u0432\u043d\u043e\u0457 \u043c\u0435\u0434\u0438\u0446\u0438\u043d\u0438\" \/><\/div>\n\n    <style>\n        \/* \u041f\u0456\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044f \u0448\u0440\u0438\u0444\u0442\u0443 *\/\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700&display=swap');\n\n        #contact-form-container {\n            font-family: 'Montserrat', sans-serif;\n            color: #333;\n            line-height: 1.6;\n            width: 100%;\n            margin: 40px 0;\n            padding: 0;\n            display: flex;\n            justify-content: center;\n        }\n\n        #contact-form-container * { \n            box-sizing: border-box; \n        }\n\n        #contact-form-container .contact-card {\n            background-color: #ffffff;\n            padding: 35px 45px;\n            border-radius: 12px;\n            box-shadow: 0 5px 40px rgba(0, 0, 0, 0.15);\n            width: 100%;\n            max-width: 700px;\n            margin: 0 auto; \/* \u0426\u0435\u043d\u0442\u0440\u0443\u0432\u0430\u043d\u043d\u044f \u043a\u0430\u0440\u0442\u043a\u0438 *\/\n        }\n\n        #contact-form-container h2 { text-align: center; margin-bottom: 30px; color: #2c3e50; }\n        #contact-form-container .form-group { margin-bottom: 20px; position: relative; }\n        #contact-form-container label { display: block; margin-bottom: 8px; font-weight: 600; color: #555; font-size: 0.9rem; }\n        \n        #contact-form-container input[type=\"text\"],\n        #contact-form-container input[type=\"email\"],\n        #contact-form-container input[type=\"tel\"],\n        #contact-form-container textarea {\n            width: 100%; padding: 14px; border: 1px solid #ced4da; border-radius: 8px;\n            font-size: 1rem; font-family: inherit; background-color: #f8f9fa; transition: all 0.2s;\n        }\n        \n        #contact-form-container input:focus, #contact-form-container textarea:focus {\n            border-color: #3498db; outline: none; background-color: #fff; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);\n        }\n\n        #contact-form-container input.invalid, #contact-form-container textarea.invalid { border-color: #e74c3c !important; background-color: #fff6f5; }\n        #contact-form-container .error-message { color: #e74c3c; font-size: 0.8rem; font-weight: 600; margin-top: 5px; display: none; }\n        #contact-form-container .error-message.visible { display: block; }\n\n        #contact-form-container .checkbox-group { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }\n        #contact-form-container .checkbox-group.invalid { color: #e74c3c; }\n        \n        #contact-form-container .submit-btn {\n            display: block; width: 100%; padding: 16px; margin-top: 25px;\n            background-color: #3498db; color: white; border: none; border-radius: 8px;\n            font-size: 1rem; font-weight: 700; cursor: pointer; transition: 0.3s;\n        }\n        #contact-form-container .submit-btn:hover { background-color: #2980b9; transform: translateY(-1px); }\n        #contact-form-container .submit-btn:disabled { background-color: #bdc3c7; cursor: not-allowed; transform: none; }\n\n        #contact-form-container #form-status-message {\n            margin-top: 20px; padding: 12px; text-align: center; border-radius: 8px; display: none; font-weight: 600;\n        }\n        #contact-form-container #form-status-message.success { background-color: #eaf7ec; color: #27ae60; border: 1px solid #abddb3; display: block; }\n        #contact-form-container #form-status-message.error { background-color: #fbecea; color: #e74c3c; border: 1px solid #f5c6cb; display: block; }\n\n        \/* \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c \u0434\u043b\u044f \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u0432\u0435\u0440\u0441\u0456\u0439 *\/\n        @media (max-width: 600px) {\n            #contact-form-container {\n                padding: 0 10px;\n                margin: 20px 0;\n            }\n            #contact-form-container .contact-card {\n                padding: 25px 20px;\n            }\n        }\n    <\/style>\n\n    <div id=\"contact-form-container\">\n        <div class=\"contact-card\">\n          <form id=\"contactForm\" method=\"POST\" novalidate action=\"\">\n                <!-- \u0426\u0435\u0439 'action' \u043a\u0430\u0436\u0435 WordPress, \u044f\u043a\u0443 \u0444\u0443\u043d\u043a\u0446\u0456\u044e PHP \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0442\u0438 -->\n                <input type=\"hidden\" name=\"action\" value=\"send_contact_form\">\n                <input type=\"hidden\" id=\"_ajax_nonce\" name=\"_ajax_nonce\" value=\"10746defba\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/1242\" \/><!-- \u041f\u0440\u0438\u0445\u043e\u0432\u0430\u043d\u0435 \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0437\u0430\u0445\u0438\u0441\u0442\u0443 \u0432\u0456\u0434 \u0431\u043e\u0442\u0456\u0432 (\u043b\u044e\u0434\u0438\u043d\u0430 \u0439\u043e\u0433\u043e \u043d\u0435 \u0431\u0430\u0447\u0438\u0442\u044c) -->\n    <div style=\"display:none;\">\n    <input type=\"text\" name=\"honeypot\" value=\"\">\n    <\/div>\n                <div class=\"form-group\">\n                    <label>\u0412\u0430\u0448\u0435 \u043f\u0440\u0456\u0437\u0432\u0438\u0449\u0435, \u0456\u043c'\u044f, \u043f\u043e \u0431\u0430\u0442\u044c\u043a\u043e\u0432\u0456:<\/label>\n                    <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"\u041f\u0406\u0411\">\n                    <div class=\"error-message\" id=\"name-error\">\u0411\u0443\u0434\u044c \u043b\u0430\u0441\u043a\u0430, \u0432\u0432\u0435\u0434\u0456\u0442\u044c \u041f\u0406\u0411<\/div>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label>\u0422\u0435\u043b\u0435\u0444\u043e\u043d:<\/label>\n                    <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"0XXXXXXXXX \u0430\u0431\u043e +380XXXXXXXXX\">\n                    <div class=\"error-message\" id=\"phone-error\">\u0412\u0432\u0435\u0434\u0456\u0442\u044c \u043a\u043e\u0440\u0435\u043a\u0442\u043d\u0438\u0439 \u043d\u043e\u043c\u0435\u0440<\/div>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label>Email:<\/label>\n                    <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"mail@example.com\">\n                    <div class=\"error-message\" id=\"email-error\">\u0412\u0432\u0435\u0434\u0456\u0442\u044c \u043a\u043e\u0440\u0435\u043a\u0442\u043d\u0438\u0439 email<\/div>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label>\u041f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f:<\/label>\n                    <textarea id=\"message\" name=\"message\" rows=\"4\" placeholder=\"\u0422\u0435\u043a\u0441\u0442 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f...\"><\/textarea>\n                    <div class=\"error-message\" id=\"message-error\">\u0417\u0430\u043f\u043e\u0432\u043d\u0456\u0442\u044c \u0446\u0435 \u043f\u043e\u043b\u0435<\/div>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label class=\"checkbox-group\" id=\"privacy-container\">\n                        <input type=\"checkbox\" id=\"privacy\" name=\"privacy\" value=\"agreed\">\n                        <span>\u042f \u043f\u043e\u0433\u043e\u0434\u0436\u0443\u044e\u0441\u044c \u0437 <a href=\"\/en\/pravyla-ta-umovy\/\" target=\"_blank\">\u0443\u043c\u043e\u0432\u0430\u043c\u0438<\/a> \u043e\u0431\u0440\u043e\u0431\u043a\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u0438\u0445 \u0434\u0430\u043d\u0438\u0445<\/span>\n                    <\/label>\n                    <div class=\"error-message\" id=\"privacy-error\">\u041f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u043f\u043e\u0433\u043e\u0434\u0438\u0442\u0438\u0441\u044c \u0437 \u0443\u043c\u043e\u0432\u0430\u043c\u0438 \u043e\u0431\u0440\u043e\u0431\u043a\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u0438\u0445 \u0434\u0430\u043d\u0438\u0445<\/div>\n                <\/div>\n\n                <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\u041d\u0430\u0434\u0456\u0441\u043b\u0430\u0442\u0438<\/button>\n                <div id=\"form-status-message\"><\/div>\n            <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n        <\/div>\n    <\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const form = document.getElementById('contactForm');\n    const submitBtn = document.getElementById('submitBtn');\n    const statusDiv = document.getElementById('form-status-message');\n    \n    const fields = {\n        name: {\n            el: document.getElementById('name'),\n            err: document.getElementById('name-error'),\n            validate: (val) => val.trim().split(\/\\s+\/).filter(w => w.length > 0).length >= 2\n        },\n        phone: {\n            el: document.getElementById('phone'),\n            err: document.getElementById('phone-error'),\n            validate: (val) => {\n                const clean = val.replace(\/[\\s\\(\\)\\-\\+]\/g, '');\n                return \/^(38)?0\\d{9}$\/.test(clean);\n            }\n        },\n        email: {\n            el: document.getElementById('email'),\n            err: document.getElementById('email-error'),\n            validate: (val) => \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(val)\n        },\n        message: {\n            el: document.getElementById('message'),\n            err: document.getElementById('message-error'),\n            validate: (val) => val.trim().length > 2\n        },\n        privacy: {\n            el: document.getElementById('privacy'),\n            err: document.getElementById('privacy-error'),\n            validate: (val, el) => el.checked\n        }\n    };\n\n    function isFormValidNow() {\n        return Object.keys(fields).every(key => fields[key].validate(fields[key].el.value, fields[key].el));\n    }\n\n    function validateField(key) {\n        const field = fields[key];\n        const isValid = field.validate(field.el.value, field.el);\n        \n        if (isValid) {\n            field.el.classList.remove('invalid');\n            field.err.classList.remove('visible');\n            if(key === 'privacy') document.getElementById('privacy-container').classList.remove('invalid');\n            \n            if (isFormValidNow() && statusDiv.classList.contains('error')) {\n                statusDiv.style.display = 'none';\n                statusDiv.className = '';\n            }\n        } else {\n            if (field.el.value.length > 0 || key === 'privacy') {\n                field.el.classList.add('invalid');\n                field.err.classList.add('visible');\n                if(key === 'privacy') document.getElementById('privacy-container').classList.add('invalid');\n            }\n        }\n        return isValid;\n    }\n\n    Object.keys(fields).forEach(key => {\n        const ev = (key === 'privacy') ? 'change' : 'input';\n        fields[key].el.addEventListener(ev, () => {\n            if (statusDiv.classList.contains('success')) {\n                statusDiv.style.display = 'none';\n                statusDiv.className = '';\n            }\n            validateField(key);\n        });\n        fields[key].el.addEventListener('blur', () => validateField(key));\n    });\n\n    form.addEventListener('submit', (e) => {\n        e.preventDefault();\n        \n        let ok = true;\n        Object.keys(fields).forEach(key => { if (!validateField(key)) ok = false; });\n\n        if (!ok) {\n            statusDiv.textContent = '\u0411\u0443\u0434\u044c \u043b\u0430\u0441\u043a\u0430, \u0432\u0438\u043f\u0440\u0430\u0432\u0442\u0435 \u043f\u043e\u043c\u0438\u043b\u043a\u0438 \u0443 \u043f\u043e\u043b\u044f\u0445';\n            statusDiv.className = 'error';\n            statusDiv.style.display = 'block';\n            return;\n        }\n\n        submitBtn.disabled = true;\n        submitBtn.textContent = '\u041d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u044f...';\n\n        const formData = new FormData(form);\n        \/\/ \u0422\u0415\u041f\u0415\u0420 \u041c\u0418 \u0412\u0418\u041a\u041e\u0420\u0418\u0421\u0422\u041e\u0412\u0423\u0404\u041c\u041e \u0412\u0411\u0423\u0414\u041e\u0412\u0410\u041d\u0418\u0419 WP AJAX\n        const ajaxUrl = 'https:\/\/www.ukrsportmed.com.ua\/wp-content\/plugins\/my-custom-contact-form\/proxy-ajax.php';\n\n        fetch(ajaxUrl, { method: 'POST', body: formData })\n        .then(res => res.json())\n        .then(data => {\n            if (data.success) {\n                statusDiv.textContent = data.data.message;\n                statusDiv.className = 'success';\n                statusDiv.style.display = 'block';\n                form.reset(); \n            } else {\n                statusDiv.textContent = data.data.message || '\u041f\u043e\u043c\u0438\u043b\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430';\n                statusDiv.className = 'error';\n                statusDiv.style.display = 'block';\n            }\n        })\n        .catch((err) => {\n            console.error(err);\n            statusDiv.textContent = '\u041f\u043e\u043c\u0438\u043b\u043a\u0430 \u043c\u0435\u0440\u0435\u0436\u0456';\n            statusDiv.className = 'error';\n            statusDiv.style.display = 'block';\n        })\n        .finally(() => {\n            submitBtn.disabled = false;\n            submitBtn.textContent = '\u041d\u0430\u0434\u0456\u0441\u043b\u0430\u0442\u0438';\n        });\n    });\n});\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1242","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ukrsportmed.com.ua\/en\/wp-json\/wp\/v2\/pages\/1242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukrsportmed.com.ua\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukrsportmed.com.ua\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukrsportmed.com.ua\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukrsportmed.com.ua\/en\/wp-json\/wp\/v2\/comments?post=1242"}],"version-history":[{"count":90,"href":"https:\/\/www.ukrsportmed.com.ua\/en\/wp-json\/wp\/v2\/pages\/1242\/revisions"}],"predecessor-version":[{"id":1361,"href":"https:\/\/www.ukrsportmed.com.ua\/en\/wp-json\/wp\/v2\/pages\/1242\/revisions\/1361"}],"wp:attachment":[{"href":"https:\/\/www.ukrsportmed.com.ua\/en\/wp-json\/wp\/v2\/media?parent=1242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}