Kontaktformular

[Maiurb]

Hallo,

was muss ich tun, damit ich die Checkbox rechts neben den Text ausrichten kann?
Siehe 093B3829-1B03-4F16-865B-CC1C7C35E904.jpeg

Danke

[mlweb]

Mit css festlegen, dass die Elemente z.B. gefloatet werden oder Flexbox bzw. css-grid verwenden. Unter Umständen funktioniert auch display: inline.
Konkret kann man nur mit einem Link etwas empfehlen.

[Maiurb]

Konkret kann man nur mit einem Link etwas empfehlen.

Hier der Link:

https://boulderrausch.de/kontakt-bouldern.html

[mlweb]

Ich weiß nicht welche Contao-Version Du verwendest, aber mir sind die vielen fieldsets im Code etwas suspekt. Die stören beim stylen. Ist das ein Originaltemplate oder wurde dort etwas angepasst?

[Samson1964]

Standardmäßig ist der Text immer rechts neben der Checkbox, zumindest in Contao 4. Erst folgt das input-Tag, danach das label-Tag. Ein legend-Tag gibt es meines Wissens in C4 nicht mehr. Außerdem hast Du bei Dir das Label auf font-size:0 gesetzt, weswegen der Text Datenschutz rechts neben der Checkbox nicht zu sehen ist.

Meine Variante:

<div class="widget widget-checkbox mandatory">
<fieldset id="ctrl_223" class="checkbox_container mandatory">
<input name="datenschutz" value="" type="hidden">
<span>
<input name="datenschutz" id="opt_223_0" class="checkbox" value="Ich erkenne die Datenschutzerklärung des xxx an." required="" type="checkbox">
<label id="lbl_223_0" for="opt_223_0">Ich willige ein, dass der xxx die von mir übermittelten Informationen und Kontaktdaten dazu verwendet um mit mir in Verbindung zu treten,
hierüber zu kommunizieren und meine Anfrage abzuwickeln. Dies gilt insbesondere für die Verwendung der E-Mail-Adresse zum vorgenannten Zweck.
Ich bin damit einverstanden, dass die Daten meiner Anfrage dauerhaft gespeichert werden. Die Datenschutzerklärung kann <a href="datenschutzerklaerung.html">hier</a> eingesehen werden.</label>
</span>
</fieldset>
</div>

Ergänzung: Im BE habe ich dem Feld datenschutz keine Feldbezeichnung gegeben. Bei den Optionen steht bei Wert das "value" und bei Bezeichnung das "label" für das Formular. Ursprünglich hatte ich bei Wert/Bezeichnung dasselbe zu stehen. Das funktioniert aber nicht, weil im Wert-Feld keine HTML-Tags stehen dürfen. Deshalb gibt es ein verkürztes Wert-Feld.

[Maiurb]

Standardmäßig ist der Text immer rechts neben der Checkbox, zumindest in Contao 4. Erst folgt das input-Tag, danach das label-Tag. Ein legend-Tag gibt es meines Wissens in C4 nicht mehr. Außerdem hast Du bei Dir das Label auf font-size:0 gesetzt, weswegen der Text Datenschutz rechts neben der Checkbox nicht zu sehen ist.

Meine Variante:

<div class="widget widget-checkbox mandatory">
<fieldset id="ctrl_223" class="checkbox_container mandatory">
<input name="datenschutz" value="" type="hidden">
<span>
<input name="datenschutz" id="opt_223_0" class="checkbox" value="Ich erkenne die Datenschutzerklärung des xxx an." required="" type="checkbox">
<label id="lbl_223_0" for="opt_223_0">Ich willige ein, dass der xxx die von mir übermittelten Informationen und Kontaktdaten dazu verwendet um mit mir in Verbindung zu treten,
hierüber zu kommunizieren und meine Anfrage abzuwickeln. Dies gilt insbesondere für die Verwendung der E-Mail-Adresse zum vorgenannten Zweck.
Ich bin damit einverstanden, dass die Daten meiner Anfrage dauerhaft gespeichert werden. Die Datenschutzerklärung kann <a href="datenschutzerklaerung.html">hier</a> eingesehen werden.</label>
</span>
</fieldset>
</div>

Ergänzung: Im BE habe ich dem Feld datenschutz keine Feldbezeichnung gegeben. Bei den Optionen steht bei Wert das "value" und bei Bezeichnung das "label" für das Formular. Ursprünglich hatte ich bei Wert/Bezeichnung dasselbe zu stehen. Das funktioniert aber nicht, weil im Wert-Feld keine HTML-Tags stehen dürfen. Deshalb gibt es ein verkürztes Wert-Feld.

Hallo, ich benutze noch die alte Version: 3.5.31.

Wo finde ich denn den Code aus dem Kontaktformular, ich meine in welchem Template etc kann ich diesen aufrufen/bearbeiten?
Das Formular war ja schon da und ich habe meine Änderungen nachträglich im BE eingestellt.

[Samson1964]

Übernehme doch einfach den Vorschlag aus meiner Ergänzung. Sollte in 3.5 nicht anders sein. Das label-Tag folgt in Deinem/meinem Formular nach dem input-Tag.

[Maiurb]

Übernehme doch einfach den Vorschlag aus meiner Ergänzung. Sollte in 3.5 nicht anders sein. Das label-Tag folgt in Deinem/meinem Formular nach dem input-Tag.

Würde ich ja, aber wie ich bereits geschrieben hatte, weiß ich nicht wo ich den Code im BE finde.

[Samson1964]

Du arbeitest noch nicht lange mit Contao?! Gehe unter Inhalte -> Formulargenerator und bearbeite dort das Checkbox-Menü Deines Kontaktformulars. So sieht die Eingabemaske in 3.5 aus, ergänzt mit Beispielen aus meiner Ergänzung:



Edit: Ganz vergessen. Natürlich ein Häkchen bei Pflichtfeld rein.

[Maiurb]

Du arbeitest noch nicht lange mit Contao?! Gehe unter Inhalte -> Formulargenerator und bearbeite dort das Checkbox-Menü Deines Kontaktformulars. So sieht die Eingabemaske in 3.5 aus, ergänzt mit Beispielen aus meiner Ergänzung:



Edit: Ganz vergessen. Natürlich ein Häkchen bei Pflichtfeld rein.

Ich bin der Endkunde, nicht der Ersteller dieser Webseite und kleine Änderungen versuche ich selbst durchzuführen.

Ich weiß wo das Formular im BE zu finden ist.
Was ich aber nicht weiß, wo kann ich den HTML-Code anpassen, nicht das Formular.

Wenn ich das im BE so umsetze, wie du schreibst, dann passiert gar nichts. Auf der Webseite wird weder die Checkbox, noch der Text angezeigt.

[mlweb]

Ich hatte mich ja schon weiter oben etwas über den erzeugten Code (verschachtelte fieldsets) gewundert. Wenn dort angepasste Templates im Einsatz sind, ist in dem Fall der Ersteller der Website vielleicht doch der geeignete Ansprechpartner.

Wenn ich @Samson1964 richtig verstanden habe (getestet habe ichs gerade nicht), dann ist das was er beschreibt der Originalcode den Contao erzeugt, wenn keine angepassten Templates im Einsatz sind.

[Samson1964]

Was ich aber nicht weiß, wo kann ich den HTML-Code anpassen, nicht das Formular.

An das HTML mußt Du ja gar nicht ran. Das CSS reicht ja.

Wenn ich das im BE so umsetze, wie du schreibst, dann passiert gar nichts. Auf der Webseite wird weder die Checkbox, noch der Text angezeigt.

Aktuell sehe ich was auf Deiner Seite. Ist aber das legend-Feld. Das Label wird bei Dir deswegen nicht angezeigt:

.ce_form label {
	width: 0;
	height: 0;
	font-size: 0;
	position: absolute;
	overflow: hidden;
}

Breite, Höhe, Schriftgröße - alles 0...

[Maiurb]

Also heißt das im Klartext, ich benutze ein angepasstes Template und dadurch wird das Formular nicht richtig angelegt.
Denn was Samson1964 schreibt, wird bei mir ja nicht sauber umgesetzt, da die Checkbox und der Text nicht angezeigt wird.
Obwohl das Formular ja richtig dargestellt wird, eben nur nicht die nachträglich hinzugefügte Checkbox+Text.

Auf was bezieht sich eigentlich "Standard" und "Gruppe"?

[Samson1964]

Also heißt das im Klartext, ich benutze ein angepasstes Template und dadurch wird das Formular nicht richtig angelegt.

Kann sein. Mußt Du unter Layout -> Templates schauen. Dein Formular sieht aber nicht viel anders als das Standardformular aus.

Denn was Samson1964 schreibt, wird bei mir ja nicht sauber umgesetzt, da die Checkbox und der Text nicht angezeigt wird.
Obwohl das Formular ja richtig dargestellt wird, eben nur nicht die nachträglich hinzugefügte Checkbox+Text.

Ich zitierte ja schon Dein CSS, welches das Anzeigen des Textes verhindert. Das hat nichts mit dem Template zu tun.

Auf was bezieht sich eigentlich "Standard" und "Gruppe"?

Standard ist soweit ich mich erinnere: Checkbox ist angehakt.
Gruppe: Checkboxen werden zu einer Gruppe zusammengefaßt und man kann nur eine oder eine bestimmte Anzahl dieser Gruppe aktivieren.

[Maiurb]

Ich zitierte ja schon Dein CSS, welches das Anzeigen des Textes verhindert. Das hat nichts mit dem Template zu tun.

