1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Mehrspaltiges Contact Form 7 mit Css Stylen

Dieses Thema im Forum "Design" wurde erstellt von Laurak2805, 17. Mai 2022.

Schlagworte:
  1. Laurak2805

    Laurak2805 New Member

    Registriert seit:
    17. Mai 2022
    Beiträge:
    3
    Zustimmungen:
    0
    Hallo Zusammen,
    ich bin totaler Anfänger und absolut neu in dem Gebiet, weshalb ich eure Hilfe brauche. :D

    Ich habe ein mehrspaltiges Kontaktformular mit dem Contact Form 7 Plugin erstellt.
    Mein Problem ist, dass man bei "Name" und "Email" nichts mehr in das Textfeld eintragen kann. Das passiert sobald ich in Css meine linken Textfelder positioniere. Komischerweise funktionieren die rechten Textfelder einwandfrei. Betrifft nur die 2 linken.... Lasse ich das #left { width: 47%;float: left;margin-right: 6%; weg, kann man in die Textfelder wieder seine Daten eintragen.

    Hier mein Formularvorlage:

    <div class="clearfix">
    <div id="left">
    Name [text* first-name]
    E-mail-Adresse[email* your-email]
    </div>
    <div id"right">
    PLZ und Wohnort [text your-plz]
    Telefonnummer [text your-phone]
    </div>
    </div>
    Name, Alter und (vermutete) Rasse [textarea* your-subject]
    Trainingsanfrage und Beschreibung [textarea* your-message]
    [acceptance acceptance-535 id:acceptance] Ja, ich bin einverstanden... [/acceptance]
    <div class="buttons"><input type="submit" value="Senden"></div>


    CSS:
    /*--- 2 Column Form Styles Start ---*/
    #left {
    width: 47%;
    float: left;
    margin-right: 6%;
    }
    #right {
    width: 47%;
    float: left;
    }
    .clearfix:after {
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:10px;
    }
    .clearfix {
    display:block;
    }
    input[type="submit"]{
    position: relative;
    top: 5px;
    left: 0px;
    border: 3px solid #333;
    background-color: #999;
    border-radius: 5px;
    padding: 10px 2em;
    font-weight: bold;
    color: #fff;

    }

    Vielen Lieben Dank im Vorraus!
     
  2. Laurak2805

    Laurak2805 New Member

    Registriert seit:
    17. Mai 2022
    Beiträge:
    3
    Zustimmungen:
    0
    Hab es jetzt nochmals anders porbiert...selbes Problem...
    Sobald ich im css "float: left" eingeben ist es nicht mehr möglich in die zwei linken Spalten etwas einzutragen.

    Formularvorlage:

    <p>
    <div class="form_half">
    Name [text your-name]
    E-Mail-Adresse [email* your-email]
    </div>
    <div class="form_half_last">
    PLZ und Wohnort [text your-plz]
    Telefonnummer [tel your-telefon]
    </div>
    <div class="name"><label> Name, Alter und (vermutete) Rasse des Hundes
    [textarea* your-subject] </label></div>
    <div class="train"><label> Beschreibung und Trainingsanfrage
    [textarea* your-message] </label></div>
    <p> [submit "Senden"] </p>

    CSS:

    .form_half {
    width: 49.5%;
    float: left;
    }
    .form_half_last {
    margin-right:0;
    }


    Woran liegt es??
     
  3. meisterleise

    meisterleise Well-Known Member

    Registriert seit:
    18. Januar 2012
    Beiträge:
    1.351
    Zustimmungen:
    345
    Kennst du diese Anleitung schon? WP-Styles
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden