Bricks Builder Formular Element

Ich gehe hier einmal den Bereich “Inhalt” durch. Der Bereich “Stil” ist wie gewohnt bei alles Bricks-Elementen.

Felder

Wir fügen ein Formular mit den drei Feldern Name, E-Mail und Nachricht ein. Über “Hinzufügen Feld” können wir weitere Formular-Inhalte hinzufügen. Im Beispiel habe ich das Feld “URL” eingefügt.

In den Einstellungen des Feldes haben wir folgende Möglichkeiten:

1. Typ – die Art des Feldes. Reines Textfeld, Textbereich (mehrzeiliges Textfeld), Telefonnummer usw.
2. Etikett / Label – die Feldbezeichnung z.B. “Webseite”, kann ein- und ausgeblendet werden.
3. Platzhalter – ein Beispiel für die Eingabe “https://webseite.de” oder “Ihre Webseite”, steht im Feld.
4. Wert – Vorbelegung mit einem Wert. Sinnvoll bei z.B. Schiebereglern oder Checkboxen.
5. Max. Länge – hier kann die maximale Anzahl der Zeichen festgelegt werden.
6. Attribut: Name – Der Wert dient dazu, die Daten des Formularfelds zu identifizieren, wenn sie an den Server geschickt werden. Tragen wir hier nichts ein, setzt Bricks den Wert automatisch als Buchstaben-Zahlen Kombination. Eine Eingabe entsprechend der Funktion semantisch korrekt macht aber trotzdem Sinn. D.h., ist dies ein Feld, für z.B. den Nachnamen könnten wir hier “nachname” oder “last_name” eintragen. Wichtig ist eine Schreibweise ohne Leerzeichen und nur die Sonderzeichen “-” und “_”.
7. Attribut: Autovervollständigung – mit der Eingabe “on oder “off können wir dem Browser mitteilen, ob ein Eingabefeld automatisch ausgefüllt werden soll.
8. Attribut: Rechtschreibprüfung – mit der Eingabe von “off” (aus), “false” (aus) und “true” (ein) können wir dem Browser mitteilen, ob eine Rechtschreibprüfung ausgeführt werden soll.
9. Fehlermeldung – hier können wir eine Meldung eingeben, wenn die Eingabe nicht der Vorgabe entspricht. Z.B. Nummer bei einem Nummernfeld oder keine richtig geschrieben e-Mailadresse wenn das @Zeichen fehlt.
10. Breite (%) – mit einem Wert können wir die Breite in % bestimmen.
11. Erforderlich – erzeugt ein Pflichtfeld.
12. ID- hier können wir dem Feld eine ID zuweisen.

• Bei den Feldern “Checkbox” (Auswahlboxen), “Select” (Dropdown-Auswahl) und “Radio” (Runde Auswahlknöpfe, bei denen nur einen Option ausgewählt werden kann. Z.B. Auswahl eine Zahlungsweise.) kommt noch ein Eingabefeld für die Möglichkeiten dazu. 
• Beim Textbereich kommen noch Einstellungen für die Größe hinzu. 
• Bei “Files / Datei Upload” können wir die Dateigröße, -anzahl und -art eingeben. Weiterhin, ob und wo die Dateien gespeichert werden sollen. Die Datei wird auch immer per Mail übertragen.

Weitere Einstellungen Felder

• Erforderliches Sternchen anzeigen – Markiert Pflichtfelder mit einem Sternchen.
• Etiketten anzeigen – zeigt die Beschriftung von “Etikett” über dem Feld.
• Etikett Typografie – Bearbeitung der Schrift.
• Platzhalter Typografie – Bearbeitung der Schrift.
• Formularvalidierung deaktivieren – Standardmäßig werden Formularfelder bei Eingabe, Unschärfe und Absenden überprüft. Der Begriff “Unschärfe” wurde etwas unglücklich übersetzt. Er betrifft die „Onblur Validation“. Das ist eine Technik zur Überprüfung von Formulardaten, die stattfindet, sobald der Benutzer ein Eingabefeld verlässt. Wir können hier wählen, wann die Validierung deaktiviert wird, bei “Eingabe” oder “auf Unschärfe” – also bei der „Onblur Validation“.

Feld

Hier können wir die äußeren und inneren Abstände der Felder einstellen, sowie die Ausrichtung im Formular. Weiterhin können wir einen Rahmen definieren und die Schrift bearbeiten. Die Schrifteinstellungen beziehen sich auf die User-Eingabe in den Feldern.

Senden Button

Hier finden wir die Einstellungen für unseren Button. Standardmäßig wird der typische “Bricks Button” angezeigt, bzw. das Design aus einem erstellten Designstil.

Aktion

Welche Aktionen soll nach erfolgreicher Übermittlung des Formulars geschehen. Je nach Auswahl erscheinen weitere Möglichkeiten, wie z.B. die “Benutzerregistrierung”. Hier können die relevanten Daten den erstellten Feldern zugewiesen werden. Die Verbindung zu den Mailern SendGrid und Mailchimp erfordert eine entsprechende API.

Die Grundeinstellung ist “E-Mail”, das ist die richtige Einstellung für z.B. ein Kontaktformular.

