{"id":3937,"date":"2025-04-21T17:26:38","date_gmt":"2025-04-21T17:26:38","guid":{"rendered":"https:\/\/peptideformulations.com\/?page_id=3937"},"modified":"2025-04-21T17:26:38","modified_gmt":"2025-04-21T17:26:38","slug":"refer-friend","status":"publish","type":"page","link":"https:\/\/peptidogen.mx\/en_us\/refer-friend\/","title":{"rendered":"Refer_Friends"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3937\" class=\"elementor elementor-3937\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3178d35 e-flex e-con-boxed e-con e-parent\" data-id=\"3178d35\" 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-52ca845 elementor-widget elementor-widget-html\" data-id=\"52ca845\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Awesome Website with Referral Section<\/title>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito+Sans:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        body {\r\n            font-family: 'Nunito Sans', sans-serif;\r\n            margin: 0;\r\n            background-color: #f0f4f8;\r\n            color: #37474f;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        .page-header {\r\n            background-color: #1e88e5;\r\n            color: #fff;\r\n            padding: 40px 20px;\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n        }\r\n\r\n        .page-header h1 {\r\n            font-size: 2.5em;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .page-header p {\r\n            font-size: 1.1em;\r\n            opacity: 0.8;\r\n        }\r\n\r\n        .main-content {\r\n            max-width: 1000px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n        }\r\n\r\n        \/* Styles for the referral section *\/\r\n        .referral-section {\r\n            background-color: #fff;\r\n            padding: 40px;\r\n            border-radius: 12px;\r\n            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\r\n            text-align: center;\r\n        }\r\n\r\n        .referral-section h2 {\r\n            color: #1e88e5;\r\n            margin-top: 0;\r\n            margin-bottom: 30px;\r\n            font-size: 2.2em;\r\n            animation: pulse 2s infinite alternate;\r\n        }\r\n\r\n        .referral-section p {\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .referral-form {\r\n            display: grid;\r\n            grid-template-columns: 1fr;\r\n            gap: 20px;\r\n            margin-top: 20px;\r\n        }\r\n\r\n        .form-group {\r\n            display: flex;\r\n            flex-direction: column;\r\n            text-align: left;\r\n        }\r\n\r\n        .form-group label {\r\n            font-weight: 700;\r\n            color: #546e7a;\r\n            margin-bottom: 8px;\r\n            display: block;\r\n        }\r\n\r\n        .form-group input[type=\"text\"],\r\n        .form-group input[type=\"email\"],\r\n        .form-group input[type=\"tel\"] {\r\n            padding: 14px;\r\n            border: 1px solid #ced4da;\r\n            border-radius: 8px;\r\n            font-size: 16px;\r\n            color: #37474f;\r\n            transition: border-color 0.3s ease;\r\n        }\r\n\r\n        .form-group input[type=\"text\"]:focus,\r\n        .form-group input[type=\"email\"]:focus,\r\n        .form-group input[type=\"tel\"]:focus {\r\n            outline: none;\r\n            border-color: #00b0ff;\r\n            box-shadow: 0 0 0 0.2rem rgba(0, 176, 255, 0.25);\r\n        }\r\n\r\n        .submit-area {\r\n            margin-top: 30px;\r\n        }\r\n\r\n        .submit-button {\r\n            padding: 16px 32px;\r\n            background-color: #29b6f6;\r\n            color: #fff;\r\n            border: none;\r\n            border-radius: 8px;\r\n            font-size: 18px;\r\n            cursor: pointer;\r\n            transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;\r\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        .submit-button:hover {\r\n            background-color: #03a9f4;\r\n            transform: scale(1.03);\r\n        }\r\n\r\n        .submit-button:disabled {\r\n            background-color: #90a4ae;\r\n            cursor: not-allowed;\r\n            transform: none;\r\n            box-shadow: none;\r\n        }\r\n\r\n        .message-area {\r\n            margin-top: 25px;\r\n            padding: 16px;\r\n            border-radius: 8px;\r\n            text-align: center;\r\n            font-weight: 600;\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease-in-out;\r\n            display: none; \/* Initially hidden *\/\r\n        }\r\n\r\n        .message-area.show {\r\n            opacity: 1;\r\n            display: block; \/* Make visible when the 'show' class is added *\/\r\n        }\r\n\r\n        .message-area.success {\r\n            color: #388e3c;\r\n            background-color: #e8f5e9;\r\n            border: 1px solid #c8e6c9;\r\n        }\r\n\r\n        .message-area.error {\r\n            color: #d32f2f;\r\n            background-color: #ffebee;\r\n            border: 1px solid #ef9a9a;\r\n        }\r\n\r\n        .page-footer {\r\n            text-align: center;\r\n            padding: 20px;\r\n            margin-top: 40px;\r\n            background-color: #f0f4f8;\r\n            border-top: 1px solid #e0e0e0;\r\n            color: #78909c;\r\n            font-size: 0.9em;\r\n        }\r\n\r\n        \/* Animation for a bit of extra flair *\/\r\n        @keyframes pulse {\r\n            0% { transform: scale(1); }\r\n            50% { transform: scale(1.05); }\r\n            100% { transform: scale(1); }\r\n        }\r\n\r\n        .referral-section h2 {\r\n            animation: pulse 2s infinite alternate;\r\n        }\r\n    <\/style>\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            const referralForm = document.getElementById('referralForm');\r\n            const messageBox = document.getElementById('referralMessage');\r\n            const submitButton = document.getElementById('submitButton');\r\n\r\n            function showMessage(message, type) {\r\n                messageBox.textContent = message;\r\n                messageBox.className = 'message-area ' + type + ' show';\r\n                messageBox.style.display = 'block'; \/\/ Ensure it's visible\r\n                setTimeout(() => {\r\n                    messageBox.classList.remove('show');\r\n                }, 15000); \/\/ Match the cooldown time\r\n            }\r\n\r\n            if (referralForm) {\r\n                referralForm.addEventListener('submit', function (e) {\r\n                    e.preventDefault();\r\n\r\n                    const website = document.getElementById('website').value;\r\n\r\n                    if (website !== '') {\r\n                        showMessage('\ud83e\udd16 Looks like a bot tried to refer!', 'error');\r\n                        return;\r\n                    }\r\n\r\n                    if (submitButton && submitButton.disabled) {\r\n                        showMessage('\u23f3 Hold tight, sending your awesome referral!', 'error');\r\n                        return;\r\n                    }\r\n\r\n                    const yourName = document.getElementById('yourName').value;\r\n                    const yourEmail = document.getElementById('yourEmail').value;\r\n                    const friendName = document.getElementById('friendName').value;\r\n                    const friendEmail = document.getElementById('friendEmail').value;\r\n                    const friendPhone = document.getElementById('friendPhone').value;\r\n\r\n                    submitButton.disabled = true;\r\n                    submitButton.textContent = 'Sending... \ud83d\ude80';\r\n\r\n                    fetch('\/wp-json\/wp\/v2\/referral-submit', {\r\n                        method: 'POST',\r\n                        headers: { 'Content-Type': 'application\/json' },\r\n                        body: JSON.stringify({\r\n                            your_name: yourName,\r\n                            your_email: yourEmail,\r\n                            friend_name: friendName,\r\n                            friend_email: friendEmail,\r\n                            friend_phone: friendPhone\r\n                        })\r\n                    })\r\n                    .then(res => res.json())\r\n                    .then(data => {\r\n                        showMessage(data.message || '\ud83c\udf89 Thanks for referring!', 'success');\r\n                        referralForm.reset();\r\n                    })\r\n                    .catch(err => {\r\n                        showMessage('\u274c Error sending referral.', 'error');\r\n                        console.error(err);\r\n                    })\r\n                    .finally(() => {\r\n                        setTimeout(() => {\r\n                            submitButton.disabled = false;\r\n                            submitButton.textContent = 'Send Referral! \ud83c\udf89';\r\n                        }, 15000); \/\/ 15-second cooldown\r\n                    });\r\n                });\r\n            }\r\n        });\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n    <div class=\"page-header\">\r\n   <h3 style=\"color: #ffffff; font-size: 20px; text-align: left;\">\r\n  Buy your first plan, then refer a friend!<br>\r\n  When your friend purchases their first plan, both of you will receive a \ud83d\udcb5 $15 discount \ud83d\udcb5 toward your next purchase.\r\n<\/h3>\r\n\r\n\r\n\r\n     \r\n    <\/div>\r\n\r\n    <div class=\"main-content\">\r\n        <section class=\"referral-section\">\r\n            <h2>Spread the good Word <span aria-label=\"megaphone\" role=\"img\">\ud83d\udce3<\/span><\/h2>\r\n           \r\n            <form id=\"referralForm\" class=\"referral-form\">\r\n                <div class=\"form-group\">\r\n                    <label for=\"yourName\">Your Name <span aria-label=\"person\" role=\"img\">\ud83d\udc64<\/span><\/label>\r\n                    <input type=\"text\" id=\"yourName\" name=\"your_name\" placeholder=\"Your Full Name\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label for=\"yourEmail\">Your Email <span aria-label=\"envelope\" role=\"img\">\u2709\ufe0f<\/span><\/label>\r\n                    <input type=\"email\" id=\"yourEmail\" name=\"your_email\" placeholder=\"Your Email Address\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label for=\"friendName\">Friend's Name <span aria-label=\"smiling person\" role=\"img\">\ud83d\ude0a<\/span><\/label>\r\n                    <input type=\"text\" id=\"friendName\" name=\"friend_name\" placeholder=\"Their Full Name\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label for=\"friendEmail\">Friend's Email <span aria-label=\"e-mail symbol\" role=\"img\">\ud83d\udce7<\/span><\/label>\r\n                    <input type=\"email\" id=\"friendEmail\" name=\"friend_email\" placeholder=\"Their Email Address\" required>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label for=\"friendPhone\">Friend's Phone (Optional) <span aria-label=\"telephone receiver\" role=\"img\">\ud83d\udcde<\/span><\/label>\r\n                    <input type=\"tel\" id=\"friendPhone\" name=\"friend_phone\" placeholder=\"(Optional) Their Phone Number\">\r\n                <\/div>\r\n                <input type=\"text\" id=\"website\" name=\"website\" style=\"display:none;\">\r\n                <div class=\"submit-area\">\r\n                    <button type=\"submit\" id=\"submitButton\" class=\"submit-button\">Send Referral! <span aria-label=\"rocket\" role=\"img\">\ud83d\ude80<\/span><\/button>\r\n                <\/div>\r\n            <\/form>\r\n            <div id=\"referralMessage\" class=\"message-area\"><\/div>\r\n        <\/section>\r\n    <\/div>\r\n\r\n   <\/body>\r\n<\/html>\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>Awesome Website with Referral Section Buy your first plan, then refer a friend! When your friend purchases their first plan, both of you will receive a \ud83d\udcb5 $15 discount \ud83d\udcb5 toward your next purchase. Spread the good Word \ud83d\udce3 Your Name \ud83d\udc64 Your Email \u2709\ufe0f Friend&#8217;s Name \ud83d\ude0a Friend&#8217;s Email \ud83d\udce7 Friend&#8217;s Phone (Optional) \ud83d\udcde [&hellip;]<\/p>\n","protected":false},"author":64,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3937","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/peptidogen.mx\/en_us\/wp-json\/wp\/v2\/pages\/3937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/peptidogen.mx\/en_us\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/peptidogen.mx\/en_us\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/peptidogen.mx\/en_us\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/peptidogen.mx\/en_us\/wp-json\/wp\/v2\/comments?post=3937"}],"version-history":[{"count":0,"href":"https:\/\/peptidogen.mx\/en_us\/wp-json\/wp\/v2\/pages\/3937\/revisions"}],"wp:attachment":[{"href":"https:\/\/peptidogen.mx\/en_us\/wp-json\/wp\/v2\/media?parent=3937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}