1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Mehrfachauswahl (Checkboxen) untereinander darstellen

Dieses Thema im Forum "Design" wurde erstellt von angelika_schnopp, 10. August 2021.

  1. angelika_schnopp

    Registriert seit:
    22. April 2021
    Beiträge:
    15
    Zustimmungen:
    0
    Hallo liebe Community,

    ich habe folgendes Problem: Auf meiner Seite gibt es eine Newsletter Anmeldung. Die E-Mail Software dahinter ist von Builderall (sowas wie Mailchimp und co). Mit dem Plugin "MailingBoss WP Plugin" kann man die Listen dann hineinziehen. Das funktioniert auch tadellos. Jedoch gibt es keine Möglichkeiten zum Einstellen der Formatierung. Deswegen habe ich selbst einen CSS Code geschrieben, der auch funktioniert.
    Nur auf eines komme ich einfach nicht drauf: Es gibt neben klassischen Textfeldern (zB für den Namen), die Möglichkeit einer Mehrfachauswahl (Checkboxen). Leider wird die 1. Auswahlmöglichkeit direkt neben der Bezeichnung angezeigt (siehe Screenshot). Ich würde sie gerne untereinander darstellen und kein Code, den ich probiere funktioniert. Außerdem würde ich gerne noch etwas Platz zwischen den Checkboxen und der Bezeichnung haben.

    Hier der Link zu meiner Seite: https://123fitvital.com/gratis-leitfaden/

    Hier ein Bild mit dem Code, den ich geschrieben habe (rot markiert mein Problem):
    Bildschirmfoto 2021-08-10 um 03.14.38.png

    Der Code den ich bisher habe:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ich habe es auch schon mit display: flex probiert, aber dann kommt immer nur das raus:
    Bildschirmfoto 2021-08-10 um 03.21.36.png

    Hat vielleicht von euch jemand eine Idee?
    Vielen Dank schon mal!

    Herzliche Grüße
    Angelika
     
  2. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.737
    Zustimmungen:
    451
    Da du Web-und Mediadesign ausübst, ein Hinweis!
    Wenn du nach der Überschrift ein <br> in der Codeansicht einfügst wird die erste Auswahlzeile richtig umgebrochen.
    Wenn du dem Inputkästchen - input[type="checkbox"], input[type="radio"] - eine margin-links gibst kannst du damit den Abstand regeln!
    :rolleyes:;)
     
  3. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.737
    Zustimmungen:
    451
    ....., was mir noch aufgefallen ist!!!
    upload_2021-8-10_13-51-36.png
     
  4. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.737
    Zustimmungen:
    451
    ..... und eine Font-Einbindung schreit auch um Hilfe:

    upload_2021-8-10_15-58-36.png
     
  5. angelika_schnopp

    Registriert seit:
    22. April 2021
    Beiträge:
    15
    Zustimmungen:
    0
    Danke für deine Antwort.
    Ich hatte vergessen zu erwähnen, dass ich mit Elementor arbeite und somit nicht zum Code-Editor kann, weil die Seite mit Elementor erstellt wurde.
    Ich versuche es sicher nun seit weiteren 2 Stunden, komme aber nicht darauf, wie ich das irgendwie anders lösen könnte.

    Dass das Plugin veraltet ist, weiß ich, leider will meine Freundin (für die ich die Website mache) unbedingt eben Builderall verwenden. Es gäbe auch die Möglichkeit, dass ich einfach nur einen Link einbaue und man dann zu einem externen Formular kommt, diese Lösung möchte ich aber nicht, da ich es nicht gut finde, wenn man von der eigentlichen Seite wegleitet.

    Ist eines meiner ersten Webdesign-Projekte. :confused: Und ich hab mir ziemlich viel davon im letzten Jahr selbst beigebracht, da ich dank Corona einen Plan B brauchte. Deswegen entschuldige bitte, wenn die Frage etwas doof sein sollte. Ich hoffe bitte dennoch, dass du mir eventuell noch einen Tipp geben könntest? :)
     
  6. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.737
    Zustimmungen:
    451
    Im Elementor wird ja wahrscheinlich nur mehr der Token eingegeben, aber das Formular wird offensichtlich im Plugin erstellt.
    Lt Code im Entwicklertool (im Firefox mit F12) sieht man leere classes.
    <lable class"" .....>
    Mit Zuweisung einer class bei der Überschrift und in den Zusätzlichen CSS ein "display: block;" für diese class klappt auch.
    Wie du bei deinem leicht veralteten Plugin eine Class zuweist weiß ich nicht.
    Ggf über ein anderse Formularplugin nachdenken - z.B. CF7 - nicht gewartete Plugins können zu Gefährdungen führen.

    upload_2021-8-10_20-35-9.png
     
    angelika_schnopp gefällt das.
  7. angelika_schnopp

    Registriert seit:
    22. April 2021
    Beiträge:
    15
    Zustimmungen:
    0
    Danke, vielmals. Die leeren classes habe ich im Safari Entwicklertool nicht gesehen. In Firefox jetzt schon, da ist es besser dargestellt. Jetzt wo ich es weiß, sehe ich die leere class auch in Safari. :oops: Alleine dadurch habe ich nun schon viel gelernt! Tausen Dank!

    Habe mir deinen Rat bzgl. veralteten Plugin zu Herzen genommen und es jetzt anders gelöst. Ich habe mir den html code von dem Formular von Builderall geholt, diesen dann über den Code-Editor eingefügt und dann mit zusätzlichem CSS in Form gebracht. Die Seite ist nun abrufbar unter https://123fitvital.com/gratis-leitfaden-besser-leben falls jemand das Endergebnis sehen möchte.

    Nochmals vielen lieben Dank für deine Hilfe, dadurch habe ich wieder viel dazu gelernt. :)
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden