WebSite X5Help Center

 
J. M. B.
J. M. B.
User

Formatierungsprobleme bei Objekt Kontaktformular  de

Auteur : J. M. B.

Hallo miteinander

Ich versuche gerade das Objekt Kontaktformular so zu konfigurieren, dass darüber Buchungsanfragen verschickt werden können.

Leider musste ich feststellen, dass die Formatierungsoptionen der Feldtypen Mehrfachauswahl und Vertragsbedingungen sehr limitiert sind. Vor allem die fehlende Möglichkeit die Auswahlkästchen selbst auszurichten, finde ich ärgerlich. Je nach Endgerät/Bildschirmgröße hängen sie mal links, mal in der Mitte rum, was völlig willkürlich und unprofessionell aussieht.

Beispielansicht Desktop:

siehe Bilder unten

Beispielansicht Mobil:

siehe Bilder unten

Kennt jemand einen Weg die Position der Kästchen zu beeinflussen, beispielsweise durch einen Eingriff in die Style Sheets? Welche CSS-Datei müsste ich dafür bearbeiten und wo finde ich diese?
Oder hat vielleicht jemand einen Codeschnipsel zur Hand, den ich in der Head-Sektion der Website hinzufügen kann, um das Formular etwas ordentlicher aussehen zu lassen!?

Ich bin für jeden Tipp dankbar!

Sonnigen Gruß

JMB

Posté le
14 RéPONSES
J. M. B.
J. M. B.
User
Auteur

Ich scheine mal wieder einen Fehler beim Einbinden meiner Screenshots gemacht zu haben. Die üblichen BB-Codes funktionieren hier offenbar nicht!? frown 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:

https://s20.directupload.net/images/user/230519/h7nba9zj.png

Beispielansicht Mobil:

Cheers!

JMB

Lire plus
Posté le de J. M. B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

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.

Lire plus
Posté le de Andreas S.
J. M. B.
J. M. B.
User
Auteur

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.

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

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

Gute Nacht rundherum. smile

JMB

Lire plus
Posté le de J. M. B.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

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

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

Text

Kontaktformular

-----

-----

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

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

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

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.

Lire plus
Posté le de Daniel W.
J. M. B.
J. M. B.
User
Auteur

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

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

Lire plus
Posté le de J. M. B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

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

Lire plus
Posté le de Andreas S.
J. M. B.
J. M. B.
User
Auteur

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. smile

Lire plus
Posté le de J. M. B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

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.

Lire plus
Posté le de Andreas S.
J. M. B.
J. M. B.
User
Auteur

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.frown

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


Andreas S.
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.

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. cry


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:

Abstand Überschriften und Inhalt

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

JMB

Lire plus
Posté le de J. M. B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

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;}

Lire plus
Posté le de Andreas S.
J. M. B.
J. M. B.
User
Auteur

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. smile

Danke dir, Andreas!

Lire plus
Posté le de J. M. B.