Contact form7 mehrspaltig- Eingabefeld definieren

tim1999

Hallo Zusammen,

ich hänge zur Zeit an einem Problem mit meinem contact form und weiß einfach nicht weiter.

Ich habe auf dieser Seite: https://adventur.de/test/ ein Kontaktformular erstellt welches zum Teil zweispaltig ist. Nun habe ich jedoch das Problem, dass wenn man mit der Maus über eines der Eingabefelder fährt, man nicht in der gesamten box schreiben kann.
visuell ist das Eingabefeld zwar schön definiert jedoch sieht das die "Maus" nicht.

Woran kann das liegen???

ich füge hier drunter nochmal meine CSS Erweiterungen sowie den code den ich in das Formular einegeben habe.

CSS

/*
Das zentriert euer Kontaktformular.
*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea { float : none; margin: 0 auto; }
.wpcf7 { text-align: center; }


/*
Update: 25.11.2017: Kontaktform ist mit folgendem Code voll Responsive.
*/
textarea.wpcf7-form-control.wpcf7-textarea {
   
    padding: 0px !important;
}
input.wpcf7-form-control.wpcf7-text {
  padding: 0px !important;
}
#responsive-form{
 max-width:700px /*-- change this to get your desired form width --*/;
 margin:0 auto;
        width:100%;
}
.form-row{
 width:100%
}
.column-half{
 float: left;
 position: relative;
 padding: 0.65rem;
 width:100%;
 -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}
.column-full{
 float: none;
 position: relative;
 padding: 0.65rem;
 width:50%;
 margin-top:0px;
 margin-left:auto;
 margin-right:auto;
 -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
#absatzwpcf7 {
 margin-bottom:60px;
}
#submitbuttonkontakt{
  width:150px;
}
.clearfix:after {
 content: "";
 display: table;
 clear: both;
}


/**---------------- Media query ----------------**/
[url='https://wpde.org/system/user/?userID=10206']@Media[/url] only screen and (min-width: 48em) {
 .column-half{
  width: 50%;
 }
}


.wpcf7 input[type="text"], .wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 input[type="date"],
.wpcf7 textarea {
 width: 100%;
 padding: 8px;
 border: 1px solid #0066bf;
 border-radius: 5px;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
       box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
 background: #fff;
}
.wpcf7-submit{
 float: none;
 background: #CA0002;
 color: #fff;
 text-transform: uppercase;
 border: none;
 padding: 0px;
 cursor: pointer;
 width:100%;
}
.wpcf7-submit:hover{
 background: #ff0000;
}
span.wpcf7-not-valid-tip{
 text-shadow: none;
 font-size: 12px;
 color: #fff;
 background: #ff0000;
 padding: 5px;
}
div.wpcf7-validation-errors {
 text-shadow: none;
 border: transparent;
 background: #f9cd00;
 padding: 5px;
 color: #9C6533;
 text-align: center;
 margin: 0;
 font-size: 12px;
}
div.wpcf7-mail-sent-ok{
 text-align: center;
 text-shadow: none;
 padding: 5px;
 font-size: 12px;
 background: #59a80f;
 border-color: #59a80f;
 color: #fff;
 margin: 0;
}
#submitbuttonkontakt{
  width:150px;
}

Alles anzeigen

[size=18]Formular code

Code

<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-full"> Anrede*
[select Anrede include_blank "Frau" "Herr"]</div>
</div>
<div class="form-row">
<div class="column-half">Dein(e) Vorname(n) , wie im Reisepass angegeben*
    [text* Vorname]</div>
<div class="column-half">Nachname(n), wie im Reisepass angegeben*
    [text* Nachname]</div>
</div>
<div class="form-row">
<div class="column-half">Deine E-Mail-Adresse*
[email* email]</div>
<div class="column-half">bestätige deine E-Mail-Adresse*
[email* email-bestaetigt]</div>
</div>
<div class="form-row">
<div class="column-half">Straße/Hausnummer*
[text* StraeHausnummer]</div>
<div class="column-half">PLZ/Ort*
[text* PLZOrt]</div>
</div>
<div class="form-row">
<div class="column-half">Telefonnummer*
[text* Telefonnummer]</div>
<div class="column-half">Handynummer
[text Handynummer id:absatzwpcf7]</div>
</div>
<div class="form-row">
<div class="column-full">Wähle dein Ausreisedatum*
[select* Ausreisedatum include_blank "Datum1" "Datum2" "Datum3" "Datum4" "Datum5"]</div>
</div>
<div class="form-row">
<div class="column-half">Geburtsdatum*
[date* Geburtsdatum placeholder "01.01.2000"]</div>
<div class="column-half">Englischkenntnisse
[select Englischkenntnisse id:absatzwpcf7 include_blank "gering" "ausreichend" "gut" "sehr gut"]</div>
</div>
<div class="form-row">
<div class="column-full">Notfallkontakt Name
[text NotfallkontaktName]</div>
</div>
<div class="form-row">
<div class="column-half">Notfallkontakt E-Mail
[text NotfallkontaktEmail]</div>
<div class="column-half">Notfallkontakt Telefonnummer
[text Notfallkontakttelefonnummer id:absatzwpcf7]</div>
</div>
<div class="form-row">
<div class="column-full">Von Adventur erfahren durch...
[select vonadventurerfahrendurch include_blank "Schule" "Uni" "Freunde/Bekannte" "Presse" "Anzeige" "Radio" "Google.de"]</div>
</div>
<div class="form-row">
<div class="column-full">Bemerkung
    [textarea your-message]</div>
</div>
<div class="form-row">
<div class="column-full">Hast du einen Rabattcode?
[text Rabattcode]</div>
</div>
<div class="form-row">
<div class="column-full">[acceptance ichbinkeinRoboter id:absatzwpcf7] Ich bin kein Roboter*</div>
</div>


Basic-Programm: 0000€
+Flug: 0000€
+MwSt.: 0000€
Total: 0000€


<div class="form-row">
<div class="column-full">[submit "kostenpflichtig Buchen"]</div>
</div>


</div><!--end responsive-form-->

Alles anzeigen

Vielen lieben Dank schon mal für deine Hilfe.
Gruß
Tim[/SIZE]

Werbepost

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

SEpp55

Da liegt ein ein Container - class="column-full" - darüber, siehe Anhang!
Wenns über CF7 keine Möglichkeit gibt (kanns selbst derzeit nicht versuchen) dann kannst du
mit Erhöhung des z-index die Eingabefelder darüberlegen!

SirEctor

Versuch das mal

Code

.form-row:after {
    content: "";
    display: table;
    clear: both;
    height: 0;
    visibility: hidden;
}

Die DIV mit der class .form-row wissen durch die floatenden Kind-Elemente nicht wie hoch sie eigentlich sind. Dadurch entsteht dieser unschöne Effekt. Eine Erklärung dazu findet man im Netz unter dem Suchbegriff "clearfix".

Edit: ich sehe gerade, dass du schon .clearfix im CSS definiert hast. Dann würde es reichen, wenn du aus

HTML

<div class="column-full">.....

das machst

HTML

<div class="column-full clearfix">.....

tim1999

Vielen lieben Dank.
Hat geklappt.

tim1999

Hallo,
[LEFT][COLOR=rgb(44, 44, 44)]
weis jemand wie man die Schriftfarbe bei einem Formular ändert? ich meine Die Farbe von dem Text, der über den Eingabefeldern steht.
Diesen Text würde ich nämlich gerne weiß haben jedoch nur bei einem spezifischen Formular. Die anderen Formulare sollen bleiben wie sie sind.

Vielen Dank im Voraus.

Gruß
Tim [/COLOR][/LEFT]

SirEctor

Versuch mal

Code

label{color:#fff;}

Wenn das nicht hilft, bräuchten wir einen Link.

tim1999

Danke für deine schnelle Antwort. Leider hat es aber nicht geklappt.
Hier der link zum Formular: https://adventur.de/kostenloses-te…sgespraech-ms1/

Könntest du mir bei deinem Lösungsvorschlag bitte auch dazu schreiben wo ich den Code eintragen muss. Ich habe erste gedacht, dass das über den Bereicht " zusätzliche Einstellungen möglich ist, ist es aber nicht"

Vielen Dank.

Gruß
Tim

maxe

Wenn du nur auf einer Seite die Farbe ändern willst, nutze zusätzlich die Body Class:
body.page-id-1520 .wpcf7-form label{color:#fff;}

Der Code muss ins CSS.

tim1999

Super!!
Vielen lieben Dank.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Contact form7 mehrspaltig- Eingabefeld definieren

Jetzt mitmachen!