Contact Form 7 - Abstände Checkboxen & Formularfelder

    Hallo liebe Community,

    ich habe eine Frage zum WP Plugin Contact Form. Ich habe eine "Auswahlbox" erstellt und möchte gerne in diesem Fall einen Absatz oder größeren Abstand zwischen dem ersten und zweiten Eintrag herstellen. Dies soll aber nicht pauschal für alle Auswahlboxen gelten.

    Der Code:

    [checkbox checkbox-700 use_label_element "Erster Link" "Zweiter Link. Zwischen den beiden Einträgen soll ein Absatz hinzugefügt werden."]

    Der <br /> Tag funktioniert leider nicht und ein weiteres "" zwischen den Einträgen zeigt mir eine weitere Checkbox an.


    Die nächste Frage bezieht sich auf den Abstand zwischen den Formularfeldern. Diese sind sehr groß und ich würde sie gerne etwas verkleinern. Dies aber nur auf der Seite des Kontaktformulars. Hat jemand eine Idee, wo und wie ich den Abstand verkleinern kann? :confused:

    Als Beispiel habe ich Screenshots der Felder angehangen.


    Vielen Dank und viele Grüße
    Lisa

    • 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

    Es wird in der CSS-Datei deines Layouts gesteuert wie die Felder vom Formular aussehen. Dazu sind eventuell bei guten Themen auch schon vorgaben in der CSS-Datei enthalten. Da müsstest Du dann mal nach .wpcf7-form suchen.

    Code
    .wpcf7-form p { margin-bottom: 10px; margin-bottom: 0.625rem; }


    sollte diese Zeile noch nicht vorhanden sein baue sie einfach mal ein und passe die Zahlenwerte an. Dann sollte sich der Abstand regeln lassen zwischen dein einzelnen Zeilen deines Formulars.

    Super, vielen Dank "Kirchenschnack"!!! Es hat funktioniert! :-D
    Jetzt bleibt nur noch die Frage des vergrößerten Abstands zwischen den beiden Checkboxen. Vielleicht kennt jemand dafür noch eine Lösung?

    Da habe ich jetzt keine richtige Lösung für sondern nur eine Vermutung:
    Ich hoffe mal das diese Angabe so oder so ähnlich den Abstand von der Box ändert. Bin aber leider nicht der Super CSS-Kenner.

    Code
    [COLOR=#333333].wpcf7-form  { margin-left: 10px; margin-left: 0.625rem; margin-right: 10px; margin-right: 0,625rem; }

    [/COLOR]

    Leider nicht. Diese Angabe lässt das gesamte Formular nach rechts springen.

    Das Problem ist, dass die vordefinierten Tags in Contact Form (in diesem Fall die "Auswahlbox") vorgegeben ist. Meine gewünschte Änderung soll sich nicht global auf alle Checkboxen auswirken sondern nur den Abstand zwischen den Beiden Boxen / Zeilen vergrößern:

    [checkbox checkbox-700 use_label_element "Erster Link" "Zweiter Link. Zwischen den beiden Einträgen soll ein Absatz hinzugefügt werden."]

    Das Problem ist, dass man ohne Link hier nur rumraten muss und das macht kaum einer von uns.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Ein Beispiel findet Ihr hier: http://homepage.rgst.de/rgst/

    Der Abstand zwischen Link1 und Link2 soll größer sein bzw. möchte ich dort gerne einen Absatz einfügen. Der Abstand der anderen Checkboxen (Auswahl1 und Auswahl2) sollen so bleiben wie sie sind.

    Der Code:

    <p>Ihr Name (Pflichtfeld)<br />
    [text* your-name] </p>

    <p>Ihre E-Mail-Adresse (Pflichtfeld)<br />
    [email* your-email] </p>

    <p>Betreff<br />
    [text your-subject] </p>

    <p><b>Anliegen </b></p>

    <p>[checkbox Anliegen use_label_element "Link1" "Link2"]</p>


    <p>Ihre Nachricht<br />
    [textarea your-message] </p>

    <p>[checkbox Auswahl use_label_element "Auswahl1" "Auswahl2"]</p>

    <p>[submit "Senden"]</p>


    Hat jemand noch eine Idee?

    Viele Grüße
    Lisa

    Das kannst Du über die CSS z. B. so regeln:

    Code
    input[value="Link1"] {
margin-bottom: 24px;
}


    Ich denke der Aufbau ist selbsterklärend.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Habe das gleiche Problem, hast du es lösen können? Was setzt du statt dem Link1 ein?
    input[value="Link1"]

    Wo gibst du den Code ein? Unter zusätzliche Einstellungen im Plug-in? Oder unter Customizer -> zusätzliches CSS?

    2 Mal editiert, zuletzt von icheck1978 (29. September 2020 um 10:21)

    Der Beitrag, an dem du meinst, das gleiche Problem zu haben ist schon soooo alt, das die Bartwickelmaschine schon streikt! ;-)
    Öffen eine neue Anfrage und beschreibe dein Problem mit allen erforderlichen Angaben, siehe Forenregeln besonders (II)!
    Wp-Version, verwendetes Theme, verwendete Plugins, am besten ein Link, wo man das sehen kann, ........

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

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden