Contact Form7 zeigt Formular nicht rchtig an

dn3d_fanboy · 28.07.2014

Hallo,
ich habe jetzt stundenlang herumprobiert, aber CF 7 will einfach nicht mein Formular richtig anzeigen.
Hier ist mal der Link zur Seite:

1.) ist aus unerfindlichen Gründen ein riesiger Abstand, bis zum Anfang des Formulars.
2.) wird die Formatierung für die label links der Radio Buttons nicht übernommen (Schriftart, -größe, etc.).
Diese sind auch nach unten verschoben.

Hier mal der in CF 7 erstellte Code:

[EDIT] Code gelöscht, da geändert (siehe Post weiter unten)

Mir ist im Firebug auch aufgefallen, dass CF7 alles in Tags schreibt. Kann man das unterbinden?

Ich hoffe, mir kann jemand helfen, ich verzweifel hier noch.

Besten Dank im Voraus

Pixelaner · 28.07.2014

Hi,

versuche mal wie folgt die automatischen p-Tags auszuschalten.

wp-config.php

PHP:

define( 'WPCF7_AUTOP', false );

dn3d_fanboy · 28.07.2014

Pixelaner schrieb:
Hi,

versuche mal wie folgt die automatischen p-Tags auszuschalten.

wp-config.php

PHP:

define( 'WPCF7_AUTOP', false );

Danke, werde ich später einmal ausprobieren.

Soweit sieht das Formular jetzt auch so aus wie gewollt, nur der Abstand nach oben ist immer noch da. Komischerweise verringert der sich aber, wenn ich Content vor den Formular-Shortcode schreibe.
So als ob das Formular absolut unten am Content-Bereich positioniert wurde.
Hat da irgendwer eine Idee?
Hier nochmal der Link:

Der Code von CF7:

Code:

<div class="tippformular">
  
   <label class="input-label clearfix" for="Name">Name*</label>
   [text* name class:input-feld placeholder "Dein Name"]

   <label class="input-label clearfix" for="Verein">Verein*</label>
   [text* verein class:input-feld placeholder "Dein Verein"]

   <label class="input-label clearfix" for="ID">ID*</label>
   [text* identification class:input-feld placeholder "Deine ID"]

   <label class="input-label clearfix" for="Email">Email-Adresse*</label>
   [email* email class:input-feld placeholder "Deine Email-Adresse"]

  <div class="clearfix"></div>

   <div class="radio-container">
      <label class="label-radio" for="Spiel1">
         Mannschaft 1 VS Mannschaft 2
      </label>
      <div class="radio-buttons">
         [radio radio-792 class:radio "1 (xx P.)" "0 (xx P.)" "2 (xx P.)"]
      </div>
      <div class="clearfix"></div>
   </div>

   <div class="radio-container">
      <label class="label-radio" for="Spiel2">
         Mannschaft 3 VS Mannschaft 4
      </label>
      <div class="radio-buttons">
         [radio radio-225 class:radio "1 (xx P.)" "0 (xx P.)" "2 (xx P.)"]
      </div>
      <div class="clearfix"></div>
   </div>

   <div class="radio-container">
      <label class="label-radio" for="Spiel3">
         Mannschaft 5 VS Mannschaft 6
      </label>
      <div class="radio-buttons">
         [radio radio-334 class:radio "1 (xx P.)" "0 (xx P.)" "2 (xx P.)"]
      </div>
      <div class="clearfix"></div>
   </div>

   <div class="radio-container">
      <label class="label-radio" for="Spiel4">
         Mannschaft 7 VS Mannschaft 8
      </label>
      <div class="radio-buttons">
         [radio radio-311 class:radio "1 (xx P.)" "0 (xx P.)" "2 (xx P.)"]
      </div>
      <div class="clearfix"></div>
   </div>

   <div class="radio-container">
      <label class="label-radio" for="Spiel5">
         Mannschaft 9 VS Mannschaft 10
      </label>
      <div class="radio-buttons">
         [radio radio-661 class:radio "1 (xx P.)" "0 (xx P.)" "2 (xx P.)"]
      </div>
      <div class="clearfix"></div>
   </div>

   <div class="radio-container">
      <label class="label-radio" for="Spiel6">
         Mannschaft 11 VS Mannschaft 12
      </label>
      <div class="radio-buttons">
         [radio radio-82 class:radio "1 (xx P.)" "0 (xx P.)" "2 (xx P.)"]
      </div>
      <div class="clearfix"></div>
   </div>

   <div class="radio-container">
      <label class="label-radio" for="Spiel7">
         Mannschaft 13 VS Mannschaft 14
      </label>
      <div class="radio-buttons">
         [radio radio-376 class:radio "1 (xx P.)" "0 (xx P.)" "2 (xx P.)"]
      </div>
      <div class="clearfix"></div>
   </div>

   <div class="radio-container">
      <label class="label-radio" for="Spiel8">
         Mannschaft 15 VS Mannschaft 16
      </label>
      <div class="radio-buttons">
         [radio radio-746 class:radio "1 (xx P.)" "0 (xx P.)" "2 (xx P.)"]
      </div>
      <div class="clearfix"></div>
   </div>

   <div class="radio-container">
      <label class="label-radio" for="Spiel9">
         Mannschaft 17 VS Mannschaft 18
      </label>
      <div class="radio-buttons">
         [radio radio-392 class:radio "1 (xx P.)" "0 (xx P.)" "2 (xx P.)"]
      </div>
      <div class="clearfix"></div>
   </div>

   <div class="radio-container">
      <label class="label-radio" for="Spiel10">
         Mannschaft 19 VS Mannschaft 20
      </label>
      <div class="radio-buttons">
         [radio radio-180 class:radio "1 (xx P.)" "0 (xx P.)" "2 (xx P.)"]
      </div>
      <div class="clearfix"></div>
   </div>

   [submit class:tipp-send "Senden"]

