Riassunto AI
Ti chiedi come rimuovere il pulsante di invio dai moduli di calcolo per una migliore esperienza utente?
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.
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.
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!
Altre domande sui moduli calcolatore
I moduli calcolatore sono un argomento popolare tra i nostri lettori. Ecco le risposte ad alcune domande frequenti su di essi.
Per disattivare il pulsante di invio in un modulo, specialmente se stai usando WPForms Pro, puoi applicare CSS personalizzato. Vai su WPForms » Strumenti. Quindi, naviga nella scheda Snippet di codice per accedere alla libreria di snippet di WPForms, che contiene una soluzione per disattivare il pulsante di invio in un modulo.
Sì, un modulo può funzionare senza un pulsante di invio. Questo è comune nei moduli che si inviano automaticamente o utilizzano metodi alternativi per la cattura dei dati. Con WPForms Pro, puoi creare tali moduli personalizzandoli con CSS per nascondere il pulsante di invio, utilizzando l'integrazione WPCode per aggiungere il codice necessario senza problemi.
Successivamente, scopri come creare un calcolatore online personalizzato
Aggiungere un calcolatore al tuo sito web può aumentare l'interazione incoraggiando i visitatori a rimanere e a ottenere risposte ai loro problemi. Dai un'occhiata a questa guida su come creare un calcolatore personalizzato in WordPress per le esigenze uniche del tuo sito web.
Crea un calcolatore online personalizzato
Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più facile. 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!