Ein Anfrageformular, das keine Anfrage verliert
Das Formular bleibt dein Markup, und das Theme übernimmt das Senden: Jede Anfrage wird im WordPress-Adminbereich gespeichert und dann per E-Mail, an Telegram oder per Webhook verschickt. Ein Formular-Plugin brauchst du nicht.
Das Ergebnis
<section class="booking">
<h2 fld-text="Booking title">Book a table</h2>
<div class="booking__form w-form">
<form class="booking-form" data-name="Booking">
<label wp-field="name">Your name
<input type="text" name="field" data-name="Your name" required></label>
<label wp-field="phone">Phone
<input type="tel" name="field" data-name="Phone" required></label>
<label wp-field="guests">Guests
<select name="field" data-name="Guests"><option>2</option><option>4</option><option>6</option></select></label>
<input type="submit" class="button" value="Book a table">
</form>
<div class="w-form-done"><div>Thank you! We will call you back.</div></div>
<div class="w-form-fail"><div>Something went wrong. Please call us.</div></div>
</div>
</section>- CSS Selector: .booking-form
- Email: hello@warmcorner.example
- Success message: Thank you! We will call you within an hour.
- name: Anna Kowalski
- phone: +1 (555) 010-0142
- guests: 4
Your name · Phone · Guests
Book a tableThank you! We will call you within an hour.
Die Meldung nach dem Absenden stammt aus den Formulareinstellungen, nicht aus dem Markup.
Schritt für Schritt
Ein gewöhnlicher Formularblock
Formular, Erfolgsmeldung und Fehlermeldung liegen in einer gemeinsamen Hülle: So exportiert Webflow einen Formularblock. Das Formular musst du nicht eigens markieren, das Theme findet es selbst.
<div class="booking__form w-form">
Eine Klasse für eigene Empfänger
Standardmäßig gehen alle Formulare der Website an das Profil „All forms“. Damit dieses Formular eigene Adressen und eigene Meldungen bekommt, gib ihm eine Klasse und leg im Adminbereich ein Profil mit dem Selektor
.booking-forman.<form class="booking-form" data-name="Booking">
Feste Feldschlüssel
wp-field an der Hülle „Beschriftung + Feld“: In der Anfrage und in der E-Mail-Vorlage heißt das Feld
name, auch wenn sich seine Beschriftung im Design ändert.<label wp-field="name">Your name <input type="text" name="field" data-name="Your name" required></label>
Meldungen neben dem Formular
Die Blöcke
.w-form-doneund.w-form-failstehen direkt nach<form>, in derselben Hülle. Ihr Text ist fürs Design: Auf der Website ersetzt ihn die Meldung aus den Formulareinstellungen.<div class="w-form-done"><div>Thank you! We will call you back.</div></div> <div class="w-form-fail"><div>Something went wrong. Please call us.</div></div>
Worauf es ankommt
- Eine Anfrage wird im Adminbereich gespeichert, auch wenn die E-Mail noch nicht eingerichtet ist: Keine geht verloren.
- Ist die Meldung in den Formulareinstellungen leer, zeigt das Theme die Standardmeldung „Your message has been sent!“ in der Sprache der Website.
Typische Fehler
Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.
<form class="booking-form" data-name="Booking">
<input type="submit" value="Book a table">
<div class="w-form-done">Thank you!</div>
</form>Die Erfolgsmeldung innerhalb von <form>: Das Theme sucht sie neben dem Formular, findet sie nicht, und der Besucher sieht nicht, dass die Anfrage angekommen ist. Das Protokoll meldet nichts.
<form class="booking-form" data-name="Booking">
<input type="submit" value="Book a table">
</form>
<div class="w-form-done">Thank you!</div>Die Meldungen gehören hinter </form>, in dieselbe Hülle.