Dynamic name/surname fields per participant (based on ticket count)#3985

For legal or organizational reasons (e.g. boat tours, insurance), we often need to collect name and surname for every attendee, not just the customer.

Currently, Amelia allows only a single pair of name/surname fields, even for multiple tickets. I created a JavaScript workaround using MutationObserver that dynamically adds required fields based on the total number of participants.

Custom solution (JS):

document.addEventListener(“DOMContentLoaded”, function () const observer = new MutationObserver(() => const nomeField = document.querySelector(‘input[name=”customField[name_partecipante]”]’);
const cognomeField = document.querySelector(‘input[name=”customField[cognome_partecipante]”]’);

if (nomeField && !document.querySelector(".dynamic-partecipanti")) {
  const wrapper = document.createElement("div");
  wrapper.className = "dynamic-partecipanti";
  nomeField.closest(".el-form-row").parentNode.appendChild(wrapper);

  const totPersoneTxt = document.body.innerText.match(/Numero Totale di Persone:\s*(\d+)/);
  const totPersone = totPersoneTxt ? parseInt(totPersoneTxt[1]) : 1;

  for (let i = 1; i <= totPersone; i++) {
    const riga = document.createElement("div");
    const nome = document.createElement("input");
    const cognome = document.createElement("input");
    nome.placeholder = `Nome partecipante ${i}`;
    cognome.placeholder = `Cognome partecipante ${i}`;
    nome.required = cognome.required = true;
    riga.appendChild(nome);
    riga.appendChild(cognome);
    wrapper.appendChild(riga);
  }

  nomeField.closest(".el-form-item").style.display = "none";
  cognomeField.closest(".el-form-item").style.display = "none";
}

});
observer.observe(document.body, { childList: true, subtree: true });
});

Please integrate a native way to collect data for each attendee, or allow repeating custom fields based on ticket quantity.