Problem mit Contact Form 7

  • Hallo,
    ich habe ein Problem mit der Ausrichtung der Eingabefelder wie in beiliegendem Screesnhot beschrieben.
    Die CSS-Funktionen sind wie folgt:

    * Definiert das Kontaktformular*/
    .form_half {
    width: 49.5%;
    float: left;
    margin-right: 1%;
    padding-left: 70px !important;
    padding-top: 20px;
    }

    .form_half_last {
    margin-right:0;

    }

    input.wpcf7-form-control.wpcf7-text {
    margin-left: 20px;
    }

    .form_half br
    {
    float:left;
    display:none;
    }
    .form_half label.clr
    {
    clear:both;
    }
    .form_half label,
    .form_half.text
    {
    float:left;

    }
    .form_half input.col_0
    {
    float:left;
    }

    Kann mir jemand weiter helfen wie ich ALLE Eingabefelder einheitlich in der Vertikalen ausrichten kann?

    • 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

  • [FONT=arial]Hallo Stefan,

    vielleicht hilft dir die Möglichkeit zur absoluten Positionierung eines Elements. Hierzu musst du lediglich in dein

    input.wpcf7-form-control.wpcf7-text{
    [/FONT][FONT=arial] position: absolute;
    left: 200px;

    }

    und unter Umständen auch noch:
    top: 150px;

    EDIT: einfügen

    Vorsicht ist nur geboten, da sich die Elemente dann überlappen können.

    Ich hoffe das hilft dir weiter


    Grüße

    Simon
    [/FONT]

    Einmal editiert, zuletzt von Doerfi (16. März 2017 um 10:40)

  • Hallo Simon,
    das funktioniert leider nicht. Die Eingabefelder referenzieren sich immer noch auf den Text - anbei ein Screenshot.

    Das muss doch irgendwie lösbar sein - anbei nochmals ein Screenshot mit dem Div-Container.
    Hat jemand noch einen Tip?

  • Gib den label einfach alle die gleiche Breite.

    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]

  • Hallo zusammen,
    danke für Eure Rückmeldungen:-) - das scheint mir sinnvoll mit der gleichen Breite. Aber ich habe nun in den ganz oben aufgeführten CSS-Eigenschaften mal nacheinander width: 100px; probiert, aber es ändert sich nichts.
    In den eigentlichen Plugin-Einstellungen muss ich doch nichts ändern oder?
    <div class="form_half"> Vorname:* <br />
    [text* Vorname size:50] </div>
    <div class="form_half"> Firma: <br />
    [text Firma size:50] </div>

    Kann mir da jemand von Euch nochmals einen Tip geben, wo die Breite hin sollte?

  • Die Größe muss nicht ins Input-Feld, sondern ins Label.
    Versuch es mal anhand des Beispiels
    <div class="form_half">Vorname:*</div>
    <div class="form_half">[text* Vorname] </div>

    Ich weiß allerdings nicht wie bei dir die Class form_half definiert ist.

    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]

  • Hier ist der Link zur Website:
    http://gaertnerei-huber-oppenau.de/ihre-nachricht…ber-in-oppenau/

    Die Anweisungen von form_half stehen ganz oben in meiner ersten Nachricht - Danke schon mal für die Hilfe...

    P.S.: Ich habe dann eh noch ein anderes Problem dabei - und zwar verschiebt es mir die ganzen Zeilen ab Vornamen unterhalb des Textareas, anstatt diese alle untereinander unter dem Vornamen zu platzieren...
    Wenn hier noch jemand einen Tip hat ?

  • Dann setz es mal so um, wie ich es in #8 geschrieben habe.

    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]

  • Das erwirkt dann dass die Zeile unterhalb des Textes rutscht - der Text soll ja aber links vom Eingabefeld stehen.
    Anbei habe ich mal einen Screenshot gemacht, wie es mit der Änderung #8 dann aussieht...

Jetzt mitmachen!

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