Multi step with Conditional steps and last step

I created a multi-step form with conditional fields.

This is the code:

<div id="wizard">
<a href="/" id="backtohome"><img src="https://test.soevis.it/wp-content/uploads/2025/07/home.svg" alt="Vai alla home"></a>
[uacf7_step_start step1]
<div class="header">
<div class="title">Dove vuoi attivare la tua fornitura?</div>
</div>
<div class="togglebuttons imagebuttons">
[radio utenza use_label_element "Casa"  "Altri usi"]
</div>
[acceptance privacy] Autorizzo il <a href="/privacy-policy/" target="_blank">trattamento dei dati</a>.[/acceptance]
[acceptance marketing optional] Autorizzazione espletamento di attività di Marketing. [/acceptance]
[uacf7_step_end step1]


[uacf7_step_start step2]
<div class="header">
<div class="title">Di cosa hai bisogno?</div>
</div>
<div class="togglebuttons imagebuttons">
[radio contratto use_label_element "Luce" "Gas" "Luce e gas"]
</div>
[uacf7_step_end step2]

[uacf7_step_start step3]
<div class="header">
<div class="title">Cosa vuoi fare?</div>
</div>
<div class="togglebuttons">
[radio cosavuoi use_label_element "Uno switch" "Una voltura" "Uno switch con voltura" "Una nuova attivazione"]
</div>
[uacf7_step_end step3]

[uacf7_step_start step4]
<div class="header">
<div class="title">Carica la bolletta</div>
</div>

[conditional caricabolletta]
<div class="togglebuttons">
[radio utenza-attiva-singolo use_label_element "Carica una foto" "Non hai la bolletta"]
</div>
[conditional bolletta-file-upload]
<div class="fileupload">
[file bolletta-file class:fileupload filetypes:jpg|jpeg|pdf|png|bmp limit:12mb]
</div>
[/conditional]
[/conditional]

[conditional caricabolletta-lucegas]
<div class="togglebuttons">
[radio utenza-attiva-lucegas use_label_element "Carica una foto" "Non hai la bolletta"]
[conditional bolletta-file-upload-lucegas]
<div class="fileupload">
Carica bolletta Luce
[file* bolletta-file-luce filetypes:jpg|jpeg|pdf|png|bmp limit:12mb]
</div>
<div class="fileupload">
Carica bolletta Gas
[file* bolletta-file-gas filetypes:jpg|jpeg|pdf|png|bmp limit:12mb]
</div>
</div>
[/conditional]
[/conditional]
[uacf7_step_end step4]

[conditional step5-nobolletta]
[uacf7_step_start step5]

<div class="header">
<div class="title">Qualche piccola informazione</div>
</div>

[conditional nobolletta]
<div class="consumomedio">
<h4>PER UTENZA GIÀ ATTIVA</h4>
<label>CONSUMO MEDIO ANNUO kWh/Smc</label>
[text* consumo-medio]
</div>

<div class="consumomedio">
<h4>PER UNA NUOVA ATTIVAZZIONE</h4>
<label>STIMA DEL TUO CONSUMO ANNUO kWh/Smc (BASSO/MEDIO/ALTO/PRECISO)</label>
[text* consumo-medio-nuova]
</div>
[/conditional]

[conditional nobolletta-luce-gas]
<div class="consumomedio">
<h4>PER UTENZA GIÀ ATTIVA</h4>
<label>CONSUMO MEDIO ANNUO kWh</label>
[text* consumo-medio-luce]
<label>CONSUMO MEDIO ANNUO  Smc</label>
[text* consumo-medio-gas]
</div>

<div class="consumomedio">
<h4>PER UNA NUOVA ATTIVAZZIONE</h4>
<label>STIMA DEL TUO CONSUMO ANNUO kWh(BASSO/MEDIO/ALTO/PRECISO)</label>
[text* consumo-medio-nuova-luce]
<label>STIMA DEL TUO CONSUMO ANNUO Smc</label>
[text* consumo-medio-nuova-gas]
</div>
[/conditional]

[uacf7_step_end step5]
[/conditional]

[uacf7_step_start dati-finali]
<div class="header">
<div class="title">Ultimo passaggio ci siamo quasi</div>
</div>

[conditional dati-anagrafici-privati]
<div>
Nome e cognome dell'intestatario
[text* nome]
</div>
<div>
Recapito telefonico
[tel* telefono]
</div>
<div>
Indirizzo email
[email* indirizzo-email]
</div>
[/conditional]