</div>

Und die CSS:

Code:

    /* --- Tippformular --- */
   
    .tippformular    {position: relative;
                    width: 580px;
                    margin-top: -500px;}

.input-label    {font-family: "Open Sans", sans-serif;
                font-size: 15px;
                color: #000;
                margin-bottom: 15px;
                float: left;}
               
.input-feld        {width: 350px;
                height: 22px;
                border: none;
                background: rgba(255,255,255,0.5);
                padding: 2px 3px;
                margin-bottom: 15px;
                font-family: "Open Sans", sans-serif;
                font-style: italic;
                font-size: 15px;
                color: #7e7e7e;
                float: right;}
               
.input-feld:hover    {background: rgba(255,255,255,1);
                    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,1);
                    box-shadow: 0 0 5px 0 rgba(0,0,0,1);
                    -moz-transition: all 0.3s ease-in;
                    -webkit-transition: all 0.3s ease-in;
                    -o-transition: all 0.3s ease-in;
                    transition: all 0.3s ease-in;}
                   
.radio-container    {width: 570px;
                    background: rgba(255,255,255,0.5);
                    margin-bottom: 10px;
                    height: 24px;
                    padding: 5px;
                    vertical-align: top;}

.radio-container:hover    {-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,1);
                        box-shadow: 0 0 5px 0 rgba(0,0,0,1);
                        -moz-transition: all 0.3s ease-in;
                        -webkit-transition: all 0.3s ease-in;
                        -o-transition: all 0.3s ease-in;
                        transition: all 0.3s ease-in;}

.label-radio    {font-size: 13px;
                vertical-align: top;
                float: left;
                margin-top: -10px;
                font-family: "Open Sans", sans-serif;
                font-size: 13px;}

.radio-buttons    {float: right;
                margin-right: 5px;}
               
.radio    {margin-right: 5px;
        font-family: "Open Sans", sans-serif;
        font-size: 13px;
        vertical-align: top;}
                   
.tipp-send    {width: 100px;
            height: 30px;
            border: 4px solid rgba(171,79,79,0.8);
            background: rgba(255,255,255,1);
            font-family: "Jockey One", sans-serif;
            font-size: 22px;
            font-weight: normal;
            letter-spacing: -1px;
            word-spacing: 2px;
            color: #c53b3b;
            line-height: 20px;
            float: right;
            }
   
.tipp-send:hover    {background: rgba(255,255,255,0.5);
                    border: 4px solid #7c3333;
                    color: #7c3333;
                    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,1);
                    box-shadow: 0 0 5px 0 rgba(0,0,0,1);
                    -moz-transition: all 0.3s ease-in;
                    -webkit-transition: all 0.3s ease-in;
                    -o-transition: all 0.3s ease-in;
                    transition: all 0.3s ease-in;}

Es wäre toll, wenn da irgendwer eine Idee hat. CSS-Eigenschaften für <form> gibt es keine.

TPHeinz · 29.07.2014

Moin,

.tippformular {position: relative;

width: 580px; ......... nehme an die Breite ist zu viel

setze die mal runter

dn3d_fanboy · 29.07.2014

Die Breite ist vollkommen in Ordnung, ich hätte sogar noch 20px Platz. Sieht man ja auch auf der Seite.

TPHeinz · 29.07.2014

<label class="input-label clearfix" for="Name">Name*</label> 

dann nimm mal clearfix und das am Ende weg:

<label class="input-label" for="Name">Name*</label>