{"id":1720,"date":"2023-07-25T15:46:56","date_gmt":"2023-07-25T20:46:56","guid":{"rendered":"https:\/\/www.onebyte.org\/blog\/?page_id=1720"},"modified":"2025-02-10T12:02:01","modified_gmt":"2025-02-10T17:02:01","slug":"contact","status":"publish","type":"page","link":"https:\/\/www.onebyte.org\/blog\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"\n<!-- Include reCAPTCHA v3 script in the head section -->\n<script src=\"https:\/\/www.google.com\/recaptcha\/api.js?render=6LcLdzsgAAAAAKui1n6K7_7pMHyX8e3lm6mM85KN\"><\/script>\n\n<!-- Form HTML -->\n<form class=\"contact-form\" id=\"contact-form\" action=\"https:\/\/formspree.io\/f\/mnqknbzg\" method=\"POST\">\n  <div class=\"form-group\">\n    <label for=\"email\">Your Email<\/label>\n    <input type=\"email\" id=\"email\" name=\"email\" required>\n  <\/div>\n  \n  <div class=\"form-group\">\n    <label for=\"message\">Your Message<\/label>\n    <textarea id=\"message\" name=\"message\" required><\/textarea>\n  <\/div>\n  \n  <!-- Hidden input for reCAPTCHA token -->\n  <input type=\"hidden\" name=\"g-recaptcha-response\" id=\"recaptchaResponse\">\n  \n  <button type=\"submit\" class=\"submit-btn\" id=\"submit-button\">\n    <span class=\"btn-text\">Moo at me!<\/span>\n  <\/button>\n<\/form>\n\n<style>\n\/* Previous CSS remains the same *\/\n.contact-form {\n    max-width: 500px;\n    margin: 2rem auto;\n    padding: 2rem;\n    background: #ffffff;\n    border-radius: 10px;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.form-group {\n    margin-bottom: 1.5rem;\n}\n\nlabel {\n    display: block;\n    margin-bottom: 0.5rem;\n    color: #4a4a4a;\n    font-weight: 500;\n}\n\ninput, textarea {\n    width: 100%;\n    padding: 0.8rem;\n    border: 2px solid #e0e0e0;\n    border-radius: 5px;\n    font-size: 1rem;\n    transition: border-color 0.3s ease;\n}\n\ninput:focus, textarea:focus {\n    outline: none;\n    border-color: #4aa3df;\n}\n\ntextarea {\n    min-height: 150px;\n    resize: vertical;\n}\n\n.submit-btn {\n    background: #4aa3df;\n    color: white;\n    border: none;\n    padding: 1rem 2rem;\n    font-size: 1.1rem;\n    border-radius: 5px;\n    cursor: pointer;\n    position: relative;\n    transition: transform 0.2s ease, background 0.3s ease;\n}\n\n.submit-btn:hover {\n    background: #357abd;\n    transform: translateY(-2px);\n}\n\n.submit-btn:active {\n    transform: translateY(0);\n}\n\n.cow {\n    position: absolute;\n    pointer-events: none;\n    user-select: none;\n    font-size: 24px;\n    animation: volcano 2.5s ease-out forwards;\n    opacity: 0;\n    z-index: 1000;\n}\n\n@keyframes volcano {\n    0% {\n        transform: translate(-50%, -50%) scale(0.5) rotate(0deg);\n        opacity: 1;\n    }\n    20% {\n        transform: translate(var(--tx), calc(var(--ty) - 100px)) scale(1) rotate(180deg);\n        opacity: 1;\n    }\n    100% {\n        transform: translate(var(--tx), calc(var(--ty) + 300px)) scale(1) rotate(var(--spin));\n        opacity: 0;\n    }\n}\n<\/style>\n\n<script>\n\/\/ Trigger cow explosion on button click\ndocument.getElementById('submit-button').addEventListener('click', function(e) {\n    createCowExplosion();\n});\n\n\/\/ Handle form submission with reCAPTCHA\ndocument.getElementById('contact-form').addEventListener('submit', function(e) {\n    e.preventDefault();\n    \n    grecaptcha.ready(function() {\n        grecaptcha.execute('6LcLdzsgAAAAAKui1n6K7_7pMHyX8e3lm6mM85KN', {action: 'submit'}).then(function(token) {\n            \/\/ Add token to hidden input field\n            document.getElementById('recaptchaResponse').value = token;\n            \n            \/\/ Submit form via Fetch API\n            const formData = new FormData(e.target);\n            \n            fetch('https:\/\/formspree.io\/f\/mnqknbzg', {\n                method: 'POST',\n                body: formData,\n                headers: {\n                    'Accept': 'application\/json'\n                }\n            })\n            .then(response => {\n                if (response.ok) {\n                    alert('Message sent successfully!');\n                    e.target.reset();\n                } else {\n                    alert('There was an error sending your message. Please try again.');\n                }\n            })\n            .catch(error => {\n                console.error('Error:', error);\n                alert('There was an error sending your message. Please try again.');\n            });\n        });\n    });\n});\n\nfunction createCowExplosion() {\n    const cowEmojis = ['\ud83d\udc2e', '\ud83d\udc04', '\ud83d\udc02'];\n    const button = document.getElementById('submit-button');\n    \n    \/\/ Create 20 cows\n    for (let i = 0; i < 20; i++) {\n        const cow = document.createElement('div');\n        cow.className = 'cow';\n        \n        \/\/ Random cow emoji\n        cow.textContent = cowEmojis[Math.floor(Math.random() * cowEmojis.length)];\n        \n        \/\/ Volcano-like trajectory calculations\n        const angle = (i \/ 20) * Math.PI + (Math.random() * 0.5 - 0.25);\n        const distance = 150 + Math.random() * 200;\n        const tx = Math.sin(angle) * distance;\n        const ty = -Math.abs(Math.cos(angle) * distance);\n        \n        \/\/ Random spin amount\n        const spin = Math.random() * 1080 - 540;\n        \n        \/\/ Set custom properties for animation\n        cow.style.setProperty('--tx', `${tx}px`);\n        cow.style.setProperty('--ty', `${ty}px`);\n        cow.style.setProperty('--spin', `${spin}deg`);\n        \n        \/\/ Position cow at button center\n        const rect = button.getBoundingClientRect();\n        cow.style.left = rect.left + rect.width \/ 2 + 'px';\n        cow.style.top = rect.top + rect.height \/ 2 + 'px';\n        \n        \/\/ Add to document\n        document.body.appendChild(cow);\n        \n        \/\/ Remove after animation\n        setTimeout(() => {\n            document.body.removeChild(cow);\n        }, 2500); \/\/ Match this to animation duration\n    }\n}\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Your Email Your Message Moo at me!<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1720","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"modality-logo":false},"uagb_author_info":{"display_name":"Mr-Moo","author_link":"https:\/\/www.onebyte.org\/blog\/author\/ahess\/"},"uagb_comment_info":0,"uagb_excerpt":"Your Email Your Message Moo at me!","_links":{"self":[{"href":"https:\/\/www.onebyte.org\/blog\/wp-json\/wp\/v2\/pages\/1720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.onebyte.org\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.onebyte.org\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.onebyte.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.onebyte.org\/blog\/wp-json\/wp\/v2\/comments?post=1720"}],"version-history":[{"count":2,"href":"https:\/\/www.onebyte.org\/blog\/wp-json\/wp\/v2\/pages\/1720\/revisions"}],"predecessor-version":[{"id":1820,"href":"https:\/\/www.onebyte.org\/blog\/wp-json\/wp\/v2\/pages\/1720\/revisions\/1820"}],"wp:attachment":[{"href":"https:\/\/www.onebyte.org\/blog\/wp-json\/wp\/v2\/media?parent=1720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}