Formular Zusatzmodule Freiberufliche erstellt
This commit is contained in:
parent
8f8168dbeb
commit
7a9bcaaef8
4 changed files with 107 additions and 23 deletions
|
|
@ -1,5 +1,7 @@
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
|
|
||||||
|
const FORMDEBUG = false;
|
||||||
|
|
||||||
// initieiere Zeitmessung zur Botprevention
|
// initieiere Zeitmessung zur Botprevention
|
||||||
var startTime = Date.now();
|
var startTime = Date.now();
|
||||||
|
|
||||||
|
|
@ -10,43 +12,49 @@ window.onload = function () {
|
||||||
userInteracted = true;
|
userInteracted = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Eventlistener für Interaktionen - setzt userInteracted auf true bei Interaktion
|
||||||
document.addEventListener("mousedown", setUserInteracted);
|
document.addEventListener("mousedown", setUserInteracted);
|
||||||
document.addEventListener("touchstart", setUserInteracted);
|
document.addEventListener("touchstart", setUserInteracted);
|
||||||
document.addEventListener("keydown", setUserInteracted);
|
document.addEventListener("keydown", setUserInteracted);
|
||||||
|
|
||||||
document.getElementById('formular').addEventListener('submit', function (e) {
|
document.getElementById('formular').addEventListener('submit', function (e) {
|
||||||
e.preventDefault(); // Verhindert die Standard-Formularsendung
|
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
var honeyPot = document.getElementById("verify_email").value;
|
const form = e.target;
|
||||||
|
const data = new FormData(form);
|
||||||
|
const notification = document.getElementById('notification');
|
||||||
|
const btn = document.getElementById('bestellformular-btn');
|
||||||
|
const zsrTooltip = document.getElementById('zsr-tooltip');
|
||||||
|
|
||||||
var endTime = Date.now();
|
var endTime = Date.now();
|
||||||
var timeSpent = (endTime - startTime) / 1000; // Zeit in Sekunden
|
var timeSpent = (endTime - startTime) / 1000; // Zeit in Sekunden
|
||||||
document.getElementById("age").value = timeSpent;
|
|
||||||
|
|
||||||
|
// Setze die Werte für die Botvalidierung zum Auswerten in PHP
|
||||||
|
document.getElementById("age").value = timeSpent;
|
||||||
document.getElementById("hobbies").value = userInteracted ? "true" : "false";
|
document.getElementById("hobbies").value = userInteracted ? "true" : "false";
|
||||||
|
|
||||||
const form = e.target;
|
// Validierung der ZSR-Nummer
|
||||||
const zsrNummer = form.elements['zsr_nummer'].value;
|
const zsrNummer = form.elements['zsr_nummer'].value;
|
||||||
const isNumberOrBeantragt = /^\d+$|^beantragt$/i.test(zsrNummer);
|
const isNumberOrBeantragt = /^\d+$|^beantragt$/i.test(zsrNummer);
|
||||||
// TODO REGEX für ZSR-Nummer
|
// TODO REGEX für ZSR-Nummer
|
||||||
if (!isNumberOrBeantragt) {
|
if (!isNumberOrBeantragt) {
|
||||||
// Display error message for invalid zsr_nummer
|
// Display error message for invalid zsr_nummer
|
||||||
const tooltip = document.getElementById('tooltip');
|
zsrTooltip.className = 'input-tooltip';
|
||||||
tooltip.className = 'input-tooltip';
|
|
||||||
// Scroll to the tooltip element
|
// Scroll to the tooltip element
|
||||||
tooltip.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
|
zsrTooltip.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const data = new FormData(form);
|
|
||||||
const notification = document.getElementById('notification');
|
|
||||||
const btn = document.getElementById('bestellformular-btn');
|
|
||||||
console.log("userInteracted: " + userInteracted);
|
|
||||||
console.log("timeSpent: " + timeSpent);
|
|
||||||
console.log("hobbies: " + document.getElementById("hobbies").value);
|
|
||||||
console.log("age: " + document.getElementById("age").value);
|
|
||||||
console.log("verify_email: " + honeyPot);
|
|
||||||
|
|
||||||
|
if (FORMDEBUG) {
|
||||||
|
console.log("userInteracted: " + userInteracted);
|
||||||
|
console.log("timeSpent: " + timeSpent);
|
||||||
|
console.log("hobbies: " + document.getElementById("hobbies").value);
|
||||||
|
console.log("age: " + document.getElementById("age").value);
|
||||||
|
console.log("verify_email(honeypot): " + document.getElementById("verify_email").value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Formulardaten an den Server senden
|
||||||
fetch(form.action, {
|
fetch(form.action, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
mode: 'cors',
|
mode: 'cors',
|
||||||
|
|
|
||||||
|
|
@ -165,7 +165,6 @@ table .far {
|
||||||
}
|
}
|
||||||
|
|
||||||
#formular label {
|
#formular label {
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -173,8 +172,7 @@ table .far {
|
||||||
}
|
}
|
||||||
|
|
||||||
#formular select,
|
#formular select,
|
||||||
#formular input,
|
#formular input[type="text"], #formular input[type="email"], #formular input[type="number"], #formular input[type="tel"], #formular textarea {
|
||||||
#formular textarea {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
border: 1px solid #D1D5DB;
|
border: 1px solid #D1D5DB;
|
||||||
|
|
@ -272,6 +270,8 @@ table .far {
|
||||||
.fadeIn {
|
.fadeIn {
|
||||||
@apply transition-opacity duration-1000 ease-in-out opacity-100;
|
@apply transition-opacity duration-1000 ease-in-out opacity-100;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Honeypot- und Validierungsfelder im Bestellformular
|
||||||
#verify_email, #age, #hobbies {
|
#verify_email, #age, #hobbies {
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,7 @@ title = 'Freiberufliche'
|
||||||
<div>
|
<div>
|
||||||
<input type="verify_email" id="verify_email" name="verify_email" >
|
<input type="verify_email" id="verify_email" name="verify_email" >
|
||||||
</div>
|
</div>
|
||||||
<div id="tooltip" class="" data-tooltip="Bitte geben Sie eine gültie ZSR-Nummer, oder 'beantragt' ein.">
|
<div id="zsr-tooltip" data-tooltip="Bitte geben Sie eine gültie ZSR-Nummer, oder 'beantragt' ein.">
|
||||||
<label for="zsr_nummer">ZSR Nummer</label>
|
<label for="zsr_nummer">ZSR Nummer</label>
|
||||||
<input type="text" id="zsr_nummer" name="zsr_nummer" required >
|
<input type="text" id="zsr_nummer" name="zsr_nummer" required >
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ title = 'Zusatzmodule Freiberufliche'
|
||||||
{{% aligncenter %}}
|
{{% aligncenter %}}
|
||||||
#### Bestellformular
|
#### Bestellformular
|
||||||
## VeruA ** Verwaltung und Abrechnung
|
## VeruA ** Verwaltung und Abrechnung
|
||||||
### Zsatzmodule für Freiberufliche
|
### Zusatzmodule für Freiberufliche
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
@ -20,9 +20,85 @@ title = 'Zusatzmodule Freiberufliche'
|
||||||
|
|
||||||
{{% /aligncenter %}}
|
{{% /aligncenter %}}
|
||||||
|
|
||||||
|
<form action="https://verua.dev-1.andreashnida.de/php/ajaxmail.php" method="POST" id="formular">
|
||||||
|
<div id="formPartOne">
|
||||||
|
<input type="hidden" name="formularart" value="Zusatzmodule Freiberufliche">
|
||||||
|
<div>
|
||||||
|
<label for="gender">Geschlecht</label>
|
||||||
|
<select id="gender" name="gender" required >
|
||||||
|
<option value="weiblich">Frau</option>
|
||||||
|
<option value="männlich">Mann</option>
|
||||||
|
<option value="divers">Divers</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="sprache">Sprache</label>
|
||||||
|
<select id="sprache" name="sprache" required >
|
||||||
|
<option value="deutsch">Deutsch</option>
|
||||||
|
<option value="franzoesisch">Französisch</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="name">Nachname</label>
|
||||||
|
<input type="text" id="name" name="name" required >
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="vorname">Vorname</label>
|
||||||
|
<input type="text" id="vorname" name="vorname" required >
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="text" id="hobbies" name="hobbies" >
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="strasse">Strasse</label>
|
||||||
|
<input type="text" id="strasse" name="strasse" required >
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="text" id="age" name="age">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="plz_ort">PLZ Ort</label>
|
||||||
|
<input type="text" id="plz_ort" name="plz_ort" required >
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="telefon">Telefon</label>
|
||||||
|
<input type="text" id="telefon" name="telefon" required >
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="email">Email</label>
|
||||||
|
<input type="email" id="email" name="email" required >
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="verify_email" id="verify_email" name="verify_email" >
|
||||||
|
</div>
|
||||||
|
<div id="zsr-tooltip" data-tooltip="Bitte geben Sie eine gültie ZSR-Nummer, oder 'beantragt' ein.">
|
||||||
|
<label for="zsr_nummer">ZSR Nummer</label>
|
||||||
|
<input type="text" id="zsr_nummer" name="zsr_nummer" required >
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="checkbox-group">Welche Erweiterungen möchten Sie hinzubuchen?</label>
|
||||||
|
<div id="checkbox-group">
|
||||||
|
<input type="checkbox" id="zusatzmodul-pop2" name="zusatzmodul-pop2" value="Zusatzmodul POP2">
|
||||||
|
<label for="zusatzmodul-pop2">Zusatzmodul POP2 für 480 CHF</label>
|
||||||
|
<br>
|
||||||
|
<input type="checkbox" id="zusatzmodul-materialverwaltung" name="zusatzmodul-materialverwaltung" value="Zusatzmodul Materialverwaltung">
|
||||||
|
<label for="zusatzmodul-materialverwaltung">Zusatzmodul Materialverwaltung für 480 CHF</label>
|
||||||
|
<br>
|
||||||
|
<input type="checkbox" id="zusatzmodul-qr-code" name="zusatzmodul-qr-code" value="Zusatzmodul QR-Code">
|
||||||
|
<label for="zusatzmodul-qr-code">Zusatzmodul QR-Code für 36.00 CHF jährlich, Ausschaltgebühr einmalig pro Instanz 50.00 CHF</label>
|
||||||
|
<br>
|
||||||
|
<input type="checkbox" id="zusatzmodul-perigon" name="zusatzmodul-perigon" value="Zusatzmodul Perigon">
|
||||||
|
<label for="zusatzmodul-perigon">Zusatzmodul Perigon, Ausschaltgebühr einmalig 50.00 CHF</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="w-full flex justify-center">
|
||||||
|
<button id="bestellformular-btn" type="submit" class="submitbutton text-white mx-auto submit-after-valid-captcha-bak">Kostenpflichtig bestellen</button>
|
||||||
|
<div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue