{"id":185,"date":"2026-04-15T20:37:47","date_gmt":"2026-04-15T18:37:47","guid":{"rendered":"https:\/\/landfrauen-kollmarmarsch.de\/start\/?page_id=185"},"modified":"2026-04-15T20:37:48","modified_gmt":"2026-04-15T18:37:48","slug":"beitrittsformular","status":"publish","type":"page","link":"https:\/\/landfrauen-kollmarmarsch.de\/start\/beitrittsformular\/","title":{"rendered":"Beitrittsformular"},"content":{"rendered":"    <div class=\"w3-container spbf-form-wrapper\" style=\"max-width:800px; margin:0 auto;\">\n        \n        <!-- Haupt-Hinweistext (anpassbar) -->\n        <div class=\"hinweis\">\n            <h3>Mitglied werden<\/h3>            <p>Ich m\u00f6chte Mitglied in den <strong>LandFrauen Kollmarmarsch<\/strong> werden und erkenne die Satzung und Ordnungen in den aktuellen Fassungen an.<\/p><p>Bitte f\u00fcllen Sie alle Pflichtfelder (*) aus. Ihre Daten werden verschl\u00fcsselt \u00fcbertragen und gem\u00e4\u00df DSGVO verarbeitet. Nach dem Absenden erhalten Sie eine Best\u00e4tigungs-E-Mail mit Ihren Daten als PDF-Anhang.<\/p>        <\/div>\n        \n        <form class=\"w3-container\" id=\"beitrittsformular\" method=\"POST\" enctype=\"multipart\/form-data\">\n            <input type=\"hidden\" id=\"spbf_nonce\" name=\"spbf_nonce\" value=\"7497b991fd\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/start\/wp-json\/wp\/v2\/pages\/185\" \/>            \n            <h3>Pers\u00f6nliche Daten<\/h3>\n            \n            <div class=\"form-group\">\n                <label class=\"required\">Vorname:<\/label>\n                <input type=\"text\" name=\"vorname\" class=\"w3-input w3-border\" autocapitalize=\"word\" required>\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label class=\"required\">Nachname:<\/label>\n                <input type=\"text\" name=\"nachname\" class=\"w3-input w3-border\" autocapitalize=\"word\" required>\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label class=\"required\">Stra\u00dfe & Hausnummer:<\/label>\n                <input type=\"text\" name=\"strasse\" class=\"w3-input w3-border\" autocapitalize=\"word\" required>\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label class=\"required\">Postleitzahl:<\/label>\n                <input type=\"text\" name=\"plz\" class=\"w3-input w3-border\"  pattern=\"[0-9]{5}\" maxlength=\"5\" inputmode=\"numeric\" required>\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label class=\"required\">Ort:<\/label>\n                <input type=\"text\" name=\"ort\" class=\"w3-input w3-border\" autocapitalize=\"word\" required>\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label class=\"required\">Geburtsdatum:<\/label>\n                <input type=\"date\" name=\"geburtsdatum\" class=\"w3-input w3-border\" required>\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label class=\"required\">Telefonnummer:<\/label>\n                <input type=\"tel\" name=\"telefon\" class=\"w3-input w3-border\" required>\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label class=\"required\">E-Mail Adresse:<\/label>\n                <input type=\"email\" name=\"email\" class=\"w3-input w3-border\" required>\n            <\/div>\n\t\t\t\n            \n            <h3 style=\"margin-top:30px;\">Bankverbindung<\/h3>\n            \n            <div class=\"form-group\">\n\t\t    <label class=\"required\">IBAN (DE + 20 Stellen):<\/label>\n\t\t    <input type=\"text\" name=\"iban\" id=\"iban\" class=\"w3-input w3-border\" pattern=\"DE[0-9]{20}\" maxlength=\"22\" autocapitalize=\"characters\" required>\n\t\t    <span id=\"iban-error\" class=\"error-message\">Bitte geben Sie eine g\u00fcltige IBAN ein (DE + 20 Ziffern)<\/span>\n\t\t    <span id=\"iban-check-error\" class=\"error-message\" style=\"display: none;\">Die Pr\u00fcfziffer der IBAN ist ung\u00fcltig<\/span>\n\t\t<\/div>\n            \n            <div class=\"form-group\">\n                <label>Kontoinhaber (falls abweichend):<\/label>\n                <input type=\"text\" name=\"kontoinhaber\" class=\"w3-input w3-border\">\n                <small>Lassen Sie dieses Feld leer, wenn der Kontoinhaber mit dem Antragsteller \u00fcbereinstimmt<\/small>\n            <\/div>\n\t\t\t<h3 style=\"margin-top:30px;\">Mitgliedsbeitrag<\/h3>\n\t\t\t<div class=\"form-group\">\n                                        <div class=\"form-group\">\n                            <label class=\"required\">J\u00e4hrlicher Mitgliedsbeitrag (\u20ac):<\/label>\n                            <p><strong>35 \u20ac<\/strong> pro Jahr<\/p>\n                            <input type=\"hidden\" name=\"beitrag\" value=\"35\">\n\n                        <\/div>\n                        \t\t\t<\/div>\n                        \n            <!-- Hinweistext vor Unterschrift (anpassbar) -->\n\t\t\t\n            <div class=\"form-footer-hinweis\">\n                \n                    <p>\n                        SEPA-Lastschriftmandat<br>\n                        Gl\u00e4ubiger-ID: <strong>DE63ZZZ00002464575<\/strong><br>\n                        Mandatsreferenz: wird separat vergeben\n                    <\/p>\n                    <p>\n                        &nbsp;\n                    <\/p>\n                    <p>\n                        Hiermit erm\u00e4chtige ich die <strong>LandFrauen Kollmarmarsch<\/strong> den j\u00e4hrlichen Mitgliedsbeitrag von meinem angegebenen Konto einzuziehen. Die Einzugserm\u00e4chtigung gilt bis zu ihrem Widerruf. Der Mitgliedsbeitrag wird j\u00e4hrlich im April eingezogen. Zugleich weise ich mein Kreditinstitut an, die gezogenen Lastschriften einzul\u00f6sen.\n                    <\/p>\n                    <p>\n                    <\/p>\n                    <p>\n                        Ich kann innerhalb von acht Wochen, beginnend mit dem Belastungsdatum, die Erstattung des belasteten Betrages verlangen. Es gelten dabei die mit meinem Kreditinstitut vereinbarten Bedingungen. Ich willige ein, dass R\u00fccklastschriften bei Kontounterdeckung zu meinen Lasten gehen.\n                    <\/p>\n                    <p>\n                    <\/p>\n                    <p>\n                        Mit der Speicherung, \u00dcbermittlung und Verarbeitung meiner personenbezogenen Daten f\u00fcr Vereinszwecke gem\u00e4\u00df den Bestimmungen des Bundesdatenschutzgesetzes (BDSG) und der Datenschutzgrundverordnung (DSGVO) bin ich einverstanden. Meine Daten werden nur so lange gespeichert, wie die gesetzlichen Bestimmungen dies erlauben. Ich habe jederzeit die M\u00f6glichkeit, vom Verein Auskunft \u00fcber meine Daten zu erhalten. Meine Daten werden nach meinem Austritt aus dem Verein gel\u00f6scht.\n                    <\/p>\n                    <p>\n                    <\/p>\n                    <p>\n                        F\u00fcr die Inanspruchnahme weiterer Betroffenenrechte erreiche ich den Verein unter <strong>landfrauen-kollmarmarsch@web.de<\/strong>\n                    <\/p>\n                    <p>Mit Ihrer Unterschrift best\u00e4tigen Sie die Richtigkeit der angegebenen Daten und erkl\u00e4ren Ihren Beitritt. Die Vereinsbeitr\u00e4ge werden per Lastschrift eingezogen.<\/p>                <p>Mit Ihrer Unterschrift best\u00e4tigen Sie die Richtigkeit der angegebenen Daten und erkl\u00e4ren Ihren Beitritt. Die Vereinsbeitr\u00e4ge werden per Lastschrift eingezogen.<\/p>            <\/div>\n            \n            <div class=\"form-group\">\n                <div id=\"signature-pad\" class=\"m-signature-pad\">\n\t\t\t\t\t<h3 style=\"margin-top:30px;\">Unterschrift<\/h3>\n                    <div class=\"m-signature-pad--body\">\n                        <canvas><\/canvas>\n                        <input type=\"hidden\" name=\"signature\" id=\"signature\" value=\"\">\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"form-group\">\n                <button type=\"button\" class=\"w3-btn w3-black\" onclick=\"spbfSignaturePad.clear();\">L\u00f6schen<\/button>\n                <button type=\"submit\" class=\"w3-btn w3-blue-grey\">Jetzt Mitglied werden<\/button>\n            <\/div>\n            \n            <div id=\"spbf-message\" style=\"display:none;\"><\/div>\n        <\/form>\n    <\/div>\n    \n    <script type=\"text\/javascript\">\n    var spbfSignaturePad;\n    \n    document.addEventListener('DOMContentLoaded', function() {\n        var canvas = document.querySelector('#signature-pad canvas');\n        if (canvas) {\n            spbfSignaturePad = new SignaturePad(canvas);\n            spbfSignaturePad.minWidth = 1;\n            spbfSignaturePad.maxWidth = 5;\n            spbfSignaturePad.penColor = \"#000000\";\n            spbfSignaturePad.backgroundColor = \"#FFFFFF\";\n            \n            setTimeout(spbfResizeCanvas, 100);\n        }\n        \n        \/\/ Formular-Submit mit AJAX\n        document.getElementById('beitrittsformular').addEventListener('submit', spbfSubmitForm);\n    });\n    \n    window.addEventListener('resize', spbfResizeCanvas);\n    \n    function spbfResizeCanvas() {\n        var canvas = document.querySelector('#signature-pad canvas');\n        if (!canvas || !spbfSignaturePad) return;\n        \n        var oldContent = spbfSignaturePad.toData();\n        var ratio = Math.max(window.devicePixelRatio || 1, 1);\n        canvas.width = canvas.offsetWidth * ratio;\n        canvas.height = canvas.offsetHeight * ratio;\n        canvas.getContext(\"2d\").scale(ratio, ratio);\n        spbfSignaturePad.clear();\n        if (oldContent && oldContent.length > 0) {\n            spbfSignaturePad.fromData(oldContent);\n        }\n    }\n    \n    function spbfSubmitForm(e) {\n        e.preventDefault();\n        \n        \/\/ Pr\u00fcfen ob unterschrieben wurde\n        if (!spbfSignaturePad || spbfSignaturePad.isEmpty()) {\n            alert('Bitte unterschreiben Sie das Formular!');\n            return;\n        }\n        \n        \/\/ IBAN-Validierung\n        var iban = document.querySelector('input[name=\"iban\"]').value;\n        if (!iban.match(\/^DE[0-9]{20}$\/)) {\n            alert('Bitte geben Sie eine g\u00fcltige IBAN ein (DE + 20 Ziffern)');\n            return;\n        }\n        \n        \/\/ PLZ-Validierung\n        var plz = document.querySelector('input[name=\"plz\"]').value;\n        if (!plz.match(\/^[0-9]{5}$\/)) {\n            alert('Bitte geben Sie eine g\u00fcltige 5-stellige Postleitzahl ein');\n            return;\n        }\n        \n        \/\/ Formulardaten sammeln\n        var formData = new FormData(this);\n        formData.append('signature', spbfSignaturePad.toDataURL());\n        formData.append('action', 'spbf_submit_form');\n        formData.append('nonce', spbf_ajax.nonce);\n        \n        \/\/ Submit-Button deaktivieren\n        var submitBtn = document.querySelector('button[type=\"submit\"]');\n        submitBtn.disabled = true;\n        submitBtn.textContent = 'Wird gesendet...';\n        \n        \/\/ AJAX-Anfrage\n        fetch(spbf_ajax.ajax_url, {\n            method: 'POST',\n            body: formData\n        })\n        .then(response => response.json())\n        .then(data => {\n            var messageDiv = document.getElementById('spbf-message');\n            messageDiv.style.display = 'block';\n            \n            if (data.success) {\n                messageDiv.className = 'w3-container w3-green w3-padding';\n                messageDiv.innerHTML = '<h4>Erfolg!<\/h4><p>' + data.data + '<\/p>';\n                document.getElementById('beitrittsformular').reset();\n                spbfSignaturePad.clear();\n            } else {\n                messageDiv.className = 'w3-container w3-red w3-padding';\n                messageDiv.innerHTML = '<h4>Fehler!<\/h4><p>' + data.data + '<\/p>';\n            }\n            \n            submitBtn.disabled = false;\n            submitBtn.textContent = 'Beitritt absenden';\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es sp\u00e4ter erneut.');\n            submitBtn.disabled = false;\n            submitBtn.textContent = 'Beitritt absenden';\n        });\n    }\n    \n    function validateGermanIBAN(iban) {\n    \/\/ Entferne Leerzeichen und konvertiere zu Gro\u00dfbuchstaben\n    iban = iban.replace(\/\\s\/g, '').toUpperCase();\n    \n    \/\/ Grundformat pr\u00fcfen (DE + 20 Ziffern)\n    const ibanPattern = \/^DE[0-9]{20}$\/;\n    if (!ibanPattern.test(iban)) {\n        return false;\n    }\n    \n    \/\/ IBAN f\u00fcr Pr\u00fcfzifferberechnung vorbereiten\n    \/\/ 1. Die ersten 4 Zeichen (L\u00e4ndercode + Pr\u00fcfziffer) ans Ende setzen\n    const rearranged = iban.substring(4) + iban.substring(0, 4);\n    \n    \/\/ 2. Buchstaben in Zahlen umwandeln (A=10, B=11, ..., Z=35)\n    let numericString = '';\n    for (let i = 0; i < rearranged.length; i++) {\n        const char = rearranged.charAt(i);\n        if (isNaN(char)) {\n            \/\/ Buchstabe in Zahl umwandeln\n            numericString += (char.charCodeAt(0) - 55).toString();\n        } else {\n            numericString += char;\n        }\n    }\n    \n    \/\/ 3. Gro\u00dfe Zahl modulo 97 berechnen\n    let remainder = 0;\n    for (let i = 0; i < numericString.length; i++) {\n        remainder = (remainder * 10 + parseInt(numericString.charAt(i), 10)) % 97;\n    }\n    \n    \/\/ 4. Pr\u00fcfen ob remainder = 1 (g\u00fcltige IBAN)\n    return remainder === 1;\n}\n\n\/\/ Event-Listener f\u00fcr das Input-Feld\ndocument.addEventListener('DOMContentLoaded', function() {\n    const ibanInput = document.getElementById('iban');\n    const formatError = document.getElementById('iban-error');\n    const checkError = document.getElementById('iban-check-error');\n    \n    ibanInput.addEventListener('input', function(e) {\n        \/\/ Automatisch in Gro\u00dfbuchstaben umwandeln\n        this.value = this.value.toUpperCase();\n        \n        \/\/ Fehlermeldungen zur\u00fccksetzen\n        formatError.style.display = 'none';\n        checkError.style.display = 'none';\n        \n        const iban = this.value;\n        \n        \/\/ Nur pr\u00fcfen, wenn das Feld nicht leer ist\n        if (iban.length > 0) {\n            \/\/ Zuerst das Format pr\u00fcfen (\u00fcber das pattern-Attribut)\n            const pattern = new RegExp(this.pattern);\n            if (!pattern.test(iban)) {\n                formatError.style.display = 'block';\n                return;\n            }\n            \n            \/\/ Dann die Pr\u00fcfziffer validieren\n            if (!validateGermanIBAN(iban)) {\n                checkError.style.display = 'block';\n            }\n        }\n    });\n    \n    \/\/ Optional: Formular-Validierung beim Absenden\n    const form = ibanInput.closest('form');\n    if (form) {\n        form.addEventListener('submit', function(e) {\n            const iban = ibanInput.value;\n            if (iban && !validateGermanIBAN(iban)) {\n                e.preventDefault();\n                checkError.style.display = 'block';\n            }\n        });\n    }\n});\n    <\/script>\n    \n    \n\n\n\n<p><\/p>\n","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-185","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/landfrauen-kollmarmarsch.de\/start\/wp-json\/wp\/v2\/pages\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landfrauen-kollmarmarsch.de\/start\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landfrauen-kollmarmarsch.de\/start\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landfrauen-kollmarmarsch.de\/start\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/landfrauen-kollmarmarsch.de\/start\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":1,"href":"https:\/\/landfrauen-kollmarmarsch.de\/start\/wp-json\/wp\/v2\/pages\/185\/revisions"}],"predecessor-version":[{"id":186,"href":"https:\/\/landfrauen-kollmarmarsch.de\/start\/wp-json\/wp\/v2\/pages\/185\/revisions\/186"}],"wp:attachment":[{"href":"https:\/\/landfrauen-kollmarmarsch.de\/start\/wp-json\/wp\/v2\/media?parent=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}