Möglichkeit der Erstellung der Pflichtfelder - Contactform7

    Hallo zusammen,
    Ich habe ein Formular mit Contactform 7 erstellt. Ich möchte gerne einen Floating Effekt bei den Eingabefeldern haben. Leider funktioniert dieser Effekt nicht mehr, wenn ich das Pflichtfeld über das Eingabefeld und mit dem Attribut * versehe.

    Code
    <div class="floating-label">
    [text* your-firstname id:your-firstname placeholder ""]
    <label for="your-firstname">Vorname*</label>
</div>


    Der Floating Effekt geht aber mit dem erstellten Eingabefeld

    Code
    <div class="floating-label">
    <input type="text" name="your-surname" id="your-surname"  class="required" placeholder=" " required />
    <label for="your-surname*">Nachname*</label>
</div>


    Meine Frage ist, ob es noch andere Optionen für die Erstellung von Pflichtfeldern gibt?
    Leider greift das Contactfom7 nur auf die erste Variante. Leider bekomme ich dort das Floating nicht zum Laufen.
    Hier ist das noch nicht veröffentlichte Formular.
    https://bergzeit-rauris.at/?page_id=1261

    • 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

    Die Verschacheltung der HTML Elemente ist bei Contact Form 7 etwas anders als bei Deinem manuellen HTML Code.

    Du kannst versuchen, in Deinem CSS-Code Anpassungen vorzunehmen:

    Danke für deine Antwort.
    Ich habe den HTML Code von mir direkt in das Formularfeld von Contact Form 7 eingegeben.
    Ich weiß nicht, wie ich deine Antwort verwenden kann?
    Wie soll ich genau das HTML aufbauen, was ich im Kontaktformular verwende?
    Welche Möglichkeiten gibt es noch Pflichtfelder anzusteuern, damit? Contact Form 7 diese auch verwendet.

    Verwende (wie derzeit beim Vorname Feld) die normale Feldersyntax von Contact Form 7 mit dem [FONT=Courier New]*[/FONT] als Pflichtfeldmarkierung und passe die für Dein eigenes HTML (wie derzeit beim Nachname Feld) in WordPress hinterlegten CSS Regeln so wie oben beschrieben an die Felderstruktur von Contact Form 7 an.

    Im Zweifel könntest Du Dich auch an die Person wenden, die den [FONT=Courier New].floating-label[/FONT] CSS-Code in Deine Seite eingebaut hat.

    Du hast mir schon sehr geholfen. Die Pflichtfelder können über CSS angesprochen werden, das ging vorher nicht.
    Die Standardposition des Labels im Eingabefeld wird noch nicht angezeigt und der Name hängt schon oben.
    Hast du da eventuell eine Idee?
    Du hast mir jetzt aber schon sehr geholfen!

    Ok, das Problem liegt hier:

    Code
    span[data-name="your-firstname"]:not(:placeholder-shown)


    Der [FONT=Courier New]span[/FONT] hat ja nie einen [FONT=Courier New]placeholder-shown[/FONT].

    Der Placeholder wäre im [FONT=Courier New]input[/FONT] Element zu suchen, z.B. so:

    Code
    span[data-name="your-firstname"] input:not(:placeholder-shown)


    Das führt aber zu dem Problem, dass dann der [FONT=Courier New]~[/FONT] Combinator nicht mehr funktioniert:

    Code
    span[data-name="your-firstname"] input:not(:placeholder-shown) ~ label


    Im CF7 HTML Code ist der [FONT=Courier New]label[/FONT] nicht auf der gleichen Ebene des [FONT=Courier New]input[/FONT], die beiden Elemente haben also nicht das gleiche Elternelement:

    Code
    <p>
    <span .. data-name="your-firstname">
        <input .. name="your-firstname" />
    </span>
    <br />
    <label for="your-firstname">Vorname*</label>
</p>


    Insofern kann man den aktuellen Ansatz mit dem [FONT=Courier New]~[/FONT] Combinator so nicht direkt adaptieren.

    Es gibt sicherlich andere Ansätze, z.B. cf7 floating label (Google), die dann wohl alle etwas extra JavaScript Code benötigen.

    Mit Pflichtfeld oder nicht hat das grundsätzliche Problem mit der [FONT=Courier New]span[/FONT] Verschachtelung bei Contact Form 7 Feldern, die Deine einfache CSS Combinator Lösung verhindern, nichts zu tun.

    Ich kann doch nur die Pflichtfelder direkt über Span ansprechen. Sonst gibt es doch keine Möglichkeit.
    Ich hätte schon einiges gefunden bei Google, was nicht funktioniert. Diese Lösung (auch von Google) fast doch. Nur, dass über CSS die Eingabefelder mit einem Pflichtfeld nicht angesprochen werden.

    Bei Nutzung der Feldersyntax von Contact Form 7 ist es bzgl. CSS Ansprache egal, ob ein Feld mit dem [FONT=Courier New]*[/FONT] als Pflichtfeld definiert ist oder nicht.

    Alle [FONT=Courier New]input[/FONT] Felder bekommen bei CF7 eine [FONT=Courier New]span[/FONT] Verschachtelung.

    Somit kann Deine eigentlich schön einfache CSS [FONT=Courier New]~[/FONT] Combinator Lösung mit CF7 Feldern wie [FONT=Courier New][text your-name][/FONT] oder [FONT=Courier New][text* your-name][/FONT] wie oben inzwischen ausführlich aufgeklärt leider nicht funktionieren.

    Ergebnis: Um mit CF7 Feldern die gewünschten "floating Labels" zu erreichen, benötigt man etwas extra JavaScript.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden