Refactor contact form layout and styles, and improve form bot detection and validation with multi-language support
All checks were successful
Build and Deploy Hugo Site / buildAndDeploy (push) Successful in 51s

This commit is contained in:
Andreas Hnida 2024-04-27 01:11:50 +02:00
commit 2f42d92273
2 changed files with 23 additions and 26 deletions

View file

@ -32,10 +32,6 @@ Nous vous contacterons dans les plus brefs délais.
<div id="formPartOne"> <div id="formPartOne">
<input type="hidden" name="formularart" value="Kontaktformular Französisch"> <input type="hidden" name="formularart" value="Kontaktformular Französisch">
<input type="hidden" name="project" value="fr-support"> <input type="hidden" name="project" value="fr-support">
<div>
<label for="organisation">Nom de l'organisation</label>
<input type="text" id="organisation" name="organisation">
</div>
<div> <div>
<select id="gender" name="gender" required > <select id="gender" name="gender" required >
<option value="männlich">Monsieur</option> <option value="männlich">Monsieur</option>
@ -44,7 +40,7 @@ Nous vous contacterons dans les plus brefs délais.
</select> </select>
</div> </div>
<div> <div>
<label for="name">Nom de famille</label> <label for="name">Nom, Nom de famille</label>
<input type="text" id="name" name="name" required > <input type="text" id="name" name="name" required >
</div> </div>
<div> <div>
@ -58,8 +54,8 @@ Nous vous contacterons dans les plus brefs délais.
<input type="text" id="telefon" name="telefon" required > <input type="text" id="telefon" name="telefon" required >
</div> </div>
<div> <div>
<label for="email">Email</label> <label for="mail">Email</label>
<input type="email" id="email" name="email" required > <input type="mail" id="mail" name="mail" required >
</div> </div>
<div> <div>
<label for="subject">Objet</label> <label for="subject">Objet</label>
@ -67,14 +63,15 @@ Nous vous contacterons dans les plus brefs délais.
</div> </div>
<div> <div>
<label for="description">Remarque</label> <label for="description">Remarque</label>
<textarea id="description" name="description" rows="4"></textarea> <textarea id="description" name="description" rows="4" required></textarea>
</div> </div>
</div> </div>
<!-- <div class ="captcha-container"></div> wir verzichten erstmal auf das Captcha --> <center class="w-full">
<div class="w-full flex justify-center"> {{< captcha >}}
<button id="kontaktformular-btn" type="submit" disabled class="submitbutton text-white mx-auto submit-after-valid-captcha-bak">Envoyer la demande</button> <button id="kontaktformular-btn" type="submit" class="submitbutton text-white mx-auto submit-after-valid-captcha" >Envoyer la demande</button>
<div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div>
</div> <p><div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div></p>
</center>
</form> </form>
{{% /section %}} {{% /section %}}

View file

@ -32,10 +32,6 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
<div id="formPartOne"> <div id="formPartOne">
<input type="hidden" name="formularart" value="Kontaktformular Deutsch"> <input type="hidden" name="formularart" value="Kontaktformular Deutsch">
<input type="hidden" name="project" value="de-support"> <input type="hidden" name="project" value="de-support">
<div>
<label for="organisation">Name der Organisation</label>
<input type="text" id="organisation" name="organisation">
</div>
<div> <div>
<select id="gender" name="gender" required > <select id="gender" name="gender" required >
<option value="männlich">Herr</option> <option value="männlich">Herr</option>
@ -44,7 +40,7 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
</select> </select>
</div> </div>
<div> <div>
<label for="name">Nachname</label> <label for="name">Nachname, Vorname</label>
<input type="text" id="name" name="name" required > <input type="text" id="name" name="name" required >
</div> </div>
<div> <div>
@ -58,8 +54,11 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
<input type="text" id="telefon" name="telefon" required > <input type="text" id="telefon" name="telefon" required >
</div> </div>
<div> <div>
<label for="email">Email</label> <label for="mail">Email</label>
<input type="email" id="email" name="email" required > <input type="mail" id="mail" name="mail" required >
</div>
<div>
<input type="verify_email" id="verify_email" name="verify_email" >
</div> </div>
<div> <div>
<label for="subject">Betreff</label> <label for="subject">Betreff</label>
@ -67,14 +66,15 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
</div> </div>
<div> <div>
<label for="description">Anmerkung</label> <label for="description">Anmerkung</label>
<textarea id="description" name="description" rows="4"></textarea> <textarea id="description" name="description" rows="4" required></textarea>
</div> </div>
</div> </div>
<!-- <div class ="captcha-container"></div> wir verzichten erstmal auf das Captcha --> <center class="w-full">
<div class="w-full flex justify-center"> {{< captcha >}}
<button id="kontaktformular-btn" type="submit" disabled class="submitbutton text-white mx-auto submit-after-valid-captcha-bak">Anfrage absenden</button> <button id="kontaktformular-btn" type="submit" class="submitbutton text-white mx-auto submit-after-valid-captcha" >Anfrage absenden</button>
<div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div>
</div> <p><div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div></p>
</center>
</form> </form>
{{% /section %}} {{% /section %}}