https://www.iafactory.fr/transverse/contact-iafactory.php

1<!DOCTYPE html>
2
3
4<html lang="fr">
5
6    <head>
7
8    <meta charset="utf-8">
9    		<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
10        <meta http-equiv="X-UA-Compatible" content="IE=edge">
11
12        <title>Contact UX : contacter votre UX designer expert — IAFACTORY</title>
13        <meta name="description" content="Contact UX : contacter votre UX designer expert, expertise UX design proposée par Julien MUCKENSTURM ux designer confirmé chez IAFACTORY">
14        <meta name="keywords" content="contact expert UX designer, contacter expert ux, contacter expert ux designer, contact expert ux design, expert ux contact, contacter iafactory, contact iafactory, contact julien muckensturm, contact ia factory, julien muckensturm contact">
15        <link rel="canonical" href="https://www.iafactory.fr/transverse/contact-iafactory.php">
16
17        <link rel="stylesheet" type="text/css" href="../css/00-reset.css">
18        <link rel="stylesheet" type="text/css" href="../css/00-structure.css">
19        <link rel="stylesheet" type="text/css" href="../css/02-fiche-noire.css">
20        <link rel="stylesheet" type="text/css" href="../css/03-animation-fade-aos.css">
21
22        <link rel="icon" type="image/png" href="../favicon.png">
23
24        <!-- Cookie Consent by https://www.PrivacyPolicies.com -->

25<script src="//www.privacypolicies.com/public/cookie-consent/3.1.0/cookie-consent.js"></script>

25

26<script>
27document.addEventListener('DOMContentLoaded', function () {
28cookieconsent.run({"notice_banner_type":"simple","consent_type":"express","palette":"light","language":"fr","website_name":"iafactory","change_preferences_selector":"#changePreferences","cookies_policy_url":"https://www.iafactory.fr/transverse/informations-legales.php#ancre9-donnees"});
29});
30</script>

30
31<!-- End Cookie Consent -->
32
33
34
35<!-- Matomo -->

36<script>
37  var _paq = window._paq = window._paq || [];
38  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
39
40	/* fonction recommandée par la Cnil rgpd DEBUT */
41			_paq.push([function() {
42		var self = this;
43		function getOriginalVisitorCookieTimeout() {
44		 var now = new Date(),
45		 nowTs = Math.round(now.getTime() / 1000),
46		 visitorInfo = self.getVisitorInfo();
47		 var createTs = parseInt(visitorInfo[2]);
48		 var cookieTimeout = 33696000; // 13 mois en secondes
49		 var originalTimeout = createTs + cookieTimeout - nowTs;
50		 return originalTimeout;
51		}
52		this.setVisitorCookieTimeout( getOriginalVisitorCookieTimeout() );
53		}]);
54	/* fonction recommandée par la Cnil rgpd FIN */
55
56  _paq.push(['trackPageView']);
57  _paq.push(['enableLinkTracking']);
58  (function() {
59    var u="//www.iafactory.fr/matomo-314/";
60    _paq.push(['setTrackerUrl', u+'matomo.php']);
61    _paq.push(['setSiteId', '1']);
62    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
63    g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
64  })();
65</script>

65
66<!-- End Matomo Code -->
67
68        <style>.honeypot { display: none; }</style>
69
70</head>
71
72
73
74<!-- _______________________________________ BODY _______________________________________ -->
75
76  	<body class="fiche-noire">
77
78
79
80  <!-- _______________________________________ CONTENEUR _______________________________________-->
81
82
83  <div class="grille-meta-noir"><!-- DEBUT - générer lignes externes -->
84
85      <div class="grille-reperes-noir"><!-- DEBUT - générer repères -->
86        <div class="logo-aos-fx" data-aos="fade-left" data-aos-delay="150" data-aos-duration="200">
87          <a href="../index.php" class="logo-iafactory-noir" aria-label="Retour à l'accueil IAFACTORY"><span class="scramble-logo-noir">IAFACTORY</span></a><!-- Logo -->
88        </div>
89        <div class="logo-iafactory-noir-box"></div>
90        <div class="logo-iafactory-noir-box-elastic"></div><!-- Fond logo -->
91
92      <div class="conteneur-contenu-noir-briefing"><!-- DEBUT - gérer largeur -->
93
94      <div class="gabarit-fiche-contact-step1"><!-- DEBUT - gérer hauteur -->
95
96
97<!-- _______________________________________ ENTETE _______________________________________-->
98
99    <header>
100    <a href="javascript:history.back()" data-aos="fade-right" data-aos-delay="200" data-aos-duration="150"><nav class="navfichenoire"></nav></a>
101        <div class="bouton-briefer-animation"></div>
102        <a href="../devis/devis-iafactory-brief-ux-etape-1.php" class="bouton-briefer-noir" data-aos="fade-right" data-aos-delay="250" data-aos-duration="150">Briefer</a><!-- Briefer -->
103        <div class="baseline-iafactory-noir" data-aos="fade-down" data-aos-delay="300" data-aos-duration="250">Information<br>Architecture<br>Design</div><!-- Baseline -->
104
105        <!-- Fil d'Ariane _ Début -->
106        <div class="fil-ariane-briefing" data-aos="fade-up" data-aos-delay="350" data-aos-duration="200">
107            <ul aria-label="Fil d'Ariane">
108            <li class="briefing-actif-titre"><h1>CONTACT UX</h1></li>
109            <li class="briefing-actif-item">01</li>
110            <li>OK</li>
111            </ul>
112        </div>
113        <!-- Fil d'Ariane _ Fin -->
114
115    </header>
116
117<!-- _______________________________________ CONTENU _______________________________________ -->
118
119<div class="briefing-titre" data-aos="fade-right" data-aos-delay="300" data-aos-duration="400">Envoyer un email à IAFACTORY</div>
120<div class="formulaire-champs-requis" data-aos="fade-right" data-aos-delay="325" data-aos-duration="400">Tous les champs sont requis pour envoyer un email.</div>
121
122
123<div class="corps-fiche-briefing-box"><!--  CORPS _ DEBUT -->
124  <!--  FORMULAIRE _ DEBUT -->
125  <form action="contact-iafactory-send.php" method="post" novalidate>
126
127        <div class="fiche-sidebar-box"><!--  SIDEBAR _ DEBUT -->
128
129                <div class="formulaire-partie-1" data-aos="fade-up" data-aos-delay="100" data-aos-duration="200">
130
131                        <div class="field">
132                        <input type="text" name="iafactory" placeholder=" ">
133                        <span>Connaissez-vous IAFACTORY ?</span>
134                        <span class="status"></span> <!-- indicateur OK -->
135                        </div>
136
137                        <div class="field">
138                        <input type="text" name="objet" placeholder=" ">
139                        <span>Objet de votre demande</span>
140                        <span class="status"></span> <!-- indicateur OK -->
141                        </div>
142
143                        <div class="field">
144                        <textarea name="message" id="message" rows="6" placeholder=""></textarea>
145                        <span>Votre message</span>
146                        <div class="status"></div>
147                        <div class="char-counter">0 / 300 caractères</div>
148                        </div>
149
150
151                </div>
152
153
154        </div><!--  SIDEBAR _ FIN -->
155
156        <div class="fiche-noire-contact-box"><!--  CONTENU _ DEBUT -->
157          <div class="fiche-noire-contact-tag0" data-aos="fade-left" data-aos-delay="500" data-aos-duration="200">CONTACT</div>
158          <div class="fiche-noire-contact-tag1" data-aos="fade-left" data-aos-delay="500" data-aos-duration="200"><span class="optimise-contact-tag">TÉL. : </span><span class="couleur-contact-tag">06 10 39 10 83</span></div>
159          <div class="fiche-noire-contact-tag2" data-aos="fade-right" data-aos-delay="400" data-aos-duration="200"><span class="optimise-contact-tag">

159EMAIL : </span><span class="couleur-contact-tag">[email protected]</span></div>
160        </div>
161
162
163        <div class="fiche-content-box"><!--  CONTENU _ DEBUT -->
164
165                <div class="formulaire-partie-2" data-aos="fade-up" data-aos-delay="100" data-aos-duration="200">
166                        <div class="field">
167                        <input type="text" name="nom" placeholder=" ">
168                        <span>Votre nom</span>
169                        <span class="status"></span> <!-- indicateur OK -->
170                        </div>
171
172                        <div class="field">
173                        <input type="text" name="entreprise" placeholder=" ">
174                        <span>Votre métier</span>
175                        <span class="status"></span> <!-- indicateur OK -->
176                        </div>
177
178                        <div class="field">
179                        <input type="email" name="email" placeholder=" ">
180                        <span>Votre email</span>
181                        <span class="status"></span> <!-- indicateur OK -->
182                        </div>
183
184                        <div class="champstel">
185                          <div class="field">
186                          <input type="tel" name="telephone" id="phone" style="width: 150px;" placeholder=" ">
187                          <span>Votre tél.</span>
188                          <span class="status"></span> <!-- indicateur OK -->
189                          </div>
190                        </div>
191
192                        <!-- CAPTCHA simple -->
193                        <div class="champsmath">
194                          <div class="field">
195                          <input type="text" name="captcha" style="width: 150px;" required placeholder="">
196                          <span>3 + 4 =</span>
197                          <span class="status"></span> <!-- <- le message d'erreur apparaît ici -->
198                          </div>
199                        </div>
200
201
202                        <!-- Bouton d’envoi -->
203                        <button type="submit" class="briefing-bouton-envoyer">Envoyer</button>
204                </div>
205
206          </div><!--  CONTENU _ FIN -->
207          </form>
208
209    </div><!--  CORPS _ FIN -->
210
211    <!-- _______________________________________ PIEDPAGE _______________________________________ -->
212
213    <div class="engagement-iaf-position-mobile">
214      <h2 class="resume-briefing-titre" data-aos="fade-up" data-aos-delay="200" data-aos-duration="200">ENGAGEMENT IAFACTORY</h2>
215      <h3 class="resume-briefing-texte" data-aos="fade-up" data-aos-delay="200" data-aos-duration="200">Votre prise de <strong>contact avec l'expert UX designer</strong> IAFACTORY est traitée sous 3J. Ces infos permettent à IAFACTORY de prendre connaissance de votre demande afin de vous répondre.</h3>
216    </div>
217
218
219
220    </div><!-- FIN - hauteur fiche-->
221    </div><!-- FIN - conteneur contenu-->
222    </div><!-- FIN - grille repères-->
223</div><!-- FIN - grille meta-->
224
225
226<!-- _______________________________________ JS _______________________________________ -->

227<script src="../js/01-fiche-animation-fade-aos.js"></script>

227<!-- scripts fade in -->
228<!-- AVEC GSAP -->

229<script src="../js/gsap/gsap.min.js"></script>

229<!-- charger framework js gsap -->

230<script src="../js/gsap/scrambletextplugin.min.js"></script>

230<!-- plugin mélangeur de texte effet dans le tableau -->

231<script src="../js/gsap/customease.min.js"></script>

231<!-- plugin nav custom ease -->
232
233
234<!-- JS - Scramble logo _ DEBUT -->

235<script>
236document.addEventListener("DOMContentLoaded", function () {
237  const triggers = document.querySelectorAll(".logo-iafactory-noir");
238
239  triggers.forEach(trigger => {
240    const target = trigger.querySelector(".scramble-logo-noir");
241
242    const originalText = target ? target.textContent : "";
243
244    const scramble = (element, text) => {
245      if (!element) return;
246      gsap.to(element, {
247        duration: 0.4,
248        scrambleText: {
249          text: text,
250          chars: "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ",
251          revealDelay: 0.1,
252          tweenLength: false
253        },
254        ease: "power2.out"
255      });
256    };
257
258    trigger.addEventListener("mouseenter", () => {
259      scramble(target, originalText);
260    });
261  });
262});
263</script>

263
264
265
266
267<!-- JS - Validation du champ à la volée _ DEBUT -->

268<script>
269const fields = document.querySelectorAll('.field input, .field textarea');
270
271function isValid(input) {
272  const value = input.value.trim();
273
274  if (value === "") return false;
275
276  if (input.name === "captcha") {
277    // Vérifie que la réponse est 7
278    return value === "7";
279  }
280
281  if (input.type === "email") return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
282  if (input.type === "text") return value.length >= 1;
283  if (input.type === "tel") return value.replace(/\D/g, '').length >= 10;
284  if (input.type === "nb") return value.replace(/\D/g, '').length === 1;
285  if (input.tagName.toLowerCase() === "textarea") return value.length >= 300; // minimum 300 caractères
286
287  return false;
288}
289
290function getErrorMessage(input) {
291  if (input.value.trim() === "") return "Champ requis";
292
293  if (input.name === "captcha") return "Sécurité antispam";
294
295  if (input.type === "email") return "Format : [email protected]";
296  if (input.type === "text") return "Minimum 1 caractère";
297  if (input.type === "tel") return "N° : au moins 10 chiffres";
298  if (input.tagName.toLowerCase() === "textarea") return "300 caractères min.";
299
300  return "Champ invalide";
301}
302
303// Validation à la volée avec compteur
304fields.forEach(input => {
305  input.addEventListener('input', () => {
306    const fieldContainer = input.parentElement;
307    const status = fieldContainer.querySelector('.status');
308    const counter = fieldContainer.querySelector('.char-counter');
309
310    if (input.tagName.toLowerCase() === "textarea") {
311      input.style.color = "#FFF"; // texte toujours en vert
312      if (counter) {
313        const length = input.value.length;
314        counter.textContent = `${length} / 300 caractères`;
315        counter.style.color = (length >= 300) ? 'green' : '#FFF';
316      }
317    }
318
319    if (input.value.trim() === "") {
320      fieldContainer.classList.remove('ok', 'invalid');
321      if(status) status.textContent = "";
322      return;
323    }
324
325    if (isValid(input)) {
326      fieldContainer.classList.add('ok');
327      fieldContainer.classList.remove('invalid');
328      if(status) status.textContent = "✓";
329    } else {
330      fieldContainer.classList.add('invalid');
331      fieldContainer.classList.remove('ok');
332      if(status) status.textContent = getErrorMessage(input);
333    }
334  });
335});
336
337// Blocage de l'envoi si un champ n'est pas valide
338const form = document.querySelector('form');
339form.addEventListener('submit', (e) => {
340  let formIsValid = true;
341
342  fields.forEach(input => {
343    if (!isValid(input)) {
344      formIsValid = false;
345      const fieldContainer = input.parentElement;
346      fieldContainer.classList.add('invalid');
347      fieldContainer.classList.remove('ok');
348      const status = fieldContainer.querySelector('.status');
349      if (status) status.textContent = getErrorMessage(input);
350    }
351  });
352
353  if (!formIsValid) {
354    e.preventDefault();
355    alert("Le formulaire semble incomplet - incorrect, merci de vérifier les saisies.");
356  }
357});
358</script>

358
359<!-- JS - Validation du champ à la volée _ FIN -->
360
361
362
363<!-- Fade in animation -->

364<script>
365    AOS.init({
366    easing: 'ease-in-out-sine',
367    once: 'true'
368    });
369</script>

369
370
371
372</body>
373</html>