|
|
@@ -0,0 +1,329 @@
|
|
|
+<template>
|
|
|
+ <LayoutContainer>
|
|
|
+ <LayoutUITitlePage
|
|
|
+ title="Besoin d'aide ?"
|
|
|
+ subtitle="Notre équipe est là pour vous. contactez-nous!. "
|
|
|
+ />
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" style="position: relative">
|
|
|
+ <img
|
|
|
+ src="/images/formation/banner.jpg"
|
|
|
+ alt="line"
|
|
|
+ class="cover-image"
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ <div class="container-contact">
|
|
|
+ <v-form ref="form" v-model="valid" lazy-validation>
|
|
|
+ <v-container>
|
|
|
+ <h4 class="title-h4">Veuillez remplir le formulaire ci-dessous</h4>
|
|
|
+
|
|
|
+ <h6 class="infos">Vos coordonnées</h6>
|
|
|
+
|
|
|
+ <!-- Gender selection in one row -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12">
|
|
|
+ <v-radio-group v-model="gender" row mandatory inline>
|
|
|
+ <v-radio label="Madame" value="Madame"></v-radio>
|
|
|
+ <v-radio label="Monsieur" value="Monsieur"></v-radio>
|
|
|
+ </v-radio-group>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- Name and Surname on the same line -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="name"
|
|
|
+ :rules="nameRules"
|
|
|
+ label="Nom*"
|
|
|
+ required
|
|
|
+ ></v-text-field>
|
|
|
+ </v-col>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="surname"
|
|
|
+ :rules="surnameRules"
|
|
|
+ label="Prénom*"
|
|
|
+ required
|
|
|
+ ></v-text-field>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- Postal code and city on the same line -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="postalCode"
|
|
|
+ label="Code postal"
|
|
|
+ type="number"
|
|
|
+ ></v-text-field>
|
|
|
+ </v-col>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field v-model="city" label="Ville"></v-text-field>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- Email and phone on the same line -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="email"
|
|
|
+ :rules="emailRules"
|
|
|
+ label="Email*"
|
|
|
+ required
|
|
|
+ type="email"
|
|
|
+ ></v-text-field>
|
|
|
+ </v-col>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="phone"
|
|
|
+ label="Téléphone"
|
|
|
+ type="tel"
|
|
|
+ ></v-text-field>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- Structure name on its own line -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12">
|
|
|
+ <v-text-field
|
|
|
+ v-model="structureName"
|
|
|
+ :rules="structureNameRules"
|
|
|
+ label="Nom de la structure*"
|
|
|
+ required
|
|
|
+ ></v-text-field>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ <h6 class="infos">Votre demande concerne</h6>
|
|
|
+
|
|
|
+ <!-- Request type and product concerned on the same line -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-select
|
|
|
+ v-model="requestType"
|
|
|
+ :items="requestTypes"
|
|
|
+ label="Votre demande concerne"
|
|
|
+ outlined
|
|
|
+ dense
|
|
|
+ ></v-select>
|
|
|
+ </v-col>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="concernedProduct"
|
|
|
+ label="Le produit concerné"
|
|
|
+ outlined
|
|
|
+ dense
|
|
|
+ ></v-text-field>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ <h6 class="infos">Votre message</h6>
|
|
|
+
|
|
|
+ <!-- Message on its own line -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12">
|
|
|
+ <v-textarea
|
|
|
+ v-model="message"
|
|
|
+ :rules="messageRules"
|
|
|
+ label="Votre message*"
|
|
|
+ required
|
|
|
+ outlined
|
|
|
+ dense
|
|
|
+ maxlength="400"
|
|
|
+ ></v-textarea>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- Policy and checkboxes -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12">
|
|
|
+ <v-checkbox
|
|
|
+ v-model="privacyPolicy"
|
|
|
+ :rules="[(v) => !!v || 'You must accept the privacy policy']"
|
|
|
+ label="J'ai pris connaissance de la politique de confidentialité et j'accepte le traitement de mes données personnelles par Opentalent."
|
|
|
+ ></v-checkbox>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12">
|
|
|
+ <v-checkbox
|
|
|
+ v-model="newsletterSubscription"
|
|
|
+ label="Je souhaite recevoir des communications d'Opentalent par email (promotions, informations logiciel…). Je pourrai me désinscrire à tout moment."
|
|
|
+ ></v-checkbox>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- Submit Button -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12">
|
|
|
+ <v-btn :disabled="!valid" color="primary" @click="submitForm"
|
|
|
+ >Envoyer</v-btn
|
|
|
+ >
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ </v-container>
|
|
|
+ </v-form>
|
|
|
+ </div>
|
|
|
+ </LayoutContainer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, reactive, computed, toRefs } from "vue";
|
|
|
+
|
|
|
+const name = ref("");
|
|
|
+const surname = ref("");
|
|
|
+const email = ref("");
|
|
|
+const structureName = ref("");
|
|
|
+const message = ref("");
|
|
|
+const privacyPolicy = ref(false);
|
|
|
+const gender = ref(null);
|
|
|
+const postalCode = ref(null);
|
|
|
+const city = ref("");
|
|
|
+const phone = ref(null);
|
|
|
+const requestType = ref(null);
|
|
|
+const concernedProduct = ref("");
|
|
|
+const newsletterSubscription = ref(false);
|
|
|
+
|
|
|
+const validateName = (name) => !!name || "Name is required";
|
|
|
+const validateSurname = (surname) => !!surname || "Surname is required";
|
|
|
+const validateEmail = (email) =>
|
|
|
+ (!!email && /.+@.+\..+/.test(email)) || "E-mail must be valid";
|
|
|
+const validateStructureName = (structureName) =>
|
|
|
+ !!structureName || "Structure name is required";
|
|
|
+const validateMessage = (message) =>
|
|
|
+ (!!message && message.length <= 400) ||
|
|
|
+ "Message cannot exceed 400 characters";
|
|
|
+
|
|
|
+const valid = computed(() => {
|
|
|
+ return (
|
|
|
+ validateName(name.value) === true &&
|
|
|
+ validateSurname(surname.value) === true &&
|
|
|
+ validateEmail(email.value) === true &&
|
|
|
+ validateStructureName(structureName.value) === true &&
|
|
|
+ validateMessage(message.value) === true &&
|
|
|
+ privacyPolicy.value === true
|
|
|
+ );
|
|
|
+});
|
|
|
+
|
|
|
+const requestTypes = [
|
|
|
+ "Demande d'information",
|
|
|
+ "Demande de devis",
|
|
|
+ "Demande de démonstration",
|
|
|
+ "Demande d'option supplémentaire",
|
|
|
+ "Autre",
|
|
|
+];
|
|
|
+
|
|
|
+const formData = reactive({
|
|
|
+ gender: null,
|
|
|
+ postalCode: null,
|
|
|
+ city: "",
|
|
|
+ phone: null,
|
|
|
+ requestType: null,
|
|
|
+ concernedProduct: "",
|
|
|
+ newsletterSubscription,
|
|
|
+});
|
|
|
+
|
|
|
+// Methods
|
|
|
+const submitForm = () => {
|
|
|
+ if (valid.value) {
|
|
|
+ console.log("Form submission goes here.");
|
|
|
+ } else {
|
|
|
+ console.log("Validation failed!");
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const formDataRefs = toRefs(formData);
|
|
|
+const formRefs = {
|
|
|
+ ...formDataRefs,
|
|
|
+ name,
|
|
|
+ surname,
|
|
|
+ email,
|
|
|
+ structureName,
|
|
|
+ message,
|
|
|
+ privacyPolicy,
|
|
|
+ valid,
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.infos {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.container-contact {
|
|
|
+ max-width: 1400px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.title-h4 {
|
|
|
+ font-size: 40px;
|
|
|
+ line-height: 95px;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ /** gris moins opaque */
|
|
|
+ color: rgba(0, 0, 0, 0.3);
|
|
|
+}
|
|
|
+.image-text {
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ left: 20px;
|
|
|
+ font-family: "Barlow";
|
|
|
+ color: white;
|
|
|
+ font-size: 3rem;
|
|
|
+ width: 30rem;
|
|
|
+ font-style: italic;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep().subtitle {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ line-height: 2rem;
|
|
|
+ letter-spacing: 0.1rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+
|
|
|
+.formation {
|
|
|
+ font-family: "Barlow";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 90px;
|
|
|
+ line-height: 85px;
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.menu-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 1rem 10rem;
|
|
|
+ background: white;
|
|
|
+ color: #bbb8b8;
|
|
|
+ font-family: "Barlow";
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.18em;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+
|
|
|
+.v-chip.active-menu {
|
|
|
+ background: black;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.cover-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 15rem;
|
|
|
+ object-fit: cover;
|
|
|
+ object-position: center 30%;
|
|
|
+ margin: 0 auto;
|
|
|
+ transform: scaleX(-1);
|
|
|
+}
|
|
|
+</style>
|
Maha Bouchiba