Avada und Contact Form 7 Tutorial

In diesem Avada und Contact Form 7 Tutorial zeige ich Dir, wie Du eigene Formulare im Avada Theme gestalten kannst.

Wer in WordPress nach einem Formular Plugin sucht, dem wird mit Sicherheit immer wieder Contact Form 7 von Takayuki Miyoshi begegnen. Über 5 Millionen Downloads sprechen für die Beliebtheit des Formular Plugins im WordPress Plugin Verzeichnis. Mit Contact Form 7 lassen sich beliebig viele Formulare erstellen die individuell mit Html-Markup gestaltet werden können.

Das Avada Theme bietet zusätzlich eigene Einstellungen für Contact Form 7 in den Avada Theme Options. In den Optionen lassen sich folgende Einstellungen vornehmen:

  • Linienhöhe der Schrift in den Formularfelder

  • Hintergrundfarbe der Formularfelder
  • Schriftgrößen der Formularfelder
  • Formular Textfarben
  • Rahmengröße, Radien- und Farben für Formularfelder

Mit diesen Einstellungen lassen sich die benutzten Formularfelder schon gestalten, jedoch noch nicht das Gesamtlayout eines Formulars.

Forms-Styling-Avada-Theme-Options

Auch im Fusion Builder Live Modus kannst Du auf diese Einstellungen zugreifen.
Siehe Dir dazu auch die Seite der Theme Features des Avada Themes an.

Contact-Form-7-Styling-in-Fusion-Builder-Live

Standartanzeige der Contact Form 7 Formulare

Wenn Du ein einfaches Formular erstellt hast, werden alle Formularfelder standardmäßig untereinander angezeigt. In vielen Fällen reicht die Standardeinstellung vielleicht schon. Doch werden aber mehrere Formularfelder benötigt, so kann das Formular in der Frontansicht sehr lang werden.

Kontaktformular einfache Darstellung
Normale-Einstellungen-Formular

Shortcodes aus Avada für Spalten verwenden

Das Avada Theme bietet einige shortcodes die Du für ein Mehrspaltiges Formular verwenden kannst. Damit kannst Du Deine Formularfelder in 2-, 3- oder maximal 6 Spalten nebeneinander aufbauen. Das spart eine Menge Platz, sieht schöner aus und ist responsiv.

Kontaktformular-mit Spaltenlayout
Spaltenlayout-Einstellungen im Formulareditor

Da Du in Contact Form 7 Html-Markup verwenden kannst, ist es möglich mit den Avada eigenen Spaltenlayout shortcodes Deine Formularfelder nebeneinander aufzubauen.

Hierfür stehen Dir folgende Html-shortcodes zur Verfügung:

1/1 – fusion-one-full – 1 Spalte über die gesamte Breite

Copy to Clipboard

1/2 – fusion-one-half – 2 Spalten nebeneinander

Copy to Clipboard

1/3 – fusion-one-third – 3 Spalten nebeneinander

Copy to Clipboard

Es lassen sich eine ganze Reihe weiterer Spaltenlayouts erstellen – dazu findest Du in der Dokumentation zum Avada Theme mehr.

Weitere Tipps zu den Formular Inhalten

Spaltenabstand nach rechts
Durch den Zusatz „fusion-spacing-yes“ wird ein Abstand nach rechts von der Spalte erzeugt. Mit „fusion-spacing-no“ kann der Abstand nach rechts aufgehoben werden.

Abschlüsse von Spalten
Zu beachten ist zudem, das die jeweils letzte Spalte zum Abschluss den Zusatz „fusion-column-last“ im shortcode enthalten muss. Diese Anweisung weist an, das hier das Spaltenlayout endet und ein Umbruch erstellt wird.

Inhalte und Formularfelder mit zusätzlich mit Html auszeichnen
Um gleichmäßige Abstände Deiner Formularfelder zu erreichen, setze Deine Formularfelder innerhalb von Html Absatz-Tags.

Zum Beispiel:

Copy to Clipboard

Fazit Avada und Contact Form 7:

Auch wenn es mittlerweile eine Menge Alternativen zu Contact Form 7 gibt, punktet das Formular Plugin durch seine hohe Flexibilität und Anpassungsmöglichkeiten.

Durch das einbinden von Spaltenlayouts via shortcodes aus dem Avada Theme, ergeben sich vielfältige Gestaltungsmöglichkeiten für schöne Formulare.

Dadurch das die verwendeten shortcodes vollständig responsiv reagieren, werden auch auf mobilen Endgeräten die Formulare korrekt angezeigt.

Hier noch ein Link zur der offiziellen Dokumentation von Theme Fusion bezüglich Columns in Contact Form 7:
https://theme-fusion.com/documentation/avada/how-to/how-to-use-contact-form-7-fields-with-columns/