Contact Form 7 Checkbox mittig über dem Text

    Hallo zusammen,

    ich versuche mich jetzt schon länger an einem Kontaktformular, allerdings wird die Checkbox zur DSGVO immer zentriert über dem dazugehörigen Text angezeigt (siehe Bild)

    Hier im Forum gab es ähnliche Fälle aber die dort genannten Lösungen haben das Problem leider nicht behoben. Gearbeitet wurde mit dem Flatsome Theme und hier ein Link zur Seite: https://alisha.printatainment.de
    Ich weiss das ich irgendwas übersehe aber ich bin gerade anscheinend blind und hoffe ihr könnt mir bei der Lösung helfen.

    Danke und viele Grüße

    • 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

    Vielen Dank erst mal für die schnelle Antwort.
    So wie ich das sehe ja, hier der Text:
    Kontakt:

    [email* DeineE-Mail placeholder "Deine E-Mail*"]

    [tel Telefonnummer placeholder "Deine Telefonnummer"]

    [text* Betreff placeholder "Betreff*"]

    [textarea* Textarea placeholder "Deine Nachricht*"]

    [acceptance acceptance-166]<div class half="datenschutz"><strong>Datenschutz:</strong> Ich stimme zu, dass meine Angaben aus dem Kontaktformular zur Beantwortung meiner Anfrage erhoben und verarbeitet werden. Die Daten werden für 10 Jahre gespeichert oder auf Wunsch gelöscht. [/acceptance]</div>
    <div><strong>Hinweis:</strong> Sie können Ihre Einwilligung jederzeit für die Zukunft per E-Mail an info@hoefke-booking.de widerrufen. Detaillierte Informationen zum Umgang mit Nutzerdaten finden Sie in unserer <a href="https://finnaale-andytheke.de/datenschutz/"><strong>Datenschutzerklärung</strong></a>.
    </p></div>

    [submit "Absenden"]

    Einmal editiert, zuletzt von hoefke (5. August 2022 um 14:48)

    Behebe erstmal die HTML-Fehler:

    Zitat von hoefke

    [acceptance acceptance-166][COLOR=#ff0000]<div class half="datenschutz">[/COLOR]<strong>Datenschutz:</strong> Ich stimme zu, dass meine Angaben aus dem Kontaktformular zur Beantwortung meiner Anfrage erhoben und verarbeitet werden. Die Daten werden für 10 Jahre gespeichert oder auf Wunsch gelöscht. [/acceptance][COLOR=#ff0000]</div>[/COLOR]
    <div><strong>Hinweis:</strong> Sie können Ihre Einwilligung jederzeit für die Zukunft per E-Mail an info@ho[...]ing.de widerrufen. Detaillierte Informationen zum Umgang mit Nutzerdaten finden Sie in unserer <a href="https://fin[...]tenschutz/"><strong>Datenschutzerklärung</strong></a>.
    [COLOR=#ff0000]</p>[/COLOR]</div>

    Danke, bin da alles andere als ein Profi. Da der Text ohne diese von markierten Stellen komplett wirr erscheint, wurde mir von jemandem mit Erfahrung in diesem Bereich dazu geraten das genau so zu schreiben.
    Nach dem die Stellen entfernt wurden ist die Checkbox wieder in einer Reihe mit dem Text, allerdings mit sehr viel Platz dazwischen

    Da wurdest Du schlecht bzw. falsch beraten.

    Der viele Platz jetzt kommt von diesem bei Dir manuell eingegebenem CSS in Design > Customizer > Zusätzliches CSS:

    Code
    .wpcf7 input {
   width: 75%;
   margin-left: 150px;
}


    Schreibe zusätzlich dazu am Ende darunter dieses CSS, das entfernt den meisten Platz.

    Code
    .wpcf7 .wpcf7-acceptance input {
     width: auto;
}


    Soll auch der Rand ganz links entfernt werden, nutze diese Alternative:

    Code
    .wpcf7 .wpcf7-acceptance input {
     width: auto;
     margin-left: 0;
}

    Ja ganz offensichtlich, daher jetzt auch meine Motivation mich da selbst einzuarbeiten aber das Thema ist komplexer als es im ersten Moment erscheint:D
    Deine Lösung funktioniert auf jeden Fall, vielen Dank dafür.
    Wenn Du mir jetzt noch verraten kannst wie ich beide Zeilen vernünftig untereinander bekomme, rettest Du mein WE.

    Es sind weiterhin HTML-Fehler vorhanden, die sollte man erst beheben.

    Ergänzung: Danach noch den Abstand der Checkbox nach unten wegnehmen, im o.g. bereits genutzten Block:

    Code
    .wpcf7 .wpcf7-acceptance input {
   width: auto;
   margin-bottom: 0;
}


    Und etwas Abstand zum Button:

    Code
    .wpcf7 .wpcf7-submit {
   margin-top: 1.5em;
}

    2 Mal editiert, zuletzt von b3317133 (5. August 2022 um 15:41)

    Ergänzung: Danach noch den Abstand der Checkbox nach unten wegnehmen, im o.g. bereits genutzten Block:

    Code
    .wpcf7 .wpcf7-acceptance input {
   width: auto;
   margin-bottom: 0;
}


    Und etwas Abstand zum Button:

    Code
    .wpcf7 .wpcf7-submit {
   margin-top: 1.5em;
}

    [/QUOTE]

    Perfekt, vielen Dank funktioniert bestens

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden