Riassunto AI
Desideri mostrare o nascondere automaticamente il pulsante Invia in base alle risposte dei campi del modulo? Con un semplice snippet di codice, puoi controllare la visibilità del pulsante Invia del tuo modulo utilizzando la logica condizionale.
Questa guida mostra come aggiungere uno snippet di codice e impostare la logica condizionale per controllare la visibilità del pulsante Invia.
Impostazione del modulo
Per iniziare, apri il modulo di creazione inserendo un nuovo modulo o modificando quello esistente.
Per questo esempio, creeremo un modulo di donazione con un campo Scelta multipla che mostra le opzioni Sì/No. Tutti gli altri campi aggiuntivi nel modulo verranno rivelati solo se viene selezionato Sì utilizzando la logica condizionale.
Il pulsante Invia apparirà solo quando viene selezionato Sì, e gli utenti verranno reindirizzati a una pagina di ringraziamento se viene selezionato No.
Nota: Prendi nota dell'ID del tuo modulo poiché ti servirà quando aggiungerai lo snippet di codice. Se hai bisogno di aiuto per trovare questi ID, consulta la nostra guida su come trovare gli ID dei moduli e dei campi.
Impostazione della logica condizionale
Prima di aggiungere il codice per il pulsante Invia, dobbiamo impostare la logica condizionale per gli altri campi del tuo modulo. Questi campi dovrebbero rimanere nascosti finché l'utente non seleziona "Sì" dal campo Scelta multipla.
Per ottenere questo risultato, apri le impostazioni di ciascun campo e configura la logica condizionale per mostrare il campo quando il tuo campo Scelta multipla è uguale a Sì. Questo assicura che questi campi rimangano nascosti per impostazione predefinita e appaiano solo quando necessario.
Nota: Se hai bisogno di aiuto per capire come funziona la logica condizionale in WPForms, consulta la nostra guida dettagliata sulla logica condizionale.
Creazione della pagina di ringraziamento
Poiché il nostro modulo offre agli utenti una scelta Sì/No, vogliamo fornire un'esperienza positiva anche quando viene selezionato "No". Invece di nascondere semplicemente il pulsante Invia, reindirizzeremo gli utenti a una pagina di ringraziamento dedicata.
Per fare ciò, crea una nuova pagina in WordPress e chiamala Ringraziamento (o qualsiasi altro nome preferisci). Qui è dove gli utenti che selezionano "No" verranno reindirizzati automaticamente.
Prendi nota del percorso URL della pagina poiché ti servirà per il reindirizzamento nel nostro snippet di codice.
Aggiunta dello snippet di codice
Il seguente snippet di codice controllerà la visibilità del tuo pulsante Invia in base alle risposte del modulo:
Questo snippet utilizza prima il CSS per nascondere il pulsante Invia quando la pagina viene caricata inizialmente. Quindi, imposta un listener di eventi JavaScript che monitora le modifiche alle opzioni del campo Scelta multipla del tuo modulo.
Quando un utente seleziona "Sì", lo script aggiunge una classe CSS che rende visibile il pulsante Invia. Se seleziona "No", lo script li reindirizza automaticamente alla tua pagina di ringraziamento.
Nota: Se hai bisogno di aiuto per aggiungere snippet di codice al tuo sito, consulta il nostro tutorial su come aggiungere snippet di codice in modo sicuro.
Personalizzazione del codice
Dovrai personalizzare diversi valori chiave nello snippet di codice per il tuo modulo specifico:
- Alla riga 12 e alla riga 16, individua il selettore CSS
#wpforms-form-1000e sostituisci1000con l'ID effettivo del tuo modulo. - Alla riga 30, nel selettore jQuery
form#wpforms-form-1000, sostituisci1000con l’ID del tuo modulo ancora una volta. - Alla riga 33, troverai il percorso dell’URL di reindirizzamento
/thank-you. Aggiorna questo per corrispondere al percorso URL effettivo della tua pagina di ringraziamento.- Ad esempio, se hai chiamato la tua pagina “Grazie”, la cambieresti in
/grazie.
- Ad esempio, se hai chiamato la tua pagina “Grazie”, la cambieresti in
Testare la tua implementazione
Una volta aggiunto e personalizzato lo snippet di codice, è essenziale testare a fondo la funzionalità:
- Inizia caricando il tuo modulo da zero e verifica che il pulsante Invia sia nascosto per impostazione predefinita.
- Successivamente, seleziona No nel tuo modulo e conferma di essere immediatamente reindirizzato alla tua pagina di ringraziamento.
- Quindi testa il percorso “Sì”: seleziona Sì e verifica che non solo appaia il pulsante Invia, ma che anche tutti i tuoi campi nascosti condizionalmente diventino visibili.
- Infine, completa e invia il modulo con Sì selezionato per assicurarti che l’intero processo funzioni come previsto.
Domande frequenti
D: Può essere utilizzato per un campo di testo a riga singola?
R: Assolutamente! Ecco uno snippet di codice che funziona con un campo di testo a riga singola.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000.wpforms-submit {
visibility: hidden;
}
#wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
visibility: visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect_text_area() {
?>
<script>
jQuery(function($){
// Form ID 1000 and Field ID 15
$( "#wpforms-1000-field_15" ).change(function(){
var inputvalue = $( "div#wpforms-1000-field_15-container input[type='text']" ).val();
var specificText ="Some Text Here"
if(inputvalue == specificText){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect_text_area', 10 );
D: Posso usare questo snippet per il campo a discesa?
R: Sì, puoi usarlo con i campi a discesa utilizzando il seguente snippet di codice:
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000.wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).on( 'change', function () {
var selectedval = $( "#wpforms-1000-field_15 option:selected" ).text();
if(selectedval == "First Choice"){
$( ".wpforms-submit" ).removeClass( "show-submit" );
}
else{
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
D: Può essere utilizzato anche per i pulsanti di interruzione pagina Avanti e Indietro?
R: Per utilizzare la stessa funzionalità per i pulsanti Interruzione di pagina, dovrai semplicemente cambiare .wpforms-submit in button.wpforms-page-next. Quindi lo snippet di codice completo sarebbe simile a questo.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 button.wpforms-page-next {
visibility: hidden;
}
#wpforms-form-1000 button.wpforms-page-next.show-next {
visibility: visible;
}
</style>
<?php } );
// Conditional logic for Next button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($) {
$( "form#wpforms-form-1000" ).click(function() {
var selectedval = $( ".wpforms-form input[type='radio']:checked" ).val();
if (selectedval == "No") {
window.location = "/thank-you";
}
if (selectedval == "Yes") {
$( "button.wpforms-page-next" ).addClass( "show-next" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
D: Cosa succede se ho più di un campo a scelta multipla nella pagina?
R: Se hai più di una domanda Sì o No, puoi identificare lo script specificando l’ID del campo. Ad esempio, se hai tre campi a scelta multipla in una pagina, il tuo script sarebbe simile a questo.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
// Form ID 1000 and Field ID 15
var selectedval = $( "div#wpforms-1000-field_15-container input[type='radio']:checked" ).val();
if(selectedval == "Yes"){
window.location = "/thank-you";
}
if(selectedval == "No"){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
L’ID del nostro modulo è 1000 e l’ID del campo a scelta multipla che vogliamo utilizzare nel nostro codice è 15. Pertanto stiamo impostando una variabile da valutare con $("div#wpforms-1000-field_15-container input[type='radio']:checked")
D: Posso semplicemente disabilitare il pulsante di invio finché tutti i campi non hanno un valore?
R: Sì, tuttavia, non convaliderà numeri di telefono, indirizzi email, ecc. Questo snippet cercherà solo qualsiasi valore prima di consentire il clic sul pulsante di invio.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
function wpf_dev_disable_submit_validation() {
?>
<script type="text/javascript">
jQuery(function () {
// Disable the submit button with the ID of #wpforms-submit-727, change the 727 to match your form ID
jQuery('#wpforms-submit-727').attr('disabled', true);
// Look and listen for any change on the form ID 727, change the 727 to match your form ID
jQuery('#wpforms-form-727').change(function () {
// List all field IDs in this section using the && to join them
if (jQuery('#wpforms-727-field_1').val() != '' &&
jQuery('#wpforms-727-field_2').val() != '' &&
jQuery('#wpforms-727-field_3').val() != '' &&
// Check for radio button (adjust field number as needed)
jQuery('input[name="wpforms[fields][4]"]:checked').val() &&
// Check for checkbox (adjust field number as needed)
jQuery('input[name="wpforms[fields][5][]"]:checked').length > 0) {
// If all of those field IDs have values, the submit button can be clicked
jQuery('#wpforms-submit-727').attr('disabled', false);
} else {
// Otherwise, the submit button for this form remains disabled
jQuery('#wpforms-submit-727').attr('disabled', true);
}
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_disable_submit_validation', 1);
Nota: Devi solo assicurarti che 727 corrisponda all’ID del tuo modulo e che tu abbia elencato ogni ID di campo in questo modulo. Se hai bisogno di aiuto per trovare i numeri dell’ID del modulo o del campo, consulta questo tutorial.
D: Cosa succede se voglio confrontare più di una scelta per un campo?
R: Se hai più di un campo che vuoi confrontare, useresti semplicemente l’equivalente PHP per l’operatore OR.
Questo esempio utilizza un semplice modulo di prenotazione con il campo Checkbox per consentire all'utente di selezionare l'orario richiesto. Se l'utente seleziona 8:00 – 9:00, 9:00 – 10:00 o 10:00 – 11:00, verrà reindirizzato alla pagina Grazie poiché questi slot sono già occupati.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
var selectedval = $( ".wpforms-form input[type='checkbox']:checked" ).val();
if ( selectedval == "8:00 - 9:00am" || selectedval == "9:00 - 10:00am" || selectedval == "10:00 - 11:00am" ) {
window.location = "/thank-you";
}
if ( selectedval == "11:00 - 12:00pm" || selectedval == "12:00 - 1:00pm" || selectedval == "1:00 - 2:00pm" ) {
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
Nota: Per saperne di più sugli operatori di confronto PHP, consulta la loro documentazione in merito qui.
D: Potrei modificare questo per confrontare due date?
R: Assolutamente! Supponiamo che tu abbia due campi Data sul tuo sito. La data uno sarebbe la data dell'ordine e la data due sarebbe la data del ritiro. Ma non vuoi visualizzare il pulsante Invia a meno che la data due non sia maggiore della data uno.
Ricorda, per qualsiasi assistenza su come aggiungere snippet, dai un'occhiata a questo tutorial.
/**
* Conditionally show the submit button if date 2 is greater than date 1
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1899 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1899 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_compare_two_dates() {
?>
<script>
jQuery(function($){
// Only fire this script when date 2 has been selected
document.querySelector( "#wpforms-1899-field_33-container" ).onchange = function() {
// Set the first date picker variable
var oneDate = $( "input#wpforms-1899-field_32" ).val();
// Set the second date picker variable
var twoDate = $( "input#wpforms-1899-field_33" ).val();
// Now compare the 2 dates, show a message and keep the Submit button hidden
// if date 2 is less than date 1
if(twoDate < oneDate){
alert( "Please make sure that the pickup date is after the dropoff date" );
e.preventDefault();
e.stopPropagation();
}
else {
// since date 2 is greater than date 1, go ahead and show the submit button
$( ".wpforms-submit" ).addClass( "show-submit" );
}
}
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_compare_two_dates', 10 );
Ogni riferimento a 1899 nello snippet sopra è l'ID del mio modulo. Il _32 e il _33 sono gli ID dei campi per i 2 date picker nel nostro modulo.
Dovrai aggiornare tutti questi ID per farli corrispondere ai tuoi ID di modulo e campo. Per assistenza nel trovarli, dai semplicemente un'occhiata a questo tutorial.
D: Posso impedire all'utente di continuare nel modulo in base a un'opzione del menu a discesa?
R: Assolutamente. Per questo esempio, visualizzeremo i pulsanti Avanti e Indietro come previsto, ma se selezionano No nel modulo, vogliamo disabilitare questi pulsanti per non consentire all'utente di continuare con il modulo.
/**
* Conditionally show the Next button based on dropdown choice
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
function wpf_dev_conditional_next_page() {
?>
<script>
jQuery(function($){
// Only run this on the form ID 727
$( "form#wpforms-form-727" ).on( 'change', function () {
// Look at the field ID 9 which is a dropdown to see what the user selected
var selectedval = $( "#wpforms-727-field_9 option:selected" ).text();
// If the user selects no from the dropdown, disable the Next button
if(selectedval == "No"){
$( ".wpforms-page-next" ).attr({disabled: "true"});
}
else {
// Otherwise, the next button for this form remains disabled
$( '.wpforms-page-next' ).attr('disabled', false);
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 10 );
Nota: Quando utilizzi questo snippet, tieni presente che l'utente potrebbe non capire perché il pulsante è disabilitato e ciò potrebbe causare confusione. Assicurati che l'utente comprenda il flusso del tuo modulo quando utilizzi questo snippet.
D: Come posso impedire il pulsante Invia a meno che un campo Numerico non sia maggiore o uguale a 3?
R: Quando analizzi una quantità numerica, potresti usare questo snippet.
/**
* Check if amount entered on field ID 15 is greater than or equal to 3
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
// Form ID 1000 and Field ID 15
var selectedval = $( "div#wpforms-1000-field_15-container input[type='number']" ).val();
if(selectedval <= "2"){
$( ".wpforms-submit" ).removeClass( "show-submit" );
}
if(selectedval >= "3"){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
Nota: Ricorda di cambiare l'ID del modulo da 1000 per farlo corrispondere al tuo ID di modulo e cambia anche l'ID del campo _15 per farlo corrispondere all'ID del campo del tuo modulo Numerico.
D: Come posso nascondere il pulsante Avanti finché non vengono selezionati un certo numero di checkbox in un modulo multi-step?
R: Puoi nascondere il pulsante Avanti finché non vengono selezionati un numero specifico di checkbox utilizzando una combinazione di CSS e JavaScript. Ecco un esempio che nasconde il pulsante Avanti finché non vengono selezionati almeno 2 checkbox:
/**
* Hide Next button until multiple checkboxes are selected
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide next button on page load for specific form and page */
#wpforms-form-35864 .wpforms-page-next[data-page="4"] {
visibility: hidden;
}
#wpforms-form-35864 .wpforms-page-next[data-page="4"].show-next {
visibility: visible;
}
</style>
<?php } );
function wpf_dev_form_conditional_next() {
?>
<script type="text/javascript">
jQuery(function($) {
// Function to check the number of selected checkboxes
function checkCheckboxes() {
var minSelection = $('#wpforms-35864-field_33-container input[type=checkbox]:checked').length;
if (minSelection >= 2) {
$("button.wpforms-page-next").addClass("show-next");
} else {
$("button.wpforms-page-next").removeClass("show-next");
}
}
// Check the checkboxes on form load and when any checkbox is clicked
checkCheckboxes();
$('#wpforms-35864-field_33-container input[type=checkbox]').on('change', function() {
checkCheckboxes();
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_conditional_next', 10 );
E questo è tutto ciò che ti serve per mostrare condizionalmente il pulsante di invio sul tuo modulo! Vuoi saperne di più su come cambiare il colore del pulsante di invio? Dai un'occhiata al nostro articolo su Come cambiare il colore del pulsante di invio.