{"id":80,"date":"2026-03-26T09:17:39","date_gmt":"2026-03-26T09:17:39","guid":{"rendered":"https:\/\/joygym.nl\/?page_id=80"},"modified":"2026-03-26T09:46:31","modified_gmt":"2026-03-26T09:46:31","slug":"contact","status":"publish","type":"page","link":"https:\/\/joygym.nl\/index.php\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"80\" class=\"elementor elementor-80\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cdd58ed e-flex e-con-boxed e-con e-parent\" data-id=\"cdd58ed\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b74dbeb elementor-widget elementor-widget-heading\" data-id=\"b74dbeb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Voel u vrij om contact met ons op te nemen !<\/h2>\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-625ceb4 e-flex e-con-boxed e-con e-parent\" data-id=\"625ceb4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-80601fc elementor-widget elementor-widget-shortcode\" data-id=\"80601fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div id=\"custom-contact-form-container\">\n        <style>\n            .custom-contact-form {\n                max-width: 100%;\n                margin: 0 auto;\n                padding: 20px;\n                background-color: #f9f9f9;\n                border-radius: 8px;\n                box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            }\n            \n            .custom-contact-form .form-group {\n                margin-bottom: 20px;\n            }\n            \n            .custom-contact-form label {\n                display: block;\n                margin-bottom: 5px;\n                font-weight: 600;\n                color: #333;\n            }\n            \n            .custom-contact-form .required {\n                color: #e74c3c;\n            }\n            \n            .custom-contact-form input[type=\"text\"],\n            .custom-contact-form input[type=\"email\"],\n            .custom-contact-form input[type=\"tel\"],\n            .custom-contact-form textarea {\n                width: 100%;\n                padding: 12px;\n                border: 1px solid #ddd;\n                border-radius: 4px;\n                font-size: 16px;\n                box-sizing: border-box;\n            }\n            \n            .custom-contact-form input:focus,\n            .custom-contact-form textarea:focus {\n                outline: none;\n                border-color: #007cba;\n                box-shadow: 0 0 0 1px #007cba;\n            }\n            \n            .custom-contact-form textarea {\n                min-height: 150px;\n                resize: vertical;\n            }\n            \n            .custom-contact-form .honeypot {\n                position: absolute;\n                left: -9999px;\n                opacity: 0;\n                height: 0;\n                width: 0;\n            }\n            \n            .custom-contact-form .submit-btn {\n                background-color: #007cba;\n                color: white;\n                border: none;\n                padding: 14px 28px;\n                font-size: 16px;\n                border-radius: 4px;\n                cursor: pointer;\n                font-weight: 600;\n                transition: background-color 0.3s;\n            }\n            \n            .custom-contact-form .submit-btn:hover {\n                background-color: #005a87;\n            }\n            \n            .custom-contact-form .form-message {\n                padding: 12px;\n                border-radius: 4px;\n                margin-bottom: 20px;\n                display: none;\n            }\n            \n            .custom-contact-form .success {\n                background-color: #d4edda;\n                color: #155724;\n                border: 1px solid #c3e6cb;\n                display: block;\n            }\n            \n            .custom-contact-form .error {\n                background-color: #f8d7da;\n                color: #721c24;\n                border: 1px solid #f5c6cb;\n                display: block;\n            }\n            \n            .custom-contact-form .spam-note {\n                font-size: 13px;\n                color: #666;\n                margin-top: 5px;\n                font-style: italic;\n            }\n            \n            .custom-contact-form .optional {\n                color: #777;\n                font-weight: normal;\n            }\n        <\/style>\n        \n        <div class=\"custom-contact-form\">\n            <h2>Contact Formulier<\/h2>\n            <p>Vul onderstaand formulier in en we nemen zo snel mogelijk contact met u op.<\/p>\n            \n            <div id=\"custom-form-message\" class=\"form-message\"><\/div>\n            \n            <form id=\"custom-contact-form\">\n                <!-- Nonce field for security -->\n                <input type=\"hidden\" name=\"security\" value=\"cebc23df5a\">\n                \n                <!-- Honeypot field for spam protection -->\n                <div class=\"honeypot\">\n                    <label for=\"custom-website\">Laat dit veld leeg<\/label>\n                    <input type=\"text\" id=\"custom-website\" name=\"website\" tabindex=\"-1\" autocomplete=\"off\">\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"first_name\">Voor naam <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"first_name\" name=\"first_name\" required>\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"last_name\">Achternaam <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"last_name\" name=\"last_name\" required>\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"email\">Email-adress <span class=\"required\">*<\/span><\/label>\n                    <input type=\"email\" id=\"email\" name=\"email\" required>\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"subject\">Onderwerp <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"subject\" name=\"subject\" required>\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"phone\">Telefoonnummer <span class=\"required\">*<\/span><\/label>\n                    <input type=\"tel\" id=\"phone\" name=\"phone\">\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"message\">Bericht <span class=\"required\">*<\/span><\/label>\n                    <textarea id=\"message\" name=\"message\" required><\/textarea>\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <button type=\"submit\" class=\"submit-btn\">Bericht verzenden<\/button>\n                    <p class=\"spam-note\">Dit formulier is beschermd tegen spam. Alle velden gemarkeerd met een * zijn verplicht.<\/p>\n                <\/div>\n            <\/form>\n        <\/div>\n    <\/div>\n    \n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const form = document.getElementById('custom-contact-form');\n        const messageDiv = document.getElementById('custom-form-message');\n        \n        if (form) {\n            form.addEventListener('submit', function(e) {\n                e.preventDefault();\n                \n                \/\/ Reset message\n                messageDiv.className = 'form-message';\n                messageDiv.textContent = '';\n                \n                \/\/ Honeypot check\n                const honeypot = document.getElementById('custom-website').value;\n                if (honeypot) {\n                    showMessage('Spam gedetecteerd. Als u geen bot bent, probeer het dan opnieuw.', 'error');\n                    return;\n                }\n                \n                \/\/ Get form data\n                const formData = {\n                    first_name: document.getElementById('first_name').value.trim(),\n                    last_name: document.getElementById('last_name').value.trim(),\n                    email: document.getElementById('email').value.trim(),\n                    subject: document.getElementById('subject').value.trim(),\n                    phone: document.getElementById('phone').value.trim(),\n                    message: document.getElementById('message').value.trim(),\n                    security: document.querySelector('input[name=\"security\"]').value,\n                    action: 'custom_send_contact_email'\n                };\n                \n                \/\/ Validation\n                if (!formData.first_name || !formData.last_name || !formData.email || \n                    !formData.subject || !formData.message) {\n                    showMessage('Vul alle verplichte velden in.', 'error');\n                    return;\n                }\n                \n                \/\/ Email validation\n                const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n                if (!emailRegex.test(formData.email)) {\n                    showMessage('Voer een geldig e-mailadres in.', 'error');\n                    return;\n                }\n                \n                \/\/ Show sending message\n                showMessage('Je bericht wordt verzonden...', '');\n                \n                \/\/ Send via AJAX\n                fetch('https:\/\/joygym.nl\/wp-admin\/admin-ajax.php', {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application\/x-www-form-urlencoded',\n                    },\n                    body: new URLSearchParams(formData)\n                })\n                .then(response => response.json())\n                .then(data => {\n                    if (data.success) {\n                        showMessage('Dank je ' + formData.first_name + '! Je bericht is verzonden. We reageren zo snel mogelijk.', 'success');\n                        form.reset();\n                    } else {\n                        showMessage('Error: ' + (data.data || 'Het verzenden van het bericht is mislukt. Probeer het opnieuw.'), 'error');\n                    }\n                })\n                .catch(error => {\n                    showMessage('Het verzenden van het bericht is mislukt. Probeer het later opnieuw.', 'error');\n                });\n            });\n        }\n        \n        function showMessage(text, type) {\n            messageDiv.textContent = text;\n            messageDiv.className = 'form-message';\n            if (type === 'success') {\n                messageDiv.classList.add('success');\n            } else if (type === 'error') {\n                messageDiv.classList.add('error');\n            }\n            messageDiv.style.display = 'block';\n        }\n    });\n    <\/script>\n    <\/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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Voel u vrij om contact met ons op te nemen !<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-80","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/joygym.nl\/index.php\/wp-json\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joygym.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/joygym.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/joygym.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joygym.nl\/index.php\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":7,"href":"https:\/\/joygym.nl\/index.php\/wp-json\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/joygym.nl\/index.php\/wp-json\/wp\/v2\/pages\/80\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/joygym.nl\/index.php\/wp-json\/wp\/v2\/media?parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}