Visforms-Formularfelder nebeneinander anordnen

Hallo vi-Community!
Ich bin "blutiger" Anfänger in Joomla (zwar schon über ein Jahr auf XAMPP installiert, aber die Zeit sich damit zu beschäftigen fehlt öfter) und bin jetzt vor ein paar Monaten auf Visforms gestoßen. Eine super Erweiterung wie sich bis jetzt herausstellte.

Ich hatte jetzt ein erstes einfaches Formular angelegt, allerdings werden bei mir die Felder nur untereinander angezeigt. Wie kann ich das Formular ändern, damit es wie >HIER< aussieht und die Felder nebeneinander stehen?

Danke für jede Antwort.

Hallo,

Schau dir am besten erst einmal diesen Dokumentationsbeitrag an:
www.vi-solutions.de/de/support/dokumenta...hrspaltige-formulare

Gruß,
Aicha

Hallo Aicha,
vielen Dank für die schnelle Antwort!

Ich habe mir das alles durchgelesen, aber irgendwie tue ich mich bei der Umsetzung schwer. Ich nutze das Template {LESS} Allrounder Version 2, erhältlich >HIER< .
Ich habe mein Formular wie beschrieben auf das mehrspaltige Layout umgestellt.

Nun schaut mein Formular (2 Versionen) so aus: >KLICK<

Ich hätte es gerne so: >KLICK<

• Wie schaffe ich es, dass ich alle meine Felder „sauber“ 2-spaltig bekomme, also dass es keine Verschiebungen gibt?

• Kann ich festlegen auf welche Seite bestimmte Felder kommen?

Liebe Grüße,
Gerhard

Hallo,

ok, also normalerweise lade ich mir nicht die Templates runter, die Visforms Nutzer verwenden, sondern müsste schon einen Blick auf das Formular selbst werfen können, damit ich mir den HMTL Quellcode und das tatsächlich verwendete CSS ansehen kann.

Ich fand aber, dass der Link zum Template interessant aussah, also hab ich das Template mal installiert. Interessant! Ich glaube das schaue ich mir irgendwann mal genauer an.

Natürlich kann ich, ohne deine konrkete Seite zu sehen, nicht so viel sagen, wie wenn ich die Seite sehen könnte, aber da sie ja nur lokal bei dir läuft......

Ich vermute, dass du in deinem Formular "bedingte Felder" eingebaut hast (Vorname, Nachname versus Firmenname, Ansprechpartner).

Die Verwendung von bedingten Feldern im Mehrspaltigen Layout ist zwar prinzipiell möglich aber nicht überall einfach so.

Die Felder die in einer Zeile stehen haben eine bistimmte Breite (die wird vom Bootstrap Grid berechnet) und sie werden alle nach links gefloatet, d.h. sie rutschen so weit wie möglich nach links. Hierbei hat im Bootstrap Grid das ganz links stehende Feld keinen Rand auf der linken Seite, während alle folgenden durch einen Rand auf der linken Seite optisch ein bisschen Abstand zum Vorgänger erhalten.

Wenn du in einer Zeile links ein bedingtes Feld stehen hast, dann wird dieses mit CSS versteckt, d.h. es nimmt in der Breite keinen Platz mehr ein und das Feld rechts daneben rutsch (weil es gefloatet ist) einfach nach links. Aber dieses zweite Feld hat ja den linken Rand und deshalb sieht es nun etwas verschoben aus. Ich glaube, das ist der Effekt, den du auf einer Seite hast.

Du kannst schon prinzipiell mit dem mehrspaltigen Layout auch bedingte Felder verwenden, aber ich denke du musst es so aufbauen, dass alle Felder in einer Zeile immer gleichzeitig versteckt oder alle gleichzeitig angezeigt werden.

D.h. du musst das Feld wo der Typ augewählt wird so breit machen, dass die bedingten Felder (Vornamen, Nachname) auf jeden Fall immer in der nächsten Zeile stehen müssen. Am besten gibst du ihm die Bootstrapbreite von 12 (Auf dem Tab "Erweitert", links unten die Listbox). Den Feldern Vorname und Nachname gibst du die Breite von 6. Bei diesen Feldern würde ich die Option "Label verstecken" aktivieren, dann wird das Label als Platzhalter im Feld angezeigt. Das sieht ordentlicher aus. Beide Felder haben bei der "bedingten Anzeige" dieselbe Selektion, so dass sie immer gleichzeitig geschaltet werden

Dann kommen die Felder Firmenname und Anrede, ebenfalls mit einer Breite von 6, Label verstecken und ebenfalls denselben Bedingungen bei bedingter Anzeige.

Mein Tip ist. Fang mit wenig Feldern an und arbeite dich von oben nach unten durch.

Dem "Ihre Nachricht" Feld gibst du wieder eine Breite von 12.

Die Antwort auf deine Frage, ob du festlegen kannst auf welche Seite bestimmte Felder kommen, lautet also: Nein. Die Position ergibt sich aus allen vorherigen Feldern und wann die Reihe, die 12 Einheiten hat, voll ist.

Gruß,
Aicha

Hallo Aicha,
endlich habe ich die Zeit gefunden Deine Tipps umzusetzen.

Administrator schrieb: ok, also normalerweise lade ich mir nicht die Templates runter, die Visforms Nutzer verwenden, sondern müsste schon einen Blick auf das Formular selbst werfen können, damit ich mir den HMTL Quellcode und das tatsächlich verwendete CSS ansehen kann.

VIELEN DANK, dass Du für mich hier eine Ausnahme gemacht hast! Ich bin in diesen Dingen absoluter Laie und wirklich sehr dankbar für jede Hilfe.

Administrator schrieb: Ich vermute, dass du in deinem Formular "bedingte Felder" eingebaut hast (Vorname, Nachname versus Firmenname, Ansprechpartner).

Absolut korrekt.


Danke, für diese ausführliche und dennoch leicht verständliche Erklärung! Ich habe das alles so umgesetzt und es sieht super aus! Ich habe mich dazu entschieden alle Labels zu verstecken… Die Beschriftung in den Feldern selbst gefällt mir sehr gut. Das Formular sieht derzeit nun so aus >KLICK< .

Wäre es jetzt noch möglich die Pflichtfeld-Markierung (*) auch in den Platzhalter zu bekommen? Aktuell befinden sich die roten Sternchen unterhalb der Felder.

Einen schönen Sonntag wünscht
Gerhard

Ich freue mich, dass ich dir helfen konnte und du nun alles wie gewünscht umsetzen konntest.

Nein den Stern bekommst du nicht in den Platzhalter.

Ich habe mich in so einem Fall oft dazu entschieden, das Sternchen bei den Feldern ganz wegzulassen (Formularkonfiguration, Reiter "Erweitert" -> "Required * anzeigen auf "nein" setzen.

Du kannst dann in den Feldoptionen ja einen eigenen Platzhaltertext vergeben und dort den Stern einfach mit reinschreiben, bei den Pflichtfeldern. Die Daten werden auf jeden Fall vor dem Verschicken validiert und die Fehlermeldungen werden gezeigt, egal wie du die Formularoption für die Anzeige des Sterns einstellst.

Gruß,
Aicha