Proteggere i Form di WebSite X5: Smart-Unlock Captcha
Proteggere i Form di WebSite X5: Smart-Unlock Captcha (No-Library)
Se utilizzi WebSite X5, sai quanto sia fondamentale avere dei moduli di contatto (Form Mail) funzionanti. Tuttavia, c'è un nemico sempre in agguato: lo spam. I bot automatizzati riempiono le nostre caselle email di messaggi spazzatura, rendendo difficile gestire le richieste reali.
Molti ricorrono a Google reCAPTCHA, ma non tutti amano caricare script esterni pesanti o sottostare alle complicate normative sulla privacy. Per questo ho sviluppato Smart-Unlock Captcha, una soluzione leggera, elegante e completamente integrata.
Cos'è Smart-Unlock Captcha?
Non è il solito plugin. È un piccolo "custode" digitale che si posiziona sopra il tuo pulsante di invio. La sua logica è semplice ma efficace: se non risolvi il codice visivo, il pulsante "Invia" non esiste.
Il codice originale di WebSite X5 viene nascosto tramite CSS prioritario e appare con una fluida dissolvenza solo quando l'utente dimostra di essere umano.
I punti di forza:
- Privacy First: Nessun cookie di terze parti, nessun tracciamento. Tutto gira sul browser dell'utente.
- Velocità: Non carica librerie esterne pesanti. È puro codice HTML, CSS e JavaScript.
- User Experience: Ho eliminato i caratteri ambigui (come lo zero e la 'O') per evitare frustrazioni, e il sistema accetta sia maiuscole che minuscole.
- Design Adattivo: Si centra automaticamente e si adatta allo stile del tuo sito.
Come implementarlo nel tuo progetto
Implementare questa protezione richiede meno di 5 minuti.
Ecco i passaggi:
1. Recupera l'ID del tuo pulsante
Ogni form in WebSite X5 ha un identificativo unico (es:
imObjectForm_270_form_submit). Puoi trovarlo facilmente visualizzando l'anteprima del tuo sito, facendo click destro sul tasto "Invia" e scegliendo "Ispeziona".2. Inserisci l'Oggetto HTML
Trascina un Oggetto HTML nel Passo 3 del software, posizionandolo dove preferisci appaia il controllo di sicurezza.
3. Incolla e personalizza
Copia il codice che trovi qui sotto (inserisci qui il link al tuo codice o il box di testo). Ricordati di cambiare l'ID del pulsante nel CSS e nel JavaScript con quello che hai recuperato al punto 1.
Pro Tip: Se il box ti sembra troppo alto o troppo basso, puoi agire direttamente sulla proprietà padding e min-height del CSS per renderlo millimetricamente perfetto per il tuo layout.
Perché scegliere questa solizione?
Oltre alla velocità, il vantaggio principale è il controllo totale. Puoi cambiare i colori delle lettere, lo sfondo di disturbo e persino la velocità con cui il pulsante di invio appare dopo la verifica. È uno strumento creato dai designer per i designer.
Spero che questa risorsa vi aiuti a mantenere i vostri siti puliti e professionali. Se avete domande sulla personalizzazione, lasciate un commento qui sotto!
0
recensioni