1871 lines
74 KiB
Plaintext
1871 lines
74 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="oscar_school_form_container">
|
||
<div id="oscar_school_form_body">
|
||
<form id="oscar_school_form" method="POST" action="https://v3.oscar-campus.com/groupe_ensup/forms" ref="schoolForm">
|
||
<input type="hidden" name="type_formulaire" value="candidature">
|
||
<div class="form-sections-wrapper">
|
||
|
||
<div id="section1" class="form-section form-section-step">
|
||
<h2><i class="fas fa-user-graduate"></i> Faisons les présentations !</h2>
|
||
<p style="text-align: center;">Je renseigne quelques informations pour commencer.</p>
|
||
|
||
<div class="form-group">
|
||
<div class="form-group-item">
|
||
<label for="je_suis">Je suis<span class="oscar_input_required">(*)</span>:</label>
|
||
<select id="OscarContactJeSuisRefIdField" name="je_suis_ref_id" class="form-control" required>
|
||
<option value="">Choisir</option>
|
||
<option value="434">Lycéen(ne)</option>
|
||
<option value="435">Étudiant(e)</option>
|
||
<option value="436">En poste / reconversion</option>
|
||
<option value="437">Étudiant avec un diplôme étranger</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="form-group">
|
||
<div class="form-group-item">
|
||
<label for="nom">Nom<span class="oscar_input_required">(*)</span></label>
|
||
<input
|
||
type="text"
|
||
id="nom"
|
||
name="nom"
|
||
class="form-control"
|
||
required
|
||
pattern="^[A-Za-zÀ-ÿ' \-]{2,50}$"
|
||
maxlength="50"
|
||
title="Le nom doit contenir uniquement des lettres (pas de chiffres ou symboles)">
|
||
|
||
</div>
|
||
<div class="form-group-item">
|
||
<label for="prenom">Prénom<span class="oscar_input_required">(*)</span></label>
|
||
<input
|
||
type="text"
|
||
id="prenom"
|
||
name="prenom"
|
||
class="form-control"
|
||
required
|
||
pattern="^[A-Za-zÀ-ÿ' \-]{2,50}$"
|
||
maxlength="50"
|
||
title="Le prénom doit contenir uniquement des lettres (pas de chiffres ou symboles)">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div class="form-group-item">
|
||
<label for="email">Email<span class="oscar_input_required">(*)</span></label>
|
||
<input type="email" id="email" name="email" class="form-control" required title="Veuillez saisir une adresse email valide.">
|
||
</div>
|
||
<div class="form-group-item">
|
||
<label for="portable">Portable<span class="oscar_input_required">(*)</span></label>
|
||
<input type="tel" id="portable" name="portable" class="form-control" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div class="form-group-item">
|
||
<label for="ville">Ville<span class="oscar_input_required">(*)</span></label>
|
||
<input
|
||
type="text"
|
||
id="ville"
|
||
name="ville"
|
||
class="form-control"
|
||
required
|
||
pattern="^[A-Za-zÀ-ÿ' \-]{2,50}$"
|
||
maxlength="50"
|
||
title="La ville doit contenir uniquement des lettres.">
|
||
</div>
|
||
<div class="form-group-item">
|
||
<label for="codepostal">Code postal<span class="oscar_input_required">(*)</span></label>
|
||
<input type="text" id="codepostal" name="code_postal" class="form-control" required >
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div class="form-group-item">
|
||
<label for="pays_select">Pays<sup class="oscar_input_required">(*)</sup></label>
|
||
<select id="pays" class="form-control" name="pays_common_ref_id" required>
|
||
<option value="">Choisir le pays</option>
|
||
<option value="60164">AFGHANISTAN</option>
|
||
<option value="60166">ALBANIE</option>
|
||
<option value="60167">ALGÉRIE</option>
|
||
<option value="60165">ALLEMAGNE</option>
|
||
<option value="60169">ANDORRE</option>
|
||
<option value="60168">ANGOLA</option>
|
||
<option value="60162">ANGUILLA</option>
|
||
<option value="60342">ANTARCTIQUE</option>
|
||
<option value="60347">ANTIGUA-ET-BARBUDA</option>
|
||
<option value="60171">ARABIE SAOUDITE</option>
|
||
<option value="60161">ARGENTINE</option>
|
||
<option value="60170">ARMÉNIE</option>
|
||
<option value="60343">ARUBA</option>
|
||
<option value="60173">AUSTRALIE</option>
|
||
<option value="104696">AUTRE</option>
|
||
<option value="60172">AUTRICHE</option>
|
||
<option value="60174">AZERBAÏDJAN</option>
|
||
<option value="60332">BAHAMAS</option>
|
||
<option value="60177">BAHREÏN</option>
|
||
<option value="60176">BANGLADESH</option>
|
||
<option value="60178">BARBADE</option>
|
||
<option value="60349">BELARUS</option>
|
||
<option value="60175">BELGIQUE</option>
|
||
<option value="60336">BELIZE</option>
|
||
<option value="60179">BENIN</option>
|
||
<option value="60180">BERMUDES</option>
|
||
<option value="60348">BHOUTAN</option>
|
||
<option value="104671">BIELORUSSIE</option>
|
||
<option value="104670">BIRMANIE</option>
|
||
<option value="60184">BOLIVIE</option>
|
||
<option value="60182">BONAIRE, SAINT-EUSTACHE ET SABA</option>
|
||
<option value="60185">BOSNIE-HERZÉGOVINE</option>
|
||
<option value="60183">BOTSWANA</option>
|
||
<option value="60194">BOUVET, ILE</option>
|
||
<option value="60186">BRESIL</option>
|
||
<option value="60187">BRUNEI</option>
|
||
<option value="60188">BULGARIE</option>
|
||
<option value="60181">BURKINA FASO</option>
|
||
<option value="60189">BURUNDI</option>
|
||
<option value="60192">CAMBODGE</option>
|
||
<option value="60190">CAMEROUN</option>
|
||
<option value="60191">CANADA</option>
|
||
<option value="60206">CAP-VERT</option>
|
||
<option value="60196">CHILI</option>
|
||
<option value="60195">CHINE</option>
|
||
<option value="60334">CHRISTMAS, ILE</option>
|
||
<option value="60197">CHYPRE</option>
|
||
<option value="60382">COCOS (KEELING), ILES</option>
|
||
<option value="60199">COLOMBIE</option>
|
||
<option value="60200">COMORES</option>
|
||
<option value="60193">CORÉE, RÉPUBLIQUE DE</option>
|
||
<option value="60202">CORÉE, RÉPUBLIQUE POPULAIRE DÉMOCRATIQUE DE</option>
|
||
<option value="60203">COSTA RICA</option>
|
||
<option value="60198">CÔTE D'IVOIRE</option>
|
||
<option value="60204">CROATIE</option>
|
||
<option value="60205">CUBA</option>
|
||
<option value="60384">CURACAO</option>
|
||
<option value="60208">DANEMARK</option>
|
||
<option value="60207">DJIBOUTI</option>
|
||
<option value="60294">DOMINIQUE</option>
|
||
<option value="60212">EGYPTE</option>
|
||
<option value="60211">EL SALVADOR</option>
|
||
<option value="60210">EMIRATS ARABES UNIS</option>
|
||
<option value="60213">EQUATEUR</option>
|
||
<option value="60351">ERYTHRÉE</option>
|
||
<option value="60209">ESPAGNE</option>
|
||
<option value="60214">ESTONIE</option>
|
||
<option value="60375">ESWATINI</option>
|
||
<option value="104669">ETATS FEDERES DE MICRONESIE</option>
|
||
<option value="60322">ETATS-UNIS</option>
|
||
<option value="60215">ETHIOPIE</option>
|
||
<option value="60385">FALKLAND, ILES (MALVINAS)</option>
|
||
<option value="60333">FEROE, ILES</option>
|
||
<option value="60232">FIDJI</option>
|
||
<option value="60217">FINLANDE</option>
|
||
<option value="60216">FRANCE</option>
|
||
<option value="60218">GABON</option>
|
||
<option value="60338">GAMBIE</option>
|
||
<option value="60352">GÉORGIE</option>
|
||
<option value="60220">GHANA</option>
|
||
<option value="60221">GRÈCE</option>
|
||
<option value="60353">GRENADE</option>
|
||
<option value="60223">GUADELOUPE</option>
|
||
<option value="60389">GUAM</option>
|
||
<option value="60219">GUATEMALA</option>
|
||
<option value="60380">GUINÉE</option>
|
||
<option value="60222">GUINÉE-BISSAU</option>
|
||
<option value="60354">GUINÉE-ÉQUATORIALE</option>
|
||
<option value="60355">GUYANA</option>
|
||
<option value="60224">GUYANE FRANCAISE</option>
|
||
<option value="60226">HAÏTI</option>
|
||
<option value="60228">HONDURAS</option>
|
||
<option value="60227">HONG-KONG</option>
|
||
<option value="60225">HONGRIE</option>
|
||
<option value="60231">ILES CAIMANS</option>
|
||
<option value="60383">ILES COOK</option>
|
||
<option value="60393">ILES MARSHALL</option>
|
||
<option value="60394">ILES VIERGES BRITANNIQUES</option>
|
||
<option value="60395">ILES VIERGES DES ETATS-UNIS</option>
|
||
<option value="60235">INDE</option>
|
||
<option value="60236">INDONÉSIE</option>
|
||
<option value="60238">IRAK</option>
|
||
<option value="60230">IRAN</option>
|
||
<option value="60237">IRLANDE</option>
|
||
<option value="60240">ISLANDE</option>
|
||
<option value="60239">ISRAËL</option>
|
||
<option value="60241">ITALIE</option>
|
||
<option value="60243">JAMAÏQUE</option>
|
||
<option value="60242">JAPON</option>
|
||
<option value="60244">JORDANIE</option>
|
||
<option value="60246">KAZAKHSTAN</option>
|
||
<option value="60245">KENYA</option>
|
||
<option value="60247">KIRGHIZISTAN</option>
|
||
<option value="60356">KIRIBATI</option>
|
||
<option value="104668">KOSOVO</option>
|
||
<option value="60248">KOWEÏT</option>
|
||
<option value="105632">LA RÉUNION</option>
|
||
<option value="60250">LAOS, REPUBLIQUE DEMOCRATIQUE POPULAIRE</option>
|
||
<option value="60357">LESOTHO</option>
|
||
<option value="60251">LETTONIE</option>
|
||
<option value="60252">LIBAN</option>
|
||
<option value="60340">LIBÉRIA</option>
|
||
<option value="60253">LIBYE</option>
|
||
<option value="60339">LIECHTENSTEIN</option>
|
||
<option value="60254">LITUANIE</option>
|
||
<option value="60249">LUXEMBOURG</option>
|
||
<option value="60358">MACEDOINE DU NORD (ERYM / ARYM)</option>
|
||
<option value="60256">MADAGASCAR</option>
|
||
<option value="60260">MALAISIE</option>
|
||
<option value="60263">MALAWI</option>
|
||
<option value="60359">MALDIVES</option>
|
||
<option value="60259">MALI</option>
|
||
<option value="60234">MALTE</option>
|
||
<option value="60257">MAROC</option>
|
||
<option value="60233">MAURICE</option>
|
||
<option value="60262">MAURITANIE</option>
|
||
<option value="60264">MAYOTTE</option>
|
||
<option value="60265">MEXIQUE</option>
|
||
<option value="60361">MICRONÉSIE, ÉTATS FÉDÉRÉS DE</option>
|
||
<option value="60362">MOLDOVA, RÉPUBLIQUE DE</option>
|
||
<option value="60381">MONACO</option>
|
||
<option value="60266">MONGOLIE</option>
|
||
<option value="60398">MONTENEGRO</option>
|
||
<option value="60399">MONTSERRAT</option>
|
||
<option value="60267">MOZAMBIQUE</option>
|
||
<option value="60400">MYANMAR</option>
|
||
<option value="60337">NAMIBIE</option>
|
||
<option value="60364">NAURU</option>
|
||
<option value="60270">NÉPAL</option>
|
||
<option value="60273">NICARAGUA</option>
|
||
<option value="60272">NIGER</option>
|
||
<option value="60274">NIGÉRIA</option>
|
||
<option value="60402">NIUE</option>
|
||
<option value="60403">NORFOLK, ILE</option>
|
||
<option value="60268">NORVÈGE</option>
|
||
<option value="60269">NOUVELLE-CALEDONIE</option>
|
||
<option value="60275">NOUVELLE-ZÉLANDE</option>
|
||
<option value="60404">OCEAN INDIEN, TERRITOIRE BRITANNIQUE DE L'</option>
|
||
<option value="60276">OMAN</option>
|
||
<option value="60277">OUGANDA</option>
|
||
<option value="60278">OUZBÉKISTAN</option>
|
||
<option value="60280">PAKISTAN</option>
|
||
<option value="60365">PALAOS</option>
|
||
<option value="60284">PALESTINE</option>
|
||
<option value="60281">PANAMA</option>
|
||
<option value="60366">PAPOUASIE-NOUVELLE-GUINÉE</option>
|
||
<option value="60282">PARAGUAY</option>
|
||
<option value="60283">PAYS-BAS</option>
|
||
<option value="60285">PÉROU</option>
|
||
<option value="60287">PHILIPPINES</option>
|
||
<option value="60405">PITCAIRN</option>
|
||
<option value="60288">POLOGNE</option>
|
||
<option value="60286">POLYNESIE FRANCAISE</option>
|
||
<option value="60289">PORTO RICO</option>
|
||
<option value="60279">PORTUGAL</option>
|
||
<option value="60291">QATAR</option>
|
||
<option value="60293">REPUBLIQUE CENTRAFRICAINE</option>
|
||
<option value="60298">REPUBLIQUE DEMOCRATIQUE DU CONGO</option>
|
||
<option value="60350">REPUBLIQUE DOMINICAINE</option>
|
||
<option value="60201">REPUBLIQUE DU CONGO</option>
|
||
<option value="60292">ROUMANIE</option>
|
||
<option value="60346">ROYAUME-UNI</option>
|
||
<option value="60296">RUSSIE, FEDERATION DE</option>
|
||
<option value="60297">RWANDA</option>
|
||
<option value="60406">SAHARA OCCIDENTAL</option>
|
||
<option value="60407">SAINT-BARTHELEMY</option>
|
||
<option value="60271">SAINT-KITTS-ET-NEVIS</option>
|
||
<option value="60368">SAINT-MARIN</option>
|
||
<option value="60344">SAINT-MARTIN (PARTIE FRANCAISE)</option>
|
||
<option value="60290">SAINT-MARTIN (PARTIE NEERLANDAISE)</option>
|
||
<option value="60308">SAINT-PIERRE-ET-MIQUELON</option>
|
||
<option value="60345">SAINT-SIÈGE (ÉTAT DE LA CITÉ DU VATICAN)</option>
|
||
<option value="60369">SAINT-VINCENT-ET-LES-GRENADINES</option>
|
||
<option value="60367">SAINTE-LUCIE</option>
|
||
<option value="60370">SALOMON, ÎLES</option>
|
||
<option value="104667">SALVADOR</option>
|
||
<option value="60371">SAMOA</option>
|
||
<option value="60401">SAMOA AMERICAINES</option>
|
||
<option value="60372">SAO TOMÉ-ET-PRINCIPE</option>
|
||
<option value="60301">SÉNÉGAL</option>
|
||
<option value="60302">SERBIE</option>
|
||
<option value="60255">SEYCHELLES</option>
|
||
<option value="60373">SIERRA LEONE</option>
|
||
<option value="60303">SINGAPOUR</option>
|
||
<option value="60307">SLOVAQUIE</option>
|
||
<option value="60304">SLOVÉNIE</option>
|
||
<option value="60305">SOMALIE</option>
|
||
<option value="60306">SOUDAN</option>
|
||
<option value="60408">SOUDAN DU SUD</option>
|
||
<option value="60309">SRI LANKA</option>
|
||
<option value="60310">SUEDE</option>
|
||
<option value="60299">SUISSE</option>
|
||
<option value="60374">SURINAME</option>
|
||
<option value="60300">SVALBARD ET ILE JAN MAYEN</option>
|
||
<option value="60311">SYRIE (REPUBLIQUE ARABE SYRIENNE)</option>
|
||
<option value="60376">TADJIKISTAN</option>
|
||
<option value="60313">TAÏWAN</option>
|
||
<option value="60314">TANZANIE, REPUBLIQUE-UNIE DE</option>
|
||
<option value="60316">TCHAD</option>
|
||
<option value="60315">TCHÈQUE, RÉPUBLIQUE</option>
|
||
<option value="60295">TCHÉQUIE</option>
|
||
<option value="60363">TERRES AUSTRALES FRANCAISES</option>
|
||
<option value="60317">THAÏLANDE</option>
|
||
<option value="60377">TIMOR ORIENTAL</option>
|
||
<option value="60318">TOGO</option>
|
||
<option value="60409">TOKELAU</option>
|
||
<option value="60378">TONGA</option>
|
||
<option value="60319">TRINITE-ET-TOBAGO</option>
|
||
<option value="60312">TUNISIE</option>
|
||
<option value="60321">TURKMENISTAN</option>
|
||
<option value="60410">TURKS ET CAIQUES, ILES</option>
|
||
<option value="60320">TURQUIE</option>
|
||
<option value="60379">TUVALU</option>
|
||
<option value="60323">UKRAINE</option>
|
||
<option value="60324">URUGUAY</option>
|
||
<option value="60326">VANUATU</option>
|
||
<option value="60327">VATICAN, ETAT DE LA CITE DU</option>
|
||
<option value="60328">VENEZUELA</option>
|
||
<option value="60325">VIETNAM</option>
|
||
<option value="60329">YEMEN</option>
|
||
<option value="60331">ZAMBIE</option>
|
||
<option value="60330">ZIMBABWE</option>
|
||
<option value="60341">ÅLAND, ÎLES</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-navigation section-navigation-mobile">
|
||
<button type="button" class="btn-next">Suivant</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="section2" class="form-section form-section-step">
|
||
<h2>Projet de formation</h2>
|
||
<p style="text-align: center;">Je choisis la formation qui m'intéresse et le campus souhaité.</p>
|
||
|
||
<div class="form-group">
|
||
<div class="form-group-item"> <label for="campus_selection">Campus souhaité<span class="oscar_input_required">(*)</span></label>
|
||
<select id="campus_selection" name="campus" class="form-control" v-model="selectedCampus" required>
|
||
<option value="">Choisir un campus</option>
|
||
<option value="sqy">Saint-Quentin-en-Yvelines</option>
|
||
<option value="cgy">Cergy</option>
|
||
<option value="nantes">Nantes</option>
|
||
<option value="marseille">Marseille</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div class="form-group-item"> <label for="formation">Formation souhaitée<span class="oscar_input_required">(*)</span></label>
|
||
<select id="formation" name="formation_souhaitee_formation_id" class="form-control" required>
|
||
<option value="">Choisir une formation</option>
|
||
<option value="367">BTS SIO SLAM</option>
|
||
<option value="369">BTS SIO SISR</option>
|
||
<option value="371">BTS CIEL</option>
|
||
<option value="373">Bachelor TECH & DEV spé Gestion de projet IA & Data</option>
|
||
<option value="374">Bachelor TECH & DEV spé Développeur Full Stack</option>
|
||
<option value="376">Bachelor Systèmes & Réseaux spé Infra & Sécurité</option>
|
||
<option value="377">Bachelor Systèmes & Réseaux spé cybersécurité</option>
|
||
<option value="378">M1/M2 Expert Solutions Data</option>
|
||
<option value="379">M1/M2 Expert Solutions IA & IOT</option>
|
||
<option value="380">M1/M2 Lead Developer Full Stack</option>
|
||
<option value="382">M1/M2 Expert Architectures IA & IOT</option>
|
||
<option value="383">M1/M2 Expert Réseaux & Sécurité</option>
|
||
<option value="384">M1/M2 Expert Cybersécurité & Cloud Computing</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group cnil-consent-group">
|
||
<div class="cnil-checkbox-wrapper">
|
||
<input type="checkbox" id="cnil_oui" name="cnil" class="custom-control-input" value="1" required>
|
||
<label for="cnil_oui" class="cnil-info-label custom-control-label">
|
||
<strong>Oui, je donne mon approbation pour le traitement de mes données personnelles à ENSITECH.</strong><br>
|
||
<span style="color: grey; font-size: small;">En soumettant ce formulaire, j’accepte que mes informations soient utilisées dans le cadre de ma demande et de la relation commerciale éthique et personnalisée qui pourrait en découler si je le souhaite. <span class="oscar_input_required">(*)</span></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-primary desktop-submit-button">ENVOYER MA CANDIDATURE</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="final-mobile-navigation" class="form-navigation final-mobile-buttons-wrapper">
|
||
<button type="button" class="btn-prev">Précédent</button>
|
||
<button type="submit" class="btn-primary mobile-submit-button">ENVOYER MA CANDIDATURE</button>
|
||
</div>
|
||
|
||
<div class="mandatory-fields-note-global">(*) Champs obligatoires</div>
|
||
|
||
<input type="hidden" id="hidden_token_field" name="token">
|
||
<input type="hidden" id="hidden_formID_field" name="formID">
|
||
<input type="hidden" name="utm_campaign" value="">
|
||
<input type="hidden" name="utm_source" value="">
|
||
<input type="hidden" name="utm_medium" value="">
|
||
<input type="hidden" name="utm_term" value="">
|
||
<input type="hidden" name="utm_content" value="">
|
||
<div class="username_field" style="display: none;">
|
||
<label for="username">Type your username</label>
|
||
<input type="text" id="username" name="username" value="">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|
||
<style>
|
||
input:invalid {
|
||
border: 1px solid red;
|
||
}
|
||
|
||
input:valid {
|
||
border: 1px solid green;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #f0f2f5;
|
||
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
}
|
||
|
||
/* --- Main Form Container --- */
|
||
#oscar_school_form_container {
|
||
max-width: 1200px;
|
||
margin: 20px auto;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
/* --- Form Body Styles (The white/light gray box) --- */
|
||
#oscar_school_form_body {
|
||
position: relative;
|
||
background: linear-gradient(to bottom right, #f8f9fa, #e9ecef);
|
||
padding: 25px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* Optional: Form Header Styles if you uncomment them in HTML */
|
||
#oscar_school_form_header h1 {
|
||
color: #198AB4;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
font-size: 2.5em;
|
||
text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
#oscar_school_form_header p {
|
||
text-align: center;
|
||
color: #555;
|
||
font-size: 1.15em;
|
||
margin-bottom: 35px;
|
||
}
|
||
|
||
/* --- Form Sections Wrapper (Desktop Flex / Mobile Stack) --- */
|
||
.form-sections-wrapper {
|
||
margin-bottom: 25px; /* Provides space if no final nav/note below */
|
||
}
|
||
|
||
/* --- Individual Form Section Styles (e.g., Identité, Projet de formation) --- */
|
||
.form-section {
|
||
padding: 20px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 10px;
|
||
background-color: #ffffff;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||
height: auto;
|
||
margin-bottom: 20px; /* Space between stacked sections on mobile */
|
||
display: flex; /* Makes the section a flex container for its internal content */
|
||
flex-direction: column; /* Stacks its direct children vertically */
|
||
}
|
||
|
||
.form-section:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.form-section h2 {
|
||
margin-top: 0;
|
||
color: #0087CF;
|
||
font-size: 1.7em;
|
||
border-bottom: 2px solid #0087CF;
|
||
padding-bottom: 12px;
|
||
margin-bottom: 22px;
|
||
text-align: center;
|
||
}
|
||
.form-section h2 i {
|
||
margin-right: 8px;
|
||
color: 0087CF ;
|
||
}
|
||
|
||
|
||
/* --- Form Group & Control Styles --- */
|
||
.form-group {
|
||
margin-bottom: 18px;
|
||
display: flex; /* Makes immediate children flex items */
|
||
flex-wrap: wrap; /* Allows items to wrap to the next line */
|
||
gap: 20px; /* Space between flex items */
|
||
}
|
||
|
||
/* Default for individual items in a flex form-group */
|
||
.form-group-item {
|
||
flex: 1 1 calc(50% - 10px); /* Tries to take 50% width minus half the gap */
|
||
max-width: calc(50% - 10px);
|
||
}
|
||
/* For form-groups that should always be full width (e.g., "Je suis" select, or single input lines) */
|
||
/* This rule is more for desktop, on mobile we manage this differently */
|
||
.form-group > .form-group-item:only-child,
|
||
.form-group:not(.cnil-consent-group) > label + .form-control {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: #444;
|
||
font-size: 0.98em;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Specific style for CNIL info label */
|
||
.cnil-info-label {
|
||
color: #6c757d;
|
||
font-size: 0.85em;
|
||
margin-top: 8px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* New wrapper for CNIL checkbox and label */
|
||
.cnil-checkbox-wrapper {
|
||
display: flex;
|
||
align-items: flex-start; /* Align checkbox and text at the top */
|
||
gap: 8px; /* Space between checkbox and text */
|
||
width: 100%; /* Ensure it takes full width within its parent */
|
||
}
|
||
|
||
|
||
.form-control {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ced4da;
|
||
border-radius: 6px;
|
||
font-size: 1em;
|
||
color: #495057;
|
||
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||
box-sizing: border-box;
|
||
min-height: 38px;
|
||
}
|
||
|
||
.form-control:focus {
|
||
border-color: #80bdff;
|
||
outline: 0;
|
||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
/* Styles for invalid inputs - ONLY apply when the 'is-invalid' class is present */
|
||
.form-control.is-invalid {
|
||
border-color: #dc3545;
|
||
padding-right: calc(1.5em + 0.75rem);
|
||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
|
||
background-repeat: no-repeat;
|
||
background-position: right calc(0.375em + 0.1875rem) center;
|
||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||
}
|
||
.form-control.is-invalid:focus {
|
||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
|
||
}
|
||
|
||
|
||
textarea.form-control {
|
||
resize: vertical;
|
||
min-height: 90px;
|
||
}
|
||
|
||
/* Required fields indicator */
|
||
.oscar_input_required {
|
||
color: #DD1B51;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* CNIL checkbox */
|
||
.custom-control-input {
|
||
width: 20px; /* Larger hit area */
|
||
height: 20px; /* Larger hit area */
|
||
border: 1px solid #ced4da;
|
||
border-radius: 4px; /* Slightly rounded corners for checkbox */
|
||
appearance: none; /* Hide default checkbox */
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
cursor: pointer;
|
||
flex-shrink: 0; /* Prevent checkbox from shrinking */
|
||
margin-top: 2px; /* Adjust vertical alignment with text */
|
||
}
|
||
|
||
.custom-control-input:checked {
|
||
background-color: #198AB4;
|
||
border-color: #198AB4;
|
||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11 12 5'/%3e%3csvg%3e");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
.custom-control-input:focus {
|
||
outline: none;
|
||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
.custom-control-label {
|
||
cursor: pointer;
|
||
color: #333;
|
||
flex-grow: 1; /* Allow label to take remaining space */
|
||
}
|
||
|
||
/* Style for the CNIL group itself */
|
||
.cnil-consent-group {
|
||
padding: 10px 0;
|
||
margin-bottom: 20px; /* Space below the group */
|
||
}
|
||
|
||
|
||
/* --- Primary Button (General Style for submit/next) --- */
|
||
.btn-primary {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 15px 25px;
|
||
margin-top: 30px; /* Default margin, overridden by specific rules */
|
||
font-size: 1.25em;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
background-color: #198AB4;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #0056b3;
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 7px 20px rgba(0, 123, 255, 0.35);
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
background-color: #b0d8ff;
|
||
cursor: not-allowed;
|
||
opacity: 0.7;
|
||
transform: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
|
||
/* --- Step-by-Step Form Sections (Mobile default display controlled by JS/active class) --- */
|
||
.form-section-step {
|
||
width: 100%;
|
||
display: none; /* Hide all sections by default on mobile, JS will add 'active' to show one */
|
||
}
|
||
|
||
|
||
/* --- Navigation Buttons (Prev/Next for Mobile Steps) --- */
|
||
/* IMPORTANT: All .form-navigation elements are hidden by default on mobile.
|
||
JavaScript will explicitly set 'display: flex' for the active navigation. */
|
||
.form-navigation {
|
||
display: none; /* Crucial: This ensures all mobile navs are initially hidden */
|
||
justify-content: center;
|
||
gap: 15px;
|
||
margin-top: 25px; /* Space from content above */
|
||
}
|
||
|
||
.form-navigation .btn-next,
|
||
.form-navigation .btn-prev {
|
||
flex: 1;
|
||
width: 167px;
|
||
/* padding: 14px 0; */
|
||
font-size: 1.15em;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
border-radius: 8px;
|
||
border: none;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||
height: 61px;
|
||
margin-top: 34px;
|
||
}
|
||
|
||
/* Specific colors for navigation buttons */
|
||
.form-navigation .btn-prev {
|
||
background-color: #DD1B3D; /* Red color for previous */
|
||
color: #fff;
|
||
}
|
||
.form-navigation .btn-prev:hover {
|
||
background-color: #c71534;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.form-navigation .btn-next {
|
||
background-color: #198AB4; /* Blue color for next */
|
||
color: #fff;
|
||
}
|
||
.form-navigation .btn-next:hover {
|
||
background-color: #147395;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Mandatory fields note (global placement) */
|
||
.mandatory-fields-note-global {
|
||
font-size: 0.85em;
|
||
color: #555;
|
||
text-align: right; /* Default for desktop */
|
||
margin-top: 15px;
|
||
padding-right: 15px;
|
||
}
|
||
|
||
|
||
/* --- Media Query for DESKTOP SCREENS (min-width: 769px) --- */
|
||
@media (min-width: 769px) {
|
||
#oscar_school_form_container {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* Form sections layout in two columns */
|
||
.form-sections-wrapper {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* Prevent wrapping to new lines */
|
||
justify-content: center;
|
||
gap: 30px; /* Space between columns */
|
||
align-items: stretch; /* Make sections equal height */
|
||
margin-bottom: 0; /* No extra margin, note is positioned absolutely */
|
||
}
|
||
|
||
.form-section-step {
|
||
flex: 1; /* Each section takes equal space */
|
||
min-width: 0; /* Allow shrinking */
|
||
max-width: 50%; /* Max 50% width */
|
||
display: flex !important; /* Force display of all steps on desktop (as flex column) */
|
||
margin-bottom: 0; /* Remove mobile margin between sections */
|
||
}
|
||
|
||
.form-section {
|
||
height: 100%; /* Make sections equal height */
|
||
display: flex; /* Maintain flex column behavior for internal content */
|
||
flex-direction: column;
|
||
justify-content: space-between; /* Pushes content and the desktop submit button to ends */
|
||
padding-bottom: 20px; /* Add extra padding at the bottom of sections */
|
||
}
|
||
|
||
/* Hide all mobile-specific navigation elements on desktop */
|
||
.form-navigation, /* Targets all elements with this class */
|
||
.section-navigation-mobile,
|
||
#final-mobile-navigation,
|
||
.mobile-submit-button {
|
||
display: none !important; /* Force hide on desktop */
|
||
}
|
||
|
||
/* Show and style the desktop submit button inside the second column */
|
||
.desktop-submit-button {
|
||
display: block !important; /* Show the desktop button */
|
||
width: 100%; /* Make it full width of its column */
|
||
margin-top: auto; /* Pushes the button to the bottom of the flex column */
|
||
align-self: center; /* Centers the button */
|
||
padding: 15px 25px;
|
||
font-size: 1.25em;
|
||
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
/* Input fields layout in two columns within form-group */
|
||
.form-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
.form-group-item {
|
||
flex: 1 1 calc(50% - 10px);
|
||
max-width: calc(50% - 10px);
|
||
}
|
||
/* "Je suis" select should take full width in its column on desktop */
|
||
#section1 .form-group:first-of-type .form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
|
||
}
|
||
|
||
/* Mandatory fields note positioning on desktop */
|
||
.mandatory-fields-note-global {
|
||
position: absolute; /* Position relative to #oscar_school_form_body */
|
||
bottom: 20px;
|
||
left: 25px;
|
||
right: auto;
|
||
font-size: 0.9em;
|
||
color: #777;
|
||
text-align: left;
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
|
||
|
||
/* --- Media Query for MOBILE and TABLET SCREENS (max-width: 768px) --- */
|
||
@media (max-width: 768px) {
|
||
#oscar_school_form_container {
|
||
width: 100%;
|
||
padding: 0 15px; /* Keeps a small padding on the sides of the page */
|
||
margin-top: 15px;
|
||
}
|
||
#oscar_school_form_body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.form-sections-wrapper {
|
||
flex-direction: column; /* Stack sections vertically */
|
||
gap: 15px;
|
||
margin-bottom: 0; /* Controlled by JS and final-mobile-navigation */
|
||
}
|
||
.form-section {
|
||
min-width: unset;
|
||
padding: 18px;
|
||
margin-bottom: 20px; /* Space between sections if stacked by JS */
|
||
height: auto;
|
||
/* Supprime le align-items: center pour aligner à gauche */
|
||
align-items: flex-start; /* Aligner les éléments flex à gauche */
|
||
}
|
||
|
||
/* --- Mobile-specific section and navigation display rules --- */
|
||
.form-section-step.active {
|
||
display: flex; /* Only show the active section on mobile */
|
||
flex-direction: column; /* Keep its internal content stacked */
|
||
}
|
||
|
||
/* All form-navigation elements are hidden by default, and ONLY shown by JS */
|
||
/* No CSS rule here to force display for specific mobile navs. JS handles it. */
|
||
|
||
|
||
/* Règle générale pour les groupes de formulaires sur mobile */
|
||
.form-group {
|
||
margin-bottom: 12px;
|
||
flex-direction: column; /* Each form-group-item (label+input pair) will stack vertically */
|
||
gap: 0;
|
||
width: 100%; /* Ensures form-group itself takes full width for its content */
|
||
max-width: 400px; /* Set a max-width for the form group to prevent it from being too wide */
|
||
/* IMPORTANT: margin-left: auto; margin-right: auto; pour centrer si max-width est actif */
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%; /* Make items fill the width of the form-group */
|
||
margin-bottom: 10px; /* Space between each label-input pair */
|
||
|
||
/* Each form-group-item contains label and input side by side */
|
||
display: flex;
|
||
flex-direction: row; /* Align label and input side by side */
|
||
align-items: center; /* Align vertically in the middle */
|
||
gap: 10px; /* Space between label and input */
|
||
}
|
||
.form-group-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Adjustments for labels and controls within form-group-item */
|
||
.form-group-item label {
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
width: 90px; /* Fixed width for labels to align them */
|
||
text-align: left; /* Align label text to the right */
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-group-item .form-control {
|
||
flex-grow: 1; /* Allow input to take remaining space */
|
||
width: auto;
|
||
max-width: calc(100% - 100px); /* Adjust max-width: Total 100% - label width - gap */
|
||
/* (100px = 90px (label width) + 10px (gap)) */
|
||
}
|
||
|
||
|
||
/* --- Specific to SECTION 1 --- */
|
||
#section1 .form-group {
|
||
flex-direction: column; /* Ensures each field group (Nom, Prénom, etc.) is on its own line */
|
||
flex-wrap: nowrap;
|
||
gap: 0;
|
||
/* max-width and centering inherited from general .form-group */
|
||
}
|
||
|
||
#section1 .form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
margin-bottom: 10px; /* Space between each field (Nom, Prénom, etc.) */
|
||
}
|
||
|
||
/* Adjustment for the "Je suis" selector in section 1 */
|
||
#section1 .form-group:first-of-type .form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
justify-content: flex-start; /* Align to the left (label-input pair) */
|
||
}
|
||
#section1 .form-group:first-of-type .form-group-item label {
|
||
width: 90px; /* Keep fixed width for consistency with other labels */
|
||
text-align: left; /* Align to the right for consistency */
|
||
}
|
||
#section1 .form-group:first-of-type .form-group-item .form-control {
|
||
max-width: calc(100% - 100px); /* Apply max-width here too */
|
||
}
|
||
|
||
|
||
/* Specific handling for form-groups that do NOT contain form-group-item
|
||
(e.g., "Pays", "Campus souhaité", "Formation souhaitée") */
|
||
.form-group:not(.cnil-consent-group):not(.form-group-item) {
|
||
display: flex;
|
||
flex-direction: row; /* Align label and input side by side */
|
||
align-items: center; /* Align vertically in the middle */
|
||
gap: 10px; /* Space between label and input */
|
||
/* max-width and centering inherited from general .form-group */
|
||
}
|
||
|
||
.form-group:not(.cnil-consent-group):not(.form-group-item) > label {
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
width: 90px; /* Fixed width for labels */
|
||
text-align: right;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-group:not(.cnil-consent-group):not(.form-group-item) > .form-control {
|
||
flex-grow: 1;
|
||
width: auto;
|
||
max-width: calc(100% - 100px); /* Apply max-width here too */
|
||
}
|
||
|
||
|
||
/* Specific for the CNIL group */
|
||
.cnil-consent-group {
|
||
/* --- Base Styles & Utilities --- */
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #f0f2f5;
|
||
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
}
|
||
|
||
/* --- Main Form Container --- */
|
||
#oscar_school_form_container {
|
||
max-width: 1200px;
|
||
margin: 20px auto;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
/* --- Form Body Styles (The white/light gray box) --- */
|
||
#oscar_school_form_body {
|
||
position: relative;
|
||
background: linear-gradient(to bottom right, #f8f9fa, #e9ecef);
|
||
padding: 25px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* Optional: Form Header Styles if you uncomment them in HTML */
|
||
#oscar_school_form_header h1 {
|
||
color: #198AB4;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
font-size: 2.5em;
|
||
text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
#oscar_school_form_header p {
|
||
text-align: center;
|
||
color: #555;
|
||
font-size: 1.15em;
|
||
margin-bottom: 35px;
|
||
}
|
||
|
||
/* --- Form Sections Wrapper (Desktop Flex / Mobile Stack) --- */
|
||
.form-sections-wrapper {
|
||
margin-bottom: 25px; /* Provides space if no final nav/note below */
|
||
}
|
||
|
||
/* --- Individual Form Section Styles (e.g., Identité, Projet de formation) --- */
|
||
.form-section {
|
||
padding: 20px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 10px;
|
||
background-color: #ffffff;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||
height: auto;
|
||
margin-bottom: 20px; /* Space between stacked sections on mobile */
|
||
display: flex; /* Makes the section a flex container for its internal content */
|
||
flex-direction: column; /* Stacks its direct children vertically */
|
||
}
|
||
|
||
.form-section:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.form-section h2 {
|
||
margin-top: 0;
|
||
color: #198AB4;
|
||
font-size: 1.7em;
|
||
border-bottom: 2px solid #007bff;
|
||
padding-bottom: 12px;
|
||
margin-bottom: 22px;
|
||
text-align: center;
|
||
}
|
||
.form-section h2 i {
|
||
margin-right: 8px;
|
||
color: #198AB4;
|
||
}
|
||
|
||
|
||
/* --- Form Group & Control Styles --- */
|
||
.form-group {
|
||
margin-bottom: 18px;
|
||
display: flex; /* Makes immediate children flex items */
|
||
flex-wrap: wrap; /* Allows items to wrap to the next line */
|
||
gap: 20px; /* Space between flex items */
|
||
}
|
||
|
||
/* Default for individual items in a flex form-group */
|
||
.form-group-item {
|
||
flex: 1 1 calc(50% - 10px); /* Tries to take 50% width minus half the gap */
|
||
max-width: calc(50% - 10px);
|
||
}
|
||
/* For form-groups that should always be full width (e.g., "Je suis" select, or single input lines) */
|
||
/* This rule is more for desktop, on mobile we manage this differently */
|
||
.form-group > .form-group-item:only-child,
|
||
.form-group:not(.cnil-consent-group) > label + .form-control {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: #444;
|
||
font-size: 0.98em;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Specific style for CNIL info label */
|
||
.cnil-info-label {
|
||
color: #6c757d;
|
||
font-size: 0.85em;
|
||
margin-top: 8px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* New wrapper for CNIL checkbox and label */
|
||
.cnil-checkbox-wrapper {
|
||
display: flex;
|
||
align-items: flex-start; /* Align checkbox and text at the top */
|
||
gap: 8px; /* Space between checkbox and text */
|
||
width: 100%; /* Ensure it takes full width within its parent */
|
||
}
|
||
|
||
|
||
.form-control {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ced4da;
|
||
border-radius: 6px;
|
||
font-size: 1em;
|
||
color: #495057;
|
||
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||
box-sizing: border-box;
|
||
min-height: 38px;
|
||
}
|
||
|
||
.form-control:focus {
|
||
border-color: #80bdff;
|
||
outline: 0;
|
||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
/* Styles for invalid inputs - ONLY apply when the 'is-invalid' class is present */
|
||
.form-control.is-invalid {
|
||
border-color: #dc3545;
|
||
padding-right: calc(1.5em + 0.75rem);
|
||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
|
||
background-repeat: no-repeat;
|
||
background-position: right calc(0.375em + 0.1875rem) center;
|
||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||
}
|
||
.form-control.is-invalid:focus {
|
||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
|
||
}
|
||
|
||
|
||
textarea.form-control {
|
||
resize: vertical;
|
||
min-height: 90px;
|
||
}
|
||
|
||
/* Required fields indicator */
|
||
.oscar_input_required {
|
||
color: #DD1B51;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* CNIL checkbox */
|
||
.custom-control-input {
|
||
width: 20px; /* Larger hit area */
|
||
height: 20px; /* Larger hit area */
|
||
border: 1px solid #ced4da;
|
||
border-radius: 4px; /* Slightly rounded corners for checkbox */
|
||
appearance: none; /* Hide default checkbox */
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
cursor: pointer;
|
||
flex-shrink: 0; /* Prevent checkbox from shrinking */
|
||
margin-top: 2px; /* Adjust vertical alignment with text */
|
||
}
|
||
|
||
.custom-control-input:checked {
|
||
background-color: #198AB4;
|
||
border-color: #198AB4;
|
||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11 12 5'/%3e%3csvg%3e");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
.custom-control-input:focus {
|
||
outline: none;
|
||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
.custom-control-label {
|
||
cursor: pointer;
|
||
color: #333;
|
||
flex-grow: 1; /* Allow label to take remaining space */
|
||
}
|
||
|
||
/* Style for the CNIL group itself */
|
||
.cnil-consent-group {
|
||
padding: 10px 0;
|
||
margin-bottom: 20px; /* Space below the group */
|
||
}
|
||
|
||
|
||
/* --- Primary Button (General Style for submit/next) --- */
|
||
.btn-primary {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 15px 25px;
|
||
margin-top: 30px; /* Default margin, overridden by specific rules */
|
||
font-size: 1.25em;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
background-color: #198AB4;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #0056b3;
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 7px 20px rgba(0, 123, 255, 0.35);
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
background-color: #b0d8ff;
|
||
cursor: not-allowed;
|
||
opacity: 0.7;
|
||
transform: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
|
||
/* --- Step-by-Step Form Sections (Mobile default display controlled by JS/active class) --- */
|
||
.form-section-step {
|
||
width: 100%;
|
||
display: none; /* Hide all sections by default on mobile, JS will add 'active' to show one */
|
||
}
|
||
|
||
|
||
/* --- Navigation Buttons (Prev/Next for Mobile Steps) --- */
|
||
/* IMPORTANT: All .form-navigation elements are hidden by default on mobile.
|
||
JavaScript will explicitly set 'display: flex' for the active navigation. */
|
||
.form-navigation {
|
||
display: none; /* Crucial: This ensures all mobile navs are initially hidden */
|
||
justify-content: center;
|
||
gap: 15px;
|
||
margin-top: 25px; /* Space from content above */
|
||
}
|
||
|
||
.form-navigation .btn-next,
|
||
.form-navigation .btn-prev {
|
||
flex: 1;
|
||
max-width: 160px; /* Limit button width */
|
||
padding: 14px 0;
|
||
font-size: 1.15em;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
border-radius: 8px;
|
||
border: none;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||
}
|
||
|
||
/* Specific colors for navigation buttons */
|
||
.form-navigation .btn-prev {
|
||
background-color: #DD1B3D; /* Red color for previous */
|
||
color: #fff;
|
||
}
|
||
.form-navigation .btn-prev:hover {
|
||
background-color: #c71534;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.form-navigation .btn-next {
|
||
background-color: #198AB4; /* Blue color for next */
|
||
color: #fff;
|
||
}
|
||
.form-navigation .btn-next:hover {
|
||
background-color: #147395;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Mandatory fields note (global placement) */
|
||
.mandatory-fields-note-global {
|
||
position: absolute;
|
||
bottom: 28px;
|
||
left: 46px;
|
||
right: auto;
|
||
font-size: 0.9em;
|
||
color: #777;
|
||
text-align: right;
|
||
padding-right: 14px;
|
||
}
|
||
|
||
|
||
/* --- Media Query for DESKTOP SCREENS (min-width: 769px) --- */
|
||
@media (min-width: 769px) {
|
||
#oscar_school_form_container {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* Form sections layout in two columns */
|
||
.form-sections-wrapper {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* Prevent wrapping to new lines */
|
||
justify-content: center;
|
||
gap: 30px; /* Space between columns */
|
||
align-items: stretch; /* Make sections equal height */
|
||
margin-bottom: 0; /* No extra margin, note is positioned absolutely */
|
||
}
|
||
|
||
.form-section-step {
|
||
flex: 1; /* Each section takes equal space */
|
||
min-width: 0; /* Allow shrinking */
|
||
max-width: 50%; /* Max 50% width */
|
||
display: flex !important; /* Force display of all steps on desktop (as flex column) */
|
||
margin-bottom: 0; /* Remove mobile margin between sections */
|
||
}
|
||
|
||
.form-section {
|
||
height: 100%; /* Make sections equal height */
|
||
display: flex; /* Maintain flex column behavior for internal content */
|
||
flex-direction: column;
|
||
justify-content: space-between; /* Pushes content and the desktop submit button to ends */
|
||
padding-bottom: 20px; /* Add extra padding at the bottom of sections */
|
||
}
|
||
|
||
/* Hide all mobile-specific navigation elements on desktop */
|
||
.form-navigation, /* Targets all elements with this class */
|
||
.section-navigation-mobile,
|
||
#final-mobile-navigation,
|
||
.mobile-submit-button {
|
||
display: none !important; /* Force hide on desktop */
|
||
}
|
||
|
||
/* Show and style the desktop submit button inside the second column */
|
||
.desktop-submit-button {
|
||
display: block !important; /* Show the desktop button */
|
||
width: 100%; /* Make it full width of its column */
|
||
margin-top: auto; /* Pushes the button to the bottom of the flex column */
|
||
align-self: center; /* Centers the button */
|
||
padding: 15px 25px;
|
||
font-size: 1.25em;
|
||
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
/* Input fields layout in two columns within form-group */
|
||
.form-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
.form-group-item {
|
||
flex: 1 1 calc(50% - 10px);
|
||
max-width: calc(50% - 10px);
|
||
}
|
||
/* "Je suis" select should take full width in its column on desktop */
|
||
#section1 .form-group:first-of-type .form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Mandatory fields note positioning on desktop */
|
||
.mandatory-fields-note-global {
|
||
position: absolute; /* Position relative to #oscar_school_form_body */
|
||
bottom: 20px;
|
||
left: 25px;
|
||
right: auto;
|
||
font-size: 0.9em;
|
||
color: #777;
|
||
text-align: left;
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
|
||
|
||
/* --- Media Query for MOBILE and TABLET SCREENS (max-width: 768px) --- */
|
||
@media (max-width: 768px) {
|
||
#oscar_school_form_container {
|
||
width: 100%;
|
||
padding: 0 15px; /* Keeps a small padding on the sides of the page */
|
||
margin-top: 15px;
|
||
}
|
||
#oscar_school_form_body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.form-sections-wrapper {
|
||
flex-direction: column; /* Stack sections vertically */
|
||
gap: 15px;
|
||
margin-bottom: 0; /* Controlled by JS and final-mobile-navigation */
|
||
}
|
||
.form-section {
|
||
min-width: unset;
|
||
padding: 18px;
|
||
margin-bottom: 20px; /* Space between sections if stacked by JS */
|
||
height: auto;
|
||
/* Aligner les éléments flex au début (gauche) de la section */
|
||
align-items: flex-start;
|
||
}
|
||
|
||
/* --- Mobile-specific section and navigation display rules --- */
|
||
.form-section-step.active {
|
||
display: flex; /* Only show the active section on mobile */
|
||
flex-direction: column; /* Keep its internal content stacked */
|
||
}
|
||
|
||
/* All form-navigation elements are hidden by default, and ONLY shown by JS */
|
||
/* No CSS rule here to force display for specific mobile navs. JS handles it. */
|
||
|
||
|
||
/* Règle générale pour les groupes de formulaires sur mobile */
|
||
.form-group {
|
||
margin-bottom: 12px;
|
||
flex-direction: column; /* Each form-group-item (label+input pair) will stack vertically */
|
||
gap: 0;
|
||
width: 100%; /* Ensures form-group itself takes full width for its content */
|
||
max-width: 400px; /* Set a max-width for the form group to prevent it from being too wide */
|
||
/* IMPORTANT: aligner le groupe à gauche si la section est align-items: flex-start */
|
||
margin-left: 0; /* S'assure qu'il n'y a pas de marge auto à gauche */
|
||
margin-right: auto; /* Permet à la marge droite de pousser le groupe vers la gauche si sa width < max-width */
|
||
}
|
||
|
||
.form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%; /* Make items fill the width of the form-group */
|
||
margin-bottom: 10px; /* Space between each label-input pair */
|
||
|
||
/* Each form-group-item contains label and input side by side */
|
||
display: flex;
|
||
flex-direction: row; /* Align label and input side by side */
|
||
align-items: center; /* Align vertically in the middle */
|
||
gap: 10px; /* Space between label and input */
|
||
}
|
||
.form-group-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Adjustments for labels and controls within form-group-item */
|
||
.form-group-item label {
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
width: 90px; /* Fixed width for labels to align them */
|
||
text-align: left; /* Align label text to the right */
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-group-item .form-control {
|
||
flex-grow: 1; /* Allow input to take remaining space */
|
||
width: auto;
|
||
max-width: calc(100% - 100px); /* Adjust max-width: Total 100% - label width - gap */
|
||
/* (100px = 90px (label width) + 10px (gap)) */
|
||
}
|
||
|
||
|
||
/* --- Specific to SECTION 1 --- */
|
||
#section1 .form-group {
|
||
flex-direction: column; /* Ensures each field group (Nom, Prénom, etc.) is on its own line */
|
||
flex-wrap: nowrap;
|
||
gap: 0;
|
||
/* Les règles de .form-group s'appliquent (max-width, alignement à gauche) */
|
||
}
|
||
|
||
#section1 .form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
margin-bottom: 10px; /* Space between each field (Nom, Prénom, etc.) */
|
||
}
|
||
|
||
/* Adjustment for the "Je suis" selector in section 1 */
|
||
#section1 .form-group:first-of-type .form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
justify-content: flex-start; /* Align to the left (label-input pair) */
|
||
}
|
||
#section1 .form-group:first-of-type .form-group-item label {
|
||
width: 90px; /* Keep fixed width for consistency with other labels */
|
||
text-align: right; /* Align to the right for consistency */
|
||
}
|
||
#section1 .form-group:first-of-type .form-group-item .form-control {
|
||
max-width: calc(100% - 100px); /* Apply max-width here too */
|
||
}
|
||
|
||
|
||
/* Specific handling for form-groups that do NOT contain form-group-item
|
||
(e.g., "Pays", "Campus souhaité", "Formation souhaitée") */
|
||
.form-group:not(.cnil-consent-group):not(.form-group-item) {
|
||
display: flex;
|
||
flex-direction: row; /* Align label and input side by side */
|
||
align-items: center; /* Align vertically in the middle */
|
||
gap: 10px; /* Space between label and input */
|
||
/* Les règles de .form-group s'appliquent ici aussi (max-width, alignement à gauche) */
|
||
}
|
||
|
||
.form-group:not(.cnil-consent-group):not(.form-group-item) > label {
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
width: 90px; /* Fixed width for labels */
|
||
text-align: right;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-group:not(.cnil-consent-group):not(.form-group-item) > .form-control {
|
||
flex-grow: 1;
|
||
width: auto;
|
||
max-width: calc(100% - 100px); /* Apply max-width here too */
|
||
}
|
||
|
||
|
||
/* Specific for the CNIL group */
|
||
.cnil-consent-group {
|
||
max-width: 400px; /* Limit its max-width */
|
||
margin-left: auto; /* Centrer ce groupe spécifique */
|
||
margin-right: auto;
|
||
}
|
||
.cnil-checkbox-wrapper {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
width: 100%; /* Ensure it takes full width within its parent */
|
||
margin: 0; /* S'assure qu'il n'y a pas de marge auto à gauche/droite pour le wrapper lui-même */
|
||
}
|
||
.cnil-info-label {
|
||
flex-grow: 1;
|
||
margin-top: 0;
|
||
text-align: left;
|
||
}
|
||
.cnil-checkbox-wrapper input[type="checkbox"] {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
|
||
/* --- ADJUSTMENTS FOR COMPACTNESS AND FULL WIDTH ON MOBILE --- */
|
||
.form-control {
|
||
padding: 5px 10px; /* Reduces vertical and horizontal padding */
|
||
min-height: 32px; /* Reduces minimum height */
|
||
}
|
||
textarea.form-control {
|
||
min-height: 70px; /* Adjusts minimum height for text areas */
|
||
}
|
||
|
||
/* Hide desktop submit button on mobile */
|
||
.desktop-submit-button {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Centering the primary buttons on mobile if they are not full width */
|
||
.btn-primary {
|
||
max-width: 300px; /* Or any width you prefer */
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
display: block; /* Important for margin auto to work */
|
||
}
|
||
.form-navigation {
|
||
justify-content: center; /* Ensure navigation buttons are centered */
|
||
}
|
||
}
|
||
/* --- Styles for DISABLED Navigation Buttons --- */
|
||
.form-navigation .btn-next[disabled],
|
||
.form-navigation .btn-prev[disabled] {
|
||
background-color: #cccccc; /* A light grey background */
|
||
color: #666666; /* Darker grey text */
|
||
cursor: not-allowed; /* Shows a 'no entry' sign */
|
||
opacity: 0.7; /* Makes it slightly faded */
|
||
box-shadow: none; /* Remove shadow when disabled for a flatter look */
|
||
transform: none; /* Ensure no transform effect when disabled */
|
||
pointer-events: none; /* Prevents any hover or click events */
|
||
}
|
||
.form-description{
|
||
text-align: center;
|
||
padding: 0 15px;
|
||
}
|
||
</style>
|
||
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const campusSelect = document.getElementById('campus_selection');
|
||
const currentUrl = window.location.href;
|
||
const formationSelect = document.getElementById('formation');
|
||
|
||
// Define formations grouped by campus
|
||
const formationsByCampus = {
|
||
sqy: [
|
||
{ value: "367", text: "BTS SIO SLAM" },
|
||
{ value: "369", text: "BTS SIO SISR" },
|
||
{ value: "371", text: "BTS CIEL" },
|
||
{ value: "373", text: "Bachelor TECH & DEV spé Gestion de projet IA & Data" },
|
||
{ value: "374", text: "Bachelor TECH & DEV spé Développeur Full Stack" },
|
||
{ value: "376", text: "Bachelor Systèmes & Réseaux spé Infra & Sécurité" },
|
||
{ value: "377", text: "Bachelor Systèmes & Réseaux spé cybersécurité" },
|
||
{ value: "378", text: "M1/M2 Expert Solutions Data" },
|
||
{ value: "379", text: "M1/M2 Expert Solutions IA & IOT" },
|
||
{ value: "380", text: "M1/M2 Lead Developer Full Stack" },
|
||
{ value: "382", text: "M1/M2 Expert Architectures IA & IOT" },
|
||
{ value: "383", text: "M1/M2 Expert Réseaux & Sécurité" },
|
||
{ value: "384", text: "M1/M2 Expert Cybersécurité & Cloud Computing" },
|
||
],
|
||
cgy: [
|
||
{ value: "367", text: "BTS SIO SLAM" },
|
||
{ value: "369", text: "BTS SIO SISR" },
|
||
{ value: "371", text: "BTS CIEL" },
|
||
{ value: "373", text: "Bachelor TECH & DEV spé Gestion de projet IA & Data" },
|
||
{ value: "374", text: "Bachelor TECH & DEV spé Développeur Full Stack" },
|
||
{ value: "376", text: "Bachelor Systèmes & Réseaux spé Infra & Sécurité" },
|
||
{ value: "377", text: "Bachelor Systèmes & Réseaux spé cybersécurité" },
|
||
{ value: "378", text: "M1/M2 Expert Solutions Data" },
|
||
{ value: "379", text: "M1/M2 Expert Solutions IA & IOT" },
|
||
{ value: "380", text: "M1/M2 Lead Developer Full Stack" },
|
||
{ value: "382", text: "M1/M2 Expert Architectures IA & IOT" },
|
||
{ value: "383", text: "M1/M2 Expert Réseaux & Sécurité" },
|
||
{ value: "384", text: "M1/M2 Expert Cybersécurité & Cloud Computing" },
|
||
],
|
||
nantes: [
|
||
{ value: "343", text: "BTS SIO SLAM" },
|
||
{ value: "344", text: "BTS SIO SISR" },
|
||
{ value: "345", text: "BTS CIEL" },
|
||
{ value: "363", text: "Bachelor TECH & DEV spé Gestion de projet IA & Data" },
|
||
{ value: "364", text: "Bachelor TECH & DEV spé Développeur Full Stack" },
|
||
{ value: "365", text: "Bachelor Systèmes & Réseaux spé Infra & Sécurité" },
|
||
{ value: "366", text: "Bachelor Systèmes & Réseaux spé cybersécurité" },
|
||
],
|
||
marseille: [
|
||
{ value: "402", text: "BTS SIO SLAM" },
|
||
{ value: "404", text: "BTS SIO SISR" },
|
||
{ value: "406", text: "BTS CIEL" },
|
||
{ value: "407", text: "Bachelor TECH & DEV spé Gestion de projet IA & Data" },
|
||
{ value: "408", text: "Bachelor TECH & DEV spé Développeur Full Stack" },
|
||
{ value: "409", text: "Bachelor Systèmes & Réseaux spé Infra & Sécurité" },
|
||
{ value: "410", text: "Bachelor Systèmes & Réseaux spé cybersécurité" },
|
||
]
|
||
};
|
||
|
||
function updateFormationOptions(campusKey) {
|
||
const formationSelect = document.getElementById("formation");
|
||
if (!formationSelect) return;
|
||
|
||
formationSelect.innerHTML = '<option value="">Choisir une formation</option>';
|
||
const formations = formationsByCampus[campusKey];
|
||
if (!formations) return;
|
||
|
||
formations.forEach(f => {
|
||
const option = document.createElement("option");
|
||
option.value = f.value;
|
||
option.textContent = f.text;
|
||
formationSelect.appendChild(option);
|
||
});
|
||
}
|
||
|
||
const campusConfirmationPaths = {
|
||
sqy: "confirmation-candidature/",
|
||
cgy: "confirmation-candidature/",
|
||
nantes: "confirmation-candidature/",
|
||
marseille: "confirmation-candidature/"
|
||
};
|
||
|
||
// Set initial campus value based on URL
|
||
if (campusSelect) {
|
||
const urlToCampusValueMap = {
|
||
'saint-quentin-en-yvelines': 'sqy',
|
||
'campus-cgy': 'cgy',
|
||
'campus-nantes': 'nantes',
|
||
'campus-marseille': 'marseille'
|
||
};
|
||
for (const urlPart in urlToCampusValueMap) {
|
||
if (currentUrl.includes(urlPart)) {
|
||
campusSelect.value = urlToCampusValueMap[urlPart];
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Step navigation logic
|
||
const steps = document.querySelectorAll(".form-section-step");
|
||
const nextButtons = document.querySelectorAll(".btn-next");
|
||
const prevButtons = document.querySelectorAll(".btn-prev");
|
||
const finalMobileNavigation = document.getElementById('final-mobile-navigation');
|
||
const sectionNavigationMobile = document.querySelectorAll('.section-navigation-mobile');
|
||
const desktopSubmitButton = document.querySelector('.desktop-submit-button');
|
||
const mobileSubmitBtn = document.querySelector('#final-mobile-navigation button[type="submit"]');
|
||
|
||
let currentStep = 0;
|
||
|
||
function showStep(index) {
|
||
steps.forEach(step => step.style.display = "none");
|
||
steps[index].style.display = "block";
|
||
|
||
sectionNavigationMobile.forEach(nav => nav.style.display = "none");
|
||
if (finalMobileNavigation) finalMobileNavigation.style.display = "none";
|
||
|
||
if (window.innerWidth <= 768) {
|
||
if (desktopSubmitButton) desktopSubmitButton.style.display = "none";
|
||
if (index < steps.length - 1) {
|
||
const currentNav = steps[index].querySelector('.section-navigation-mobile');
|
||
if (currentNav) currentNav.style.display = "flex";
|
||
} else {
|
||
if (finalMobileNavigation) finalMobileNavigation.style.display = "flex";
|
||
}
|
||
}
|
||
}
|
||
|
||
function validateCurrentStep(stepElement) {
|
||
const requiredInputs = stepElement.querySelectorAll('input[required], select[required], textarea[required]');
|
||
let allValid = true;
|
||
|
||
requiredInputs.forEach(input => {
|
||
input.classList.remove('is-invalid');
|
||
let isValid = true;
|
||
const value = input.value.trim();
|
||
|
||
if (input.type === 'email') {
|
||
isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
||
} else if (['nom', 'prenom', 'ville'].includes(input.name)) {
|
||
isValid = /^[A-Za-zÀ-ÿ -]{2,}$/.test(value);
|
||
} else if (input.name === 'code_postal') {
|
||
isValid = /^\d{5}$/.test(value);
|
||
} else if ((input.type === 'checkbox' || input.type === 'radio') && input.required) {
|
||
if (input.type === 'radio') {
|
||
const groupChecked = stepElement.querySelectorAll(`input[name="${input.name}"]:checked`);
|
||
isValid = groupChecked.length > 0;
|
||
} else {
|
||
isValid = input.checked;
|
||
}
|
||
} else {
|
||
isValid = value.length > 0;
|
||
}
|
||
|
||
if (!isValid) {
|
||
input.classList.add('is-invalid');
|
||
allValid = false;
|
||
}
|
||
});
|
||
|
||
return allValid;
|
||
}
|
||
|
||
nextButtons.forEach(btn => {
|
||
btn.addEventListener("click", () => {
|
||
const currentStepElement = steps[currentStep];
|
||
if (validateCurrentStep(currentStepElement)) {
|
||
if (currentStep < steps.length - 1) {
|
||
currentStep++;
|
||
showStep(currentStep);
|
||
}
|
||
} else {
|
||
alert("Veuillez remplir tous les champs obligatoires avant de continuer.");
|
||
}
|
||
});
|
||
});
|
||
|
||
prevButtons.forEach(btn => {
|
||
btn.addEventListener("click", () => {
|
||
if (currentStep > 0) {
|
||
currentStep--;
|
||
showStep(currentStep);
|
||
}
|
||
});
|
||
});
|
||
|
||
showStep(currentStep);
|
||
|
||
// Variable globale pour empêcher les doubles soumissions
|
||
let isFormSubmitting = false;
|
||
|
||
// Vue instance
|
||
const vueInstance = new Vue({
|
||
el: "campus_selection_app_Candidature",
|
||
data: {
|
||
selectedCampus: "",
|
||
isInitializing: true,
|
||
campusTokens: {
|
||
sqy: "Kzr80jytmBwT7gsLxmlXL",
|
||
cgy: "YYSjZbRn7IqJ6FxeGquww",
|
||
nantes: "Otvi2GpvGqFi6mq8vnER7",
|
||
marseille: "AyxtVXhRkCsKjmWFh6Ukx",
|
||
},
|
||
campusFormIDs: {
|
||
sqy: "8",
|
||
cgy: "190",
|
||
nantes: "114",
|
||
marseille: "31",
|
||
},
|
||
campusConfirmationPaths
|
||
},
|
||
watch: {
|
||
selectedCampus(newCampus) {
|
||
const tokenField = document.getElementById("hidden_token_field");
|
||
const formIDField = document.getElementById("hidden_formID_field");
|
||
if (tokenField) tokenField.value = this.campusTokens[newCampus] || "";
|
||
if (formIDField) formIDField.value = this.campusFormIDs[newCampus] || "";
|
||
|
||
if (!this.isInitializing) {
|
||
updateFormationOptions(newCampus);
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
const campusSelect = document.getElementById("campus_selection");
|
||
if (campusSelect) {
|
||
this.selectedCampus = campusSelect.value;
|
||
updateFormationOptions(this.selectedCampus);
|
||
this.isInitializing = false;
|
||
|
||
campusSelect.addEventListener("change", (e) => {
|
||
this.selectedCampus = e.target.value;
|
||
});
|
||
}
|
||
},
|
||
methods: {
|
||
submitForm() {
|
||
// Protection contre les doubles soumissions
|
||
if (isFormSubmitting) {
|
||
console.log("Soumission déjà en cours, ignoré");
|
||
return;
|
||
}
|
||
|
||
isFormSubmitting = true;
|
||
console.log("Début de la soumission du formulaire");
|
||
|
||
const form = document.getElementById("oscar_school_form");
|
||
const formData = new FormData(form);
|
||
this.selectedCampus = document.getElementById("campus_selection").value;
|
||
const path = this.campusConfirmationPaths[this.selectedCampus] || "confirmation-generale/";
|
||
const baseUrl = "https://www.ensitech.eu/";
|
||
|
||
// Désactiver tous les boutons submit
|
||
const allSubmitButtons = document.querySelectorAll('button[type="submit"]');
|
||
allSubmitButtons.forEach(btn => btn.disabled = true);
|
||
|
||
axios.post(form.action, formData)
|
||
.then(() => {
|
||
console.log("Formulaire envoyé avec succès");
|
||
window.location.href = baseUrl + path;
|
||
})
|
||
.catch((error) => {
|
||
console.error("Erreur :", error.response ? error.response.data : error.message);
|
||
alert("Erreur lors de l'envoi du formulaire. Veuillez réessayer.");
|
||
|
||
// Réactiver les boutons en cas d'erreur
|
||
isFormSubmitting = false;
|
||
allSubmitButtons.forEach(btn => btn.disabled = false);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
// CNIL validation
|
||
const submitBtn = document.querySelector('#oscar_school_form button[type="submit"]');
|
||
const cnilRadioInputs = document.querySelectorAll('input[name="cnil"]');
|
||
|
||
function toggleSubmitButtonState() {
|
||
const accepted = Array.from(cnilRadioInputs).some(input => input.checked && input.value === "1");
|
||
if (submitBtn) submitBtn.disabled = !accepted;
|
||
if (mobileSubmitBtn) mobileSubmitBtn.disabled = !accepted;
|
||
}
|
||
|
||
toggleSubmitButtonState();
|
||
cnilRadioInputs.forEach(input => {
|
||
input.addEventListener("change", toggleSubmitButtonState);
|
||
});
|
||
|
||
// Form submission - UN SEUL événement submit
|
||
const formElement = document.getElementById('oscar_school_form');
|
||
|
||
// Retirer l'attribut action pour empêcher la soumission native
|
||
const originalAction = formElement.action;
|
||
formElement.removeAttribute('action');
|
||
|
||
formElement.addEventListener('submit', function (e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
e.stopImmediatePropagation();
|
||
|
||
console.log("Événement submit intercepté");
|
||
|
||
// Vérifier si déjà en cours
|
||
if (isFormSubmitting) {
|
||
console.log("Soumission déjà en cours dans le handler, ignoré");
|
||
return false;
|
||
}
|
||
|
||
const finalSection = document.getElementById('final-form-parts');
|
||
if (finalSection && !validateCurrentStep(finalSection)) {
|
||
const accepted = Array.from(cnilRadioInputs).some(input => input.checked && input.value === "1");
|
||
alert(accepted ? "Veuillez remplir tous les champs obligatoires de la dernière étape." : "Veuillez accepter les conditions CNIL pour envoyer le formulaire.");
|
||
return false;
|
||
}
|
||
|
||
// Restaurer l'action pour axios
|
||
formElement.action = originalAction;
|
||
|
||
if (vueInstance && typeof vueInstance.submitForm === 'function') {
|
||
vueInstance.submitForm();
|
||
}
|
||
|
||
return false;
|
||
}, { once: false, capture: true });
|
||
|
||
window.addEventListener('resize', () => showStep(currentStep));
|
||
});
|
||
</script> |