Come creare modulo con finta attesa finale in Elementor

Ti è mai capitato di voler creare un’attesa alla fine di un tuo quiz, per far vedere all’utente che non si tratta di un calcolo automatico e dargli la sensazione di avere più valore?

Ad esempio se sei un Personal Trainer e gli stai facendo un Quiz per regalargli una Scheda di Allenamento specifica,

oppure per un servizio di finanziamenti, credito e quant’altro..

Insomma se vuoi fare delle domande all’utente e dargli la percezione che si stiano elaborando i dati dopo aver compilato il modulo, questo tutorial fa per te!

Ti consiglio di vedere il video su Youtube con la spiegazione per poi usare questo codice nella tua pagina:

<style>.elementor-field-option {
    margin:5px;
    text-align: center;
}

.elementor-field-type-radio > label {
    margin: 0 auto!important;
}
.elementor-field-option input {
    display: none!important;
}

.elementor-field-option label {
    padding:10px 20px;
    background: blue; /* COLORE DI SFONDO DEL PULSANTE */
    color:#fff!important; /* COLORE DEL TESTO DEL PULSANTE */
    line-height: 30px;
    max-width: 300px; /* LUNGHEZZA MASSIMA DEL PULSANTE */
    margin:0 auto;
    display: block!important;
}

.elementor-field-option input[type="radio"]:checked+label {
    background: red; /* CAMBIA COLORE DEL PULSANTE DOPO ESSERE STATO CLICCATO */
    font-weight:bold;
}

.elementor-field-group-opt2, .elementor-field-group-opt3, .elementor-field-group-opt4 {
    display: none;
}

#modulo-magico button {display:none!important;}


</style>

<script>
  let domande=4; /* CAMBIA CON IL NUMERO DI DOMANDE */
  let i=1;

  jQuery(document).ready(function($) {
      
    $("#modulo-magico .elementor-field-option label").click(function() {
      $("#modulo-magico .elementor-field-group-opt"+i).fadeOut(500);

      i++;
      if(i==(domande+1)) {
          setTimeout(fakeLoading,1000);
      } else {
          $("#modulo-magico .elementor-field-group-opt"+i).delay(500).fadeIn(500);
      }
    });
    
    function fakeLoading() {
        $("#modulo-magico button").trigger('click');
          $("#modulo-magico").delay(500).hide();
        $("#loading").show();
        $(".txt1").delay(100).fadeIn(500).delay(500).fadeOut(500);
        $(".txt2").delay(1501).fadeIn(500).delay(500).fadeOut(500);
        $(".txt3").delay(3002).fadeIn(500).delay(500).fadeOut(500);
        setTimeout(function() {
            $("#loading").hide();
            $(".finale").fadeIn();
        },4600);
    }


  });
</script>