Hallo zusammen,
ich bin neu hier. :) Ich benötige etwas Hilfe. Habe das Plugin wpcf7 installiert und soweit funktioniert alles. Leider habe ich irgendwo einen Denkfehler in meiner css. Die message error sollte bei allen Pflichtfeldern erscheinen, dies passiert nur bei der EMail und bei den anderen Feldern leider nicht. Anbei mal die html und die css. Für eure Hilfe wäre ich sehr Dankbar.
FORMULAR:
<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-half">[select Anrede "Anrede" "Herr" "Frau"]</div>
<div class="column-half">[text* fname placeholder "Vorname"]</div>
</div>
<div class="form-row">
<div class="column-half">[text* lname placeholder "Nachnamel"]</div>
<div class="column-half">[text* company placeholder "Firma"]</div>
</div>
<div class="form-row">
<div class="column-half">[email* email placeholder "EMail"]</div>
<div class="column-half">[text* phone placeholder "Telefon"]</div>
</div>
<div class="form-row">
<div class="column-half">[text* street placeholder "Strasse"]</div>
<div class="column-half">[text* plz placeholder "PLZ"]</div>
<div class="column-half">[text* stadt placeholder "Stadt"]</div>
</div>
<div class="form-row">
<div class="column-full">[text* subject placeholder "Buchung: ..."]</div>
</div>
<div class="form-row">
<div class="column-full">[textarea Your message placeholder "Ihre Nachricht"]</div>
</div>
<div class="form-row">
<div class="column-full">[submit "Send"]</div>
</div>
</div><!--end responsive-form-->
CSS:
/* Enter Your Custom CSS Here */
/* Begin Buchungsformular 4*/
#responsive-form{
max-width:800px /*-- change this to get your desired form width --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
body input[type=text].wpcf7-not-valid, body input[type=email].wpcf7-not-valid, body input[type=tel].wpcf7-not-valid, body textarea.wpcf7-not-valid {
border: 1px solid #ec3c06;
}
/**---------------- Media query ----------------**/
Media only screen and (min-width: 48em) {
.column-half{
width: 33.3%;
}
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
width: 100%;
padding: 8px;
font-family: inherit;
font-size: 13px;
background-color: #fbfbfb;
border: 1px solid #f3f3f3;
border-radius: 3px;
resize: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.wpcf7 input[type="text"]:focus, .wpcf7 input[type="email"]:focus{
background: #fff;
}
.wpcf7-submit{
position: relative;
display: inline-block;
. font-family: inherit;
width: auto;
height: 43px;
line-height: 43px;
margin: 0px;
padding: 0px 22px;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-align: left;
color: #f6f6f6;
background-color: #00b4ff;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
border: 0px none;
outline: 0px none;
border-radius: 2px;
transition: all 0.2s ease 0s;
text-shadow: none;
}
.wpcf7-submit:hover{
position: relative;
display: inline-block;
width: auto;
height: 43px;
line-height: 43px;
margin: 0px;
padding: 0px 22px;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-align: left;
color: #FFF;
background-color: #EB005D;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
border: 0px none;
outline: 0px none;
border-radius: 2px;
transition: all 0.2s ease 0s;
text-shadow: none;
}
.wpcf7-select{
width: 100%;
padding: 7px;
font-family: inherit;
font-size: 13px;
background-color: #fbfbfb;
border: 1px solid #f3f3f3;
border-radius: 3px;
resize: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
span.wpcf7-not-valid-tip{
display: block;
color: #ec3c06;
border: none;
position: relative;
top: auto;
left: auto;
padding: 0;
margin-top: 2px;
background: none;
font-size: 15px;
}
div.wpcf7-validation-errors {
background: #ffe2e2;
border: 1px solid #ff8a8a;
color: #ec3c06;
}
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;
}
body div.wpcf7-validation-errors {
background: #ffe2e2;
border: 1px solid #ff8a8a;
color: #ec3c06;
}
body div.wpcf7-response-output {
margin: 10px 0;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 5px;
}
body .wpcf7-mail-sent-ng {
background: #fff2e2;
border: 1px solid #ffbc8a;
color: #e17731;
}
body .wpcf7-mail-sent-ok {
background: #e8ffe2;
border: 1px solid #6fdf51;
color: #1ea524;
}
/* Ende Buchungsformlar 4*/