Design eines eigenen Formulars in joomla

Hallo liebes vi-solutions Team,
ich habe mich nun einige Stunden erfolglos mit der Dokumentation [ www.vi-solutions.de/de/support/dokumenta...kumentation-visforms ] und den dort befindlichen Anleitungen auseinandergesetzt, trotzdem erhalte ich nicht die gewünschten Erfolge. Ich möchte zunächst ein ganz einfaches Formular wie in Euren Beispielen umsetzen [ www.vi-solutions.de/de/demo-meldeformula...sponsive-av:nosubmit ]. Doch bekomme ich weder die Überschriften [z.B. Angaben zur Person] positioniert, noch ist es mir möglich die Größe der Controls zu verändern. Auch mit dem spanX Befehl lassen sich zwar Anpassungen hinsichtlich der Ausrichtung bezwecken, allerdings keine Veränderungen in der Breite und bei Textarea in der Höhe einstellen.

Ich habe bereits alle möglichen Formular Layouts und ERWEITERT ausprobiert. Die Ergebnisse variieren, führen aber nicht zum gewünschten Ergebnis.

Zudem würd eich gerne den Submit Button zentrieren und bei der dem Datenschutz Check den Begriff Datenschutzbestimmungen mit der Unterseite zum DATENSCHUTZ verlinken.

Was habe ich zu tun?

Meine joomla Version ist die 3.9.12 und die vi-solutions subscriptions sind aktualisiert.

Hier der LINK zur Website:

www.drs-kfz-technik.de/index.php/de/kontakt

Viele Grüße
Ruediger

Hallo,

soweit ich das sehe, verwendest du ein Template das mit dem T3 Framework erstellt wurde.
Dieses Template verwendet, soweit ich das sehen kann, im Kern das Bootstrap3 Layout .

Kannst du bitte das Formularlayout auf Bootstrap3 umstellen (z.B. Mehrspaltiges Layout Bootstrap 3)?

spanX sind Bootstrap2 Klassen, die mit Bootstrap3 nicht funktionieren.

Für Bootstrap3 findest du die Anweisungen zum Aufsetzen von mehrspaltigen Formularen hier: www.vi-solutions.de/de/support/dokumenta...ootstrap-3-aufsetzen

Wenn du für den Datenschutz einen Link auf deine Datenschutzseite haben willst, musst du "benutzerdefinierten Text" verwenden. Am besten fügst du oberhalb der Checkbox ein Feld vom Typ "Feldtrenner" ein und gibst den Text mit dem Link dort als "Benutzerdefinierter Text" (auf dem Reiter "Erweitert") ein.

Sag mir Bescheid, wenn das Formularlayout auf Bootstrap3 umgestellt ist, dann sehe ich mir die Seite noch mal an.

Welche visForms Version läuft denn auf der Seite?

Gruß,
Aicha

Hallo Aicha, ich habe das Layout auf Mehrzeiliges Bootstrap3 umgestellt. Es sieht schon ein wenig besser aus Doch wie kann ich die Länge der Eingabefelder verändern?

Das mit dem Datenschutz habe ich dank Deiner Anweisungen auch umsetzen können.

Installiert habe ich Visforms Version 3.12.10

Schau' doch bitte mal, ob Du noch weitere Infos und Tipps für mich hast.

Lieben Dank - Rüdiger

Hallo Rüdiger,
das CSS deines Templates (templates.tx_gen.less.forms.less.css) enthält diese Regeln ab Zeile 204

@media screen and (min-width: 768px)
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .inputbox {
width: auto;
}

Und das Template CSS in templates.tx_gen.less.bootstrap.less.css gleich noch mal ab Zeile 1738

Dieses CSS verursacht dein Problem.

Letztlich musst du das mit eigenem CSS, das einen stärkeren Selector verwendet überschreiben.
Einen stärkeren Selektor erhälst du, indem du vor jeden Selektor in der Auflistung .visform davor schreibst. (Die einzelnen Selektoren sind durch Komma getrennt). Input-Typen, die visForms nicht kennt, kannst du weglassen.

Also:

@media screen and (min-width: 768px)
.visform select, .visform textarea,.visform input[type="text"], .visform input[type="password"], .visform input[type="date"],.visform input[type="number"], .visform input[type="email"],.visform input[type="url"], .visform .inputbox {
width: 100%;
}
Wie du das eigenen CSS so integrieren kannst, dass es von visForms genutzt wird ist in der Dokumentation beschrieben: www.vi-solutions.de/de/support/dokumenta...out-mit-css-anpassen

Danach sollte es besser aussehen.

Bei der Textarea, solltest du die Größe auch über die Col und Row Optionen in der Feldkonfiguration einstellen können.

Gruß,
Aicha