{"id":16925,"date":"2025-10-01T11:48:48","date_gmt":"2025-10-01T09:48:48","guid":{"rendered":"https:\/\/v2.frank-pen.de\/?page_id=16925"},"modified":"2025-10-13T09:39:17","modified_gmt":"2025-10-13T07:39:17","slug":"newsletter-subscription","status":"publish","type":"page","link":"https:\/\/pen.eu\/es\/newsletter-subscription\/","title":{"rendered":"Newsletter Subscription"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"16925\" class=\"elementor elementor-16925\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ace5252 e-flex e-con-boxed e-con e-parent\" data-id=\"ace5252\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t\t<div class=\"e-con-inner\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-ed0b71c elementor-widget__width-auto elementor-widget elementor-widget-porto_hb_logo\" data-id=\"ed0b71c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"porto_hb_logo.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\t<div class=\"logo\">\r\n\t<a aria-label=\"Site Logo\" href=\"https:\/\/pen.eu\/es\/\" title=\"PEN.EU - Kugelschreiber bedrucken mit Logo | pen.eu\"  rel=\"home\">\r\n\t\t<img decoding=\"async\" class=\"img-responsive standard-logo retina-logo\" width=\"140\" src=\"\/\/pen.eu\/wp-content\/uploads\/2025\/03\/image.png\" alt=\"PEN.EU\" \/>\t<\/a>\r\n\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e949d8b elementor-widget elementor-widget-heading\" data-id=\"e949d8b\" 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<h2 class=\"elementor-heading-title elementor-size-default\"><b>Vielen Dank f\u00fcr die <br>Aktivierung Ihres Kundenkontos!<\/b><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44bfb1d elementor-widget elementor-widget-text-editor\" data-id=\"44bfb1d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\">Schon bald k\u00f6nnen Sie wertvolle PenPoints sammeln und tolle Vorteile genie\u00dfen.<\/p><p style=\"text-align: center;\">\u00a0<\/p><p style=\"text-align: center;\">Abonnieren Sie jetzt die E-Mails von PEN.EU und<\/p><p style=\"text-align: center;\">sichern Sie sich exklusive und vor allem pers\u00f6nliche Angebote, Rabattcodes<\/p><p style=\"text-align: center;\">und besondere Coupons f\u00fcr Mehrfach- und Sonderaktionen unserer PenPoints.<\/p><p style=\"text-align: center;\">\u00a0<\/p><p style=\"text-align: center;\">Sie k\u00f6nnen die E-Mails selbstverst\u00e4ndlich jederzeit \u00fcber<\/p><p style=\"text-align: center;\">den Abmeldelink in jeder E-Mail abbestellen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87f7789 elementor-widget elementor-widget-html\" data-id=\"87f7789\" 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<div id=\"message\" class=\"message\"><\/div>\r\n\r\n<form id=\"newsletter-form\">\r\n    <div class=\"newsletter-options\">\r\n        <div class=\"option-wrapper\" data-value=\"yes\">\r\n            <input type=\"radio\" name=\"newsletter\" value=\"yes\" id=\"option-yes\" required>\r\n            <label for=\"option-yes\">Ja, ich will keine Aktion verpassen.<\/label>\r\n        <\/div>\r\n        \r\n        <div class=\"option-wrapper\" data-value=\"no\">\r\n            <input type=\"radio\" name=\"newsletter\" value=\"no\" id=\"option-no\" required>\r\n            <label for=\"option-no\">Nein, ich habe kein Interesse.\r\n<\/label>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <button type=\"submit\" class=\"submit-btn\">Weiter<\/button>\r\n<\/form>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n            const form = document.getElementById('newsletter-form');\r\n            const optionWrappers = document.querySelectorAll('.option-wrapper');\r\n            const messageDiv = document.getElementById('message');\r\n            const radioButtons = document.querySelectorAll('input[name=\"newsletter\"]');\r\n            \r\n            \/\/ Get current user email (WordPress specific)\r\n            fetch('\/wp-json\/wp\/v2\/users\/me', {\r\n                credentials: 'same-origin'\r\n            })\r\n            .then(response => response.json())\r\n            .then(data => {\r\n                if (data.email) {\r\n                    document.getElementById('user-email').textContent = data.email;\r\n                }\r\n            })\r\n            .catch(() => {\r\n                \/\/ Fallback if REST API fails\r\n                document.getElementById('user-email').textContent = 'Ihre E-Mail';\r\n            });\r\n            \r\n            \/\/ Add click handler to option wrappers\r\n            optionWrappers.forEach(wrapper => {\r\n                wrapper.addEventListener('click', function() {\r\n                    const radio = this.querySelector('input[type=\"radio\"]');\r\n                    radio.checked = true;\r\n                    \r\n                    \/\/ Remove selected class from all\r\n                    optionWrappers.forEach(w => w.classList.remove('selected'));\r\n                    \/\/ Add selected class to clicked\r\n                    this.classList.add('selected');\r\n                });\r\n            });\r\n            \r\n            \/\/ Handle radio button change\r\n            radioButtons.forEach(radio => {\r\n                radio.addEventListener('change', function() {\r\n                    optionWrappers.forEach(w => w.classList.remove('selected'));\r\n                    this.closest('.option-wrapper').classList.add('selected');\r\n                });\r\n            });\r\n            \r\n            form.addEventListener('submit', function(e) {\r\n                e.preventDefault();\r\n                \r\n                const selectedOption = document.querySelector('input[name=\"newsletter\"]:checked');\r\n                if (!selectedOption) {\r\n                    showMessage('Bitte w\u00e4hlen Sie eine Option', 'error');\r\n                    return;\r\n                }\r\n                \r\n                const submitBtn = form.querySelector('.submit-btn');\r\n                submitBtn.disabled = true;\r\n                submitBtn.textContent = 'Wird gespeichert...';\r\n                \r\n                \/\/ Get WordPress AJAX URL\r\n                const ajaxUrl = newsletterData.ajaxUrl;\r\n                \r\n                \/\/ Send AJAX request\r\n                fetch(ajaxUrl, {\r\n                    method: 'POST',\r\n                    headers: {\r\n                        'Content-Type': 'application\/x-www-form-urlencoded',\r\n                    },\r\n                    credentials: 'same-origin',\r\n                    body: new URLSearchParams({\r\n                        'action': 'save_newsletter_preference',\r\n                        'newsletter_choice': selectedOption.value,\r\n                        'nonce': newsletterData.nonce\r\n                    })\r\n\r\n                })\r\n                .then(response => response.json())\r\n                .then(data => {\r\n                    if (data.success) {\r\n                        showMessage('Ihre Einstellung wurde gespeichert!', 'success');\r\n                        setTimeout(function() {\r\n                            \/\/ Redirect to My Account page\r\n                            window.location.href = '\/my-account\/';\r\n                        }, 1500);\r\n                    } else {\r\n                        showMessage('Fehler beim Speichern. Bitte versuchen Sie es erneut.', 'error');\r\n                        submitBtn.disabled = false;\r\n                        submitBtn.textContent = 'Weiter';\r\n                    }\r\n                })\r\n                .catch(error => {\r\n                    console.error('Error:', error);\r\n                    showMessage('Fehler beim Speichern. Bitte versuchen Sie es erneut.', 'error');\r\n                    submitBtn.disabled = false;\r\n                    submitBtn.textContent = 'Weiter';\r\n                });\r\n            });\r\n            \r\n            function showMessage(text, type) {\r\n                messageDiv.textContent = text;\r\n                messageDiv.className = 'message ' + type;\r\n                messageDiv.style.display = 'block';\r\n                \r\n                \/\/ Auto-hide error messages after 5 seconds\r\n                if (type === 'error') {\r\n                    setTimeout(() => {\r\n                        messageDiv.style.display = 'none';\r\n                    }, 5000);\r\n                }\r\n            }\r\n        });\r\n\r\n<\/script>\r\n\r\n<style>\r\n* {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        body {\r\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;\r\n            background-color: #f5f5f5;\r\n            min-height: 100vh;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 20px;\r\n        }\r\n        \r\n        .newsletter-container {\r\n            max-width: 600px;\r\n            width: 100%;\r\n            padding: 50px 40px;\r\n            background: white;\r\n            border-radius: 8px;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n            text-align: center;\r\n        }\r\n        \r\n        .logo {\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .logo img {\r\n            max-width: 200px;\r\n            height: auto;\r\n        }\r\n        \r\n        h1 {\r\n            font-size: 28px;\r\n            font-weight: 600;\r\n            color: #333;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .email-info {\r\n            font-size: 16px;\r\n            color: #666;\r\n            margin-bottom: 15px;\r\n            line-height: 1.6;\r\n        }\r\n        \r\n        .email-info strong {\r\n            color: #333;\r\n        }\r\n        \r\n        .description {\r\n            font-size: 15px;\r\n            color: #666;\r\n            margin-bottom: 35px;\r\n            line-height: 1.6;\r\n        }\r\n        \r\n        .newsletter-options {\r\n            margin: 30px 0;\r\n            text-align: left;\r\n        }\r\n        \r\n        .option-wrapper {\r\n            margin: 15px 0;\r\n            padding: 18px 20px;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n        }\r\n        \r\n        .option-wrapper:hover {\r\n            border-color: #7c6fb0;\r\n            background-color: #f9f8fc;\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 4px 8px rgba(124, 111, 176, 0.1);\r\n        }\r\n        \r\n        .option-wrapper.selected {\r\n            border-color: #7c6fb0;\r\n            background-color: #f0edf7;\r\n        }\r\n        \r\n        .option-wrapper input[type=\"radio\"] {\r\n            position: absolute;\r\n            opacity: 0;\r\n            cursor: pointer;\r\n        }\r\n        \r\n        .option-wrapper label {\r\n            font-size: 16px;\r\n            color: #333;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            padding-left: 35px;\r\n            position: relative;\r\n            user-select: none;\r\n        }\r\n        \r\n        \/* Custom Radio Button *\/\r\n        .option-wrapper label::before {\r\n            content: '';\r\n            position: absolute;\r\n            left: 0;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            width: 22px;\r\n            height: 22px;\r\n            border: 2px solid #d0d0d0;\r\n            border-radius: 50%;\r\n            background: white;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .option-wrapper.selected label::before {\r\n            border-color: #7c6fb0;\r\n            border-width: 7px;\r\n        }\r\n        \r\n        .submit-btn {\r\n            \/*background-color: #7c6fb0;*\/\r\n            background-color: black;\r\n            color: white;\r\n            border: none;\r\n            padding: 16px 50px;\r\n            font-size: 17px;\r\n            font-weight: 600;\r\n            border-radius: 50px;\r\n            cursor: pointer;\r\n            margin-top: 25px;\r\n            transition: all 0.3s ease;\r\n            width: 100%;\r\n            \/*max-width: 350px;*\/\r\n            box-shadow: 0 4px 12px rgba(124, 111, 176, 0.3);\r\n        }\r\n        \r\n        .submit-btn:hover {\r\n            \/*background-color: #6a5d98;*\/\r\n            background-color: #292828;\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 16px rgba(124, 111, 176, 0.4);\r\n        }\r\n        \r\n        .submit-btn:disabled {\r\n            background-color: #ccc;\r\n            cursor: not-allowed;\r\n            transform: none;\r\n            box-shadow: none;\r\n        }\r\n        \r\n        .message {\r\n            padding: 14px 20px;\r\n            margin: 20px 0;\r\n            border-radius: 6px;\r\n            display: none;\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n        }\r\n        \r\n        .message.success {\r\n            background-color: #d4edda;\r\n            color: #155724;\r\n            border: 1px solid #c3e6cb;\r\n        }\r\n        \r\n        .message.error {\r\n            background-color: #f8d7da;\r\n            color: #721c24;\r\n            border: 1px solid #f5c6cb;\r\n        }\r\n        \r\n        @media (max-width: 600px) {\r\n            .newsletter-container {\r\n                padding: 35px 25px;\r\n            }\r\n            \r\n            h1 {\r\n                font-size: 24px;\r\n            }\r\n            \r\n            .email-info, .description {\r\n                font-size: 14px;\r\n            }\r\n            \r\n            .option-wrapper {\r\n                padding: 15px 18px;\r\n            }\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>Vielen Dank f\u00fcr die Aktivierung Ihres Kundenkontos! Schon bald k\u00f6nnen Sie wertvolle PenPoints sammeln und tolle Vorteile genie\u00dfen. \u00a0 Abonnieren Sie jetzt die E-Mails von PEN.EU und sichern Sie sich exklusive und vor allem pers\u00f6nliche Angebote, Rabattcodes und besondere Coupons f\u00fcr Mehrfach- und Sonderaktionen unserer PenPoints. \u00a0 Sie k\u00f6nnen die E-Mails selbstverst\u00e4ndlich jederzeit \u00fcber den [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-16925","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Newsletter Subscription - PEN.EU<\/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:\/\/pen.eu\/es\/newsletter-subscription\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Newsletter Subscription - PEN.EU\" \/>\n<meta property=\"og:description\" content=\"Vielen Dank f\u00fcr die Aktivierung Ihres Kundenkontos! Schon bald k\u00f6nnen Sie wertvolle PenPoints sammeln und tolle Vorteile genie\u00dfen. \u00a0 Abonnieren Sie jetzt die E-Mails von PEN.EU und sichern Sie sich exklusive und vor allem pers\u00f6nliche Angebote, Rabattcodes und besondere Coupons f\u00fcr Mehrfach- und Sonderaktionen unserer PenPoints. \u00a0 Sie k\u00f6nnen die E-Mails selbstverst\u00e4ndlich jederzeit \u00fcber den [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pen.eu\/es\/newsletter-subscription\/\" \/>\n<meta property=\"og:site_name\" content=\"PEN.EU\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-13T07:39:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pen.eu\\\/newsletter-subscription\\\/\",\"url\":\"https:\\\/\\\/pen.eu\\\/newsletter-subscription\\\/\",\"name\":\"Newsletter Subscription - PEN.EU\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pen.eu\\\/#website\"},\"datePublished\":\"2025-10-01T09:48:48+00:00\",\"dateModified\":\"2025-10-13T07:39:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pen.eu\\\/newsletter-subscription\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pen.eu\\\/newsletter-subscription\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pen.eu\\\/newsletter-subscription\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pen.eu\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Newsletter Subscription\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pen.eu\\\/#website\",\"url\":\"https:\\\/\\\/pen.eu\\\/\",\"name\":\"PEN.EU\",\"description\":\"Kugelschreiber bedrucken mit Logo | pen.eu\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pen.eu\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Newsletter Subscription - PEN.EU","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:\/\/pen.eu\/es\/newsletter-subscription\/","og_locale":"es_ES","og_type":"article","og_title":"Newsletter Subscription - PEN.EU","og_description":"Vielen Dank f\u00fcr die Aktivierung Ihres Kundenkontos! Schon bald k\u00f6nnen Sie wertvolle PenPoints sammeln und tolle Vorteile genie\u00dfen. \u00a0 Abonnieren Sie jetzt die E-Mails von PEN.EU und sichern Sie sich exklusive und vor allem pers\u00f6nliche Angebote, Rabattcodes und besondere Coupons f\u00fcr Mehrfach- und Sonderaktionen unserer PenPoints. \u00a0 Sie k\u00f6nnen die E-Mails selbstverst\u00e4ndlich jederzeit \u00fcber den [&hellip;]","og_url":"https:\/\/pen.eu\/es\/newsletter-subscription\/","og_site_name":"PEN.EU","article_modified_time":"2025-10-13T07:39:17+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pen.eu\/newsletter-subscription\/","url":"https:\/\/pen.eu\/newsletter-subscription\/","name":"Newsletter Subscription - PEN.EU","isPartOf":{"@id":"https:\/\/pen.eu\/#website"},"datePublished":"2025-10-01T09:48:48+00:00","dateModified":"2025-10-13T07:39:17+00:00","breadcrumb":{"@id":"https:\/\/pen.eu\/newsletter-subscription\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pen.eu\/newsletter-subscription\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pen.eu\/newsletter-subscription\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pen.eu\/"},{"@type":"ListItem","position":2,"name":"Newsletter Subscription"}]},{"@type":"WebSite","@id":"https:\/\/pen.eu\/#website","url":"https:\/\/pen.eu\/","name":"PEN.EU","description":"Kugelschreiber bedrucken mit Logo | pen.eu","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pen.eu\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"}]}},"_links":{"self":[{"href":"https:\/\/pen.eu\/es\/wp-json\/wp\/v2\/pages\/16925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pen.eu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pen.eu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pen.eu\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pen.eu\/es\/wp-json\/wp\/v2\/comments?post=16925"}],"version-history":[{"count":17,"href":"https:\/\/pen.eu\/es\/wp-json\/wp\/v2\/pages\/16925\/revisions"}],"predecessor-version":[{"id":17109,"href":"https:\/\/pen.eu\/es\/wp-json\/wp\/v2\/pages\/16925\/revisions\/17109"}],"wp:attachment":[{"href":"https:\/\/pen.eu\/es\/wp-json\/wp\/v2\/media?parent=16925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}