DA-FormMaker HTML-Formular in Siquando Pro Web einbauen

Wie baue ich ein HTML-Kontaktformular in Siquando Pro ein?

In diesem Artikel schauen wir uns an, wie wir HTML-Formular mittels Iframe in Siquando Pro Web einbauen können.

Videoanleitung

Anleitung

Unser Formular wollen wir in einer extra Unterseite anlegen. Hierzu legen wir einen neuen Ordner an, welcher dann später auch in unserem Menü erscheinen wird.

Wir geben einen Namen ein, ggf. noch eine Überschrift oder passen das Layout an.

Die neue Unterseite ist erstmal leer und enthält nur unsere Überschrift.

Hier fügen wir nun einen neuen Absatz hinzu.

Aus der Liste der Vorlagen suchen wir uns den “HTML-Clip” heraus.

Hier können wir nun HTML-Code einfügen.

Formular einbinden

Hier kommt nun unser Formular ins Spiel. In unserem Beispiel wollen wir ein einfaches Kontaktformular einbauen. Das Bootstrap-Design bietet sich hierfür an.

Als nächsten brauchen wir den HTML-Code, welchen wir in Siquando Pro Web einbauen können. Diesen bekommen wir über den Exportassistenten.

Dieser bietet verschiedene Möglichkeiten. Die einfachste Möglichkeit ist der eingebettete Iframe. Wir wählen den Reiter aus. Anschließend kopieren wir den HTML-Code, welchen wir dann einbinden. Die Standardeinstellungen passen in vielen Fällen.

Den Code fügen wir nun in Siquando ein.

Mit OK übernehmen wir die Einstellungen.

In der Vorschau taucht nun unser Formular auf. Kommt es zu Problemen bei der Darstellung, passen Sie die Höhe im Exportassistent an. Wird das Formular in falscher Höhe dargestellt, deaktivieren Sie die Option “Responsiv”. Hier gilt es im Zweifelsfall etwas zu probieren, den Code zu kopieren und erneut einzufügen.

Bessere Darstellung

Das Formular taucht nun zwar auf, aber die Darstellung ist noch nicht optimal. So haben wir eine doppelte Überschrift und auch der Hintergrund passt nicht wirklich zum Formular.

Die Überschrift können wir im DA-FormMaker entfernen. Dazu leeren wir das Feld für die “Formularüberschrift”.

Die Hintergrundfarbe können wir im Design anpassen. In unserem Fall ist weiß die richtige Wahl.

Nun führen wir die Schritte für den Export erneut aus, kopieren den HTML-Code und fügen diesen ein. Das Ergebnis sieht nun schon deutlich integrierter aus.

Fertig!

Wie Sie sehen, ist der Einbau sehr einfach möglich. Das Formular kann auch jederzeit aktualisiert werden, dazu einfach das Formular im DA-FormMaker anpassen und den HTML-Code neu generieren und einfügen.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert