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

wpcf7 contact form 7

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von roko80, 10. Februar 2015.

  1. roko80

    roko80 New Member

    Registriert seit:
    10. Februar 2015
    Beiträge:
    1
    Zustimmungen:
    0
    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*/
     
  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