Last active
January 3, 2026 13:01
-
-
Save gambuzino-wonder/6080a0568a9d5404c7815111d15ec9e7 to your computer and use it in GitHub Desktop.
Bricks Builder: Cloudflare Turnstile Custom Loading Button & Script Interceptor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Put the bellow code going to your login template > Page Settings > Custom Code > Custom CSS | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function() { | |
| // CONFIG: IDs from form, ckek yours and replace here your form id | |
| const formId = 'form-login'; | |
| // 1. Find submit button at the Form using querySelector | |
| const formElement = document.getElementById(formId); | |
| if (!formElement) return; // Sai se não encontrar o form | |
| const submitBtn = formElement.querySelector('button[type="submit"]'); | |
| if (!submitBtn) return; | |
| // 2. Find Cloudflare element | |
| const cfWidget = formElement.querySelector('.cf-turnstile'); | |
| // 3. Função para BLOQUEAR | |
| const lockButton = () => { | |
| submitBtn.classList.add('is-locked'); | |
| submitBtn.setAttribute('disabled', 'disabled'); | |
| }; | |
| // 4. Function to LOCK (pretty delay at button) | |
| const unlockButton = () => { | |
| setTimeout(() => { | |
| submitBtn.classList.remove('is-locked'); | |
| submitBtn.removeAttribute('disabled'); | |
| }, 500); | |
| }; | |
| // 5. Out "Intercetor" doing a new callback to Cloudflare | |
| window.myCustomInterceptor = function(token) { | |
| console.log("Cloudflare valid! Unlocking button..."); | |
| // A. Visually unlock button botão | |
| unlockButton(); | |
| // B. Calls ORIGINAL function from Bricks in order the login may work | |
| // Bricks expects this function to process the token | |
| if (typeof window.bricksTurnstileCallback === 'function') { | |
| window.bricksTurnstileCallback(token); | |
| } | |
| }; | |
| // 6. EXECUTION | |
| lockButton(); | |
| if (cfWidget) { | |
| cfWidget.setAttribute('data-callback', 'myCustomInterceptor'); | |
| } | |
| // If error/expired (opcional, but recommmende) | |
| window.myErrorInterceptor = function() { | |
| lockButton(); | |
| if (typeof window.bricksTurnstileErrorCallback === 'function') { | |
| window.bricksTurnstileErrorCallback(); | |
| } | |
| }; | |
| if (cfWidget) { | |
| cfWidget.setAttribute('data-error-callback', 'myErrorInterceptor'); | |
| cfWidget.setAttribute('data-expired-callback', 'myErrorInterceptor'); | |
| } | |
| }); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*Put the bellow code going to your login template > Page Settings > Custom Code > Custom CSS */ | |
| /* 1. Locked (safety animation) */ | |
| #form-login button[type="submit"].is-locked { | |
| pointer-events: none !important; | |
| cursor: wait !important; | |
| border: none !important; | |
| color: transparent !important; /* Hide original text */ | |
| background: linear-gradient(-45deg, #102a43, #243b53, #102a43, #486581); | |
| background-size: 400% 400%; | |
| animation: SecurityGradient 3s ease infinite !important; | |
| position: relative; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| #form-login button[type="submit"].is-locked::after { | |
| content: "🔒 Security check..."; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| color: #f0f4f8; | |
| font-size: 15px; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| white-space: nowrap; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; /* icon and text space */ | |
| } | |
| @keyframes SecurityGradient { | |
| 0% {background-position: 0% 50%;} | |
| 50% {background-position: 100% 50%;} | |
| 100% {background-position: 0% 50%;} | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Make submit login button inactive until Cloudflare Turnstile is done. Please change the ID FORM at the js script for your own.
(at Bricks Builder you may find it at the Form element)
Use Custom CSS to create a 'verifying' visual state and a JavaScript interception strategy.
The script disables the native button upon page load and overrides the Cloudflare data-callback with a custom function;
once the captcha is solved, this function visually unlocks the button and manually triggers the original bricksTurnstileCallback(token) to ensure the form submits correctly.
Screen_Recording_20260101_183721_Chrome.mp4