Wie füge ich ein (Kontakt-) Formular in eine Seite ein?

Im Grunde gibt es zwei verschiedene Möglichkeiten, ein (Kontakt-) Formular zu erstellen und entsprechend einzubinden:

1. Du erstellt ein Kontaktformular im Backend über die Rubrik "Webseite" "Formulare".
2. Du erstellt ein Kontaktformular in Divi über das Modul "Kontaktformular".

Hinter beiden Möglichkeiten stecken zwei unterschiedliche Tools und können daher nicht miteinander kombiniert werden. 

In unserem Beispiel schauen wir uns beide Möglichkeiten genauer an.

1. Standard Formular (Backend)

Gehe im Backend zu "Webseite" > "Formulare". Mit diesem Tool kannst du neben einem Standardformular (Abfrage mit Name, E-Mail und Nachrichten-Feld für die Kontaktaufnahme) auch richtig komplexe Formulare erstellen und solche beispielsweise für ein Bewerbungsformular o.ä. nutzen. 

Hier erstellst du also ein solches Formular. Dieses muss nun von dir auf einer Seite deiner Spreamdind Plattform eingebunden werden, damit es im Frontend sichtbar ist. Dies geschieht folgendermaßen:

Gehe im Backend zu "Webseite" > "Alle Seiten" und klicke entweder bei einer Seite auf "bearbeiten" oder erstelle eine neue Seite.

Öffne die an der gewünschten Stelle im Divi Builder die Einstellungen des Text-Moduls und klocke auf den dunklen Button "Formulare":

Hinweis: Im visuellen Builder im Frontend wirst du den Button "Formulare" nicht sehen. Daher solltest du ins Backend in den Bearbeitungsmodus der Seite wechseln.

In einem Popup-Fenster kannst du nun über das Drop-Down Menü dein Kontaktformular wählen:

Optional kannst du den "Formulartitel" sowie die "Formularbeschreibung" anzeigen oder nicht. 

Klicke zum Schluss auf den Button "Formular einfügen" und dann beim Modul auf "Speichern & Beenden". "Aktualisere" die Seite, damit die Anpassungen gespeichert werden.

1.1 Hinweis für das Einbinden im Frontend im visuellen Builder

Wie bereits oben erwähnt, taucht der Button "Formulare" in den Einstellungen eines Divi Moduls nicht auf, wenn man die Seite im Frontend über den visuellen Builder bearbeitet.

Du kannst für das Einbinden eines Formulars einfach den folgenden Shortcode in den Editor eines Text-Moduls von Divi einbinden und dabei einfach nur die ID deines Formulars einfügen:

• [gravityform id="1" title="true" description="true"]

Die ID des Formulars findest du im Backend unter "Webseite" > "Formulare" in der Spalte ID. Der Shortcode akzeptiert die beiden folgenden Parameter: title und description.

• title="true" => Ausgabe des Formulartitels
• title="false" => Keine Ausgabe des Formulartitels
• description="true" => Ausgabe der Formularbeschreibung
• description="false" => Keine Ausgabe der Formularbeschreibung

2. Modul Kontaktformular (Divi)

Eine andere Möglichkeit ist, das Divi-Modul "Kontaktformular" zu nutzen. Im Vergleich zu den Formularen oben lassen sich darüber zwar keine komplexen Formulare erstellen, aber für eine einfache Kontaktanfrage ist es mehr als ausreichend. 

Da es sich hierbei um ein Divi-Modul handelt, muss dieses Formular direkt über den Divi Builder im Bearbeitungsmodus auf der Seite erstellt werden. Dort kannst du dann das Modul "Kontaktformular" hinzufügen: 

Dabei werden automatisch die Felder "Name", "E-Mail" und "Nachricht" erstellt. Diese Felder müssen alle ausgefüllt werden, damit Kontaktanfrage gesendet werden kann: 

2.1 Spam Schutz

Außerdem ist in den Modul-Einstellungen unter "Inhalt" bei der Option "Spam Protection" das "Captcha" aktiviert, welches eine kleine Rechenaufgabe vor den Absende-Button stellt, um das Automatisierte Ausfüllen des Formulars vor Spambots zu schützen: 

Wie du die Option "Use A Spam Protection Service" einrichtest, kannst du hier nachlesen: Ich bekomme immer wieder Spam über mein Kontaktformular. Was kann ich tun? (Abschnitt: "2. Modul Kontaktformular Divi")

2.2 Empfänger E-Mail Adresse

Trage nun in den Modul-Einstellungen unter "Inhalt" bei der Option "E-Mail Adresse" die Empfänger-E-Mail Adresse ein (du kannst auch mehrere durch Komma getrennte E-Mail Adressen eingeben):

Vorsicht: Wenn du hier mehrere E-Mail Adressen einträgst, sind diese für alle Empfänger zu sehen. Es gibt leider keine Möglichkeit, eine E-Mail als BCC zu bestimmten. Sollte das für dich wichtig sein, empfehlen wir, über das Backend unter "Webseite" > "Formulare" ein Kontaktformular zu erstellen und entsprechend einzurichten.

2.3 Erfolgsmeldung

Nach Absenden des Formulars eine einfache Meldung mit "Danke für Ihre Anfrage". Auf Wunsch kannst du in den Modul-Einstellungen unter "Inhalt" bei der Option "Text" eine eigene Meldung bei "Erfolgsmeldung" eintragen:

2.4 Nachricht an Empfänger (Admin)

Deine Spreadmind Plattform sendet dir dann eine E-Mail an die bei der Option "E-Mail Adresse" eingetragene Adresse mit folgendem Inhalt: 

Absender: info@spreadmind.de
Betreff: Neue Nachricht von {titel-spreadmind-plattform}
Antworten an: "Name" <email-adresse>
Nachricht: {Hier steht der Inhalt aus dem Feld "Nachricht"}

Das kann also bspw. so aussehen:

3. Ich erhalte nach Absenden des Formulars eine Fehlermeldung – Was tun?

Verwendest du das Divi Modul "Kontakt" kann bei einer fehlenden Einstellung bspw. zu folgender Fehlermeldung kommen:

Schaue dir dazu diese Dokumentation an: Das Modul "Kontakt" sendet die Nachricht nicht ab – Was tun?