Mehrfachauswahl (Checkboxen) untereinander darstellen

    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):

    Der Code den ich bisher habe:

    Code
    .mbwp-form label {
color: #444444;
font-weight: 700; }


.mbwp-form .mbwp-form-actions {display: flex; flex: 0 0 100%; justify-content: center;
}

    Ich habe es auch schon mit display: flex probiert, aber dann kommt immer nur das raus:

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

    Herzliche Grüße
    Angelika

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    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:;)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    ....., was mir noch aufgefallen ist!!!

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    ..... und eine Font-Einbindung schreit auch um Hilfe:

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    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? :)

    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.
    [FONT=Courier New]<lable class"" .....>[/FONT]
    [FONT=Arial]Mit Zuweisung einer class bei der Überschrift und in den Zusätzlichen CSS ein "[FONT=Courier New]display: block;[/FONT]" für diese class klappt auch.[/FONT]
    [FONT=Arial]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.

    [/FONT]

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    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. :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden