Riassunto AI
Ti chiedi come rimuovere il pulsante di invio dai moduli di calcolo per una migliore esperienza utente?
Per una stima del mutuo o un preventivo di spedizione, le persone vogliono che il numero si aggiorni mentre digitano, non che facciano clic su un pulsante e attendano il ricaricamento della pagina.
Rimuovendo il pulsante di invio dai moduli di calcolo creati da WPForms, puoi fornire calcoli istantanei ai tuoi visitatori.
In questa guida, imparerai i semplici passaggi per modificare i tuoi moduli per calcoli fluidi e in tempo reale senza bisogno di un'azione di invio del modulo.
Crea Ora il Tuo Modulo Calcolatore
Perché Rimuovere il Pulsante di Invio da un Modulo di Calcolo?
La maggior parte dei moduli necessita di un pulsante di invio perché invia dati da qualche parte, come una richiesta di contatto o un ordine, ma un modulo calcolatore funziona in modo diverso.
Il tuo visitatore non ti sta inviando nulla, vuole solo una risposta, come un pagamento mensile del mutuo o un costo di spedizione. Quando l'addon Calcoli aggiorna il totale in tempo reale mentre le persone digitano, il pulsante di invio non ha più nulla da fare.
Può persino confondere i visitatori facendogli pensare di dover cliccare per vedere il loro risultato. Nasconderlo fa sì che il modulo si comporti come un vero calcolatore, dove la cifra appare semplicemente e si aggiorna da sola.
Quindi, se il tuo modulo esiste per mostrare un numero in tempo reale piuttosto che raccogliere un invio, rimuovere il pulsante di invio è solitamente la scelta giusta.
Come rimuovere il pulsante di invio dai moduli di calcolo
Rimuovere il pulsante di invio dai moduli di calcolo con WPForms è incredibilmente facile. Tutto ciò che devi fare è seguire questi semplici passaggi qui sotto:
I prerequisiti
Prima di procedere con i passaggi per disabilitare il pulsante di invio, assicuriamoci di aver completato alcuni passaggi importanti.
Se hai già completato questi passaggi, sentiti libero di saltare alla sezione su rimozione del pulsante di invio.
1. Avere una licenza WPForms Pro
WPForms è un affidabile plugin per la creazione di moduli e calcolatori che consente agli utenti di creare un'ampia gamma di moduli, incluso un calcolatore di giorni tra date.
È importante che tu abbia installata l'ultima versione di WPForms, insieme all'accesso alla licenza Pro.
La versione Pro ti fornisce accesso a integrazioni premium, componenti aggiuntivi e molte funzionalità preziose come la logica condizionale, i report di invio dei moduli, ecc.
2. Utilizzare il componente aggiuntivo Calcoli
Per creare calcolatori personalizzati in WordPress, probabilmente sai già che devi avere installato il componente aggiuntivo Calcoli di WPForms.
Puoi usare questo componente aggiuntivo per inserire operatori logici e istruzioni if-then per creare preventivi personalizzati o costruire calcolatori intelligenti.
Ti consente persino di utilizzare funzioni matematiche integrate per arrotondare numeri, calcolare intervalli di tempo, trovare medie e altro ancora.
3. Selezionare un modello di modulo calcolatore
Infine, devi avere un modulo pronto. Se devi crearne uno, WPForms offre oltre 2.100 modelli predefiniti che rendono la creazione di moduli un gioco da ragazzi.
Questi includono modelli di moduli calcolatore progettati professionalmente che possono essere personalizzati per adattarsi a una varietà di casi d'uso e settori, come:
- Modello di modulo calcolatore di mutui — perfetto per le agenzie immobiliari in quanto consente ai potenziali acquirenti di calcolare il mutuo e i loro pagamenti mensili senza sforzo.
- Modello di modulo calcolatore di costi di spedizione — aiuta i siti di e-commerce a risparmiare tempo e fatica fornendo un semplice calcolatore di spedizione per i clienti.
- Modello di modulo calcolatore BMI — ideale per siti web dedicati al fitness o alla salute che aiutano gli utenti a valutare il loro stato di salute attuale.
- Modello di modulo calcolatore ROI — aiuta le aziende e i marketer a valutare in modo efficiente la redditività delle loro campagne o progetti.
La parte migliore di tutto: puoi usare il componente aggiuntivo calcoli per creare calcolatori personalizzati senza alcuna conoscenza di HTML, javascript o codifica complessa.
Ottieni WPForms Pro per Creare il Tuo Calcolatore
Rimozione del pulsante di invio
Una volta soddisfatti questi prerequisiti, sei pronto per modificare il tuo modulo per rimuovere il pulsante di invio per una migliore esperienza utente.
1. Vai alla Libreria di snippet di WPForms
Dalla tua bacheca di WordPress, vai semplicemente su WPForms » Strumenti. Quindi, naviga nella scheda Snippet di codice.
Questo visualizzerà un messaggio popup che dice: "Si prega di installare WPCode per utilizzare la libreria di snippet di WPForms."
2. Installa e attiva WPCode
Tutto quello che devi fare ora è fare clic sul pulsante Installa + Attiva WPCode. Il plugin ora impiegherà alcuni secondi per l'installazione.
Una volta installato il plugin WPCode, sarai in grado di accedere all'elenco completo degli snippet di WPForms.
3. Usa lo snippet Nascondi pulsante di invio
Ora, cerca lo snippet per nascondere il pulsante di invio digitando il suo nome nel campo Cerca snippet. Successivamente, fai clic sul pulsante Installa snippet.
Ecco lo snippet di codice che importeremo:
Questo ti reindirizzerà alla pagina di anteprima dello snippet WPCode, dove potrai vedere il codice integrato automaticamente.
Ora, tutto ciò che devi fare è abilitare il codice dello snippet. Per fare ciò, sposta l'interruttore da Inattivo ad Attivo.
Il passo successivo per attivare lo snippet di codice a livello di sito è premere il pulsante Aggiorna, proprio accanto all'opzione di interruttore Attivo.
Seguendo questo approccio, dovrai aggiungere lo snippet solo una volta tramite la libreria di snippet di WPForms.
Quindi, per ogni modulo in cui l'utente desidera utilizzare questo snippet, dovrà aggiungere il nome della classe CSS del pulsante di invio all'interno del builder.
4. Aggiungi una classe CSS al pulsante di invio
Ora, tutto ciò che resta da fare è aggiungere la classe CSS nel builder del modulo del calcolatore da cui si desidera rimuovere il pulsante di invio.
Per fare ciò, apri il tuo modulo calcolatore e naviga nella scheda Generale, quindi scorri fino alla scheda Avanzate.
Successivamente, incolla il CSS wpf-calc-form nel campo Classe CSS del pulsante di invio per attivare lo snippet di codice.
Ora puoi visualizzare in anteprima il tuo modulo per vedere che il pulsante di invio del tuo calcolatore è stato rimosso con successo!
Come impedire al tasto Invio di inviare il modulo
Anche senza un pulsante di invio visibile, un modulo può comunque essere inviato quando qualcuno preme il tasto Invio all'interno di un campo di testo. Su un calcolatore che deve mostrare un risultato in tempo reale, questo non è il comportamento desiderato.
La soluzione è un secondo snippet che impedisce al tasto Invio di attivare un invio. Il codice esatto si trova nella nostra documentazione per sviluppatori, quindi puoi seguire la guida su come impedire al tasto Invio di inviare il modulo e aggiungerlo nello stesso modo in cui hai aggiunto il primo.
Con entrambi gli snippet attivi, il tuo calcolatore mostra il suo totale istantaneamente e rimane al suo posto, senza pulsante e senza invii accidentali.
Domande frequenti sui Moduli Calcolatore
I moduli calcolatore vengono menzionati spesso dai nostri lettori. Ecco le risposte ad alcune delle domande più comuni sulla rimozione del pulsante di invio e sul lavoro con i moduli calcolatore in WordPress.
Come disattivo il pulsante di invio in un modulo?
Per disattivare il pulsante di invio in WPForms Pro, lo nascondi con CSS personalizzato. Vai su WPForms » Strumenti, apri la scheda Snippet di Codice per raggiungere la Libreria Snippet di WPForms e installa lo snippet per nascondere il pulsante di invio. Quindi aggiungi la classe wpf-calc-form al campo Classe CSS del Pulsante di Invio del tuo modulo.
Un modulo può non avere un pulsante di invio?
Sì. Un modulo può funzionare senza un pulsante di invio, il che è comune per i calcolatori che mostrano un risultato istantaneamente o per i moduli che si inviano automaticamente. In WPForms Pro, nascondi il pulsante con un po' di CSS aggiunto tramite l'integrazione WPCode integrata, quindi non è necessario nulla di aggiuntivo.
Nascondere il pulsante di invio impedisce l'invio del modulo?
No, nascondere il pulsante da solo non impedisce gli invii. Il modulo può ancora essere inviato se un visitatore preme il tasto Invio mentre si trova in un campo di testo. Per evitarlo, aggiungi un secondo snippet che impedisce al tasto Invio di inviare, utilizzando la guida per sviluppatori collegata sopra.
Posso rimuovere il pulsante di invio da un solo modulo calcolatore?
Sì. Lo snippet ha effetto solo sui moduli in cui hai aggiunto la classe wpf-calc-form al campo Classe CSS del Pulsante di Invio. Lascia vuoto quel campo sui tuoi altri moduli e i loro pulsanti di invio rimangono esattamente come sono.
Successivamente, scopri come creare un calcolatore online personalizzato
Una calcolatrice è uno dei modi migliori per mantenere i visitatori sul tuo sito, poiché dà loro un motivo per rimanere e ottenere una risposta a una domanda reale.
Se vuoi costruirne una da zero, dai un'occhiata alla nostra guida su come creare una calcolatrice personalizzata in WordPress e impostala per qualsiasi cosa il tuo sito abbia bisogno.
Crea Ora il Tuo Modulo Calcolatore
Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.
Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.
Questo CSS non impedisce l'invio del modulo quando si utilizza il tasto Invio in uno dei campi di testo utilizzati all'interno di un modulo di calcolo.
Ciao Dean,
Hai ragione: questo snippet CSS nasconde solo il pulsante di invio, ma non impedisce l'invio del modulo quando si preme il tasto Invio in un campo di testo.
Se desideri disabilitare anche il tasto Invio, ti consigliamo di utilizzare lo snippet di codice fornito nella nostra documentazione per sviluppatori qui: Come impedire al tasto Invio di inviare il modulo.
Spero che questo aiuti!