• Erfolgsmeldung – Für die erfolgreiche Absendung, hier können wir einen individuellen Text eingeben.

Hinweise

Bezieht sich auf die “Erfolgreich gesendet” und “Fehlermeldung”

• Schließen nach (ms) – wie lange die Meldung sichtbar bleibt.
• Die Meldung bekommt einen “Schließen-Button”.

Standard – ohne Eingaben bleibt die entsprechende Meldung stehen.

E-Mail

Ich gehe hier jetzt die Einstellungen für “E-Mail” durch:

1. Betreff – mit welchen Betreff wird die Mail gesendet.
2. An E-Mail-Adresse senden – die Mailadresse des Empfängers. 
3. BCC-E-Mail-Adresse – zusätzliche Empfänger.
4. Absender-E-Mail-Adresse – spricht für sich. 
5. Name des Absenders – Z.B. Inhaber der Website, Unternehmensname usw.
6. Antwort an E-Mail Adresse – für eine alternative Antwort-Adresse.
7. Zum Personalisieren der Mail. Mit den IDs der Felder und zusätzlichen Text kann eine individuelle Reihenfolge / Nachricht erstellt werden. Bleibt das leer, werden die Felder wie erstellt übertragen.
   Alle Felder: {{all_fields}}
   Feld “Nachricht” z.B.: {{6d14f0}} (siehe ID in den Feldeinstellungen) usw.
8. Fehlermeldung – hier können wir eine individuelle Fehlermeldung eingeben.
9. HTML E-Mail – Wenn aktiv wird die Mail im HTML Format gesendet, bei deaktiviert im reinen Textformat.

Bestätigungsmail

Der User bekommt eine Bestätigungsmail, dass seine Eingabe übermittelt wurde.

1. Betreff – der entsprechende Betreff, z.B. “Vielen Dank für ihre Anfrage…”
2. An E-Mail-Adresse senden – falls abweichend. Standard: E-Mail Adresse im versandten Formular.
3. Absender-E-Mail-Adresse – spricht für sich.
4. Name des Absenders – spricht für sich. Unternehmen, Webseite, Inhaber usw.
5. Antwort an E-Mail Adresse – für einen alternative Antwortadresse. Standard ist “Absender-E-Mail-Adresse”.
6. E-Mail-Inhalt – die Möglichkeit der Individualisierung. Siehe auch “E-Mail” Nr. 9.
7. HTML E-Mail – Wenn aktiv wird die Mail im HTML Format gesendet, bei deaktiviert im reinen Textformat.

Spamschutz

Hier können wir für verschiedene Spamschutz-Möglichkeiten APIs eingeben. Z.B. Google reCaptcha. Ggf. kann sich die Notwendigkeit für ein Cookie Opt-in ergeben…

Mit dem “Honeypot” können wir dem Spam-Bot eine Falle stellen. Wir legen ein weiteres Feld in unserem Formular an, z.B. ein Textfeld mit dem Namen “Anliegen” oder “Betreff” und aktiveren “Spam-Falle”. Dieses Feld wird von Bricks so mit CSS gestylt, dass es definitiv für den User im Frontend nicht sichtbar ist. Der Spam-Robot ließt aber den Quelltext und füllt das Feld aus. Der Trick des “Honeypot” dabei ist, dass das Formular nicht abgesendet wird, wenn dies eine Feld ausgefüllt ist. Die Nachricht würde lauten: “Es ist ein Fehler aufgetreten, bitte versuche es später noch einmal”…

Gesendete Formulare in der Datenbank und im Backend speichern

Bricks bietet uns die Möglichkeit Formularssendungen in der Datenbank zu speichern und im Backend anzuzeigen. Hier für müssen wir in den Bricks-Einstellungen im Reiter “Allgemein” unter “Formularübermittlungen” “Formulareingaben in der Datenbank speichern” aktivieren.

Im Bricks Builder selber müssen wir bei “Aktionen” noch “Einreichung speichern” hinzufügen. 

Wir bekommen eine neue Option “Einreichung speichern” und können hier unserem Formular einen Namen geben. Wir können hier auch die maximale Anzahl der Einträge in der Datenbank bestimmen und Duplikate verhindern.

In den Bricks-Einstellungen finden wir nun “Ausgefüllte Formulare”. Mit Klick auf das entsprechende Formular können wir die Nachrichten lesen.

Die Meldungen per CSS stylen

Bricks gibt uns (noch?) keine Möglichkeit die “Erfolgs- und Fehlermeldung” zu stylen. Dies können wir dann mit eigenem CSS nachholen. Den Code kannst du für dich anpassen und in den Seiteneinstellungen unter “Benutzerdefinierten Code” oder wenn du Formulare auf mehreren Seiten hast, in den Bricks Einstellungen ebenfalls unter “Benutzerdefinierter Code”

Erfolgsmeldung:

:where(.brxe-form) .message.success {
    background-color: #ffffff; /* Hintergrund, deine Farbe */
    color: #000000; /* Schrift, deine Farbe */
}

Fehlermeldung:

:where(.brxe-form) .form-group .form-group-error-message {
    background-color: #ffffff; /* Hintergrund, deine Farbe */
    color: #000000; /* Schrift, deine Farbe */
}