Compare commits
No commits in common. "2f42d92273c38c647c3a4cb1b588fddf1737395a" and "4f1a638b64e00b4b5e0e76b64539fdc3d27e1dba" have entirely different histories.
2f42d92273
...
4f1a638b64
3 changed files with 163 additions and 237 deletions
|
|
@ -1,150 +1,113 @@
|
|||
// Configuration and Messages
|
||||
const debugEnabled = true
|
||||
const mouseDebugEnabled = false
|
||||
const zsrCheckEnabled = false
|
||||
const interactionThreshold = 15 // Time in seconds
|
||||
const interactionCountThreshold = 5 // Number of interactions
|
||||
let botDetected = false
|
||||
let currentMessages = []
|
||||
window.onload = function () {
|
||||
const FORMDEBUG = false
|
||||
const btn = document.getElementById('kontaktformular-btn')
|
||||
const kontaktformular = document.getElementById('kontaktformular')
|
||||
|
||||
const messages = {
|
||||
de: {
|
||||
// custom Validation messages
|
||||
const messagesGerman = {
|
||||
required: 'Bitte füllen Sie dieses Feld aus',
|
||||
email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein',
|
||||
success: 'Die Bestellung wurde erfolgreich übermittelt!',
|
||||
thankyou: 'Vielen Dank für Ihre Anfrage.',
|
||||
zsrTooltip: 'Bitte geben Sie eine gültige ZSR-Nummer, oder "beantragt" ein.',
|
||||
captcha: 'Geben Sie den angezeigten Captcha-Code ein',
|
||||
captchaButton: 'Überprüfen',
|
||||
},
|
||||
fr: {
|
||||
minlength: 'Bitte geben Sie mindestens {0} Zeichen ein',
|
||||
maxlength: 'Bitte geben Sie maximal {0} Zeichen ein',
|
||||
min: 'Bitte geben Sie mindestens {0} ein',
|
||||
max: 'Bitte geben Sie maximal {0} ein',
|
||||
range: 'Bitte geben Sie zwischen {0} und {1} ein',
|
||||
}
|
||||
const messagesFrench = {
|
||||
required: 'Veuillez remplir ce champ',
|
||||
email: 'Veuillez saisir une adresse email valide',
|
||||
success: 'La commande a bien été envoyée!',
|
||||
thankyou: 'Merci de votre demande.',
|
||||
zsrTooltip: 'Veuillez saisir une ZSR-Nummer valide, ou indiquer "demandé".',
|
||||
captcha: 'Entrez le code Captcha affiché',
|
||||
captchaButton: 'Vérifier',
|
||||
},
|
||||
}
|
||||
minlength: 'Veuillez saisir au moins {0} caractères',
|
||||
maxlength: 'Veuillez saisir au plus {0} caractères',
|
||||
min: 'Veuillez saisir au moins {0} caractères',
|
||||
max: 'Veuillez saisir au plus {0} caractères',
|
||||
range: 'Veuillez saisir au moins {0} et au plus {1} caractères',
|
||||
}
|
||||
|
||||
// DOM Selectors
|
||||
const debugLabel = document.createElement('div')
|
||||
const submitButton = document.getElementById('kontaktformular-btn')
|
||||
const form = document.querySelector('form#kontaktformular')
|
||||
const notification = document.getElementById('notification')
|
||||
const zsrTooltip = document.getElementById('zsr-tooltip')
|
||||
const honeypotInput1 = document.getElementById('age')
|
||||
const honeypotInput2 = document.getElementById('hobbies')
|
||||
const verifyEmailInput = document.getElementById('verify_email')
|
||||
const emailInput = document.getElementById('mail')
|
||||
const textInputs = document.querySelectorAll('input[type="text"]')
|
||||
const captcha = document.querySelectorAll('.captcha')
|
||||
const captchaInput = document.querySelectorAll('.captcha-input')
|
||||
const captchaVerifyButton = document.querySelectorAll('.captcha-verify')
|
||||
const botBadge = document.createElement('div')
|
||||
if (debugEnabled) {
|
||||
botBadge.className = 'bot-badge'
|
||||
document.body.appendChild(botBadge)
|
||||
botBadge.setAttribute(
|
||||
'style',
|
||||
'position: fixed; top: 0; right: 0; z-index: 9999; background-color: red; color: white; font-weight: bold; height:20px; width:20px'
|
||||
)
|
||||
}
|
||||
// custom Validation rules
|
||||
// determine which language depending on html lang attribute
|
||||
const lang = document.documentElement.lang
|
||||
console.log('lang', lang)
|
||||
const messages = lang === 'de-DE' ? messagesGerman : messagesFrench
|
||||
// set custom validation messages for each validator
|
||||
console.log('messages', messages)
|
||||
|
||||
// Utility variables
|
||||
let startTime = Date.now()
|
||||
let interactionCount = 0
|
||||
let userInteracted = false
|
||||
let lastInteractionTime = null
|
||||
const mousePositions = []
|
||||
const interactionTimes = []
|
||||
let isStraightLine = true
|
||||
let textInputs = document.querySelectorAll('input[type="text"]')
|
||||
const emailInput = document.getElementById('email')
|
||||
|
||||
// Utility functions
|
||||
function log(thing) {
|
||||
console.log(thing)
|
||||
}
|
||||
Array.from(textInputs).forEach(function (input) {
|
||||
input.addEventListener('invalid', function () {
|
||||
this.setCustomValidity(messages['required'])
|
||||
})
|
||||
})
|
||||
|
||||
function getCurrentLangMessages() {
|
||||
log(messages[document.documentElement.lang.split('-')[0]])
|
||||
return messages[document.documentElement.lang.split('-')[0]]
|
||||
}
|
||||
emailInput.addEventListener('invalid', function () {
|
||||
this.setCustomValidity(messages['email'])
|
||||
})
|
||||
|
||||
function setUserInteracted() {
|
||||
|
||||
// initieiere Zeitmessung zur Botprevention
|
||||
var startTime = Date.now()
|
||||
|
||||
// Messe ob mit der Seite agiert wird
|
||||
var userInteracted = false
|
||||
|
||||
function setUserInteracted() {
|
||||
var timeSpent = (Date.now() - startTime) / 1000 // Zeit in Sekunden
|
||||
if (timeSpent > 5) {
|
||||
btn.disabled = false
|
||||
}
|
||||
userInteracted = true
|
||||
interactionCount++
|
||||
checkForBotBehavior()
|
||||
}
|
||||
|
||||
function handleMouseMove(event) {
|
||||
mousePositions.push({ x: event.clientX, y: event.clientY })
|
||||
if (debugEnabled && mouseDebugEnabled) log('Mouse Position:', { x: event.clientX, y: event.clientY })
|
||||
|
||||
if (mousePositions.length > 2) {
|
||||
const len = mousePositions.length
|
||||
const { x: x1, y: y1 } = mousePositions[len - 3]
|
||||
const { x: x2, y: y2 } = mousePositions[len - 2]
|
||||
const { x: x3, y: y3 } = mousePositions[len - 1]
|
||||
|
||||
// Calculate the area of the triangle formed by three consecutive points
|
||||
const area = 0.5 * Math.abs(x1 * y2 + x2 * y3 + x3 * y1 - y1 * x2 - y2 * x3 - y3 * x1)
|
||||
if (debugEnabled && mouseDebugEnabled) log('Triangle Area:', area)
|
||||
|
||||
if (area > 0.5) {
|
||||
// Threshold for detecting non-straight line, adjust as needed
|
||||
isStraightLine = false
|
||||
if (debugEnabled && mouseDebugEnabled) log('Detected non-straight line movement.')
|
||||
}
|
||||
setTimeout(function () {
|
||||
if (userInteracted) {
|
||||
btn.disabled = false
|
||||
}
|
||||
}
|
||||
}, 5000)
|
||||
// Eventlistener für Interaktionen - setzt userInteracted auf true bei Interaktion
|
||||
document.addEventListener('mousedown', setUserInteracted)
|
||||
document.addEventListener('touchstart', setUserInteracted)
|
||||
document.addEventListener('keydown', setUserInteracted)
|
||||
|
||||
function checkForBotBehavior() {
|
||||
let timeSpent = (Date.now() - startTime) / 1000
|
||||
botDetected =
|
||||
!userInteracted ||
|
||||
interactionCount === 0 ||
|
||||
honeypotInput1.value !== '' ||
|
||||
honeypotInput2.value !== '' ||
|
||||
verifyEmailInput.value !== ''
|
||||
if (debugEnabled)
|
||||
if (!botDetected) {
|
||||
botBadge.style.backgroundColor = 'green'
|
||||
} else {
|
||||
botBadge.style.backgroundColor = 'red'
|
||||
}
|
||||
console.log(
|
||||
'Bot Detected: ' +
|
||||
botDetected +
|
||||
' userInteracted:' +
|
||||
userInteracted +
|
||||
' interactionCount:' +
|
||||
interactionCount +
|
||||
' timeSpent:' +
|
||||
timeSpent +
|
||||
' isStraightLine:' +
|
||||
isStraightLine +
|
||||
' mousePositions:' +
|
||||
mousePositions.length +
|
||||
' honeypotInput1:' +
|
||||
honeypotInput1.value +
|
||||
' honeypotInput2:' +
|
||||
honeypotInput2.value +
|
||||
' verifyEmailInput:' +
|
||||
verifyEmailInput.value
|
||||
)
|
||||
}
|
||||
function handleSubmit(e) {
|
||||
kontaktformular.addEventListener('submit', function (e) {
|
||||
e.preventDefault()
|
||||
|
||||
currentMessages = getCurrentLangMessages()
|
||||
const form = e.target
|
||||
const notification = document.getElementById('notification')
|
||||
const zsrTooltip = document.getElementById('zsr-tooltip')
|
||||
|
||||
checkForBotBehavior()
|
||||
if (botDetected) {
|
||||
fakeOut()
|
||||
return false
|
||||
// Spinner und button disabled anzeigen
|
||||
|
||||
var endTime = Date.now()
|
||||
var timeSpent = (endTime - startTime) / 1000 // Zeit in Sekunden
|
||||
|
||||
// Setze die Werte für die Botvalidierung zum Auswerten in PHP
|
||||
document.getElementById('age').value = timeSpent
|
||||
document.getElementById('hobbies').value = userInteracted ? 'true' : 'false'
|
||||
|
||||
btn.innerHTML = `
|
||||
<svg class="text-gray-300 animate-spin mx-auto" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
width="24" height="24">
|
||||
<path
|
||||
d="M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z"
|
||||
stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path
|
||||
d="M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762"
|
||||
stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-900">
|
||||
</path>
|
||||
</svg>
|
||||
`
|
||||
|
||||
btn.disabled = true
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
// Konvertiere das JSON-Objekt in einen String, um es zu senden
|
||||
const formData = new FormData(form)
|
||||
const formDataEncoded = new URLSearchParams(formData).toString()
|
||||
const formURL = form.action + '.json'
|
||||
|
|
@ -163,67 +126,27 @@ function handleSubmit(e) {
|
|||
return response.json()
|
||||
})
|
||||
.then((data) => {
|
||||
submitButton.disabled = true
|
||||
submitButton.innerHTML = `
|
||||
<svg class="svg-spin" fill="#ffffff" width="30px" height="30px" viewBox="0 0 9.6 9.6" id="Flat" xmlns="http://www.w3.org/2000/svg"><path d="M5.1 1.2v1.2a0.3 0.3 0 0 1 -0.6 0V1.2a0.3 0.3 0 0 1 0.6 0m3.3 3.3h-1.2a0.3 0.3 0 0 0 0 0.6h1.2a0.3 0.3 0 0 0 0 -0.6m-1.691 1.785a0.3 0.3 0 0 0 -0.424 0.424l0.849 0.849a0.3 0.3 0 1 0 0.424 -0.424ZM4.8 6.9a0.3 0.3 0 0 0 -0.3 0.3v1.2a0.3 0.3 0 0 0 0.6 0v-1.2a0.3 0.3 0 0 0 -0.3 -0.3m-1.909 -0.615L2.042 7.133a0.3 0.3 0 0 0 0.424 0.424l0.849 -0.849a0.3 0.3 0 0 0 -0.424 -0.424M2.7 4.8a0.3 0.3 0 0 0 -0.3 -0.3H1.2a0.3 0.3 0 0 0 0 0.6h1.2a0.3 0.3 0 0 0 0.3 -0.3m-0.233 -2.758a0.3 0.3 0 0 0 -0.424 0.424l0.849 0.849a0.3 0.3 0 0 0 0.424 -0.424Z"/></svg>
|
||||
`
|
||||
// Erfolgsnachricht anzeigen
|
||||
// TODO Nachricht anpassen wenn französische Version
|
||||
notification.textContent = 'Anfrage erfolgreich versendet.'
|
||||
btn.className = 'submitbutton text-white mx-auto submit-after-valid-captchaaaa fadeOut'
|
||||
setTimeout(() => {
|
||||
// if data.success is true, show a success message
|
||||
if (data) {
|
||||
submitButton.style.display = 'none'
|
||||
notification.innerHTML = `<span>${currentMessages.thankyou}</span>`
|
||||
notification.className = 'bg-green-500 text-white px-4 py-2 rounded block'
|
||||
} else {
|
||||
submitButton.style.display = 'none'
|
||||
notification.textContent = 'Es gab ein Problem mit Ihrer Anfrage'
|
||||
notification.className = 'bg-blue-500 text-white px-4 py-2 rounded block'
|
||||
}
|
||||
}, 3000)
|
||||
btn.style.visibility = 'hidden'
|
||||
btn.style.display = 'none'
|
||||
notification.style.visibility = 'visible'
|
||||
notification.style.display = 'block'
|
||||
notification.classList.remove('fadeIn') // Remove fadeIn class
|
||||
void notification.offsetWidth
|
||||
notification.className = 'bg-green-500 text-white px-4 py-2 rounded block fadeIn'
|
||||
}, 1000)
|
||||
// setTimeout(() => notification.className = 'bg-green-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
|
||||
})
|
||||
.catch((error) => {
|
||||
submitButton.style.display = 'none'
|
||||
// Fehlermeldung anzeigen
|
||||
notification.textContent = 'Fehler beim Senden der Nachricht.'
|
||||
notification.className = 'bg-blue-500 text-white px-4 py-2 rounded block'
|
||||
console.error(error)
|
||||
console.log(error)
|
||||
notification.className = 'bg-red-500 text-white px-4 py-2 rounded block'
|
||||
// setTimeout(() => notification.className = 'bg-red-500 text-white px-4 py-2 rounded hidden', 5000); // Benachrichtigung nach 5 Sekunden ausblenden
|
||||
})
|
||||
})
|
||||
}
|
||||
function fakeOut() {
|
||||
submitButton.disabled = true
|
||||
submitButton.innerHTML = `
|
||||
<svg class="svg-spin" fill="#ffffff" width="30px" height="30px" viewBox="0 0 9.6 9.6" id="Flat" xmlns="http://www.w3.org/2000/svg"><path d="M5.1 1.2v1.2a0.3 0.3 0 0 1 -0.6 0V1.2a0.3 0.3 0 0 1 0.6 0m3.3 3.3h-1.2a0.3 0.3 0 0 0 0 0.6h1.2a0.3 0.3 0 0 0 0 -0.6m-1.691 1.785a0.3 0.3 0 0 0 -0.424 0.424l0.849 0.849a0.3 0.3 0 1 0 0.424 -0.424ZM4.8 6.9a0.3 0.3 0 0 0 -0.3 0.3v1.2a0.3 0.3 0 0 0 0.6 0v-1.2a0.3 0.3 0 0 0 -0.3 -0.3m-1.909 -0.615L2.042 7.133a0.3 0.3 0 0 0 0.424 0.424l0.849 -0.849a0.3 0.3 0 0 0 -0.424 -0.424M2.7 4.8a0.3 0.3 0 0 0 -0.3 -0.3H1.2a0.3 0.3 0 0 0 0 0.6h1.2a0.3 0.3 0 0 0 0.3 -0.3m-0.233 -2.758a0.3 0.3 0 0 0 -0.424 0.424l0.849 0.849a0.3 0.3 0 0 0 0.424 -0.424Z"/></svg>
|
||||
`
|
||||
setTimeout(() => {
|
||||
submitButton.style.display = 'none'
|
||||
notification.innerHTML = `<span>${currentMessages.thankyou}</span>`
|
||||
notification.className = 'bg-green-500 text-white px-4 py-2 rounded block'
|
||||
}, 3000)
|
||||
}
|
||||
function init() {
|
||||
// Event Listeners
|
||||
document.addEventListener('mousedown', setUserInteracted)
|
||||
document.addEventListener('touchstart', setUserInteracted)
|
||||
document.addEventListener('keydown', setUserInteracted)
|
||||
document.addEventListener('mousemove', handleMouseMove)
|
||||
form.addEventListener('submit', handleSubmit)
|
||||
emailInput.addEventListener('invalid', () => {
|
||||
const currentMessages = getCurrentLangMessages()
|
||||
emailInput.setCustomValidity(currentMessages.email)
|
||||
})
|
||||
textInputs.forEach((input) => {
|
||||
input.addEventListener('invalid', () => {
|
||||
const currentMessages = getCurrentLangMessages()
|
||||
input.setCustomValidity(currentMessages.required)
|
||||
})
|
||||
})
|
||||
log('captchaInput', captchaInput)
|
||||
captchaInput?.forEach((input) => {
|
||||
input.setAttribute('placeholder', getCurrentLangMessages().captcha)
|
||||
})
|
||||
captchaVerifyButton?.forEach((button) => {
|
||||
button.textContent = getCurrentLangMessages().captchaButton
|
||||
})
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
init()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@ Nous vous contacterons dans les plus brefs délais.
|
|||
<div id="formPartOne">
|
||||
<input type="hidden" name="formularart" value="Kontaktformular Französisch">
|
||||
<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>
|
||||
<select id="gender" name="gender" required >
|
||||
<option value="männlich">Monsieur</option>
|
||||
|
|
@ -40,7 +44,7 @@ Nous vous contacterons dans les plus brefs délais.
|
|||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="name">Nom, Nom de famille</label>
|
||||
<label for="name">Nom de famille</label>
|
||||
<input type="text" id="name" name="name" required >
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -54,8 +58,8 @@ Nous vous contacterons dans les plus brefs délais.
|
|||
<input type="text" id="telefon" name="telefon" required >
|
||||
</div>
|
||||
<div>
|
||||
<label for="mail">Email</label>
|
||||
<input type="mail" id="mail" name="mail" required >
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" required >
|
||||
</div>
|
||||
<div>
|
||||
<label for="subject">Objet</label>
|
||||
|
|
@ -63,15 +67,14 @@ Nous vous contacterons dans les plus brefs délais.
|
|||
</div>
|
||||
<div>
|
||||
<label for="description">Remarque</label>
|
||||
<textarea id="description" name="description" rows="4" required></textarea>
|
||||
<textarea id="description" name="description" rows="4"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<center class="w-full">
|
||||
{{< captcha >}}
|
||||
<button id="kontaktformular-btn" type="submit" class="submitbutton text-white mx-auto submit-after-valid-captcha" >Envoyer la demande</button>
|
||||
|
||||
<p><div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div></p>
|
||||
</center>
|
||||
<!-- <div class ="captcha-container"></div> wir verzichten erstmal auf das Captcha -->
|
||||
<div class="w-full flex justify-center">
|
||||
<button id="kontaktformular-btn" type="submit" disabled class="submitbutton text-white mx-auto submit-after-valid-captcha-bak">Envoyer la demande</button>
|
||||
<div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{{% /section %}}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
|
|||
<div id="formPartOne">
|
||||
<input type="hidden" name="formularart" value="Kontaktformular Deutsch">
|
||||
<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>
|
||||
<select id="gender" name="gender" required >
|
||||
<option value="männlich">Herr</option>
|
||||
|
|
@ -40,7 +44,7 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
|
|||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="name">Nachname, Vorname</label>
|
||||
<label for="name">Nachname</label>
|
||||
<input type="text" id="name" name="name" required >
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -54,11 +58,8 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
|
|||
<input type="text" id="telefon" name="telefon" required >
|
||||
</div>
|
||||
<div>
|
||||
<label for="mail">Email</label>
|
||||
<input type="mail" id="mail" name="mail" required >
|
||||
</div>
|
||||
<div>
|
||||
<input type="verify_email" id="verify_email" name="verify_email" >
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" required >
|
||||
</div>
|
||||
<div>
|
||||
<label for="subject">Betreff</label>
|
||||
|
|
@ -66,15 +67,14 @@ Wir nehmen zeitnah Kontakt zu Ihnen auf.
|
|||
</div>
|
||||
<div>
|
||||
<label for="description">Anmerkung</label>
|
||||
<textarea id="description" name="description" rows="4" required></textarea>
|
||||
<textarea id="description" name="description" rows="4"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<center class="w-full">
|
||||
{{< captcha >}}
|
||||
<button id="kontaktformular-btn" type="submit" class="submitbutton text-white mx-auto submit-after-valid-captcha" >Anfrage absenden</button>
|
||||
|
||||
<p><div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div></p>
|
||||
</center>
|
||||
<!-- <div class ="captcha-container"></div> wir verzichten erstmal auf das Captcha -->
|
||||
<div class="w-full flex justify-center">
|
||||
<button id="kontaktformular-btn" type="submit" disabled class="submitbutton text-white mx-auto submit-after-valid-captcha-bak">Anfrage absenden</button>
|
||||
<div id="notification" class="bg-blue-500 text-white rounded invisible opacity-0 hidden">Notification</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{{% /section %}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue