Volete mostrare o nascondere automaticamente il pulsante Invia in base alle risposte dei campi del modulo? Con un semplice frammento di codice, potete controllare la visibilità del pulsante Invia del vostro modulo utilizzando la logica condizionale.
Questa guida mostra come aggiungere uno snippet di codice e impostare una logica condizionale per controllare la visibilità del pulsante Invia.
Impostazione del modulo
Per iniziare, aprire il costruttore di moduli creando un nuovo modulo o modificando quello esistente.
Per questo esempio, creeremo un modulo di donazione con un campo a scelta multipla che mostra le scelte Sì/No. Tutti gli altri campi aggiuntivi del modulo saranno rivelati solo se viene selezionato Sì, utilizzando la logica condizionale.
Il pulsante Invia appare solo se si seleziona Sì, mentre gli utenti vengono reindirizzati a una pagina di ringraziamento se si seleziona No.
Nota: prendere nota dell'ID del modulo, che servirà per aggiungere lo snippet di codice. Se avete bisogno di aiuto per trovare questi ID, consultate 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, occorre impostare la logica condizionale per gli altri campi del modulo. Questi campi devono rimanere nascosti finché l'utente non seleziona "Sì" dal campo a scelta multipla.
A tal fine, aprire le impostazioni di ciascun campo e configurare la logica condizionale per mostrare il campo quando il campo Scelta multipla è uguale a Sì. In questo modo si garantisce che questi campi rimangano nascosti per impostazione predefinita e appaiano solo quando necessario.
Nota: se avete bisogno di aiuto per capire come funziona la logica condizionale in WPForms, consultate 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 una buona esperienza anche quando viene selezionato "No". Invece di nascondere il pulsante Invia, reindirizzeremo gli utenti a una pagina di ringraziamento dedicata.
A tale scopo, creare una nuova pagina in WordPress e chiamarla Grazie (o qualsiasi altro nome si preferisca). È qui che gli utenti che selezionano "No" saranno automaticamente reindirizzati.
Prendere nota del percorso URL della pagina, che servirà per il reindirizzamento nel nostro frammento di codice.
Aggiunta dello snippet di codice
Il seguente frammento di codice controlla la visibilità del pulsante Invia in base alle risposte del modulo:
Questo snippet utilizza innanzitutto i CSS per nascondere il pulsante Invia al caricamento iniziale della pagina. Poi, imposta un ascoltatore di eventi JavaScript che controlla le modifiche alle opzioni del campo a scelta multipla del modulo.
Quando l'utente seleziona "Sì", lo script aggiunge una classe CSS che rende visibile il pulsante Invia. Se l'utente seleziona "No", lo script lo reindirizza automaticamente alla pagina di ringraziamento.
Nota: se avete bisogno di aiuto per aggiungere snippet di codice al vostro sito, consultate il nostro tutorial sull'aggiunta sicura di snippet di codice.
Personalizzazione del codice
È necessario personalizzare alcuni valori chiave dello snippet di codice per il proprio modulo specifico:
- Su linea 12 e linea 16, individuare il selettore CSS
#wpforms-form-1000e sostituire1000con l'effettivo ID del modulo. - Su linea 30nel selettore jQuery
form#wpforms-form-1000, sostituire1000con l'ID del modulo ancora una volta. - Su linea 33, troverete il percorso dell'URL di reindirizzamento
/thank-you. Aggiornare il percorso dell'URL della pagina di ringraziamento.- Ad esempio, se si chiama la pagina "Grazie", la si cambierà in
/thanks.
- Ad esempio, se si chiama la pagina "Grazie", la si cambierà in
Verifica dell'implementazione
Una volta aggiunto e personalizzato lo snippet di codice, è essenziale testare a fondo la funzionalità:
- Iniziate caricando il vostro modulo e verificate che il pulsante Invia sia nascosto per impostazione predefinita.
- Quindi, selezionate No nel vostro modulo e confermate che sarete immediatamente reindirizzati alla vostra pagina di ringraziamento.
- Quindi verificare il percorso "Sì": selezionare Sì e verificare che non solo appaia il pulsante Invia, ma anche che tutti i campi nascosti in modo condizionale diventino visibili.
- Infine, completate e inviate il modulo con Sì selezionato per assicurarvi che l'intero processo funzioni come previsto.
Domande frequenti
D: Può essere utilizzato per un campo di testo a riga singola?
R: Assolutamente sì! Ecco un frammento 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ì, è possibile utilizzarlo con i campi a discesa, utilizzando il seguente frammento 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: Si può usare anche per i pulsanti di interruzione di pagina successiva e precedente?
R: Per utilizzare la stessa funzionalità per i pulsanti di interruzione di pagina, è sufficiente 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 avete più di una domanda Sì o No, potete identificare lo script specificando l'ID del campo. Ad esempio, se in una pagina sono presenti tre campi a scelta multipla, lo script avrà il seguente aspetto.
/**
* 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 file Scelta multipla Il campo 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 disabilitare il pulsante di invio finché tutti i campi non hanno un valore?
R: Sì, ma non convaliderà numeri di telefono, indirizzi e-mail, ecc. Questo snippet cercherà solo un 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: è sufficiente assicurarsi che il 727 corrisponda all'ID del modulo e che sia stato elencato l'ID di ciascun campo del modulo. Se avete bisogno di aiuto per trovare i numeri di ID del modulo o del campo, consultate questa esercitazione.
D: Cosa succede se voglio confrontare più di una scelta per un campo?
R: Se si desidera confrontare più di un campo, è sufficiente utilizzare l'equivalente PHP dell'operatore OR.
Questo esempio utilizza un semplice modulo di prenotazione con il campo Checkbox per consentire all'utente di selezionare l'orario desiderato. Se l'utente seleziona 8:00-9:00, 9:00-10:00 o 10:00-11:00, verrà reindirizzato alla pagina di ringraziamento perché questi orari 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 in PHP, consultare la documentazione sull'argomento qui.
D: Posso modificare questa funzione per confrontare due date insieme?
R: Assolutamente sì! Supponiamo di avere due campi Data sul vostro sito. La data uno è la data dell'ordine e la data due è la data di ritiro. Ma non si vuole visualizzare il pulsante Invia se la data due non è maggiore della data uno.
Per qualsiasi assistenza su come aggiungere gli snippet, consultate 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 di cui sopra è l'ID del mio modulo. _32 e _33 sono gli ID dei campi per i due selezionatori di date nel nostro modulo.
È necessario aggiornare tutti questi ID per farli corrispondere agli ID dei propri moduli e campi. Per trovare questi ID, consultare questo tutorial.
D: Posso impedire all'utente di continuare a compilare il modulo in base a un'opzione a discesa?
R: Assolutamente sì. Per questo esempio, visualizzeremo i pulsanti Avanti e Precedente come previsto, ma se l'utente seleziona No nel modulo, vogliamo disabilitare questi pulsanti per non consentirgli di proseguire 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 si utilizza questo snippet, occorre tenere presente che l'utente potrebbe non capire perché il pulsante è disabilitato e potrebbe creare confusione. Assicurarsi che l'utente comprenda il flusso del modulo quando si utilizza questo snippet.
D: Come posso impedire che venga visualizzato il pulsante Invia se un campo Numero non è maggiore o uguale a 3?
R: Quando si analizza un importo numerico, si può utilizzare questo frammento.
/**
* 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: ricordarsi di modificare l'ID del modulo da 1000 per farlo corrispondere al proprio ID del modulo e di modificare anche l'ID del campo _15 per farlo corrispondere all'ID del campo del modulo Numero.
D: Come posso nascondere il pulsante Avanti finché non viene selezionato un certo numero di caselle di controllo in un modulo a più fasi?
R: È possibile nascondere il pulsante Avanti finché non viene selezionato un numero specifico di caselle di controllo, utilizzando una combinazione di CSS e JavaScript. Ecco un esempio che nasconde il pulsante Avanti finché non vengono selezionate almeno 2 caselle di controllo:
/**
* 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 serve per mostrare in modo condizionato il pulsante di invio del modulo! Volete saperne di più sulla modifica del colore del pulsante di invio? Date un'occhiata al nostro articolo su Come cambiare il colore del pulsante di invio.