rene/checkflo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Turnstile explizit rendern bei Modal-Öffnung, autocomplete-Attribute

Browse source
This commit is contained in:
rene 2026-05-17 19:56:39 +02:00
parent cbbe6b9996
commit ca30fde467
1 changed files with 25 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

32
app/src/routes/+page.svelte
View file

@ -44,20 +44,38 @@
let formDone = $state(false); let formDone = $state(false);
let formError = $state(''); let formError = $state('');
let turnstileToken = $state('');
function openModal(plan = '') { function openModal(plan = '') {
modalPlan = plan; modalPlan = plan;
formDone = false; formDone = false;
formError = ''; formError = '';
turnstileToken = '';
showModal = true; showModal = true;
setTimeout(() => {
const ts = (window as any).turnstile;
if (!ts) return;
const el = document.querySelector('.cf-turnstile');
if (el && !el.hasChildNodes()) {
ts.render(el, {
sitekey: PUBLIC_TURNSTILE_SITE_KEY,
theme: 'light',
callback: (t: string) => { turnstileToken = t; }
});
}
}, 80);
} }
function closeModal() { showModal = false; } function closeModal() {
showModal = false;
(window as any).turnstile?.remove('.cf-turnstile');
}
async function submitForm() { async function submitForm() {
if (!formName.trim() || !formEmail.trim()) { formError = 'Bitte Name und E-Mail ausfüllen.'; return; } if (!formName.trim() || !formEmail.trim()) { formError = 'Bitte Name und E-Mail ausfüllen.'; return; }
formSending = true; formError = ''; formSending = true; formError = '';
try { try {
const token = (window as any).turnstile?.getResponse() ?? ''; const token = turnstileToken;
const res = await fetch('/api/contact', { const res = await fetch('/api/contact', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@ -426,28 +444,28 @@
<div class="modal-row"> <div class="modal-row">
<div class="modal-field"> <div class="modal-field">
<label for="m-name">Name *</label> <label for="m-name">Name *</label>
<input id="m-name" type="text" placeholder="Max Mustermann" bind:value={formName} /> <input id="m-name" type="text" autocomplete="name" placeholder="Max Mustermann" bind:value={formName} />
</div> </div>
<div class="modal-field"> <div class="modal-field">
<label for="m-company">Firma</label> <label for="m-company">Firma</label>
<input id="m-company" type="text" placeholder="Muster Prüfdienste GmbH" bind:value={formCompany} /> <input id="m-company" type="text" autocomplete="organization" placeholder="Muster Prüfdienste GmbH" bind:value={formCompany} />
</div> </div>
</div> </div>
<div class="modal-row"> <div class="modal-row">
<div class="modal-field"> <div class="modal-field">
<label for="m-email">E-Mail *</label> <label for="m-email">E-Mail *</label>
<input id="m-email" type="email" placeholder="max@beispiel.de" bind:value={formEmail} /> <input id="m-email" type="email" autocomplete="email" placeholder="max@beispiel.de" bind:value={formEmail} />
</div> </div>
<div class="modal-field"> <div class="modal-field">
<label for="m-phone">Telefon</label> <label for="m-phone">Telefon</label>
<input id="m-phone" type="tel" placeholder="+49 123 456789" bind:value={formPhone} /> <input id="m-phone" type="tel" autocomplete="tel" placeholder="+49 123 456789" bind:value={formPhone} />
</div> </div>
</div> </div>
<div class="modal-field"> <div class="modal-field">
<label for="m-msg">Nachricht (optional)</label> <label for="m-msg">Nachricht (optional)</label>
<textarea id="m-msg" rows="3" placeholder="Wie viele Kunden betreuen Sie? Welche Branche?" bind:value={formMsg}></textarea> <textarea id="m-msg" rows="3" placeholder="Wie viele Kunden betreuen Sie? Welche Branche?" bind:value={formMsg}></textarea>
</div> </div>
<div class="cf-turnstile" data-sitekey={PUBLIC_TURNSTILE_SITE_KEY} data-theme="light"></div> <div class="cf-turnstile"></div>
{#if formError}<p class="modal-error">{formError}</p>{/if} {#if formError}<p class="modal-error">{formError}</p>{/if}
<button type="submit" class="btn-primary" disabled={formSending}> <button type="submit" class="btn-primary" disabled={formSending}>
{formSending ? 'Wird gesendet…' : 'Anfrage senden'} {formSending ? 'Wird gesendet…' : 'Anfrage senden'}