Ich scheine mal wieder einen Fehler beim Einbinden meiner Screenshots gemacht zu haben. Die üblichen BB-Codes funktionieren hier offenbar nicht!? Könnte einer der Mods die Links bitte korrigieren und diesen Beitrag dann killen?

Für alle Fälle noch ein Versuch über das Bildsymbol im Menü des Editors. Ich hoffe, die Fotos lassen sich auch bei dieser Methode anklicken und vergrößern ...

Beispielansicht Desktop:

Beispielansicht Mobil:

Cheers!

JMB

Da diese "Kontrollkästchen" (Checkboxen) zu 99% vom jeweiligen Browser beeinflusst werden, denn bei jedem BRowser schauen sie etwas anders aus, können diese nur mit speziellen CSS Code beeinflusst werden.

Hast du die Mehrfachauswahl auf 50% gestellt?  Willst du diese Checkboxen ganz links haben?  Wenn dann müsste man dies mal Online sehen.

Danke Andreas!

Das Aussehen der Checkboxen bzw. Kästchen ist zweitrangig für mich, mir geht es nur um die Positionierung. Im konkreten Fall fände ich es am schönsten, wenn die Kästchen zusammen mit dem Text daneben zentriert wären – also beides zusammen als Einheit, ungefähr so, wie es gerade (zufälligerweise) auf dem Smartphone aussieht. Aber vermutlich ist es gar nicht möglich, das in allen Ansichten gleichzeitig zu erreichen!?

Da sich die oberen Checkboxen und die Checkbox unten synchron verschieben, liegt wohl eine Art Tabelle hinter dem Formular, oder? Das erschwert es vermutlich. Zumindest hat jeder meiner bisherigen Versuche, die Auswahl-Elemente per CSS in einer Ansicht optimal zu positioneren, zu einer völlig verschobenen Platzierung in den anderen Ansichten geführt. Grmpf.

Klar, ganz links wäre auch okay, wenn das einfacher ist.
Eine Online-Fassung bereite ich gerne vor, kein Problem.

Gute Nacht rundherum.

JMB

Habe mal mit WebSite X5 das Formular nachgebaut, bei mir sieht es so aus, siehe

----- Objekte im Raster in WebSite X5 -----

Text

Kontaktformular

-----

-----

Meine Testseite des Kontaktformulars für eigene Online-Tests.

>> http://finde-links.de/test123-hgbild-css/kontaktformular.html (nur eine Test-Domain)

Das Zentrieren von Mehrfachauswahl und Zustimmen-Kästchen ist etwas für die CSS-Experten.

Mein Versuch hat zwar die Mehrfachauswahl zentriert, aber auch den unteren Teil verschoben

Beim Kontaktformular im Reiter "Stil" die Auswahl "Beschriftung über den Feldern anzeigen" ausgewählt.

Bei "3 Sitemap" die Seite mit dem Kontaktformular markieren, oben "Eigenschaft" anklicken und im Reiter "Erweitert" diesen Code für zentrierte Mehrfachauswahl und Zustimmen-Box einfügen, siehe

-----

<style>
.imObjectForm_15_1_checkbox, .imObjectFormAgreementCheckboxWrapper {
display: flex;
justify-content: center;
}
</style>

-----

Meine Testseite habe ich geändert, Link siehe oben.

Für die Auswahl "Beschriftung innerhalb der Felder anzeigen" müssten die CSS-Experten einen Code bereit stellen, denn bei meinem Code verschiebt sich sonst der untere Teil des Formulars.

Mensch, Daniel, so spät in der Nacht noch so ein Einsatz. Sehr cool! Vielen herzlichen Dank!

Ich versuche deinen Aufbau nachzuvollziehen bzw. zu übertragen und melde mich anschließend wieder.

Der Code wird aber bei dir nicht funktionieren, weil der auf Daniels Email Objekt zugeschnitten ist. Deshalb die Frage nach deinem Projekt Online.

Meinst du wegen der erwähnten Platzierung der Texte außerhalb der Formularfelder? Oder wegen der genauen Benennung des Checkbox-Codes (.imObjectForm_15_1_checkbox)? Wenn ich herausfinde, welche Ziffer in meinem Fall zutrifft, müsste der CSS-Eingriff aber wirken, oder?

Eine Online-Ansicht erstelle ich in jedem Fall noch.

