Formulaire d'inscription
/* === MISE EN FORME DES LIGNES FAMILLE === */
.famille-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
width: 100%;
}
/* Les champs Nom et Niveau prennent chacun 50% de l'espace */
.famille-row > div.elementor-field-group {
flex: 1;
margin-bottom: 0 !important;
}
/* Style des petits boutons ronds + et - à droite */
.famille-buttons {
display: flex;
align-items: center;
gap: 8px;
}
.famille-buttons span {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid #ccc;
color: #888;
font-size: 16px;
font-weight: 300;
cursor: pointer;
user-select: none;
background: #fff;
transition: all 0.2s ease;
}
.famille-buttons span:hover {
border-color: #1a1a1a;
color: #1a1a1a;
}
/* Version Mobile : on rempile les champs de haut en bas */
@media(max-width: 767px) {
.famille-row {
flex-direction: column;
align-items: stretch;
gap: 15px;
}
.famille-buttons {
justify-content: flex-end;
}
}
document.addEventListener("DOMContentLoaded", function() {
// On cible ton formulaire spécifique
const form = document.querySelector('.elementor-element-997627c');
if(!form) return;
// Identifiants exacts de tes 5 paires de champs (Nom + Niveau d'étude)
const pairs = [
['.elementor-field-group-field_334dd21', '.elementor-field-group-field_3d1f1f5'],
['.elementor-field-group-field_9a8e346', '.elementor-field-group-field_9f75e79'],
['.elementor-field-group-field_7d504d5', '.elementor-field-group-field_66ba55b'],
['.elementor-field-group-field_a7731dc', '.elementor-field-group-field_0a29e4f'],
['.elementor-field-group-field_87c0c8a', '.elementor-field-group-field_6c3550e']
];
let currentIndex = 1; // 1 = Seule la première ligne est visible au chargement
// On transforme le HTML d'Elementor pour l'adapter à la maquette
pairs.forEach((pairSelectors, index) => {
const field1 = form.querySelector(pairSelectors[0]);
const field2 = form.querySelector(pairSelectors[1]);
if(!field1 || !field2) return;
// On masque les titres au dessus des champs pour n'avoir que le texte à l'intérieur
const label1 = field1.querySelector('label');
const label2 = field2.querySelector('label');
if(label1) label1.style.display = 'none';
if(label2) label2.style.display = 'none';
// On emballe la paire dans une "ligne"
const wrapper = document.createElement('div');
wrapper.className = 'famille-row';
wrapper.dataset.index = index;
field1.parentNode.insertBefore(wrapper, field1);
wrapper.appendChild(field1);
wrapper.appendChild(field2);
// On ajoute les boutons + et -
const btnContainer = document.createElement('div');
btnContainer.className = 'famille-buttons';
btnContainer.innerHTML = `
＋
－
`;
wrapper.appendChild(btnContainer);
// Action quand on clique sur le "+"
btnContainer.querySelector('.btn-add').addEventListener('click', () => {
if (currentIndex {
if (currentIndex > 1) {
// On vide le texte de la ligne cachée pour éviter d'envoyer de fausses infos
const currentField1 = form.querySelector(pairs[currentIndex-1][0] + ' input');
const currentField2 = form.querySelector(pairs[currentIndex-1][1] + ' input');
if(currentField1) currentField1.value = '';
if(currentField2) currentField2.value = '';
currentIndex--;
updateView();
}
});
});
// Fonction qui met à jour l'affichage
function updateView() {
const rows = form.querySelectorAll('.famille-row');
rows.forEach((row, index) => {
// Affiche la ligne seulement si elle est dans l'index actif
row.style.display = index < currentIndex ? 'flex' : 'none';
// Les boutons s'affichent UNIQUEMENT sur la dernière ligne visible
const btnContainer = row.querySelector('.famille-buttons');
const btnAdd = row.querySelector('.btn-add');
const btnRemove = row.querySelector('.btn-remove');
if (index === currentIndex - 1) {
btnContainer.style.display = 'flex';
btnAdd.style.display = currentIndex 1 ? 'flex' : 'none'; // Disparaît à 1
} else {
btnContainer.style.display = 'none';
}
});
}
updateView(); // Initialisation au chargement de la page
});
document.addEventListener('DOMContentLoaded', function() {
// On récupère TOUS les champs d'upload dans ce formulaire spécifique
const uploadContainers = document.querySelectorAll('.elementor-element-997627c .elementor-field-type-upload');
uploadContainers.forEach(function(container) {
const fileInput = container.querySelector('input[type="file"]');
// Création du message de succès spécifique à ce champ
const successMsg = document.createElement('div');
successMsg.className = 'upload-success-msg';
successMsg.innerHTML = 'Fichier téléchargé avec succès !';
container.appendChild(successMsg);
fileInput.addEventListener('change', function() {
if (this.files && this.files.length > 0) {
// On active l'animation sur CE conteneur précis
container.classList.add('upload-loading');
container.classList.remove('file-uploaded');
successMsg.style.display = 'none';
// Simulation du temps de traitement
setTimeout(() => {
container.classList.remove('upload-loading');
container.classList.add('file-uploaded');
successMsg.style.display = 'block';
// Optionnel : Afficher le nom du fichier PDF s'il y en a un
if(this.files[0].name.toLowerCase().endsWith('.pdf')) {
successMsg.innerHTML = '📄 PDF "' + this.files[0].name + '" ajouté !';
}
}, 1200);
}
});
});
});