1119 lines
36 KiB
HTML
1119 lines
36 KiB
HTML
<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>
|
||
|
||
<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="jpo">
|
||
<div class="form-sections-wrapper">
|
||
<div id="section1" class="form-section form-section-step active">
|
||
<h2><i class="fas fa-calendar-alt"></i> Inscription JPO</h2>
|
||
<p class="form-description">Complétez ce formulaire pour vous inscrire.</p>
|
||
|
||
<!-- Je suis -->
|
||
<div class="form-group">
|
||
<div class="form-group-item">
|
||
<label for="OscarContactJeSuisRefIdField">Je suis <span class="oscar_input_required">(*)</span>:</label>
|
||
<select
|
||
id="OscarContactJeSuisRefIdField"
|
||
class="form-control"
|
||
name="je_suis_ref_id"
|
||
v-on:change="determineRelatedFieldsOptions"
|
||
v-on:focus="displayAvailableOptions"
|
||
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>
|
||
<option value="439">Parent de l'étudiant</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nom et Prénom -->
|
||
<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>
|
||
|
||
<!-- Email et Portable -->
|
||
<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>
|
||
|
||
<!-- Campus et Formation -->
|
||
<div class="form-group">
|
||
<div class="form-group-item">
|
||
<label for="campus_selection_JPO">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 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="346">BTS MCO</option>
|
||
<option value="348">BTS NDRC</option>
|
||
<option value="350">BTS GPME</option>
|
||
<option value="352">BTS CG</option>
|
||
<option value="354">BTS SAM</option>
|
||
<option value="355">Bachelor RCM</option>
|
||
<option value="356">Bachelor MDO</option>
|
||
<option value="357">DCG 2ème année</option>
|
||
<option value="358">M1/M2 Marketing et Stratégie Digitale</option>
|
||
<option value="359">M1/M2 Négociation Management des Affaires</option>
|
||
<option value="360">M1/M2 MCM spé Management et Stratégie d'Entreprise</option>
|
||
<option value="361">M1/M2 Manager des Ressources Humaines</option>
|
||
<option value="362">M1/M2 Expert Finance et Pilotage de la Performance</option>
|
||
</select>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="OscarContactComboMarketingPlanField">
|
||
Inscription à un événement <span class="oscar_input_required">(*)</span>
|
||
</label>
|
||
<select id="OscarContactComboMarketingPlanField"
|
||
class="form-control"
|
||
name="combo_marketing_plan"
|
||
required>
|
||
<option value="">Choisir un événement</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Consentement CNIL -->
|
||
<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 à ENSUP Business School.</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>
|
||
|
||
<!-- Boutons -->
|
||
<button type="submit" class="btn-primary desktop-submit-button">M'INSCRIRE À LA JPO</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile Submit -->
|
||
<div id="final-mobile-navigation">
|
||
<button type="submit" class="btn-primary mobile-submit-button">M'INSCRIRE À LA JPO</button>
|
||
</div>
|
||
|
||
<!-- Infos obligatoires -->
|
||
<div class="mandatory-fields-note-global">(*) Champs obligatoires</div>
|
||
|
||
<!-- Champs cachés -->
|
||
<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="">
|
||
|
||
<!-- Champ anti-bot -->
|
||
<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>
|
||
|
||
|
||
<style>
|
||
|
||
/* Ensure these global styles are either removed if they conflict with your site's main styles,
|
||
or applied very specifically to a wrapper around your custom HTML.
|
||
For now, I'm keeping them commented out to prevent global interference. */
|
||
/*
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #f0f2f5;
|
||
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
}
|
||
*/
|
||
|
||
/* Apply valid input styling only within your form container */
|
||
#oscar_school_form_container input:valid {
|
||
border: 1px solid green;
|
||
}
|
||
|
||
/* --- Main Form Container --- */
|
||
#oscar_school_form_container {
|
||
max-width: 1200px;
|
||
margin: 20px auto;
|
||
padding: 0 15px;
|
||
/* Important: Add position: relative if you use absolute positioning inside */
|
||
position: relative;
|
||
}
|
||
|
||
/* --- Form Body Styles (The white/light gray box) --- */
|
||
#oscar_school_form_container #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_container #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_container #oscar_school_form_header p {
|
||
text-align: center;
|
||
color: #555;
|
||
font-size: 1.15em;
|
||
margin-bottom: 35px;
|
||
}
|
||
|
||
#oscar_school_form_container .form-description {
|
||
text-align: center;
|
||
margin-bottom: 25px;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
|
||
/* --- Form Sections Wrapper (Desktop Flex / Mobile Stack) --- */
|
||
#oscar_school_form_container .form-sections-wrapper {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
/* --- Individual Form Section Styles (e.g., Identité, Projet de formation) --- */
|
||
#oscar_school_form_container .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;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
#oscar_school_form_container .form-section:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
#oscar_school_form_container .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;
|
||
}
|
||
#oscar_school_form_container .form-section h2 i {
|
||
margin-right: 8px;
|
||
color: #0087CF;
|
||
}
|
||
|
||
|
||
/* --- Form Group & Control Styles --- */
|
||
#oscar_school_form_container .form-group {
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
|
||
#oscar_school_form_container .form-group-item {
|
||
flex: 1 1 calc(50% - 10px);
|
||
max-width: calc(50% - 10px);
|
||
}
|
||
|
||
#oscar_school_form_container .form-group > .form-group-item:only-child,
|
||
#oscar_school_form_container .form-group:not(.cnil-consent-group) > label + .form-control {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
#oscar_school_form_container .form-group label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: #444;
|
||
font-size: 0.98em;
|
||
font-weight: 500;
|
||
}
|
||
|
||
#oscar_school_form_container .cnil-info-label {
|
||
color: #6c757d;
|
||
font-size: 0.85em;
|
||
margin-top: 8px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
#oscar_school_form_container .cnil-checkbox-wrapper {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
|
||
#oscar_school_form_container .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;
|
||
}
|
||
|
||
#oscar_school_form_container .form-control:focus {
|
||
border-color: #80bdff;
|
||
outline: 0;
|
||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
#oscar_school_form_container .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);
|
||
}
|
||
#oscar_school_form_container .form-control.is-invalid:focus {
|
||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
|
||
}
|
||
|
||
#oscar_school_form_container textarea.form-control {
|
||
resize: vertical;
|
||
min-height: 90px;
|
||
}
|
||
|
||
#oscar_school_form_container .oscar_input_required {
|
||
color: #DD1B51;
|
||
font-weight: bold;
|
||
}
|
||
|
||
#oscar_school_form_container .custom-control-input {
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 1px solid #ced4da;
|
||
border-radius: 4px;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
#oscar_school_form_container .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;
|
||
}
|
||
#oscar_school_form_container .custom-control-input:focus {
|
||
outline: none;
|
||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
#oscar_school_form_container .custom-control-label {
|
||
cursor: pointer;
|
||
color: #333;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
#oscar_school_form_container .cnil-consent-group {
|
||
padding: 10px 0;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* --- Primary Button (General Style for submit/next) --- */
|
||
#oscar_school_form_container .btn-primary {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 15px 25px;
|
||
margin-top: 30px;
|
||
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);
|
||
}
|
||
|
||
#oscar_school_form_container .btn-primary:hover {
|
||
background-color: #0056b3;
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 7px 20px rgba(0, 123, 255, 0.35);
|
||
}
|
||
|
||
#oscar_school_form_container .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) --- */
|
||
#oscar_school_form_container .form-section-step {
|
||
width: 100%;
|
||
display: none; /* Crucial for mobile step visibility */
|
||
}
|
||
|
||
|
||
/* --- Navigation Buttons (Prev/Next for Mobile Steps) --- */
|
||
#oscar_school_form_container .form-navigation {
|
||
display: none;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
#oscar_school_form_container .form-navigation .btn-next,
|
||
#oscar_school_form_container .form-navigation .btn-prev {
|
||
flex: 1;
|
||
max-width: 160px;
|
||
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;
|
||
}
|
||
|
||
#oscar_school_form_container .form-navigation .btn-prev {
|
||
background-color: #DD1B3D;
|
||
color: #fff;
|
||
}
|
||
#oscar_school_form_container .form-navigation .btn-prev:hover {
|
||
background-color: #c71534;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
#oscar_school_form_container .form-navigation .btn-next {
|
||
background-color: #198AB4;
|
||
color: #fff;
|
||
}
|
||
#oscar_school_form_container .form-navigation .btn-next:hover {
|
||
background-color: #147395;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
#oscar_school_form_container .mandatory-fields-note-global {
|
||
font-size: 0.85em;
|
||
color: #555;
|
||
text-align: right;
|
||
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;
|
||
}
|
||
|
||
#oscar_school_form_container .form-sections-wrapper {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
gap: 30px;
|
||
align-items: stretch;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
#oscar_school_form_container .form-section-step {
|
||
flex: 1;
|
||
min-width: 0;
|
||
max-width: 50%;
|
||
display: flex !important;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
#oscar_school_form_container .form-section {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
#oscar_school_form_container .form-navigation,
|
||
#oscar_school_form_container .section-navigation-mobile,
|
||
#oscar_school_form_container #final-mobile-navigation,
|
||
#oscar_school_form_container .mobile-submit-button {
|
||
display: none !important;
|
||
}
|
||
|
||
#oscar_school_form_container .desktop-submit-button {
|
||
display: block !important;
|
||
width: 100%;
|
||
margin-top: auto;
|
||
align-self: center;
|
||
padding: 15px 25px;
|
||
font-size: 1.25em;
|
||
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
#oscar_school_form_container .form-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
#oscar_school_form_container .form-group-item {
|
||
flex: 1 1 calc(50% - 10px);
|
||
max-width: calc(50% - 10px);
|
||
}
|
||
#oscar_school_form_container #section1 .form-group:first-of-type .form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
#oscar_school_form_container .mandatory-fields-note-global {
|
||
position: absolute;
|
||
bottom: 107px;
|
||
left: 310px;
|
||
right: auto;
|
||
font-size: 0.9em;
|
||
color: #777;
|
||
text-align: left;
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
|
||
|
||
/* --- Media Query for ALL MOBILE and TABLET DEVICES (max-width: 768px) --- */
|
||
@media (max-width: 768px) {
|
||
#oscar_school_form_container .form-section h2 {
|
||
align-self: center;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
#oscar_school_form_container {
|
||
width: 100%;
|
||
padding: 0 15px;
|
||
margin-top: 15px;
|
||
}
|
||
#oscar_school_form_container #oscar_school_form_body {
|
||
padding: 20px;
|
||
}
|
||
|
||
#oscar_school_form_container .form-sections-wrapper {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
margin-bottom: 0;
|
||
}
|
||
#oscar_school_form_container .form-section {
|
||
min-width: unset;
|
||
padding: 18px;
|
||
margin-bottom: 20px;
|
||
height: auto;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
#oscar_school_form_container .form-section-step.active {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
#oscar_school_form_container .form-group {
|
||
margin-bottom: 12px;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
width: 100%;
|
||
max-width: 400px;
|
||
margin-left: 0;
|
||
margin-right: auto;
|
||
}
|
||
|
||
#oscar_school_form_container .form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
#oscar_school_form_container .form-group-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
#oscar_school_form_container .form-group-item label {
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
width: 90px;
|
||
text-align: left;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
#oscar_school_form_container .form-group-item .form-control {
|
||
flex-grow: 1;
|
||
width: auto;
|
||
max-width: calc(100% - 100px);
|
||
}
|
||
|
||
#oscar_school_form_container #section1 .form-group {
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
gap: 0;
|
||
}
|
||
|
||
#oscar_school_form_container #section1 .form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
#oscar_school_form_container #section1 .form-group:first-of-type .form-group-item {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
justify-content: flex-start;
|
||
}
|
||
#oscar_school_form_container #section1 .form-group:first-of-type .form-group-item label {
|
||
width: 90px;
|
||
text-align: left;
|
||
}
|
||
#oscar_school_form_container #section1 .form-group:first-of-type .form-group-item .form-control {
|
||
max-width: calc(100% - 100px);
|
||
}
|
||
|
||
#oscar_school_form_container .cnil-consent-group {
|
||
max-width: 400px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
#oscar_school_form_container .desktop-submit-button {
|
||
display: none !important;
|
||
}
|
||
|
||
#oscar_school_form_container #final-mobile-navigation {
|
||
display: block !important;
|
||
margin-top: 20px;
|
||
padding: 0 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
#oscar_school_form_container .mobile-submit-button {
|
||
display: block !important;
|
||
margin: 0 auto;
|
||
max-width: 400px;
|
||
width: 100%;
|
||
}
|
||
|
||
#oscar_school_form_container .mandatory-fields-note-global {
|
||
position: static;
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
|
||
/* --- Media Query for SMALL PHONES (max-width: 414px) --- */
|
||
@media (max-width: 414px) {
|
||
#oscar_school_form_container .form-group-item label {
|
||
width: 70px;
|
||
}
|
||
#oscar_school_form_container .form-group-item .form-control {
|
||
max-width: calc(100% - 80px);
|
||
}
|
||
|
||
#oscar_school_form_container #section1 .form-group:first-of-type .form-group-item label {
|
||
width: 70px;
|
||
}
|
||
#oscar_school_form_container #section1 .form-group:first-of-type .form-group-item .form-control {
|
||
max-width: calc(100% - 80px);
|
||
}
|
||
}
|
||
@media (min-width: 769px) {
|
||
#oscar_school_form_container {
|
||
max-width: none !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
.form-sections-wrapper {
|
||
flex-wrap: wrap !important; /* Si tu veux que ça aille à la ligne au besoin */
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.form-section-step {
|
||
max-width: 100% !important; /* Enlève la limite à 50% */
|
||
flex: 1 1 100% !important; /* Permet au formulaire de s’adapter à la largeur */
|
||
}
|
||
|
||
.form-section {
|
||
box-sizing: border-box;
|
||
width: 100% !important;
|
||
}
|
||
|
||
.desktop-submit-button {
|
||
max-width: 400px;
|
||
margin: 30px auto 0 auto;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const campusSelect = document.getElementById('campus_selection');
|
||
const formationSelect = document.getElementById('formation');
|
||
const currentUrl = window.location.href;
|
||
|
||
// Variable pour éviter les soumissions multiples
|
||
let isSubmitting = false;
|
||
|
||
const campusConfirmationPaths = {
|
||
sqy: "confirmation-inscription-portes-ouvertes/",
|
||
cgy: "confirmation-inscription-portes-ouvertes/",
|
||
nantes: "confirmation-inscription-portes-ouvertes/",
|
||
marseille: "confirmation-inscription-portes-ouvertes/"
|
||
};
|
||
|
||
const formationsByCampus = {
|
||
sqy: [
|
||
{ value: "346", text: "BTS MCO" },
|
||
{ value: "348", text: "BTS NDRC" },
|
||
{ value: "350", text: "BTS GPME" },
|
||
{ value: "352", text: "BTS CG" },
|
||
{ value: "354", text: "BTS SAM" },
|
||
{ value: "355", text: "Bachelor RCM" },
|
||
{ value: "356", text: "Bachelor MDO" },
|
||
{ value: "357", text: "DCG 2ème année" },
|
||
{ value: "358", text: "M1/M2 Marketing et Stratégie Digitale" },
|
||
{ value: "359", text: "M1/M2 Négociation Management des Affaires" },
|
||
{ value: "360", text: "M1/M2 MCM spé Management et Stratégie d'Entreprise" },
|
||
{ value: "361", text: "M1/M2 Manager des Ressources Humaines" },
|
||
{ value: "362", text: "M1/M2 Expert Finance et Pilotage de la Performance" }
|
||
],
|
||
cgy: [
|
||
{ value: "346", text: "BTS MCO" },
|
||
{ value: "348", text: "BTS NDRC" },
|
||
{ value: "350", text: "BTS GPME" },
|
||
{ value: "352", text: "BTS CG" },
|
||
{ value: "354", text: "BTS SAM" },
|
||
{ value: "355", text: "Bachelor RCM" },
|
||
{ value: "356", text: "Bachelor MDO" },
|
||
{ value: "357", text: "DCG 2ème année" },
|
||
{ value: "358", text: "M1/M2 Marketing et Stratégie Digitale" },
|
||
{ value: "359", text: "M1/M2 Négociation Management des Affaires" },
|
||
{ value: "360", text: "M1/M2 MCM spé Management et Stratégie d'Entreprise" },
|
||
{ value: "361", text: "M1/M2 Manager des Ressources Humaines" },
|
||
{ value: "362", text: "M1/M2 Expert Finance et Pilotage de la Performance" }
|
||
],
|
||
nantes: [
|
||
{ value: "331", text: "BTS MCO" },
|
||
{ value: "332", text: "BTS NDRC" },
|
||
{ value: "333", text: "BTS GPME" },
|
||
{ value: "335", text: "BTS CG" },
|
||
{ value: "334", text: "BTS SAM" },
|
||
{ value: "337", text: "Bachelor RCM" },
|
||
{ value: "336", text: "Bachelor MDO" },
|
||
{ value: "340", text: "M1/M2 Négociation Management des Affaires" },
|
||
{ value: "341", text: "M1/M2 MCM spé Management et Stratégie d'Entreprise" },
|
||
{ value: "342", text: "M1/M2 Manager des Ressources Humaines" }
|
||
],
|
||
marseille: [
|
||
{ value: "385", text: "BTS MCO" },
|
||
{ value: "387", text: "BTS NDRC" },
|
||
{ value: "389", text: "BTS GPME" },
|
||
{ value: "391", text: "BTS CG" },
|
||
{ value: "393", text: "BTS SAM" },
|
||
{ value: "394", text: "Bachelor RCM" },
|
||
{ value: "395", text: "Bachelor MDO" },
|
||
{ value: "398", text: "M1/M2 Négociation Management des Affaires" },
|
||
{ value: "399", text: "M1/M2 MCM spé Management et Stratégie d'Entreprise" },
|
||
{ value: "400", text: "M1/M2 Manager des Ressources Humaines" }
|
||
]
|
||
};
|
||
|
||
const eventsByCampus = {
|
||
sqy: [
|
||
{ value: "278", text: "Samedi 6 Décembre 2025 10h-14h" },
|
||
{ value: "279", text: "Samedi 24 Janvier 2026 10h-16h" }
|
||
],
|
||
cgy: [
|
||
{ value: "283", text: "Samedi 6 Décembre 2025 10h-14h" },
|
||
{ value: "284", text: "Samedi 24 Janvier 2026 10h-16h" }
|
||
],
|
||
nantes: [
|
||
{ value: "270", text: "Samedi 11 Octobre 2025 10h-14h" },
|
||
{ value: "272", text: "Samedi 6 Décembre 2025 10h-14h" }
|
||
],
|
||
marseille: [
|
||
{ value: "274", text: "Samedi 13 Décembre 2025 10h-14h" },
|
||
{ value: "275", text: "Samedi 24 Janvier 2026 10h-14h" }
|
||
]
|
||
};
|
||
|
||
// Supprimer les anciennes fonctions globales car elles sont maintenant dans Vue
|
||
// Les fonctions updateFormationOptions et updateEventOptions sont maintenant des méthodes Vue
|
||
|
||
const vueInstance = new Vue({
|
||
el: "#oscar_school_form_container",
|
||
data: {
|
||
selectedCampus: campusSelect ? campusSelect.value : "",
|
||
campusTokens: {
|
||
sqy: "vKtwmCzLxRXIR10bEQ6gF",
|
||
cgy: "Ptcu7z4geBBIeikDUUpYe",
|
||
nantes: "A8X28fl9HpOkFvpKHigKK",
|
||
marseille: "eZnlZcYtfaYRJ2WjXnxEj"
|
||
},
|
||
campusFormIDs: {
|
||
sqy: "55",
|
||
cgy: "135",
|
||
nantes: "120",
|
||
marseille: "28"
|
||
},
|
||
campusConfirmationPaths
|
||
},
|
||
watch: {
|
||
selectedCampus: {
|
||
handler(newValue) {
|
||
this.updateHiddenFields();
|
||
this.updateFormationOptions(newValue);
|
||
this.updateEventOptions(newValue);
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initializeCampusFromUrl();
|
||
this.setupEventListeners();
|
||
if (this.selectedCampus) {
|
||
this.updateFormationOptions(this.selectedCampus);
|
||
this.updateEventOptions(this.selectedCampus);
|
||
}
|
||
},
|
||
methods: {
|
||
initializeCampusFromUrl() {
|
||
if (!campusSelect) return;
|
||
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];
|
||
this.selectedCampus = urlToCampusValueMap[urlPart];
|
||
break;
|
||
}
|
||
}
|
||
if (!this.selectedCampus) this.selectedCampus = campusSelect.value;
|
||
},
|
||
determineRelatedFieldsOptions() {
|
||
// ton code ici, même vide si tu veux juste supprimer le warning
|
||
},
|
||
displayAvailableOptions() {
|
||
return true; // ou ton vrai calcul
|
||
},
|
||
|
||
setupEventListeners() {
|
||
if (campusSelect) {
|
||
campusSelect.removeEventListener("change", this.handleCampusChange);
|
||
campusSelect.addEventListener("change", this.handleCampusChange.bind(this));
|
||
}
|
||
},
|
||
|
||
handleCampusChange(e) {
|
||
this.selectedCampus = e.target.value;
|
||
},
|
||
|
||
updateHiddenFields() {
|
||
const tokenField = document.getElementById("hidden_token_field");
|
||
const formIDField = document.getElementById("hidden_formID_field");
|
||
if (tokenField) tokenField.value = this.campusTokens[this.selectedCampus] || "";
|
||
if (formIDField) formIDField.value = this.campusFormIDs[this.selectedCampus] || "";
|
||
},
|
||
|
||
updateFormationOptions(selectedCampusValue) {
|
||
if (!formationSelect) return;
|
||
formationSelect.innerHTML = '<option value="">Choisir une formation</option>';
|
||
if (selectedCampusValue && formationsByCampus[selectedCampusValue]) {
|
||
formationsByCampus[selectedCampusValue].forEach(f => {
|
||
const option = document.createElement('option');
|
||
option.value = f.value;
|
||
option.textContent = f.text;
|
||
formationSelect.appendChild(option);
|
||
});
|
||
}
|
||
},
|
||
|
||
updateEventOptions(selectedCampusValue) {
|
||
const eventSelect = document.getElementById("OscarContactComboMarketingPlanField");
|
||
if (!eventSelect) return;
|
||
eventSelect.innerHTML = '<option value="">Choisir un événement</option>';
|
||
if (selectedCampusValue && eventsByCampus[selectedCampusValue]) {
|
||
eventsByCampus[selectedCampusValue].forEach(ev => {
|
||
const option = document.createElement("option");
|
||
option.value = ev.value;
|
||
option.textContent = ev.text;
|
||
eventSelect.appendChild(option);
|
||
});
|
||
}
|
||
},
|
||
|
||
async submitForm() {
|
||
if (isSubmitting) {
|
||
console.warn("Formulaire déjà en cours de soumission");
|
||
return;
|
||
}
|
||
|
||
isSubmitting = true;
|
||
this.disableSubmitButtons();
|
||
|
||
try {
|
||
const form = document.getElementById("oscar_school_form");
|
||
if (!form) throw new Error("Formulaire non trouvé");
|
||
|
||
const formData = new FormData(form);
|
||
|
||
const selectedValue = campusSelect ? campusSelect.value.trim().toLowerCase() : "";
|
||
|
||
const campusValueToKey = {
|
||
"sqy": "sqy",
|
||
"cgy": "cgy",
|
||
"nantes": "nantes",
|
||
"marseille": "marseille",
|
||
"saint-quentin-en-yvelines": "sqy",
|
||
"campus-cgy": "cgy",
|
||
"campus-nantes": "nantes",
|
||
"campus-marseille": "marseille"
|
||
};
|
||
|
||
// Récupère la valeur depuis Vue (fiable)
|
||
const campusKey = vueInstance.selectedCampus || null;
|
||
|
||
// Définit l'URL de redirection
|
||
let redirectUrl = "https://ensup.eu/confirmation-generale/";
|
||
if (campusKey && vueInstance.campusConfirmationPaths.hasOwnProperty(campusKey)) {
|
||
redirectUrl = "https://ensup.eu/" + vueInstance.campusConfirmationPaths[campusKey];
|
||
}
|
||
|
||
console.log("DEBUG - Campus sélectionné:", campusKey);
|
||
console.log("DEBUG - Redirection:", redirectUrl);
|
||
|
||
|
||
|
||
console.log("Selected campus value:", selectedValue);
|
||
console.log("Mapped campus key:", campusKey);
|
||
console.log("Redirect URL:", redirectUrl);
|
||
|
||
await axios.post(form.action, formData);
|
||
window.location.href = redirectUrl;
|
||
|
||
} catch (error) {
|
||
console.error("Erreur lors de l'envoi :", error.response ? error.response.data : error.message);
|
||
let errorMessage = "Erreur lors de l'envoi du formulaire.";
|
||
if (error.response && error.response.data) {
|
||
errorMessage += " Détails : " + (error.response.data.message || "Erreur serveur");
|
||
}
|
||
alert(errorMessage + " Veuillez réessayer.");
|
||
} finally {
|
||
setTimeout(() => {
|
||
isSubmitting = false;
|
||
this.enableSubmitButtons();
|
||
}, 2000);
|
||
}
|
||
},
|
||
|
||
disableSubmitButtons() {
|
||
const buttons = document.querySelectorAll('#oscar_school_form button[type="submit"]');
|
||
buttons.forEach(btn => {
|
||
btn.disabled = true;
|
||
btn.textContent = "Envoi en cours...";
|
||
});
|
||
},
|
||
|
||
enableSubmitButtons() {
|
||
const buttons = document.querySelectorAll('#oscar_school_form button[type="submit"]');
|
||
buttons.forEach(btn => {
|
||
btn.disabled = false;
|
||
btn.textContent = "M'INSCRIRE À LA JPO";
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
function validateForm() {
|
||
const formSection = document.getElementById('section1') || document.getElementById('final-form-parts');
|
||
if (!formSection) return false;
|
||
|
||
const requiredInputs = formSection.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'].includes(input.name)) {
|
||
isValid = /^[A-Za-zÀ-ÿ' \-]{2,50}$/.test(value);
|
||
} else if (input.name === 'portable') {
|
||
isValid = /^(?:(?:\+|00)33|0)\s*[1-9](?:[\s.-]*\d{2}){4}$/.test(value);
|
||
} else if (input.type === 'checkbox') {
|
||
isValid = input.checked;
|
||
} else if (input.type === 'radio') {
|
||
const groupChecked = formSection.querySelectorAll(`input[name="${input.name}"]:checked`);
|
||
isValid = groupChecked.length > 0;
|
||
} else {
|
||
isValid = value.length > 0;
|
||
}
|
||
|
||
if (!isValid) {
|
||
input.classList.add('is-invalid');
|
||
allValid = false;
|
||
}
|
||
});
|
||
|
||
return allValid;
|
||
}
|
||
|
||
function toggleSubmitButtonState() {
|
||
const cnilCheckbox = document.querySelector('input[name="cnil"][value="1"]');
|
||
const accepted = cnilCheckbox ? cnilCheckbox.checked : false;
|
||
|
||
const submitButtons = document.querySelectorAll('#oscar_school_form button[type="submit"]');
|
||
submitButtons.forEach(btn => {
|
||
btn.disabled = !accepted || isSubmitting;
|
||
});
|
||
}
|
||
|
||
const cnilInputs = document.querySelectorAll('input[name="cnil"]');
|
||
cnilInputs.forEach(input => {
|
||
input.addEventListener("change", toggleSubmitButtonState);
|
||
});
|
||
|
||
toggleSubmitButtonState();
|
||
|
||
const form = document.getElementById('oscar_school_form');
|
||
if (form) {
|
||
form.removeEventListener('submit', handleFormSubmit);
|
||
form.addEventListener('submit', handleFormSubmit);
|
||
}
|
||
|
||
function handleFormSubmit(e) {
|
||
e.preventDefault(); // Toujours empêcher la soumission native
|
||
if (isSubmitting) return;
|
||
|
||
if (!validateForm()) {
|
||
const cnilCheckbox = document.querySelector('input[name="cnil"][value="1"]');
|
||
const cnilAccepted = cnilCheckbox ? cnilCheckbox.checked : false;
|
||
const message = cnilAccepted
|
||
? "Veuillez remplir tous les champs obligatoires."
|
||
: "Veuillez accepter les conditions CNIL pour envoyer le formulaire.";
|
||
alert(message);
|
||
return;
|
||
}
|
||
|
||
// On envoie **uniquement** via Vue/Axios
|
||
if (vueInstance && typeof vueInstance.submitForm === 'function') {
|
||
vueInstance.submitForm();
|
||
}
|
||
}
|
||
|
||
|
||
window.addEventListener('beforeunload', function() {
|
||
if (campusSelect) campusSelect.removeEventListener("change", vueInstance.handleCampusChange);
|
||
if (form) form.removeEventListener('submit', handleFormSubmit);
|
||
});
|
||
});
|
||
|
||
</script> |