JA, wenn du dich ein bisschen auskennst, kannst du deinen Selektor (Nummer) rausfinden. Der Code geht aber nur wenn die Beschriftung ausserhalb der Felder ist.

So, nun stehen zwei auf das Nötigste abgespeckte Varianten der Seite online.

Bei der ersten Version habe ich mich an der Zentrierung des Auswahlfelder mittels CSS versucht, was jedoch nicht dasselbe Ergebnis wie bei Daniel ergeben hat; vielmehr sind nun alle Zeilen für sich zentriert, was natürlich reichlich albern aussieht und nicht gerade bedienfreundlich ist:
https://kurzelinks.de/formular-01

Ich vermute, das liegt daran, dass ich gleich drei Instanzen der Mehrfachauswahl nebeneinander platzieren musste, da das Formular die einzelnen Buchungspositionen in der Smartphone-Ansicht sonst falsch anordnet: Aus der Reihenfolge Kategorie 1 (a-d), Kategorie 2 (a-d), Kategorie 3 (a-d) wird dann 1a, 2a, 3a, 1b, 2b, 3b usw.

Bei der zweiten Version habe ich die Listen mit den Auswahlfeldern linksbündig gelassen und nur die Checkbox unter dem AGB-Hinweis zentriert. Gefällt mir ganz gut so und ist vermutlich auch übersichtlicher; ich denke, ich übernehme es so:
https://kurzelinks.de/formular-02

Danke, darauf hatte Daniel ja auch schon hingewiesen. Ich verstehe es nicht. Ist das ein Bug oder hat Inco hier einfach nachlässig gearbeitet?
So oder so finde ich willkürliche Abweichungen wie diese extrem nervig, da sie die Gestaltungsmöglichkeiten doch erheblich einschränken. Nicht nur, dass mir die Platzierung der Titel innerhalb der Felder wesentlich besser gefallen hätte, ich musste auch die kleinen Hinweise neben der Terminwahl und dem Couponfeld streichen, da diese wegen der größeren Zeilenhöhe in der Smartphone-Ansicht nun viel zu viel Anstand zu den Feldern einnehmen.
Die ersatzweise hinzugefügten Quickinfos wiederum lassen sich aus irgendeinem Grund nur oberhalb der Felder einblenden, nicht rechts davon, wo jede Menge Platz wäre. Dabei habe ich das Verhalten unter 2 > Vorlage > Quickinfo ausdrücklich so konfiguriert!

Meines Erachtens sollte das Kontaktformular-Objekt mal einer gründlichen Aktualisierung unterzogen werden, zumal es auch noch andere Limitierungen mitbringt.

Eine abschließende Frage: Kann ich den vertikalen Abstand zwischen den Kategorien in der Smartphone-Ansicht per CSS etwas erhöhen? Wenn ja, wie?
Meine Versuche per margin und padding haben lediglich die Zeilenhöhe zwischen allen Checkboxen aufgeblasen, mit geht es aber nur darum, dass die Überschriften (Kategorie 2, Kategorie 3) etwas deutlicher von den vorangehenden Blöcken abgesetzt sind.

Hier ein Screenshot vom jetzigen Zustand:

Vielen Dank für eure Unterstützung & einen schönen Sonntag

JMB

Bei der Vatriante 1 müsstest du diesen Code verwenden, damit es linksbündig angezeigt wird.

<style>

.imObjectForm_155_1_checkbox, .imObjectForm_155_2_checkbox, .imObjectForm_155_3_checkbox {justifed-content: left!important;}

</style>

Bei Problem mit dem Abstand der KAtegorien sollte dieser code helfen!

#imObjectForm_155_3_label, #imObjectForm_155_2_label {margin: 20px 0!important;}

Nun, nachdem die Eingabehinweise nicht mehr innerhalb der Formularfelder stehen, sondern darüber, sind die Checkboxen und die danebenstehenden Texte ja sowieso linksbündig ausgerichtet. Daher ist der erste Code nicht notwendig.

Der zweite Code hat leider nicht funktioniert, mich aber auf die richtige Spur gebracht. Letzten Endes musste der folgende Selektor angesprochen werden:

<style>

#imObjectForm_155_1_field, #imObjectForm_155_2_field {padding-bottom: 20px!important;}

</style>

Jetzt sind die Auswahlgruppen in der Smartphone-Ansicht wie gewünscht etwas mehr voneinander abgesetzt.

Danke dir, Andreas!