896 lines
27 KiB
Plaintext
896 lines
27 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Formulaire de contact Oscar School</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.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="contact">
|
|
<div class="form-sections-wrapper">
|
|
|
|
<div id="section1" class="form-section form-section-step active ">
|
|
<div class="form-intro-message">
|
|
<h2><i class="fas fa-info-circle"></i> Une question sur nos formations, l'admission, le campus ou l'alternance ?</h2>
|
|
<p style="text-align: center;">Veuillez compléter ce formulaire, notre équipe vous recontactera rapidement.</p>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 5px;"></div>
|
|
|
|
<div class="form-group ">
|
|
<div class="form-group-item">
|
|
<label for="je_suis_ref_id">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"
|
|
>
|
|
<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(e)</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" id="campus_selection_app_Brochure">
|
|
<div class="form-group-item">
|
|
<label for="campus_selection_Brochure">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 full-width">
|
|
<label for="remarque">Objet de la demande:</label>
|
|
<textarea id="remarque" name="remarque" class="form-control" rows="4"></textarea>
|
|
</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" id="desktop-submit-btn" class="btn-primary desktop-submit-button">
|
|
<span class="btn-text">ENVOYER</span>
|
|
<span class="btn-loading" style="display: none;">⏳ Envoi en cours...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="final-mobile-navigation">
|
|
<button type="submit" id="mobile-submit-btn" class="btn-primary mobile-submit-button">
|
|
<span class="btn-text">ENVOYER</span>
|
|
<span class="btn-loading" style="display: none;">⏳ Envoi en cours...</span>
|
|
</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>
|
|
|
|
<style>
|
|
.form-description {
|
|
text-align: center;
|
|
margin-bottom: 25px;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
#oscar_school_form_container {
|
|
max-width: 1200px;
|
|
margin: 20px auto;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
#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);
|
|
}
|
|
|
|
#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 {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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.5em;
|
|
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 {
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-group-item {
|
|
flex: 1 1 calc(50% - 10px);
|
|
max-width: calc(50% - 10px);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.cnil-info-label {
|
|
color: #6c757d;
|
|
font-size: 0.85em;
|
|
margin-top: 8px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.cnil-checkbox-wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.oscar_input_required {
|
|
color: #DD1B51;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.cnil-consent-group {
|
|
padding: 10px 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.btn-loading {
|
|
display: none;
|
|
}
|
|
|
|
.btn-primary.sending .btn-text {
|
|
display: none;
|
|
}
|
|
|
|
.btn-primary.sending .btn-loading {
|
|
display: inline-block;
|
|
}
|
|
|
|
.form-section-step {
|
|
width: 100%;
|
|
display: none;
|
|
}
|
|
|
|
.form-navigation {
|
|
display: none;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.form-navigation .btn-next,
|
|
.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;
|
|
}
|
|
|
|
.form-navigation .btn-prev {
|
|
background-color: #DD1B3D;
|
|
color: #fff;
|
|
}
|
|
|
|
.form-navigation .btn-prev:hover {
|
|
background-color: #c71534;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.form-navigation .btn-next {
|
|
background-color: #198AB4;
|
|
color: #fff;
|
|
}
|
|
|
|
.form-navigation .btn-next:hover {
|
|
background-color: #147395;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.mandatory-fields-note-global {
|
|
font-size: 0.85em;
|
|
color: #555;
|
|
text-align: right;
|
|
margin-top: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
#oscar_school_form_container {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.form-sections-wrapper {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
align-items: stretch;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-section-step {
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: 50%;
|
|
display: flex !important;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-section {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.form-navigation,
|
|
.section-navigation-mobile,
|
|
#final-mobile-navigation,
|
|
.mobile-submit-button {
|
|
display: none !important;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-group-item {
|
|
flex: 1 1 calc(50% - 10px);
|
|
max-width: calc(50% - 10px);
|
|
}
|
|
|
|
#section1 .form-group:first-of-type .form-group-item {
|
|
flex: 1 1 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.mandatory-fields-note-global {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 25px;
|
|
right: auto;
|
|
font-size: 0.9em;
|
|
color: #777;
|
|
text-align: left;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#oscar_school_form_container {
|
|
width: 100%;
|
|
padding: 0 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
#oscar_school_form_body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.form-sections-wrapper {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-section {
|
|
min-width: unset;
|
|
padding: 18px;
|
|
margin-bottom: 20px;
|
|
height: auto;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.form-section-step.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 12px;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
margin-left: 0;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.form-group-item {
|
|
flex: 1 1 100%;
|
|
max-width: 100%;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.form-group-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-group-item label {
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
width: 90px;
|
|
text-align: left;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-group-item .form-control {
|
|
flex-grow: 1;
|
|
width: auto;
|
|
max-width: calc(100% - 100px);
|
|
}
|
|
|
|
#section1 .form-group {
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
gap: 0;
|
|
}
|
|
|
|
#section1 .form-group-item {
|
|
flex: 1 1 100%;
|
|
max-width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#section1 .form-group:first-of-type .form-group-item {
|
|
flex: 1 1 100%;
|
|
max-width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
#section1 .form-group:first-of-type .form-group-item label {
|
|
width: 90px;
|
|
text-align: left;
|
|
}
|
|
|
|
#section1 .form-group:first-of-type .form-group-item .form-control {
|
|
max-width: calc(100% - 100px);
|
|
}
|
|
|
|
.cnil-consent-group {
|
|
max-width: 400px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.desktop-submit-button {
|
|
display: none !important;
|
|
}
|
|
|
|
#final-mobile-navigation {
|
|
display: block !important;
|
|
margin-top: 20px;
|
|
padding: 0 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.mobile-submit-button {
|
|
display: block !important;
|
|
margin: 0 auto;
|
|
max-width: 400px;
|
|
width: 100%;
|
|
}
|
|
|
|
.mandatory-fields-note-global {
|
|
position: static;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 414px) {
|
|
.form-group-item label {
|
|
width: 70px;
|
|
}
|
|
|
|
.form-group-item .form-control {
|
|
max-width: calc(100% - 80px);
|
|
}
|
|
|
|
#section1 .form-group:first-of-type .form-group-item label {
|
|
width: 70px;
|
|
}
|
|
|
|
#section1 .form-group:first-of-type .form-group-item .form-control {
|
|
max-width: calc(100% - 80px);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const campusSelect = document.getElementById('campus_selection');
|
|
const currentUrl = window.location.href;
|
|
|
|
let isSubmitting = false;
|
|
|
|
const campusConfirmationPaths = {
|
|
sqy: "confirmation-demande-de-contact/",
|
|
cgy: "confirmation-demande-de-contact/",
|
|
nantes: "confirmation-demande-de-contact/",
|
|
marseille: "confirmation-demande-de-contact/"
|
|
};
|
|
|
|
const vueInstance = new Vue({
|
|
el: "#campus_selection",
|
|
data: {
|
|
selectedCampus: campusSelect ? campusSelect.value : "",
|
|
campusTokens: {
|
|
sqy: "4dI7t38zd5Z1RXOT0VdcB",
|
|
cgy: "jqF8XULo9yumNQgCag2eW",
|
|
nantes: "fF5p5HvCpBkKvvPvpS0zH",
|
|
marseille: "nPS8hijHWAx4Uos3zBqNu"
|
|
},
|
|
campusFormIDs: {
|
|
sqy: "271",
|
|
cgy: "269",
|
|
nantes: "261",
|
|
marseille: "268"
|
|
},
|
|
campusConfirmationPaths
|
|
},
|
|
|
|
watch: {
|
|
selectedCampus() {
|
|
this.updateHiddenFields();
|
|
}
|
|
},
|
|
mounted() {
|
|
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];
|
|
this.selectedCampus = urlToCampusValueMap[urlPart];
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.selectedCampus = campusSelect.value;
|
|
this.updateHiddenFields();
|
|
|
|
campusSelect.addEventListener("change", (e) => {
|
|
this.selectedCampus = e.target.value;
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
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] || "";
|
|
},
|
|
|
|
async submitForm() {
|
|
if (isSubmitting) {
|
|
console.log("Soumission déjà en cours, ignorée");
|
|
return;
|
|
}
|
|
|
|
isSubmitting = true;
|
|
|
|
const form = document.getElementById("oscar_school_form");
|
|
const campusSelect = document.getElementById('campus_selection');
|
|
|
|
if (!campusSelect || !campusSelect.value) {
|
|
alert("Veuillez sélectionner un campus");
|
|
isSubmitting = false;
|
|
return;
|
|
}
|
|
|
|
this.setLoadingState(true);
|
|
|
|
try {
|
|
const formData = new FormData(form);
|
|
const selectedCampusValue = campusSelect.value;
|
|
console.log("Campus sélectionné:", selectedCampusValue);
|
|
|
|
let path = this.campusConfirmationPaths[selectedCampusValue];
|
|
|
|
if (!path) {
|
|
console.error("Pas de chemin de confirmation pour le campus:", selectedCampusValue);
|
|
path = "confirmation-demande-de-contact/";
|
|
}
|
|
|
|
const baseUrl = "https://ensitech.eu/";
|
|
const redirectUrl = baseUrl + path;
|
|
|
|
console.log("Redirection prévue vers:", redirectUrl);
|
|
|
|
const response = await axios.post(form.action, formData);
|
|
|
|
console.log("Formulaire envoyé avec succès");
|
|
window.location.href = redirectUrl;
|
|
|
|
} catch (error) {
|
|
console.error("Erreur lors de l'envoi:", error);
|
|
alert("Erreur lors de l'envoi du formulaire. Veuillez réessayer.");
|
|
|
|
isSubmitting = false;
|
|
this.setLoadingState(false);
|
|
}
|
|
},
|
|
|
|
setLoadingState(loading) {
|
|
const desktopBtn = document.getElementById("desktop-submit-btn");
|
|
const mobileBtn = document.getElementById("mobile-submit-btn");
|
|
|
|
[desktopBtn, mobileBtn].forEach(btn => {
|
|
if (btn) {
|
|
if (loading) {
|
|
btn.classList.add('sending');
|
|
btn.disabled = true;
|
|
} else {
|
|
btn.classList.remove('sending');
|
|
btn.disabled = false;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
function validateForm() {
|
|
const formSection = document.getElementById('section1');
|
|
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' || input.type === 'radio') {
|
|
if (input.type === 'radio') {
|
|
const groupChecked = formSection.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;
|
|
}
|
|
|
|
const cnilCheckbox = document.getElementById('cnil_oui');
|
|
const desktopBtn = document.getElementById('desktop-submit-btn');
|
|
const mobileBtn = document.getElementById('mobile-submit-btn');
|
|
|
|
function toggleSubmitButtonState() {
|
|
const accepted = cnilCheckbox && cnilCheckbox.checked;
|
|
if (desktopBtn) desktopBtn.disabled = !accepted;
|
|
if (mobileBtn) mobileBtn.disabled = !accepted;
|
|
}
|
|
|
|
toggleSubmitButtonState();
|
|
|
|
if (cnilCheckbox) {
|
|
cnilCheckbox.addEventListener("change", toggleSubmitButtonState);
|
|
}
|
|
|
|
function handleFormSubmit(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
console.log("Tentative de soumission...");
|
|
|
|
if (isSubmitting) {
|
|
console.log("Soumission déjà en cours");
|
|
return false;
|
|
}
|
|
|
|
if (!validateForm()) {
|
|
const accepted = cnilCheckbox && cnilCheckbox.checked;
|
|
alert(accepted
|
|
? "Veuillez remplir tous les champs obligatoires."
|
|
: "Veuillez accepter les conditions CNIL pour envoyer le formulaire.");
|
|
return false;
|
|
}
|
|
|
|
if (vueInstance && typeof vueInstance.submitForm === 'function') {
|
|
vueInstance.submitForm();
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
if (desktopBtn) {
|
|
desktopBtn.addEventListener('click', handleFormSubmit);
|
|
}
|
|
|
|
if (mobileBtn) {
|
|
mobileBtn.addEventListener('click', handleFormSubmit);
|
|
}
|
|
|
|
const form = document.getElementById('oscar_school_form');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
console.log("Soumission native bloquée");
|
|
return false;
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |