fix: associate AI contact form labels

Author: AtlasNexusTech

ia-agentique/en/index.html

@@ -283,16 +283,16 @@ <h2 class="section-title text-foreground mb-5 font-display">Start with free coac
         <h3 class="font-bold text-xl mb-6 font-display text-center">Choose the agent or free coaching</h3>
         <form action="mailto:laslyalexandre@gmail.com" method="POST" enctype="text/plain" class="space-y-4">
           <div>
-            <label class="block text-sm font-semibold text-foreground mb-1">Your name *</label>
-            <input type="text" name="nom" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
+            <label for="customer-name" class="block text-sm font-semibold text-foreground mb-1">Your name *</label>
+            <input id="customer-name" type="text" name="name" autocomplete="name" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
           </div>
           <div>
-            <label class="block text-sm font-semibold text-foreground mb-1">Your email *</label>
-            <input type="email" name="email" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
+            <label for="customer-email" class="block text-sm font-semibold text-foreground mb-1">Your email *</label>
+            <input id="customer-email" type="email" name="email" autocomplete="email" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
           </div>
           <div>
-            <label class="block text-sm font-semibold text-foreground mb-1">Company / Project</label>
-            <input type="text" name="entreprise" class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
+            <label for="customer-project" class="block text-sm font-semibold text-foreground mb-1">Company / Project</label>
+            <input id="customer-project" type="text" name="company" autocomplete="organization" class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
           </div>
           <div>
             <label for="offer-select" class="block text-sm font-semibold text-foreground mb-1">Selected offer *</label>
@@ -304,12 +304,12 @@ <h3 class="font-bold text-xl mb-6 font-display text-center">Choose the agent or
             <p id="offer-prefill-status" class="mt-2 text-sm font-semibold text-primary" aria-live="polite"></p>
           </div>
           <div>
-            <label class="block text-sm font-semibold text-foreground mb-1">Describe your need *</label>
-            <textarea name="besoin" rows="4" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all resize-y"></textarea>
+            <label for="customer-need" class="block text-sm font-semibold text-foreground mb-1">Describe your need *</label>
+            <textarea id="customer-need" name="need" rows="4" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all resize-y"></textarea>
           </div>
           <div>
-            <label class="block text-sm font-semibold text-foreground mb-1">Preferred platform</label>
-            <select name="plateforme" class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
+            <label for="preferred-platform" class="block text-sm font-semibold text-foreground mb-1">Preferred platform</label>
+            <select id="preferred-platform" name="platform" class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
               <option value="">-- Choose --</option>
               <option value="Web UI + Telegram">Web UI + Telegram</option>
               <option value="Telegram">Telegram</option>

ia-agentique/index.html

@@ -300,16 +300,16 @@ <h2 class="section-title text-foreground mb-5 font-display">Commencez par un coa
         <h3 class="font-bold text-xl mb-6 font-display text-center">Choisir l'agent ou le coaching gratuit</h3>
         <form action="mailto:laslyalexandre@gmail.com" method="POST" enctype="text/plain" class="space-y-4">
           <div>
-            <label class="block text-sm font-semibold text-foreground mb-1">Votre nom *</label>
-            <input type="text" name="nom" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
+            <label for="customer-name" class="block text-sm font-medium mb-2">Votre nom *</label>
+            <input id="customer-name" type="text" name="nom" autocomplete="name" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
           </div>
           <div>
-            <label class="block text-sm font-semibold text-foreground mb-1">Votre email *</label>
-            <input type="email" name="email" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
+            <label for="customer-email" class="block text-sm font-semibold text-foreground mb-1">Votre email *</label>
+            <input id="customer-email" type="email" name="email" autocomplete="email" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
           </div>
           <div>
-            <label class="block text-sm font-semibold text-foreground mb-1">Entreprise / Projet</label>
-            <input type="text" name="entreprise" class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
+            <label for="customer-project" class="block text-sm font-semibold text-foreground mb-1">Entreprise / Projet</label>
+            <input id="customer-project" type="text" name="entreprise" autocomplete="organization" class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
           </div>
           <div>
             <label for="offer-select" class="block text-sm font-semibold text-foreground mb-1">Offre souhaitée *</label>
@@ -321,12 +321,12 @@ <h3 class="font-bold text-xl mb-6 font-display text-center">Choisir l'agent ou l
             <p id="offer-prefill-status" class="mt-2 text-sm font-semibold text-primary" aria-live="polite"></p>
           </div>
           <div>
-            <label class="block text-sm font-semibold text-foreground mb-1">Décrivez votre besoin *</label>
-            <textarea name="besoin" rows="4" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all resize-y"></textarea>
+            <label for="customer-need" class="block text-sm font-semibold text-foreground mb-1">Décrivez votre besoin *</label>
+            <textarea id="customer-need" name="besoin" rows="4" required class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all resize-y"></textarea>
           </div>
           <div>
-            <label class="block text-sm font-semibold text-foreground mb-1">Plateforme préférée</label>
-            <select name="plateforme" class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
+            <label for="preferred-platform" class="block text-sm font-semibold text-foreground mb-1">Plateforme préférée</label>
+            <select id="preferred-platform" name="plateforme" class="w-full px-4 py-3 rounded-xl border border-border bg-white text-foreground focus:border-primary focus:ring-2 focus:ring-blue-500/20 outline-none transition-all">
               <option value="">-- Choisir --</option>
               <option value="Web UI + Telegram">Web UI + Telegram</option>
               <option value="Telegram">Telegram</option>

tests/test_ia_agentique_pricing.py

@@ -259,7 +259,56 @@ def test_offer_links_prefill_the_matching_form_option(
     assert f"coaching: '{coaching_value}'" in html
     assert "Object.prototype.hasOwnProperty.call(offers, selectedOffer)" in html
     assert "offerSelect.value = offers[selectedOffer]" in html
+    assert "status.textContent =" in html
     assert status_copy in html
 
     assert "Formulaire sécurisé" not in html
     assert "Secure form" not in html
+
+
+@pytest.mark.parametrize(
+    ("relative_path", "fields"),
+    [
+        (
+            "ia-agentique/index.html",
+            (
+                ("customer-name", "nom"),
+                ("customer-email", "email"),
+                ("customer-project", "entreprise"),
+                ("offer-select", "offre"),
+                ("customer-need", "besoin"),
+                ("preferred-platform", "plateforme"),
+            ),
+        ),
+        (
+            "ia-agentique/en/index.html",
+            (
+                ("customer-name", "name"),
+                ("customer-email", "email"),
+                ("customer-project", "company"),
+                ("offer-select", "offre"),
+                ("customer-need", "need"),
+                ("preferred-platform", "platform"),
+            ),
+        ),
+    ],
+)
+def test_contact_form_labels_are_associated_with_their_controls(relative_path, fields):
+    html = (ROOT / relative_path).read_text(encoding="utf-8")
+
+    for control_id, field_name in fields:
+        assert f'<label for="{control_id}"' in html
+        control = re.search(
+            rf'<(?:input|select|textarea)[^>]*id="{re.escape(control_id)}"[^>]*name="{re.escape(field_name)}"',
+            html,
+        )
+        assert control is not None
+
+    assert 'id="customer-name" type="text" name=' in html
+    assert 'autocomplete="name"' in html
+    assert 'id="customer-email" type="email" name="email" autocomplete="email"' in html
+    assert 'id="customer-project" type="text" name=' in html
+    assert 'autocomplete="organization"' in html
+
+    assert "Formulaire sécurisé" not in html
+    assert "Secure form" not in html