Kontaktformular

[c.stege]

Guten Abend,

ich sah beim Erstellen eines Kontaktformulares, dass in Contao 4 die Spalten als DIV´s dargestellt sind anders als bei Contao 3 dort waren es noch Tabellenspalten.
Ich möchte nun eine feste Breite an ein label Tag vergeben, welches in dem DIV des Feldes ist, doch das label Tag nimmt keine feste Breite an.
Wie schaffe ich es ein vernünftiges und ordentliches Kontaktformular zu erstellen (Stichwort: Einrückung) ohne großen Aufwand?

[MacKP]

Hallo c.stege,
ich weiß nicht was du da für ein Problem hast. Ohne Link kann man dir da auch nicht wirklich helfen.
Eventuell kannst du dir da aber ein wenig von der Demo abschauen: https://demo.contao.org/en/ Dort ist zum Beispiel ein Formular für den Login. Dort solltest du dir das abschauen können, wie es gehen kann.

Viele Grüße

[Fehrmann]

Hi,

ich würde vermuten, das sich hier auf CSS bezogen wird. Das Label-Tag ist ein Inline-Element, welchem keine feste Breite zugewiesen werden kann. Ein 'display: block' für das Label-Tag könnte hilfreich sein.

Viele Grüße
René

[c.stege]

Vielen Dank für die hilfreichen Antworten.
Die Beschreibung des Feldes und das Input Feld sind nun untereinander.
Gibt es noch eine andere Lösung, um ein Kontakformular geordnet darzustellen wie z.B. die Input Felder rechts neben der Beschreibung angeordnet sind

MfG

[Fehrmann]

Hi,

dir fehlen scheinbar einige CSS-Basics. Die Stichworte für dich in diesem Fall sind Block-Elemente und Floating. (sprich display: block; und float: left

Viele Grüße
René

[Andreas]

display:block; kann man sich sparen bei float:left;. Das wird durch das float automatisch zu block.

Typische Lösungen:

inline-block

.widget label {
	display: inline-block;
	vertical-align: top;
	min-width: 200px;
}

float

.widget label {
	float: left;
	min-width: 200px;
}

flexbox

.widget {
	display: flex;
}
.widget label {
	min-width: 200px;
}

[Fehrmann]

display:block; kann man sich sparen bei float:left;. Das wird durch das float automatisch zu block.

Typische Lösungen:

inline-block

.widget label {
display: inline-block;
vertical-align: top;
min-width: 200px;
}

float

.widget label {
float: left;
min-width: 200px;
}

flexbox

.widget {
display: flex;
}
.widget label {
min-width: 200px;
}

Wow. Das mit dem automatischen Blockelement bei Floats wusste ich nicht und ich bin schon eine Weile dabei. Wohl eine Gewohnheitssache.

Danke Andreas

Gesendet von meinem SM-T810 mit Tapatalk

[bteppan]

Hallo!
Nachdem ich seit kurzem meine Website von C3 nach C4 update ist mir aufgefallen, dass die Option 'Tabellenloses Layout' nicht mehr im BE ausgewählt werden kann.
Ich habe daher das gleiche Problem wie der Thread-Ersteller.
Label und Text-Feld sind untereinander statt (wie gewünscht) nebeneinander (linke Spalte = Labels & rechte Spalte = Textfelder).
Zu fragen warum man diese praktische Funktion im BE-Kontaktformulargenerator ausgebaut hat, erübrigt sich hier wahrscheinlich! Sorry!

Ich verwende bei meiner Seite das Opensauce-Theme von RockSolid und habe über die 'custom.css' auch einige individuelle Anpassungen vorgenommen.
Ich nehme an, dass mein gewünschtes 'Kontaktformular-Layout' (zweispaltig) auch dort vorgenommen werden kann.

Mit dem von Andreas angegeben 'float' Befehl tut sich bei mir allerdings nichts.
Was mach ich falsch oder wie muss ich korrekt vorgehen?

Sorry, bin jetzt nicht so der CSS-Experte. Hab mir mein bisheriges Wissen 'autodidakt' beigebracht.

Danke schon jetzt für den vieleicht entscheidenen Tipp.

Übrigens: Ich finde das neue Contao 4 super - auch wenn ich nun solche Kleinigkeiten noch 'lernen' muss.
Danke an die Entwickler!

Schöne Grüße
Bernhard

[rusty]

Die Eingabefelder können sich nur neben den Labels anordnen, wenn horizontal genügend Platz zur Verfügung steht. Vielleicht ist in deinem Theme eine Breitenangabe für die Eingabefelder enthalten? Versuch doch mal, deren Breite mit

width

zu reduzieren.
Besser kann man helfen, wenn du einen Link postest.

[bteppan]

Das ist meine aktuelle Seite unter C3.5 - meine 'Wunschdarstellung': http://sgk.koestenberg.at/kontakt.html
Das ist nun die C4.4 Version: http://cm44.koestenberg.at/kontakt.html

[rusty]

.widget {
    display: flex;
    flex-wrap: wrap;
}
.main-content label {
    width: 11em;
}
.main-content input, 
.main-content textarea {
    flex: 1 0 20em;
}

Auf kleinen Bildschirmen stellen sich die Elemente damit automatisch untereinander.
Die Klasse .main-content ist nur für dein Theme relevant, für andere Themes bitte weglassen.

[bteppan]

Super - funktioniert !!!
Danke Dir

[Andreas]

Zu fragen warum man diese praktische Funktion im BE-Kontaktformulargenerator ausgebaut hat, erübrigt sich hier wahrscheinlich! Sorry!
...
Mit dem von Andreas angegeben 'float' Befehl tut sich bei mir allerdings nichts.
Was mach ich falsch oder wie muss ich korrekt vorgehen?

Formulare in Tabellen hat wohl sowieso so gut wie kein Entwickler benutzt. Ich vermute, weil ein Formular nicht wirklich tabellarische Daten enthält wurde es dann entfernt. Außerdem hat man ohne Tabellen mehr Spielraum mit CSS, z.B. was Responsiveness betrifft.

Das Beispiel mit dem float funktioniert auch auch deiner Seite. Warum das nicht ging, das hätten wir auf der Seite analysieren können. Aber bleibe lieber bei der Flexbox, das ist moderner und leicht handzuhaben.