<div class="container pt-16 pb-32">
<div class="md:text-center">
<h1 class="h2"> Nous contacter </h1>
<div class="text-body-base flex flex-col gap-y-1 mt-7">
<span>
Vous n'avez pas trouvé de réponse à votre question
<a href="#" title="" class="font-semibold underline">dans nos FAQs ? </a>
</span>
<span>
Nous sommes là pour tout complément d'information.
</span>
</div>
</div>
<div class="lg:grid lg:grid-cols-12 lg:gap-4 mt-16">
<div class="col-span-4 w-full text-body-sm">
<div>
<div class="pb-10 border-b border-neutral-200">
<div class="h5 mb-4">
Messagerie instantanée
</div>
<div class="flex items-center">
<div class="me-6">
<a href="https://www.messenger.com/t/115590778524269/?messaging_source=source%3Apages%3Amessage_shortlink" target="_blank" rel="noopener">
<img src="/img/messenger.png" width="55" height="55" alt="Messenger">
</a>
</div>
<div class="me-6">
<a href="https://www.instagram.com/etatpur/" target="_blank" rel="noopener">
<img src="/img/instagram.png" width="55" height="55" alt="Instagram">
</a>
</div>
</div>
</div>
<div class="flex py-10 gap-x-4 border-b border-neutral-200">
<svg class="size-5 mt-1 shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<div>
<div class="h5 mb-4">
Téléphone
</div>
<p>Service client <span class="italic">(appel non surtaxé) </span></p>
<p>Du lundi au vendredi de 9h à 17h</p>
<a href="tel:0809 545 900" class="underline">
0809 545 900
</a>
</div>
</div>
<div class="flex py-10 gap-x-4 border-b border-neutral-200">
<svg class="size-5 mt-1 shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<div>
<div class="h5 mb-4">
E-mail
</div>
<div>
<a href="mailto:contact@etatpur.com" class="underline">
contact@etatpur.com
</a>
</div>
</div>
</div>
<div class="flex py-10 gap-x-4">
<svg class="size-5 mt-1 shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" fill="none" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" fill="none" />
</svg>
<div>
<div class="h5 mb-4">
Courrier
</div>
<p>
ETAT PUR - NAOS GROUP
<br>
23 Place de Catalogne 75014 PARIS
</p>
</div>
</div>
</div>
</div>
<div class="col-start-6 col-span-7">
<div class="app-contact-form mb-5 border-t border-b md:border-none" x-data="accordionContact()" @resize.debounce.100.window="expanded = !isMobile; checkExpand()">
<h2 class="h5 py-5 md:pt-0 px-6 md:px-0 flex flex-row justify-between items-center" @click="toggleExpanded()">
Formulaire de contact
<span :class="expanded ? 'rotate-180' : ''" class="lg:hidden transition-transform" aria-hidden="true">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </span>
</h2>
<form novalidate="novalidate" class="px-6 md:px-0 pb-8 md:py-0 md:block" x-cloak x-show="expanded || !isMobile">
<div class="flex flex-col gap-y-3 md:gap-y-6">
<div class="relative">
<div class="flex flex-col mt-2">
<label for="prefix" class="flex items-center gap-x-1 mb-1">
Civilité
<span class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</span>
</label>
</div>
<div class="flex flex-col mt-1">
<div class="flex space-x-4">
<!-- replace identifiers with normal values (for,id,name etc...) -->
<label class="selection-control-label selection-control-radio ">
<input type="radio" id="prefix1" name="prefix" class="" value="M." @input.debounce="onChange">
<span class="
">
M.
</span>
</label>
<!-- replace identifiers with normal values (for,id,name etc...) -->
<label class="selection-control-label selection-control-radio ">
<input type="radio" id="prefix2" name="prefix" class="" value="Mme." @input.debounce="onChange">
<span class="
">
Mme.
</span>
</label>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="col-span-2 md:col-span-1">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="text" name="contact-lastname" id="contact-lastname" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="contact-lastname" class="flex flex-row items-center gap-2">
<span class="flex-grow">Nom</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="col-span-2 md:col-span-1">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="text" name="contact-firstname" id="contact-firstname" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="contact-firstname" class="flex flex-row items-center gap-2">
<span class="flex-grow">Prénom</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="email" name="contact-email" id="contact-email" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="contact-email" class="flex flex-row items-center gap-2">
<span class="flex-grow">E-mail</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
<div class="pb-8">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="tel" name="contact-phone" id="contact-phone" class="form-input w-full peer
" placeholder="" @input.debounce="onChange">
<div class="label-wrapper ">
<label for="contact-phone" class="flex flex-row items-center gap-2">
<span class="flex-grow">Téléphone</span>
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col w-full gap-y-1 field field-reserved">
<div x-data="selectcontactFormOptions" class="input-wrapper input-wrapper-select flex flex-col relative w-full floating-label ">
<button type="button" @click="openSelect" x-ref="selectButton" class="form-select w-full peer flex justify-between btn gap-x-2
required
" :class="selected ? 'option-selected' : ''">
<span class="flex flex-row items-center gap-2">
<template x-if="selected && selected.type === 'leading-icon'">
<img :src="selected.image" :alt="selected.name">
</template>
<span x-text="selected ? selected.name : 'Séléctionnez...'">
Séléctionnez...
</span>
</span>
<span class="transition-all transform flex items-center" :class="{'rotate-180' : show}">
<svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </span>
</button>
<div class="label-wrapper ">
<label for="contactFormOptions" class="flex flex-row items-center gap-2">
<span class="flex-grow">Votre demande concerne</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
<div class="dropdown-content relative w-full overflow-auto max-h-screen-40" x-show="show" x-transition x-cloak @click.outside="show = false" x-anchor.bottom-start.offset.0="$refs.selectButton">
<template x-for="option in options">
<div>
<template x-if="option.type === 'group'">
<div class="item-category text-brand-700 font-bold">
<div class="dropdown-item-category p-2">
<span class="flex-1" x-text="option.name"></span>
</div>
</div>
</template>
<template x-if="option.type !== 'group'">
<div @click="select(option.id)" :class="option.checked ? 'selected' : ''">
<template x-if="option.href">
<div>
<a :href="option.href" class="dropdown-item cursor-pointer p-2">
<template x-if="option.image">
<img :src="option.image" :alt="option.name">
</template>
<span class="flex-1" x-text="option.name"></span>
<template x-if="option.checked">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
</svg>
</template>
</a>
</div>
</template>
<template x-if="!option.href">
<div class="dropdown-item cursor-pointer p-2">
<template x-if="option.image">
<img :src="option.image" :alt="option.name">
</template>
<span class="flex-1" x-text="option.name"></span>
<template x-if="option.checked">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
</svg>
</template>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
<select class="sr-only required" id="contactFormOptions" required name="contact-choice" id="contact-choice">
<option value="" selected disabled hidden></option>
<option value="">Les produits</option>
<option value="Conseils personnalisés">Conseils personnalisés</option>
<option value="Demande d’informations sur un produit">Demande d’informations sur un produit</option>
<option value="Remarque / réclamation sur un produit">Remarque / réclamation sur un produit</option>
<option value="">Ma commande</option>
<option value="Aide pour finaliser ma commande en ligne">Aide pour finaliser ma commande en ligne</option>
<option value="Modification de commande">Modification de commande (adresse de livraison, annulation)</option>
<option value="Suivi de livraison de ma commande">Suivi de livraison de ma commande</option>
<option value="Réclamation sur ma commande">Réclamation sur ma commande</option>
<option value="">Mon compte</option>
<option value="Aide pour créer ou accéder à mon compte">Aide pour créer ou accéder à mon compte</option>
<option value="Abonnement / désabonnement newsletter">Abonnement / désabonnement newsletter</option>
<option value="Modifications de mes informations personnelles">Modifications de mes informations personnelles</option>
<option value="Question sur mes données personnelles">Question sur mes données personnelles</option>
<option value="">Informations</option>
<option value="Disponibilité des produits">Disponibilité des produits</option>
<option value="Livraison et paiement">Livraison et paiement</option>
<option value="">Divers</option>
<option value="Autres questions">Autres questions</option>
</select>
</div>
</div>
<script>
function selectcontactFormOptions() {
return {
rawOptions: [{
"value": "",
"text": "Les produits",
"type": "group"
}, {
"value": "Conseils personnalisés",
"text": "Conseils personnalisés"
}, {
"value": "Demande d’informations sur un produit",
"text": "Demande d’informations sur un produit"
}, {
"value": "Remarque / réclamation sur un produit",
"text": "Remarque / réclamation sur un produit"
}, {
"value": "",
"text": "Ma commande",
"type": "group"
}, {
"value": "Aide pour finaliser ma commande en ligne",
"text": "Aide pour finaliser ma commande en ligne"
}, {
"value": "Modification de commande",
"text": "Modification de commande (adresse de livraison, annulation)"
}, {
"value": "Suivi de livraison de ma commande",
"text": "Suivi de livraison de ma commande"
}, {
"value": "Réclamation sur ma commande",
"text": "Réclamation sur ma commande"
}, {
"value": "",
"text": "Mon compte",
"type": "group"
}, {
"value": "Aide pour créer ou accéder à mon compte",
"text": "Aide pour créer ou accéder à mon compte"
}, {
"value": "Abonnement / désabonnement newsletter",
"text": "Abonnement / désabonnement newsletter"
}, {
"value": "Modifications de mes informations personnelles",
"text": "Modifications de mes informations personnelles"
}, {
"value": "Question sur mes données personnelles",
"text": "Question sur mes données personnelles"
}, {
"value": "",
"text": "Informations",
"type": "group"
}, {
"value": "Disponibilité des produits",
"text": "Disponibilité des produits"
}, {
"value": "Livraison et paiement",
"text": "Livraison et paiement"
}, {
"value": "",
"text": "Divers",
"type": "group"
}, {
"value": "Autres questions",
"text": "Autres questions"
}],
options: [],
show: false,
selected: null,
init() {
Array.from(this.rawOptions).forEach(option => {
if (!option.disabled) {
this.options.push({
id: option.value,
name: option.text,
checked: option.selected,
image: option.image,
href: option.href,
type: option.type,
})
}
if (option.selected && option.value) {
this.select(option.value);
}
});
},
openSelect() {
this.show = !this.show;
},
select(id) {
this.options = this.options.map(option => {
if (option.id === id) {
option.checked = true;
this.selected = option;
} else {
option.checked = false;
}
return option;
});
document.getElementById('contactFormOptions').value = this.selected.id;
this.show = false;
}
}
}
</script>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<textarea class="form-textarea form-input w-full peer min-h-24
required
" name="contact-message" id="contact-message" placeholder=""></textarea>
<div class="label-wrapper ">
<label for="contact-message" class="flex flex-row items-center gap-2">
<span class="flex-grow">Votre message</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-x-1 mt-2 text-neutral text-body-xs">
<span class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</span>
Champs obligatoires
</div>
<div class="text-body-xs mt-4 font-light">
NAOS France (Etat Pur, Bioderma, Institut Esthederm) collecte
les données personnelles ci-dessus afin de prendre en charge votre demande. Pour en savoir plus
sur l’utilisation de vos données et sur vos droits,
<a href="#" target="_blank" class="font-semibold underline">
cliquez-ici
</a>
</div>
<div class="flex justify-end mt-10">
<button type="submit" class=" btn btn-dark btn-solid btn-size-lg">
Envoyer
</button>
</div>
</form>
</div>
</div>
</div>
<script>
'use strict';
function accordionContact() {
return {
expanded: false,
isMobile: false,
init() {
this.checkExpand();
},
toggleExpanded() {
this.expanded = !this.isMobile || !this.expanded;
},
checkExpand() {
this.isMobile = window.innerWidth < 768;
}
};
}
</script>
</div>
<div class="container pt-16 pb-32">
<div class="md:text-center">
<h1 class="h2"> Nous contacter </h1>
<div class="text-body-base flex flex-col gap-y-1 mt-7">
<span>
Vous n'avez pas trouvé de réponse à votre question
<a href="#" title="" class="font-semibold underline">dans nos FAQs ? </a>
</span>
<span>
Nous sommes là pour tout complément d'information.
</span>
</div>
</div>
<div class="lg:grid lg:grid-cols-12 lg:gap-4 mt-16">
<div class="col-span-4 w-full text-body-sm">
<div>
<div class="pb-10 border-b border-neutral-200">
<div class="h5 mb-4">
Messagerie instantanée
</div>
<div class="flex items-center">
<div class="me-6">
<a href="https://www.messenger.com/t/115590778524269/?messaging_source=source%3Apages%3Amessage_shortlink"
target="_blank"
rel="noopener"
>
<img src="/img/messenger.png"
width="55"
height="55"
alt="Messenger"
>
</a>
</div>
<div class="me-6">
<a href="https://www.instagram.com/etatpur/"
target="_blank"
rel="noopener"
>
<img src="/img/instagram.png"
width="55"
height="55"
alt="Instagram"
>
</a>
</div>
</div>
</div>
<div class="flex py-10 gap-x-4 border-b border-neutral-200">
{% render "@icons-heroicons--phone-outline" with {
iconClass: 'size-5 mt-1'
} %}
<div>
<div class="h5 mb-4">
Téléphone
</div>
<p>Service client <span class="italic">(appel non surtaxé) </span></p>
<p>Du lundi au vendredi de 9h à 17h</p>
<a href="tel:0809 545 900" class="underline">
0809 545 900
</a>
</div>
</div>
<div class="flex py-10 gap-x-4 border-b border-neutral-200">
{% render "@icons-heroicons--envelope-outline" with {
iconClass: 'size-5 mt-1'
} %}
<div>
<div class="h5 mb-4">
E-mail
</div>
<div>
<a href="mailto:contact@etatpur.com" class="underline">
contact@etatpur.com
</a>
</div>
</div>
</div>
<div class="flex py-10 gap-x-4">
{% render "@icons-heroicons--map-pin-outline" with {
iconClass: 'size-5 mt-1'
} %}
<div>
<div class="h5 mb-4">
Courrier
</div>
<p>
ETAT PUR - NAOS GROUP
<br>
23 Place de Catalogne 75014 PARIS
</p>
</div>
</div>
</div>
</div>
<div class="col-start-6 col-span-7">
<div class="app-contact-form mb-5 border-t border-b md:border-none"
x-data="accordionContact()"
@resize.debounce.100.window="expanded = !isMobile; checkExpand()"
>
<h2 class="h5 py-5 md:pt-0 px-6 md:px-0 flex flex-row justify-between items-center"
@click="toggleExpanded()"
>
Formulaire de contact
<span :class="expanded ? 'rotate-180' : ''" class="lg:hidden transition-transform" aria-hidden="true">
{% render "@icons-heroicons--chevron-down-mini" with { width:"24", height:"24"} %}
</span>
</h2>
<form novalidate="novalidate"
class="px-6 md:px-0 pb-8 md:py-0 md:block"
x-cloak
x-show="expanded || !isMobile"
>
<div class="flex flex-col gap-y-3 md:gap-y-6">
<div class="relative">
<div class="flex flex-col mt-2">
<label for="prefix" class="flex items-center gap-x-1 mb-1">
Civilité
<span class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z"
fill="currentColor" stroke="currentColor" stroke-width="0.444444"
/>
</svg>
</span>
</label>
</div>
<div class="flex flex-col mt-1">
<div class="flex space-x-4">
{% include "@template-checkbox" with {
label: 'M.',
type: 'radio',
value: 'M.',
input_identifier: 'prefix1',
name: 'prefix',
labelLinked: false
} %}
{% include "@template-checkbox" with {
label: 'Mme.',
type: 'radio',
value: 'Mme.',
input_identifier: 'prefix2',
name: 'prefix',
labelLinked: false
} %}
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="col-span-2 md:col-span-1">
{% include "@template-input" with {
id: 'contact-lastname',
name: 'contact-lastname',
type: 'text',
label: 'Nom',
required: true,
label_floating: true,
} %}
</div>
<div class="col-span-2 md:col-span-1">
{% include "@template-input" with {
id: 'contact-firstname',
name: 'contact-firstname',
type: 'text',
label: 'Prénom',
required: true,
label_floating: true,
} %}
</div>
</div>
{% include "@template-input" with {
id: 'contact-email',
name: 'contact-email',
type: 'email',
label: 'E-mail',
required: true,
label_floating: true,
} %}
<div class="pb-8">
{% include "@template-input" with {
id: 'contact-phone',
name: 'contact-phone',
type: 'tel',
label: 'Téléphone',
required: false,
label_floating: true,
} %}
</div>
{% include "@template-select" with {
id: 'contact-choice',
name: 'contact-choice',
label: 'Votre demande concerne',
label_floating: true,
required: true,
placeholder: 'Séléctionnez...',
options: [
{value: '', text: 'Les produits', type: 'group'},
{value: 'Conseils personnalisés', text: 'Conseils personnalisés'},
{value: 'Demande d’informations sur un produit', text: 'Demande d’informations sur un produit'},
{value: 'Remarque / réclamation sur un produit', text: 'Remarque / réclamation sur un produit'},
{value: '', text: 'Ma commande', type: 'group'},
{value: 'Aide pour finaliser ma commande en ligne', text: 'Aide pour finaliser ma commande en ligne'},
{value: 'Modification de commande', text: 'Modification de commande (adresse de livraison, annulation)'},
{value: 'Suivi de livraison de ma commande', text: 'Suivi de livraison de ma commande'},
{value: 'Réclamation sur ma commande', text: 'Réclamation sur ma commande'},
{value: '', text: 'Mon compte', type: 'group'},
{value: 'Aide pour créer ou accéder à mon compte', text: 'Aide pour créer ou accéder à mon compte'},
{value: 'Abonnement / désabonnement newsletter', text: 'Abonnement / désabonnement newsletter'},
{value: 'Modifications de mes informations personnelles', text: 'Modifications de mes informations personnelles'},
{value: 'Question sur mes données personnelles', text: 'Question sur mes données personnelles'},
{value: '', text: 'Informations', type: 'group'},
{value: 'Disponibilité des produits', text: 'Disponibilité des produits'},
{value: 'Livraison et paiement', text: 'Livraison et paiement'},
{value: '', text: 'Divers', type: 'group'},
{value: 'Autres questions', text: 'Autres questions'},
],
selectId: 'contactFormOptions'
} %}
{% include "@template-textarea" with {
id: 'contact-message',
name: 'contact-message',
type: 'textarea',
label: 'Votre message',
label_floating: true,
required: true,
} %}
</div>
<div class="flex items-center gap-x-1 mt-2 text-neutral text-body-xs">
<span class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z"
fill="currentColor" stroke="currentColor" stroke-width="0.444444"
/>
</svg>
</span>
Champs obligatoires
</div>
<div class="text-body-xs mt-4 font-light">
NAOS France (Etat Pur, Bioderma, Institut Esthederm) collecte
les données personnelles ci-dessus afin de prendre en charge votre demande. Pour en savoir plus
sur l’utilisation de vos données et sur vos droits,
<a href="#"
target="_blank"
class="font-semibold underline"
>
cliquez-ici
</a>
</div>
<div class="flex justify-end mt-10">
{% render "@template-button" with {
label: "Envoyer",
color: "dark",
type: "solid",
buttonType: "submit"
} %}
</div>
</form>
</div>
</div>
</div>
<script>
'use strict';
function accordionContact() {
return {
expanded: false,
isMobile: false,
init() {
this.checkExpand();
},
toggleExpanded() {
this.expanded = !this.isMobile || !this.expanded;
},
checkExpand() {
this.isMobile = window.innerWidth < 768;
}
};
}
</script>
</div>
/* No context defined. */
No notes defined.