[conditional dati-anagrafici-aziende]
<div>
Ragione sociale
[text* ragionesociale]
</div>
<div>
PARTITA IVA E/O CODICE FISCALE
[text* piva minlength:11 maxlength:11]
</div>
<div>
Legale rappresentante
[text* rappresentante]
</div>
<div>
Telefono
[tel* telazienda]
</div>
<div>
Indirizzo email
[email* indirizzo-email-aziende]
</div>
[/conditional]

[submit "Procedi"]

[uacf7_step_end dati-finali]



</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
  function addButtonBoxes() {
    // Seleziona solo i primi 2 gruppi .togglebuttons (nei primi 2 step)
    const toggleGroups = Array.from(document.querySelectorAll('.uacf7-step .togglebuttons')).slice(0, 2);

    toggleGroups.forEach(group => {
      const labels = group.querySelectorAll('label');
      labels.forEach((label, index) => {
        if (index < 2 && !label.querySelector('.button-box')) {
          const box = document.createElement('div');
          box.className = 'button-box';
          label.appendChild(box);
        }
      });
    });
  }

  function updateSelected() {
    document.querySelectorAll('.togglebuttons').forEach(group => {
      group.querySelectorAll('input[type="radio"]').forEach(r => {
        const label = r.closest('label');
        if (label) label.classList.remove('selected');
      });
      const checked = group.querySelector('input[type="radio"]:checked');
      if (checked) {
        const label = checked.closest('label');
        if (label) label.classList.add('selected');
      }
    });
  }

  function bindRadioEvents() {
    document.querySelectorAll('.togglebuttons input[type="radio"]').forEach(radio => {
      radio.removeEventListener('change', updateSelected);
      radio.addEventListener('change', updateSelected);
    });
  }

  function refreshToggleButtons() {
    addButtonBoxes();
    updateSelected();
    bindRadioEvents();
  }

  refreshToggleButtons();

  document.querySelectorAll('.uacf7-next, .uacf7-prev').forEach(btn => {
    btn.addEventListener('click', function () {
      setTimeout(refreshToggleButtons, 100);
    });
  });

  // BLOCCA AVANZAMENTO STEP SE PRIVACY NON SPUNTATO
  document.querySelectorAll('.uacf7-next').forEach(button => {
    button.addEventListener('click', function (e) {
      const currentStep = button.closest('.uacf7-step');
      if (!currentStep) return;

      const privacyField = currentStep.querySelector('input[name="privacy"]');
      const privacyWrap = privacyField?.closest('.wpcf7-form-control-wrap');

      if (privacyField && !privacyField.checked) {
        e.stopImmediatePropagation();
        e.preventDefault();

        if (privacyWrap) {
          privacyWrap.classList.add('wpcf7-not-valid');

          if (!privacyWrap.querySelector('.wpcf7-not-valid-tip')) {
            const tip = document.createElement('span');
            tip.className = 'wpcf7-not-valid-tip';
            tip.textContent = 'Devi accettare per proseguire.';
            privacyWrap.appendChild(tip);
          }
        }

        return false;
      }
    }, true);
  });

  // Traduzione bottoni
  document.querySelectorAll('.uacf7-next').forEach(btn => {
    if (btn.innerText.trim().toLowerCase() === 'next') {
      btn.innerText = 'Procedi';
    }
  });
  document.querySelectorAll('.uacf7-prev').forEach(btn => {
    if (btn.innerText.trim().toLowerCase() === 'previous') {
      btn.innerText = 'Indietro';
    }
  });
});
</script>

And these are the conditions:

{"conditional":{"conditional_heading":"","conditional_field_docs":"","conditional_form_options_heading":"","conditional_repeater":{"4":{"uacf7_cf_group":"caricabolletta","uacf7_cf_hs":"show","uacf7_cf_condition_for":"any","uacf7_cf_conditions":{"1":{"uacf7_cf_tn":"contratto","uacf7_cf_operator":"equal","uacf7_cf_val":"Luce"},"2":{"uacf7_cf_tn":"contratto","uacf7_cf_operator":"equal","uacf7_cf_val":"Gas"}}},"10":{"uacf7_cf_group":"bolletta-file-upload","uacf7_cf_hs":"show","uacf7_cf_condition_for":"any","uacf7_cf_conditions":{"1":{"uacf7_cf_tn":"utenza-attiva-singolo","uacf7_cf_operator":"equal","uacf7_cf_val":"Carica una foto"}}},"11":{"uacf7_cf_group":"caricabolletta-lucegas","uacf7_cf_hs":"show","uacf7_cf_condition_for":"any","uacf7_cf_conditions":{"1":{"uacf7_cf_tn":"contratto","uacf7_cf_operator":"equal","uacf7_cf_val":"Luce e gas"}}},"12":{"uacf7_cf_group":"bolletta-file-upload-lucegas","uacf7_cf_hs":"show","uacf7_cf_condition_for":"any","uacf7_cf_conditions":{"1":{"uacf7_cf_tn":"utenza-attiva-lucegas","uacf7_cf_operator":"equal","uacf7_cf_val":"Carica una foto"}}},"13":{"uacf7_cf_group":"step5-nobolletta","uacf7_cf_hs":"show","uacf7_cf_condition_for":"any","uacf7_cf_conditions":{"1":{"uacf7_cf_tn":"utenza-attiva-singolo","uacf7_cf_operator":"equal","uacf7_cf_val":"Non hai la bolletta"},"2":{"uacf7_cf_tn":"utenza-attiva-lucegas","uacf7_cf_operator":"equal","uacf7_cf_val":"Non hai la bolletta"}}},"14":{"uacf7_cf_group":"nobolletta","uacf7_cf_hs":"show","uacf7_cf_condition_for":"any","uacf7_cf_conditions":{"1":{"uacf7_cf_tn":"contratto","uacf7_cf_operator":"equal","uacf7_cf_val":"Luce"},"2":{"uacf7_cf_tn":"contratto","uacf7_cf_operator":"equal","uacf7_cf_val":"Gas"}}},"15":{"uacf7_cf_group":"nobolletta-luce-gas","uacf7_cf_hs":"show","uacf7_cf_condition_for":"any","uacf7_cf_conditions":{"1":{"uacf7_cf_tn":"contratto","uacf7_cf_operator":"equal","uacf7_cf_val":"Luce e gas"}}},"7":{"uacf7_cf_group":"dati-anagrafici-privati","uacf7_cf_hs":"show","uacf7_cf_condition_for":"any","uacf7_cf_conditions":{"1":{"uacf7_cf_tn":"utenza","uacf7_cf_operator":"equal","uacf7_cf_val":"Casa"}}},"8":{"uacf7_cf_group":"dati-anagrafici-aziende","uacf7_cf_hs":"show","uacf7_cf_condition_for":"any","uacf7_cf_conditions":{"1":{"uacf7_cf_tn":"utenza","uacf7_cf_operator":"equal","uacf7_cf_val":"Altri usi"}}}}},"multistep":{"placeholder_heading":"","multistep_form_docs":"","uacf7_multistep_is_multistep":"1","uacf7_multistep_form_options_heading":"","uacf7_enable_multistep_progressbar":"","uacf7_enable_multistep_scroll":"","uacf7_multistep_use_step_labels":"","uacf7_progressbar_style":"default","uacf7_progressbar_styler":"","uacf7_multistep_step_height":"default","uacf7_multistep_progressbar_color_option":{"uacf7_multistep_circle_bg_color":"","uacf7_multistep_circle_active_color":"","uacf7_multistep_circle_font_color":"","uacf7_multistep_progress_bg_color":"","uacf7_multistep_progress_line_color":"","uacf7_multistep_step_title_color":"","uacf7_multistep_progressbar_title_color":""},"uacf7_progressbar_size_option":"","uacf7_multistep_circle_width":"","uacf7_multistep_circle_height":"","uacf7_multistep_font_size":"","uacf7_multistep_circle_border_radious":"","uacf7_progressbar_button_style":"","uacf7_multistep_button_padding_tb":"","uacf7_multistep_button_padding_lr":"","uacf7_multistep_button_border_radius":"","uacf7_multistep_next_prev_option":{"uacf7_multistep_button_bg":"","uacf7_multistep_button_color":"","uacf7_multistep_button_border_color":"","uacf7_multistep_button_hover_bg":"","uacf7_multistep_button_hover_color":"","uacf7_multistep_button_border_hover_color":""},"uacf7_multistep_step_1":"","uacf7_progressbar_image_uacf7_step_start-133":"","uacf7_progressbar_icon_uacf7_step_start-133":"fas fa-user","next_btn_uacf7_step_start-133":"","desc_title_uacf7_step_start-133":"","step_desc_uacf7_step_start-133":"","step_form_desc_uacf7_step_start-133":"","uacf7_progressbar_image_step1":"","uacf7_progressbar_icon_step1":"","next_btn_step1":"","desc_title_step1":"","step_desc_step1":"","step_form_desc_step1":"","uacf7_multistep_step_2":"","uacf7_progressbar_image_step2":"","uacf7_progressbar_icon_step2":"","prev_btn_step2":"","desc_title_step2":"","step_desc_step2":"","step_form_desc_step2":"","next_btn_step2":"","uacf7_multistep_step_3":"","uacf7_progressbar_image_step3-luce":"","uacf7_progressbar_icon_step3-luce":"fas fa-user","prev_btn_step3-luce":"","desc_title_step3-luce":"","step_desc_step3-luce":"","step_form_desc_step3-luce":"","next_btn_step3-luce":"","uacf7_multistep_step_4":"","uacf7_progressbar_image_step4-daticliente":"","uacf7_progressbar_icon_step4-daticliente":"fas fa-user","prev_btn_step4-daticliente":"","desc_title_step4-daticliente":"","step_desc_step4-daticliente":"","step_form_desc_step4-daticliente":"","uacf7_progressbar_image_step3":"","uacf7_progressbar_icon_step3":"","next_btn_step3":"","prev_btn_step3":"","desc_title_step3":"","step_desc_step3":"","step_form_desc_step3":"","uacf7_progressbar_image_step4-dati-privati":"","uacf7_progressbar_icon_step4-dati-privati":"fas fa-user","next_btn_step4-dati-privati":"","prev_btn_step4-dati-privati":"","desc_title_step4-dati-privati":"","step_desc_step4-dati-privati":"","step_form_desc_step4-dati-privati":"","uacf7_multistep_step_5":"","uacf7_progressbar_image_step4-dati-aziende":"","uacf7_progressbar_icon_step4-dati-aziende":"fas fa-user","prev_btn_step4-dati-aziende":"","desc_title_step4-dati-aziende":"","step_desc_step4-dati-aziende":"","step_form_desc_step4-dati-aziende":"","uacf7_progressbar_image_step-utenza-attiva":"","uacf7_progressbar_icon_step-utenza-attiva":"fas fa-user","next_btn_step-utenza-attiva":"","prev_btn_step-utenza-attiva":"","desc_title_step-utenza-attiva":"","step_desc_step-utenza-attiva":"","step_form_desc_step-utenza-attiva":"","uacf7_progressbar_image_dati-privati":"","uacf7_progressbar_icon_dati-privati":"fas fa-user","next_btn_dati-privati":"","prev_btn_dati-privati":"","desc_title_dati-privati":"","step_desc_dati-privati":"","step_form_desc_dati-privati":"","uacf7_multistep_step_6":"","uacf7_progressbar_image_dati-aziende":"","uacf7_progressbar_icon_dati-aziende":"fas fa-user","prev_btn_dati-aziende":"","desc_title_dati-aziende":"","step_desc_dati-aziende":"","step_form_desc_dati-aziende":"","uacf7_progressbar_image_multistep":"","uacf7_progressbar_icon_multistep":"fas fa-user","next_btn_multistep":"","desc_title_multistep":"","step_desc_multistep":"","step_form_desc_multistep":"","prev_btn_step1":"","uacf7_multistep_step_7":"","uacf7_progressbar_image_dati-finali":"","uacf7_progressbar_icon_dati-finali":"","prev_btn_dati-finali":"","desc_title_dati-finali":"","step_desc_dati-finali":"","step_form_desc_dati-finali":"","uacf7_progressbar_image_step4":"","uacf7_progressbar_icon_step4":"","next_btn_step4":"","prev_btn_step4":"","desc_title_step4":"","step_desc_step4":"","step_form_desc_step4":"","uacf7_progressbar_image_step5":"","uacf7_progressbar_icon_step5":"","next_btn_step5":"","prev_btn_step5":"","desc_title_step5":"","step_desc_step5":"","step_form_desc_step5":"","next_btn_dati-finali":"","uacf7_progressbar_image_dati-finali-nobolletta":"","uacf7_progressbar_icon_dati-finali-nobolletta":"fas fa-user","next_btn_dati-finali-nobolletta":"","prev_btn_dati-finali-nobolletta":"","desc_title_dati-finali-nobolletta":"","step_desc_dati-finali-nobolletta":"","step_form_desc_dati-finali-nobolletta":""},"import_export":{"placeholder_heading":"","uacf7_import_export_backup":""},"styler":{"styler_heading":"","styler_docs":"","uacf7_enable_form_styles":"1","styler_heading_label":"","uacf7_uacf7style_label_color_option":{"uacf7_uacf7style_label_color":"","uacf7_uacf7style_label_background_color":""},"uacf7_uacf7style_label_font_style":"normal","uacf7_uacf7style_label_font_weight":"normal","uacf7_uacf7style_label_font_size":"","uacf7_uacf7style_label_font_family":"","styler_heading_label_padding":"","uacf7_uacf7style_label_padding_top":"","uacf7_uacf7style_label_padding_right":"","uacf7_uacf7style_label_padding_bottom":"","uacf7_uacf7style_label_padding_left":"","styler_heading_label_margin":"","uacf7_uacf7style_label_margin_top":"","uacf7_uacf7style_label_margin_right":"","uacf7_uacf7style_label_margin_bottom":"","uacf7_uacf7style_label_margin_left":"","uacf7_uacf7style_input_color_option":{"uacf7_uacf7style_input_color":"","uacf7_uacf7style_input_background_color":""},"uacf7_uacf7style_input_font_style":"normal","uacf7_uacf7style_input_font_weight":"normal","uacf7_uacf7style_input_font_size":"","uacf7_uacf7style_input_font_family":"","uacf7_uacf7style_input_height":"","uacf7_uacf7style_textarea_input_height":"","styler_heading_input_padding":"","uacf7_uacf7style_input_padding_top":"","uacf7_uacf7style_input_padding_right":"","uacf7_uacf7style_input_padding_bottom":"","uacf7_uacf7style_input_padding_left":"","styler_heading_input_margin":"","uacf7_uacf7style_input_margin_top":"","uacf7_uacf7style_input_margin_right":"","uacf7_uacf7style_input_margin_bottom":"","uacf7_uacf7style_input_margin_left":"","styler_heading_input_border":"","uacf7_uacf7style_input_border_width":"","uacf7_uacf7style_input_border_style":"solid","uacf7_uacf7style_input_border_radius":"","uacf7_uacf7style_input_border_color":"","uacf7_uacf7style_btn_color_option":{"uacf7_uacf7style_btn_color":"","uacf7_uacf7style_btn_color_hover":"","uacf7_uacf7style_btn_background_color":"","uacf7_uacf7style_btn_background_color_hover":""},"uacf7_uacf7style_btn_font_size":"","uacf7_uacf7style_btn_font_style":"normal","uacf7_uacf7style_btn_font_weight":"normal","uacf7_uacf7style_btn_width":"","uacf7_uacf7style_btn_border_style":"none","uacf7_uacf7style_btn_border_width":"","uacf7_uacf7style_btn_border_radius":"","uacf7_uacf7style_btn_border_color":"","uacf7_uacf7style_btn_border_color_hover":"","uacf7_uacf7style_btn_padding":"","uacf7_uacf7style_btn_padding_top":"","uacf7_uacf7style_btn_padding_right":"","uacf7_uacf7style_btn_padding_bottom":"","uacf7_uacf7style_btn_padding_left":"","uacf7_uacf7style_btn_margin":"","uacf7_uacf7style_btn_margin_top":"","uacf7_uacf7style_btn_margin_right":"","uacf7_uacf7style_btn_margin_bottom":"","uacf7_uacf7style_btn_margin_left":"","uacf7_uacf7style_ua_custom_header":"","uacf7_uacf7style_ua_custom_css":""},"redirection":{"redirection_heading":"","redirection_docs":"","uacf7_redirect_enable":"","uacf7_redirect_form_options_heading":"","uacf7_redirect_to_type":"","page_id":"0","external_url":"","uacf7_redirect_type":"","conditional_redirect":"","target":"","uacf7_redirect_tag_support":""}}

If I choose “Non hai la bolletta” for the “utenza-attiva-singolo” field, it continues to step 5 and then continues to the end, and is correct up to this point. If I choose “Carica una foto” however, it doesn’t get to the “dati-finali” step.

How can I fix this?

• This topic was modified 9 months ago by darfil.
• This topic was modified 9 months ago by darfil.