Contact Formular 7 - Formatierung und Zeilenumbrüche

  • Ich bastel gerade mit CF7 um einige Anfrage-Formulare zu kreieren. Dabei würde ich gerne optisch etwas aufbessern, zum Beispiel die Auswahl mit Checkbox zeilenweise (also mit einem Zeilenumbruch nach jeder Auswahlmöglichkeit) übersichtlicher gestalten.

    Wenn ich den Zeilenumbruch per HTML Tag im Formular eintrage, erscheint dieser aber wie Text auf der Formularseite. Das ist nicht der Sinn der Sache.

    Leider finde ich nichts, wie ich das Formular formatieren kann. Einzige Variante wäre noch, die Auswahlmöglichkeiten zu gruppieren. (Obst, Herkunft, Farbe, Lieferweg - um ein Beispiel zu nennen)

    Um das ganze zu veranschaulichen, habe ich ein Testformular erstellt und von dem besagten Bereich einen Screenshot gemacht.

    Technik ist dazu da, Probleme zu lösen, die wir ohne diese Technik gar nicht hätten.

    • 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

  • Du kannst in Contactform7 in deine Formulare <br />-Tags einfügen und damit Zeilenumbrüche generieren. Wenn das bei dir verkehrt ausgegeben wird, hat es einen anderen Fehler. Dann wäre ein Link zur Seite mal hilfreich.

    Wenn du aus irgendwelchen Gründen je nach Größe des Ausgabegeräts mal Umbrüche drin haben willst und mal nicht, ist es sinnvoller, die Darstellung über CSS zu lösen.

    Gruß
    helix

  • helix, es geht ihm um Checkboxen -> das macht CF7 einen eigenen Shortcode draus: [checkbox checkbox-626 "test" "the" "west"]
    Mir fällt im Moment die Lösung über CSS ein, indem man die item auf display:block setzt:
    .wpcf7-checkbox .wpcf7-list-item{display:block;}

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Thx maxe, you’re so right …

    Dann sehe ich auch keine andere Lösung als display: block;
    Auf ’ne Art ist das sowieso die „richtigere“ Lösung. Semantisch ist der <br /> ja Blödsinn.

    Gruß
    helix


    Gruß
    helix

Jetzt mitmachen!

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