Also das heißt, mein CSS verhindert die Anzeige, da bei den Werten ".ce_form label" alles auf 0 steht?
Das CSS wurde natürlich vom Ersteller angepasst. Jetzt muss ich heraus finden, was ich im CSS ändern muss, habe es gerade vor mir.
Denn am Templates kann es nicht liegen.

[Samson1964]

Mit rechter Maustaste im Browser (an der richtigen Stelle) und "Element untersuchen" im Kontextmenü kannst Du temporär am CSS herumexperimentieren. Ich würde alles rauswerfen bei .ce_form label oder höchstens noch ein display:inline dazusetzen. Wenn Du mit Experimentieren fertig bist, kannst Du die Änderungen in der entsprechenden CSS-Datei (oder wo immer das auch verwaltet wird, vielleicht unter Themes -> CSS) verewigen.

[Maiurb]

Komme leider nicht weiter.

Ich möchte ja nur das hier, wie im Anhang dargestellt.
Das normale Formular erzeugt leider keine Checkbox+Text.

Das Formularfeld mit Checkbox im Bild, wie wurde das denn erzeugt?

BC7AD4C3-3CED-4834-A691-1483600058F7.jpeg

VG Maik

[Samson1964]

Schaue Dir mit "Element suchen" aus dem Kontextmenü das CSS von der Checkbox des Kontaktformulars an. Das kannst Du dann sicher übernehmen. Das HTML sollte gleich aufgebaut sein.

[Maiurb]

Schaue Dir mit "Element suchen" aus dem Kontextmenü das CSS von der Checkbox des Kontaktformulars an. Das kannst Du dann sicher übernehmen. Das HTML sollte gleich aufgebaut sein.

Wohin übernehmen. Ich habe ja kein HTML zur Auswahl.

<label id="lbl_notify_0" for="opt_notify_0">Über neue Kommentare per E-Mail benachrichtigen</label>

Die Frage ist doch, warum funktioniert die Checkbox nicht im Formular?

[Bennie]

Anscheinend wurden doch die labels per css ausgeblendet. Ich würde im Formulargenerator jetzt einfach mal die Feldbezeichnungen rausnehmen und das

.ce_form label {
	width: 0;
	height: 0;
	font-size: 0;
	position: absolute;
	overflow: hidden;
}

mal auskommentieren oder rausnehmen.
Du möchtest doch ein Formular was die Platzhalter nutzt um die einzelnen Eingabefelder zu bezeichnen, richtig?

Nebenbei bemerkt halte ich eine Ckeckbox bei diesem einfachen Formular für unnötig - dazu gibt es aber anscheinend andere Auflassungen - warum auch immer.

[Maiurb]

Anscheinend wurden doch die labels per css ausgeblendet. Ich würde im Formulargenerator jetzt einfach mal die Feldbezeichnungen rausnehmen und das

Feldbezeichnung war gar nicht gesetzt.
Ich seh schon, es ist komplizierter als gedacht, in ein bestehendes Formular, eine Checkbox+Text, nachträglich einzubauen. ???

[Samson1964]

Ich seh schon, es ist komplizierter als gedacht, in ein bestehendes Formular, eine Checkbox+Text, nachträglich einzubauen. ???

Wenn man sich mit HTML, CSS und der Grundstruktur von Contao auskennt, ist das kein Problem. Evtl. muß man noch wissen was FTP ist, wenn man (CSS-)Dateien direkt auf dem Server bearbeiten muß.

Du hast ja kein Einbauproblem im BE, sondern ein CSS-Problem.

[Bennie]

Doch sind sie, sieht man ja im Quelltext.
Du bist aber nicht versehentlich in einem anderen Formular?

@Frank
es ist nicht nur ein css Problem, denn die labels sind ja gesetzt sollen sie aber doch anscheinend nicht, sonst hätte man ja nicht diesen Weg des Ausblendens gewählt , oder??

[Maiurb]

...Grundstruktur von Contao auskennt, ist das kein Problem. Du hast ja kein Einbauproblem im BE, sondern ein CSS-Problem.

Genau daran scheitert es gerade, da ich im Contao gerade mal das BE nutze.
Es gab aber auch mal ein Leben vor Contao und da habe ich alles selber machen müssen,können.

Abschließend, dass CSS verhindert momentan die richtige Darstellung im Formular???

Das ist der generierte Code.

<div class="widget widget-checkbox mandatory">
<fieldset id="ctrl_12" class="checkbox_container mandatory">
<input type="hidden" name="Datenschutz" value="">
<span><input type="checkbox" name="Datenschutz" id="opt_12_0" class="checkbox" value="test" checked required> <label id="lbl_12_0" for="opt_12_0">test test</label></span>
</fieldset>
</div>

[Samson1964]

Abschließend, dass CSS verhindert momentan die richtige Darstellung im Formular???

Genau. Der damalige Ersteller der Website hat sich gedacht, den label-Tag mit CSS unsichtbar zu machen. Warum auch immer.
Jetzt mußt Du herausfinden, wo das CSS gespeichert wird. Und dort kannst Du die Regel für ".ce_form label" einfach löschen. Danach steht das Label/Bezeichnung wieder rechts neben der Checkbox.

[Bennie]

Danach steht das Label/Bezeichnung wieder rechts neben der Checkbox

Aber auch über den anderen Feldern - das war ja anscheinend ursprünglich nicht gewollt aus Designgründen

[Maiurb]

Doch sind sie, sieht man ja im Quelltext.

“Feldbezeichnung” ist leer.

638121C4-A17A-4F8C-AD2E-65A98AF41C3D.jpeg
01865DB9-6787-4F1C-BA59-071DD08432A0.jpeg

[Maiurb]

Genau. Der damalige Ersteller der Website hat sich gedacht, den label-Tag mit CSS unsichtbar zu machen. Warum auch immer.
Jetzt mußt Du herausfinden, wo das CSS gespeichert wird. Und dort kannst Du die Regel für ".ce_form label" einfach löschen. Danach steht das Label/Bezeichnung wieder rechts neben der Checkbox.

Jetzt habe ich es verstanden.
Er hatte bestimmt seine Gründe, wie Benny schreibt.

Gibt es jetzt noch einen Weg, für die eine Checkbox, dieses wieder sichtbar zu machen?

[Bennie]

Ja aber die Feldbezeichnungen der anderen EIngabefeldern sind gesetzt. Das meinte ich, nicht Deine Checkbox.
Der Grund für diese css Angabe war wohl dass man das Label zwar eingerichtet aber nicht sichtbar haben wollte - das stört jetzt dein Vorhaben. Im Grunde ein kleines Problem.

Kommst DU nicht über die Dateiverwaltung an das css?

[Samson1964]

Aber auch über den anderen Feldern - das war ja anscheinend ursprünglich nicht gewollt aus Designgründen

Dann wäre das Hinzufügen von

.ce_form .widget-checkbox label {
    width: 100%;
    height: auto;
    font-size: 12px;
    position: static;
}

eine Lösung. Das muß nach dem ".ce_form label" kommen!

Mit Quelltext ist übrigens die Quelltextansicht Deiner Webseite gemeint, nicht die Einstellungen im BE.

[Bennie]

Aber auch da muss er ja ans css . Das ist doch anscheinend das eigentliche Problem.

[Maiurb]

Danke für den Codeschnipsel.

Das CSS liegt wohl hier: <link rel="stylesheet" href="assets/css/cb94d64546cf.css"> und da komme ich nur über FTP von Zuhause dran.
Werde später mal nachschauen, ob ich den Code einbauern kann.

[Bennie]

Das css file ist das was Contao ausgibt, das Ursprungs CSS liegt irgendwo im "files" Ordner - da musst Du schauen!!
Das was Du da bearbeiten willst bringt nichts da das immer wieder neu erstellt wird - wie gesagt in "files" nachsehen

[Maiurb]

Dann wäre das Hinzufügen von

.ce_form .widget-checkbox label {
    width: 100%;
    height: auto;
    font-size: 12px;
    position: static;
}

Habe das jetzt erfolgreich umsetzen können. Danke dafür.

Was mich jetzt noch stört, ist die Formatierung, siehe Bild.
Der Text ist nicht auf gleicher Höhe wie die Checkbox und der Sendenbutton müsste weiter nach unter, sodass ein Abstand vorhanden ist.

Unbenannt.png

[mlweb]

Schau an. Jetzt sind auch die verschachtelten fieldsets weg.

Für den Abstand zum Asenden-Button musst Du der checkbox bzw. dem Button einen Abstand per css geben, z.B.

.widget-checkbox {
   margin-bottom: 10px;
}

Für den Versatz reicht eventuell schon

.checkbox {
vertical-align: baseline;
}

Falls die Elemente noch an anderer Stelle verwendet werden,muss man ggf. im css spezifischer werden.

[Maiurb]

Schau an. Jetzt sind auch die verschachtelten fieldsets weg.

Für den Abstand zum Asenden-Button musst Du der checkbox bzw. dem Button einen Abstand per css geben, z.B.

.widget-checkbox {
   margin-buttom: 10px;
}

Für den Versatz reicht eventuell schon

.checkbox {
vertical-align: baseline;
}

Falls die Elemente noch an anderer Stelle verwendet werden,muss man ggf. im css spezifischer werden.

Hallo, super, hat funktioniert. Beim oberen Code war nur ein Schreibfehler bei "buttom". Vielen Dank

[mlweb]

Hab es oben geändert.