Betreff: Kontaktformular CTA "Senden" funktioniert nicht
Wow die Cookie Banners schon wieder... 🤦
VG,
Hey @Huizbirn
Wie hast du die Kontakt Form eingerichtet und hast du den Senden Button selber gecodet? Warum nicht unsere Forms App dafür verwenden hier um eine viel professionellere Form zu erstellen und dabei die Kundenregistrierungs-Erfahrung enorm verbessern?
Die Fehler in der Entwicklerkonsole deuten darauf hin, dass es Probleme mit dem Cross-Origin-Scripting und möglicherweise auch mit reCAPTCHA gibt:
- Die Meldung
recaptchacompat disableddeutet darauf hin, dass das reCAPTCHA-Skript nicht richtig geladen wird. - Lösung: Überprüfe, ob reCAPTCHA korrekt in dein Kontaktformular integriert ist. Hier ist ein Beispiel für eine korrekte Integration:
<form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form">
<input type="hidden" name="form_type" value="contact">
<input type="hidden" name="utf8" value="✓">
<!-- Deine Formularfelder hier -->
<div class="g-recaptcha" data-sitekey="dein-site-key"></div>
<button type="submit" class="button">Senden</button>
</form>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
- Problem: Die Aktions-URL des Formulars könnte falsch oder unvollständig sein.
- Lösung: Stelle sicher, dass die
action-URL des Formulars korrekt ist und auf/contact#contact_formverweist, wie im folgenden Beispiel:
<form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form">
<input type="hidden" name="form_type" value="contact">
<input type="hidden" name="utf8" value="✓">
<!-- Deine Formularfelder hier -->
<button type="submit" class="button">Senden</button>
</form>
- Problem: Es könnte ein JavaScript-Fehler vorliegen, der die Formularübermittlung blockiert.
- Lösung: Überprüfe deinen JavaScript-Code und stelle sicher, dass keine Fehler vorhanden sind, die die Übermittlung blockieren könnten. Hier ist ein Beispiel für das Abfangen der Formularübermittlung:
document.getElementById('contact_form').addEventListener('submit', function(event) {
event.preventDefault(); // Verhindert die Standard-Formularübermittlung
// Hier kannst du zusätzliche Validierungen oder Aktionen hinzufügen
this.submit(); // Sende das Formular nach der Validierung
});
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
Hallo Gabe,
ich habe deine Vorschläge noch nicht ausprobiert, aber ich verwende eigentlich das Standard Kontaktformular, ohne etwas am Code geändert zu haben. Oder hängt das vielleicht damit zusammen, dass ich vor Kurzem auf die aktuellere Craft Version gewechselt bin?
LG
Hey @Huizbirn
Ja, die Aktualisierung des Craft Themes auf die neueste version könnte ggf. das Fehlschlagen des Captcha verursacht haben. Oder du hast eine neue Vorlage erstellt aber irgendwie ist der 🪱 drin.
Probiere bitte mal eines: deaktiviere den Captcha wie unten abgebildet (aber nur vorläufig) und teste das nochmal:
Dann würde ich empfehlen eine Form mit unserer Forms App zu erstellen und diese im neuen Craft Theme zu testen.
VG,
Lieber Gabe,
danke für die Rückmeldung. Ich habe recaptcha deaktiviert und danach hat das Formular funktioniert. Im Anschluss habe ich wie von dir empfohlen, die Forms App installiert, ein Formular erstellt und auf der Seite entsprechend eingefügt. Nachdem ich aber auf "Nachricht absenden" klicke, passiert leider wieder nichts - der Spinner am Button läuft endlos durch, siehe Screenshot.
Link:
https://www.huizbirn.at/pages/contact
LG
Community Blog Artikel
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024
Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024
Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024