{"id":6299,"date":"2026-03-21T18:37:08","date_gmt":"2026-03-21T18:37:08","guid":{"rendered":"https:\/\/stmaryeotcedmonton.org\/?page_id=6299"},"modified":"2026-06-12T08:35:10","modified_gmt":"2026-06-12T08:35:10","slug":"membership-form-3","status":"publish","type":"page","link":"https:\/\/stmaryeotcedmonton.org\/am\/membership-form-3\/","title":{"rendered":"Membership Form"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6299\" class=\"elementor elementor-6299\">\n\t\t\t\t<div class=\"elementor-element elementor-element-52f3d00 e-con-full e-flex e-con e-parent\" data-id=\"52f3d00\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-90d8553 elementor-widget elementor-widget-heading\" data-id=\"90d8553\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Membership<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-91af76b e-flex e-con-boxed e-con e-parent\" data-id=\"91af76b\" 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-edf0ce1 elementor-widget elementor-widget-html\" data-id=\"edf0ce1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"st-mary-membership-section\">\r\n    \r\n    <div id=\"membership-main-view\" class=\"membership-container\">\r\n        <div class=\"membership-hero\">\r\n            <div class=\"hero-left\">\r\n                <h1 class=\"membership-title\">Membership<\/h1>\r\n            <\/div>\r\n            <div class=\"hero-right\">\r\n                <div class=\"verse-box\">\r\n                    <p class=\"verse-text\">\"For just as each of us has one body with many members, and these members do not all have the same function, so in Christ we, though many, form one body, and each member belongs to all the others.\"<\/p>\r\n                    <p class=\"verse-ref\">Romans 12:4-5<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"membership-intro\">\r\n            <h2>Join Our Spiritual Family<\/h2>\r\n            <p>Becoming a member of our church means committing to walk your spiritual journey alongside a loving, supportive community. We welcome you to officially join our congregation, serve with us, and grow in faith.<\/p>\r\n            <button type=\"button\" onclick=\"showMembershipForm()\" class=\"membership-action-btn\">Fill Out Membership Form<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"membership-form-view\" class=\"membership-form-container\" style=\"display: none;\">\r\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/stmaryeotcedmonton.org\/wp-content\/uploads\/2026\/03\/DSC_2149-scaled.jpg\" alt=\"Church Community\" class=\"membership-hero-img\" title=\"Membership Form\">\r\n        \r\n        <div class=\"membership-form-header\">\r\n            <h1 class=\"membership-form-title\">Membership Form<\/h1>\r\n            <p class=\"membership-verse\">Please fill out the details below to officially register as a member.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Added enctype for secure file uploads -->\r\n        <form class=\"st-mary-membership-form\" name=\"membership-form\" action=\"\" method=\"POST\" enctype=\"multipart\/form-data\">\r\n            \r\n            <h3 class=\"form-section-title\">Personal Information<\/h3>\r\n            \r\n            <!-- APPLICANT PHOTO UPLOAD -->\r\n            <div class=\"form-row\">\r\n                <div class=\"form-col\" style=\"flex: 100%;\">\r\n                    <label>\u12e8\u12a5\u122d\u1235\u12ce \u134e\u1276 \/ Your Photo (Passport Size) *<\/label>\r\n                    <input type=\"file\" name=\"applicant_photo\" accept=\"image\/*\" required style=\"padding: 12px; border: 2px dashed #6c8fa8; background: #fdfaf6; cursor: pointer;\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"form-row\">\r\n                <div class=\"form-col\"><label>\u12e8\u1218\u1300\u1218\u122a\u12eb \u1235\u121d \/ First Name *<\/label><input type=\"text\" name=\"first_name\" required><\/div>\r\n                <div class=\"form-col\"><label>\u12e8\u12a0\u1263\u1275 \u1235\u121d \/ Middle Name<\/label><input type=\"text\" name=\"middle_name\"><\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"form-row\">\r\n                <div class=\"form-col\"><label>\u12e8\u12a0\u12eb\u1275 \u1235\u121d \/ Last Name *<\/label><input type=\"text\" name=\"last_name\" required><\/div>\r\n                <div class=\"form-col\"><label>\u12e8\u12ad\u122d\u1235\u1275\u1293 \u1235\u121d \/ Baptismal Name<\/label><input type=\"text\" name=\"baptismal_name\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"form-row\">\r\n                <div class=\"form-col\"><label>\u12e8\u120d\u12f0\u1275 \u1240\u1295 \/ Date of birth<\/label><input type=\"date\" name=\"dob\"><\/div>\r\n                <div class=\"form-col\">\r\n                    <label>\u12e8\u1275\u12f3\u122d \u1201\u1294\u1273 \/ Marital Status *<\/label>\r\n                    <select name=\"marital_status\" id=\"marital-status-select\" required>\r\n                        <option value=\"\">Select \/ \u121d\u1228\u1325...<\/option>\r\n                        <option value=\"Single\">Single \/ \u12eb\u120b\u1308\u1263<\/option>\r\n                        <option value=\"Married\">Married \/ \u12eb\u1308\u1263<\/option>\r\n                        <option value=\"Divorced\">Divorced \/ \u12e8\u1270\u134b\u1273<\/option>\r\n                        <option value=\"Widowed\">Widowed \/ \u1263\u120d\/\u121a\u1235\u1275 \u12e8\u121e\u1270\u1260\u1275<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div id=\"spouse-fields-wrapper\" style=\"display: none; background: #fdfaf6; padding: 25px; border-left: 4px solid #a46f2d; margin-top: 10px; margin-bottom: 25px; border-radius: 0 8px 8px 0;\">\r\n                <h4 style=\"margin-top: 0; margin-bottom: 20px; color: #8C2A2A; font-family: 'Playfair Display', serif; font-size: 16px;\">Spouse Details<\/h4>\r\n                \r\n                <!-- SPOUSE PHOTO UPLOAD -->\r\n                <div class=\"form-row\">\r\n                    <div class=\"form-col\" style=\"flex: 100%;\">\r\n                        <label>\u12e8\u1263\u1208\u1264\u1275\u12ce \u134e\u1276 \/ Spouse Photo *<\/label>\r\n                        <input type=\"file\" name=\"spouse_photo\" id=\"spouse_photo\" accept=\"image\/*\" style=\"padding: 12px; border: 2px dashed #a46f2d; background: #fff; cursor: pointer;\">\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"form-row\">\r\n                    <div class=\"form-col\"><label>\u12e8\u1218\u1300\u1218\u122a\u12eb \u1235\u121d \/ First Name *<\/label><input type=\"text\" name=\"spouse_first_name\" id=\"spouse_first_name\"><\/div>\r\n                    <div class=\"form-col\"><label>\u12e8\u12a0\u12eb\u1275 \u1235\u121d \/ Last Name *<\/label><input type=\"text\" name=\"spouse_last_name\" id=\"spouse_last_name\"><\/div>\r\n                <\/div>\r\n                <div class=\"form-row\">\r\n                    <div class=\"form-col\"><label>\u12e8\u1263\u1208\u1264\u1275\u12ce \u12ad\u122d\u1235\u1275\u1293 \u1235\u121d \/ Baptismal Name<\/label><input type=\"text\" name=\"spouse_baptismal_name\"><\/div>\r\n                    <div class=\"form-col\"><label>\u12e8\u1263\u1208\u1264\u1275\u12ce \u120d\u12f0\u1275 \u1240\u1295 \/ Date of birth<\/label><input type=\"date\" name=\"spouse_dob\"><\/div>\r\n                <\/div>\r\n                <div class=\"form-row\">\r\n                    <div class=\"form-col\"><label>\u12e8\u1263\u1208\u1264\u1275\u12ce \u12e8\u12a5\u1305 \u1235\u120d\u12ad \/ Mobile number<\/label>\r\n                        <div class=\"icon-input-wrapper\">\r\n                            <span class=\"flag\">\ud83c\udde8\ud83c\udde6<\/span>\r\n                            <input type=\"tel\" name=\"spouse_mobile\" placeholder=\"780-000-0000\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"form-col\"><label>\u12e8\u1263\u1208\u1264\u1275\u12ce \u12a2\u121c\u120d \/ E-mail<\/label><input type=\"email\" name=\"spouse_email\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <h3 class=\"form-section-title\" style=\"margin-top: 40px;\">Contact & Address<\/h3>\r\n            <div class=\"form-row\">\r\n                <div class=\"form-col\"><label>\u12e8\u1218\u1296\u122d\u12eb \u12a0\u12f5\u122b\u123b \/ Home address *<\/label><input type=\"text\" name=\"home_address\" required><\/div>\r\n                <div class=\"form-col\"><label>Apparent Unit #<\/label><input type=\"text\" name=\"unit_number\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"form-row\">\r\n                <div class=\"form-col\"><label>City<\/label><input type=\"text\" name=\"city\"><\/div>\r\n                <div class=\"form-col\"><label>Province<\/label><input type=\"text\" name=\"province\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"form-row\">\r\n                <div class=\"form-col\"><label>Postal code *<\/label><input type=\"text\" name=\"postal_code\" placeholder=\"e.g. 1A1 B1B\" required><\/div>\r\n                <div class=\"form-col\"><label>\u12e8\u12a5\u1305 \u1235\u120d\u12ad \/ Mobile number *<\/label>\r\n                    <div class=\"icon-input-wrapper\">\r\n                        <span class=\"flag\">\ud83c\udde8\ud83c\udde6<\/span>\r\n                        <input type=\"tel\" name=\"mobile_number\" placeholder=\"780-000-0000\" required>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"form-row\">\r\n                <div class=\"form-col\"><label>\u12a2\u121c\u120d \/ E-mail *<\/label><input type=\"email\" name=\"email\" required><\/div>\r\n                <div class=\"form-col\"><label>\u12e8\u1295\u1235\u1203 \u12a0\u1263\u1235 \u1235\u121d \/ The name of the confessor father<\/label><input type=\"text\" name=\"confessor_father\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"form-row\">\r\n                <div class=\"form-col\" style=\"flex: 100%;\">\r\n                    <label>\u1264\u1270 \u12ad\u122d\u1235\u1272\u12eb\u1295 \u1260\u121d\u1295 \u1218\u120d\u12a9 \u121b\u1308\u120d\u1308\u120d \u12ed\u1348\u120d\u130b\u1209? \/ How would you like to serve the church?<\/label>\r\n                    <textarea name=\"serve_church\" rows=\"3\"><\/textarea>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- DYNAMIC CHILDREN SECTION -->\r\n            <h3 class=\"form-section-title\" style=\"margin-top: 40px;\">Children Information<\/h3>\r\n            \r\n            <div class=\"radio-group\">\r\n                <label class=\"radio-question\">\u120d\u1306\u127d \u12a0\u1209\u12ce\u1275? \/ Do you have children? *<\/label>\r\n                <label class=\"radio-option\"><input type=\"radio\" name=\"has_children\" value=\"Yes\" required> \u12a0\u12ce \/ Yes<\/label>\r\n                <label class=\"radio-option\"><input type=\"radio\" name=\"has_children\" value=\"No\" required> \u12e8\u1208\u129d\u121d \/ No<\/label>\r\n            <\/div>\r\n\r\n            <div id=\"children-button-wrapper\" style=\"display: none; margin-bottom: 20px;\">\r\n                <button type=\"button\" id=\"add-child-btn\" class=\"add-child-action-btn\">+ Add Children Detail<\/button>\r\n            <\/div>\r\n\r\n            <div id=\"dynamic-children-container\"><\/div>\r\n            <!-- END DYNAMIC CHILDREN SECTION -->\r\n\r\n            <h3 class=\"form-section-title\" style=\"margin-top: 40px;\">Church Commitments<\/h3>\r\n            \r\n            <div class=\"radio-group\">\r\n                <label class=\"radio-question\">\u1208\u1264\u1270 \u12ad\u122d\u1235\u1272\u12eb\u1295 \u12a0\u1235\u122b\u1276\u1295 \u12eb\u12c8\u1323\u1209? \/ Do you give your tithe to the church? *<\/label>\r\n                <label class=\"radio-option\"><input type=\"radio\" name=\"tithe_status\" value=\"Yes I do\" required> \u12a0\u12ce \u12a5\u1230\u1323\u1208\u1201 \/ Yes I do<\/label>\r\n                <label class=\"radio-option\"><input type=\"radio\" name=\"tithe_status\" value=\"Not yet started\" required> \u12a5\u1235\u12ab\u1201\u1295 \u12a0\u120d\u1300\u1218\u122d\u12a9\u121d \/ Not yet started<\/label>\r\n            <\/div>\r\n\r\n            <div class=\"radio-group\" style=\"margin-top: 25px;\">\r\n                <label class=\"radio-question\">\u12c8\u122d\u1203\u12ca \u12a0\u1235\u1270\u12cb\u133e \u12ed\u12a8\u134d\u120b\u1209? \/ Are you paying your membership contribution? *<\/label>\r\n                <label class=\"radio-option\"><input type=\"radio\" name=\"contribution_status\" value=\"Yes I do\" required> \u12a0\u12ce \u12a5\u12a8\u134d\u120b\u1208\u1201 \/ Yes I do<\/label>\r\n                <label class=\"radio-option\"><input type=\"radio\" name=\"contribution_status\" value=\"Not yet started\" required> \u12a5\u1235\u12ab\u1201\u1295 \u12a0\u120d\u1300\u1218\u122d\u12a9\u121d \/ Not yet started<\/label>\r\n            <\/div>\r\n\r\n            <button type=\"submit\" class=\"form-submit-btn\">Submit Membership<\/button>\r\n            <button type=\"button\" onclick=\"hideMembershipForm()\" class=\"back-link-btn\">&laquo; Cancel and Return<\/button>\r\n        <\/form>\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n    function showMembershipForm() {\r\n        document.getElementById('membership-main-view').style.display = 'none';\r\n        document.getElementById('membership-form-view').style.display = 'block';\r\n        document.querySelector('.st-mary-membership-section').scrollIntoView({ behavior: 'smooth' });\r\n    }\r\n\r\n    function hideMembershipForm() {\r\n        document.getElementById('membership-form-view').style.display = 'none';\r\n        document.getElementById('membership-main-view').style.display = 'block';\r\n        document.querySelector('.st-mary-membership-section').scrollIntoView({ behavior: 'smooth' });\r\n    }\r\n    \r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n        \r\n        \/\/ 1. SMART LOGIC FOR SPOUSE FIELDS\r\n        const maritalSelect = document.getElementById('marital-status-select');\r\n        const spouseWrapper = document.getElementById('spouse-fields-wrapper');\r\n        const spouseFirstName = document.getElementById('spouse_first_name');\r\n        const spouseLastName = document.getElementById('spouse_last_name');\r\n        const spousePhoto = document.getElementById('spouse_photo'); \/\/ Added photo requirement target\r\n\r\n        if(maritalSelect && spouseWrapper) {\r\n            maritalSelect.addEventListener('change', function() {\r\n                if(this.value === 'Married') {\r\n                    spouseWrapper.style.display = 'block';\r\n                    if(spouseFirstName) spouseFirstName.setAttribute('required', 'required');\r\n                    if(spouseLastName) spouseLastName.setAttribute('required', 'required');\r\n                    if(spousePhoto) spousePhoto.setAttribute('required', 'required'); \/\/ Require photo\r\n                } else {\r\n                    spouseWrapper.style.display = 'none';\r\n                    if(spouseFirstName) spouseFirstName.removeAttribute('required');\r\n                    if(spouseLastName) spouseLastName.removeAttribute('required');\r\n                    if(spousePhoto) spousePhoto.removeAttribute('required'); \/\/ Remove photo requirement\r\n                }\r\n            });\r\n        }\r\n\r\n        \/\/ 2. DYNAMIC CHILDREN LOGIC (Unlimited + Button)\r\n        const hasChildrenRadios = document.querySelectorAll('input[name=\"has_children\"]');\r\n        const childrenButtonWrapper = document.getElementById('children-button-wrapper');\r\n        const dynamicChildrenContainer = document.getElementById('dynamic-children-container');\r\n        const addChildBtn = document.getElementById('add-child-btn');\r\n        let childCount = 0;\r\n\r\n        hasChildrenRadios.forEach(radio => {\r\n            radio.addEventListener('change', function() {\r\n                if (this.value === 'Yes') {\r\n                    childrenButtonWrapper.style.display = 'block';\r\n                } else {\r\n                    childrenButtonWrapper.style.display = 'none';\r\n                    dynamicChildrenContainer.innerHTML = ''; \r\n                    childCount = 0; \r\n                }\r\n            });\r\n        });\r\n\r\n        if(addChildBtn) {\r\n            addChildBtn.addEventListener('click', function() {\r\n                childCount++;\r\n                const childHtml = `\r\n                    <div class=\"child-sub-form\" style=\"background: #f4f8fa; padding: 20px 20px 5px 20px; border-left: 4px solid #6c8fa8; margin-bottom: 20px; border-radius: 0 8px 8px 0; position: relative;\">\r\n                        <button type=\"button\" class=\"remove-child-btn\" onclick=\"this.parentElement.remove()\" style=\"position: absolute; top: 15px; right: 15px; background: none; border: none; color: #8C2A2A; font-weight: 600; cursor: pointer;\">&times; Remove<\/button>\r\n                        <h4 style=\"margin-top: 0; margin-bottom: 15px; color: #2b5c77; font-family: 'Playfair Display', serif; font-size: 16px;\">Child Details<\/h4>\r\n                        <div class=\"form-row\">\r\n                            <div class=\"form-col\"><label>\u12e8\u1218\u1300\u1218\u122a\u12eb \u1235\u121d \/ First Name *<\/label><input type=\"text\" name=\"child_${childCount}_first_name\" required><\/div>\r\n                            <div class=\"form-col\"><label>\u12e8\u12a0\u12eb\u1275 \u1235\u121d \/ Last Name *<\/label><input type=\"text\" name=\"child_${childCount}_last_name\" required><\/div>\r\n                        <\/div>\r\n                        <div class=\"form-row\">\r\n                            <div class=\"form-col\"><label>\u12e8\u12ad\u122d\u1235\u1275\u1293 \u1235\u121d \/ Christian name<\/label><input type=\"text\" name=\"child_${childCount}_christian_name\"><\/div>\r\n                            <div class=\"form-col\"><label>\u12e8\u120d\u12f0\u1275 \u1240\u1295 \/ Date of birth *<\/label><input type=\"date\" name=\"child_${childCount}_dob\" required><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                `;\r\n                dynamicChildrenContainer.insertAdjacentHTML('beforeend', childHtml);\r\n            });\r\n        }\r\n\r\n        \/\/ 3. WORDPRESS EMAIL SUBMIT LOGIC\r\n        const ajaxURL = '\/wp-admin\/admin-ajax.php'; \r\n        const form = document.querySelector('.st-mary-membership-form');\r\n        \r\n        if(form) {\r\n            form.addEventListener('submit', e => {\r\n                e.preventDefault();\r\n                \r\n                const btn = form.querySelector('.form-submit-btn');\r\n                const originalText = btn.innerText;\r\n                btn.innerText = 'Submitting & Uploading...';\r\n                btn.disabled = true;\r\n                \r\n                const formData = new FormData(form);\r\n                formData.append('action', 'st_mary_submit_membership'); \r\n\r\n                fetch(ajaxURL, { method: 'POST', body: formData })\r\n                    .then(response => response.json())\r\n                    .then(data => {\r\n                        if(data.success) {\r\n                            alert('Success! Your membership form and photos have been submitted.');\r\n                            form.reset();\r\n                            if(spouseWrapper) spouseWrapper.style.display = 'none'; \r\n                            if(childrenButtonWrapper) childrenButtonWrapper.style.display = 'none';\r\n                            if(dynamicChildrenContainer) dynamicChildrenContainer.innerHTML = '';\r\n                            childCount = 0; \r\n                            hideMembershipForm();\r\n                        } else {\r\n                            alert('Error: ' + data.data);\r\n                        }\r\n                        btn.innerText = originalText;\r\n                        btn.disabled = false;\r\n                    })\r\n                    .catch(error => {\r\n                        console.error('Error!', error.message);\r\n                        alert('There was a network error submitting the form. Please try again.');\r\n                        btn.innerText = originalText;\r\n                        btn.disabled = false;\r\n                    });\r\n            });\r\n        }\r\n    });\r\n<\/script>\r\n\r\n<style>\r\n\/* --- MAIN PAGE STYLING --- *\/\r\n.st-mary-membership-section { background-color: #FAF7F2; padding: 60px 20px; font-family: 'Open Sans', sans-serif; color: #333; }\r\n.membership-container { max-width: 1000px; margin: 0 auto; }\r\n.membership-hero { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #EAE3D9; padding-bottom: 60px; margin-bottom: 60px; }\r\n.hero-left { width: 45%; }\r\n.membership-title { font-family: 'Playfair Display', serif; font-size: 64px; color: #1a1a1a; margin: 0; line-height: 1; border-left: 5px solid #6c8fa8; padding-left: 20px; }\r\n.hero-right { width: 50%; display: flex; justify-content: flex-end; }\r\n.verse-box { background-color: #ffffff; padding: 35px; border: 1px solid #EAE3D9; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); border-top: 4px solid #a46f2d; }\r\n.verse-text { font-size: 16px; color: #555; font-style: italic; line-height: 1.7; margin: 0 0 15px 0; }\r\n.verse-ref { color: #a46f2d; font-weight: 700; margin: 0; font-size: 15px; }\r\n.membership-intro { text-align: center; max-width: 800px; margin: 0 auto 60px auto; background: #fff; padding: 50px; border-radius: 8px; border: 1px solid #EAE3D9; box-shadow: 0 5px 20px rgba(0,0,0,0.03); }\r\n.membership-intro h2 { font-family: 'Playfair Display', serif; font-size: 36px; color: #8C2A2A; margin: 0 0 20px 0; }\r\n.membership-intro p { font-size: 16px; color: #555; line-height: 1.8; margin: 0 0 30px 0; }\r\n.membership-action-btn { background-color: #333333; color: #ffffff; border: none; padding: 14px 40px; border-radius: 4px; font-weight: 600; font-size: 16px; cursor: pointer; transition: background-color 0.2s ease; }\r\n.membership-action-btn:hover { background-color: #a46f2d; }\r\n\r\n\/* --- FORM STYLING --- *\/\r\n.membership-form-container { max-width: 800px; margin: 0 auto; background: #ffffff; border: 1px solid #EAE3D9; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.04); }\r\n.membership-hero-img { width: 100%; height: 300px; object-fit: cover; display: block; border-bottom: 4px solid #a46f2d;}\r\n.membership-form-header { padding: 40px 50px 20px 50px; border-bottom: 1px solid #EAE3D9; }\r\n.membership-form-title { font-family: 'Playfair Display', serif; font-size: 32px; color: #1a1a1a; margin: 0 0 10px 0; }\r\n.membership-verse { font-size: 15px; color: #666; line-height: 1.6; margin: 0; }\r\n.st-mary-membership-form { padding: 40px 50px; }\r\n.form-section-title { font-family: 'Playfair Display', serif; font-size: 20px; color: #8C2A2A; border-bottom: 2px solid #FAF7F2; padding-bottom: 10px; margin: 0 0 25px 0; }\r\n.form-row { display: flex; gap: 20px; margin-bottom: 20px; }\r\n.form-col { flex: 1; display: flex; flex-direction: column; }\r\n.form-col label { font-size: 14px; color: #555; font-weight: 600; margin-bottom: 8px; }\r\n\r\n.form-col input, .form-col textarea, .form-col select { padding: 9px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; font-family: 'Open Sans', sans-serif; color: #333; width: 100%; box-sizing: border-box; background-color: #fff; }\r\n.form-col input::placeholder { color: #aaa; }\r\n.form-col input:focus, .form-col textarea:focus, .form-col select:focus { outline: none; border-color: #6c8fa8; }\r\n.form-col textarea { resize: vertical; }\r\n\r\n.icon-input-wrapper { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; padding: 0 12px; background: #ffffff; transition: border-color 0.2s; }\r\n.icon-input-wrapper:focus-within { border-color: #6c8fa8; }\r\n.icon-input-wrapper .flag { font-size: 18px; margin-right: 8px; }\r\n.icon-input-wrapper input { border: none !important; padding: 12px 0 !important; width: 100%; box-shadow: none !important; }\r\n\r\n.radio-group { margin-bottom: 15px; background: #f9f9f9; padding: 20px; border-radius: 6px; border: 1px solid #eee; }\r\n.radio-question { display: block; font-size: 14px; color: #333; font-weight: 600; margin-bottom: 15px; line-height: 1.5; }\r\n.radio-option { display: block; margin-bottom: 10px; font-size: 15px; color: #555; cursor: pointer; }\r\n.radio-option input { margin-right: 10px; transform: scale(1.2); cursor: pointer; }\r\n\r\n\/* Add Child Button Styling *\/\r\n.add-child-action-btn { background-color: #fcfbf9; color: #2b5c77; border: 2px dashed #6c8fa8; padding: 14px 20px; border-radius: 4px; font-weight: 600; font-size: 15px; cursor: pointer; transition: all 0.2s ease; width: 100%; text-align: center; }\r\n.add-child-action-btn:hover { background-color: #eef5fa; border-color: #2b5c77; }\r\n.remove-child-btn:hover { text-decoration: underline; }\r\n\r\n.form-submit-btn { background-color: #2b5c77; color: #ffffff !important; border: none; padding: 14px 40px; font-size: 16px; font-weight: 600; border-radius: 30px; cursor: pointer; display: block; margin: 40px auto 0 auto; transition: background-color 0.2s ease; }\r\n.form-submit-btn:hover { background-color: #1a3a4d; }\r\n.form-submit-btn:disabled { background-color: #aebfd4; cursor: not-allowed; }\r\n.back-link-btn { display: block; background: none; border: none; color: #6c8fa8; font-weight: 600; font-size: 15px; margin: 25px auto 0 auto; cursor: pointer; text-decoration: none; padding: 5px; }\r\n.back-link-btn:hover { color: #53758c; text-decoration: underline; }\r\n\r\n@media (max-width: 768px) {\r\n    .membership-hero { flex-direction: column; align-items: flex-start; gap: 30px; }\r\n    .hero-left, .hero-right { width: 100%; }\r\n    .membership-title { font-size: 48px; }\r\n    .membership-intro { padding: 30px 20px; }\r\n    .membership-form-header, .st-mary-membership-form { padding: 30px 20px; }\r\n    .form-row { flex-direction: column; gap: 20px; }\r\n    .membership-hero-img { height: 200px; }\r\n}\r\n<\/style>\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","protected":false},"excerpt":{"rendered":"<p>Membership Membership &#8220;For just as each of us has one body with many members, and these members do not all [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6299","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Membership Form - St Mary EOTC Edmonton<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stmaryeotcedmonton.org\/am\/membership-form-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membership Form - St Mary EOTC Edmonton\" \/>\n<meta property=\"og:description\" content=\"Membership Membership &#8220;For just as each of us has one body with many members, and these members do not all [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stmaryeotcedmonton.org\/am\/membership-form-3\/\" \/>\n<meta property=\"og:site_name\" content=\"St Mary EOTC Edmonton\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-12T08:35:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stmaryeotcedmonton.org\/wp-content\/uploads\/2026\/03\/DSC_2149-scaled.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 \u12f0\u1242\u1243\u12ce\u127d\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/membership-form-3\\\/\",\"url\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/membership-form-3\\\/\",\"name\":\"Membership Form - St Mary EOTC Edmonton\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/am\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/membership-form-3\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/membership-form-3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/DSC_2149-scaled.jpg\",\"datePublished\":\"2026-03-21T18:37:08+00:00\",\"dateModified\":\"2026-06-12T08:35:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/membership-form-3\\\/#breadcrumb\"},\"inLanguage\":\"am\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/stmaryeotcedmonton.org\\\/membership-form-3\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"am\",\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/membership-form-3\\\/#primaryimage\",\"url\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/DSC_2149-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/DSC_2149-scaled.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/membership-form-3\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membership Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/am\\\/#website\",\"url\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/am\\\/\",\"name\":\"St Mary EOTC Edmonton\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/am\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/am\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"am\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/am\\\/#organization\",\"name\":\"St Mary EOTC Edmonton\",\"url\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/am\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"am\",\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/am\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/St-Mary-church-logo.png\",\"contentUrl\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/St-Mary-church-logo.png\",\"width\":2550,\"height\":2550,\"caption\":\"St Mary EOTC Edmonton\"},\"image\":{\"@id\":\"https:\\\/\\\/stmaryeotcedmonton.org\\\/am\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membership Form - St Mary EOTC Edmonton","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stmaryeotcedmonton.org\/am\/membership-form-3\/","og_locale":"en_US","og_type":"article","og_title":"Membership Form - St Mary EOTC Edmonton","og_description":"Membership Membership &#8220;For just as each of us has one body with many members, and these members do not all [&hellip;]","og_url":"https:\/\/stmaryeotcedmonton.org\/am\/membership-form-3\/","og_site_name":"St Mary EOTC Edmonton","article_modified_time":"2026-06-12T08:35:10+00:00","og_image":[{"url":"https:\/\/stmaryeotcedmonton.org\/wp-content\/uploads\/2026\/03\/DSC_2149-scaled.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 \u12f0\u1242\u1243\u12ce\u127d"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stmaryeotcedmonton.org\/membership-form-3\/","url":"https:\/\/stmaryeotcedmonton.org\/membership-form-3\/","name":"Membership Form - St Mary EOTC Edmonton","isPartOf":{"@id":"https:\/\/stmaryeotcedmonton.org\/am\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stmaryeotcedmonton.org\/membership-form-3\/#primaryimage"},"image":{"@id":"https:\/\/stmaryeotcedmonton.org\/membership-form-3\/#primaryimage"},"thumbnailUrl":"https:\/\/stmaryeotcedmonton.org\/wp-content\/uploads\/2026\/03\/DSC_2149-scaled.jpg","datePublished":"2026-03-21T18:37:08+00:00","dateModified":"2026-06-12T08:35:10+00:00","breadcrumb":{"@id":"https:\/\/stmaryeotcedmonton.org\/membership-form-3\/#breadcrumb"},"inLanguage":"am","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stmaryeotcedmonton.org\/membership-form-3\/"]}]},{"@type":"ImageObject","inLanguage":"am","@id":"https:\/\/stmaryeotcedmonton.org\/membership-form-3\/#primaryimage","url":"https:\/\/stmaryeotcedmonton.org\/wp-content\/uploads\/2026\/03\/DSC_2149-scaled.jpg","contentUrl":"https:\/\/stmaryeotcedmonton.org\/wp-content\/uploads\/2026\/03\/DSC_2149-scaled.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/stmaryeotcedmonton.org\/membership-form-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stmaryeotcedmonton.org\/"},{"@type":"ListItem","position":2,"name":"Membership Form"}]},{"@type":"WebSite","@id":"https:\/\/stmaryeotcedmonton.org\/am\/#website","url":"https:\/\/stmaryeotcedmonton.org\/am\/","name":"St Mary EOTC Edmonton","description":"","publisher":{"@id":"https:\/\/stmaryeotcedmonton.org\/am\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stmaryeotcedmonton.org\/am\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"am"},{"@type":"Organization","@id":"https:\/\/stmaryeotcedmonton.org\/am\/#organization","name":"St Mary EOTC Edmonton","url":"https:\/\/stmaryeotcedmonton.org\/am\/","logo":{"@type":"ImageObject","inLanguage":"am","@id":"https:\/\/stmaryeotcedmonton.org\/am\/#\/schema\/logo\/image\/","url":"https:\/\/stmaryeotcedmonton.org\/wp-content\/uploads\/2026\/03\/St-Mary-church-logo.png","contentUrl":"https:\/\/stmaryeotcedmonton.org\/wp-content\/uploads\/2026\/03\/St-Mary-church-logo.png","width":2550,"height":2550,"caption":"St Mary EOTC Edmonton"},"image":{"@id":"https:\/\/stmaryeotcedmonton.org\/am\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/stmaryeotcedmonton.org\/am\/wp-json\/wp\/v2\/pages\/6299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stmaryeotcedmonton.org\/am\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stmaryeotcedmonton.org\/am\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stmaryeotcedmonton.org\/am\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/stmaryeotcedmonton.org\/am\/wp-json\/wp\/v2\/comments?post=6299"}],"version-history":[{"count":50,"href":"https:\/\/stmaryeotcedmonton.org\/am\/wp-json\/wp\/v2\/pages\/6299\/revisions"}],"predecessor-version":[{"id":6875,"href":"https:\/\/stmaryeotcedmonton.org\/am\/wp-json\/wp\/v2\/pages\/6299\/revisions\/6875"}],"wp:attachment":[{"href":"https:\/\/stmaryeotcedmonton.org\/am\/wp-json\/wp\/v2\/media?parent=6299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}