Mehrspaltiges Kontaktformular mit Contact Form 7

[LauraK2805]

Hallo Zusammen,
ich bin totaler Anfänger und absolut neu in dem Gebiet, weshalb ich eure Hilfe brauche.

Ich habe ein mehrspaltiges Kontaktformular mit dem Contact Form 7 Plugin erstellt.
Mein Problem ist, dass man bei dem Textfeld "Name" und "Email" nichts mehr eintragen kann. Das passiert sobald ich in css meine linken Textfelder mit "float: left" positionieren möchte.
Komischerweise funktionieren die rechten Textfelder einwandfrei. Betrifft also nur die zwei Linken Felder.

Woran kann das liegen?

Hier meine 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>

und css:

.form_half {
width: 49.5%;
float: left;

}
.form_half_last {
margin-right:0;
}


Vielen lieben Dank im Vorraus!

 

[isd]

Wordpress mit welchem Theme wird da verwendet?
Funktioniert es denn mt dem Standard Wordpress Theme?

 

[LauraK2805]

Wordpress mit welchem Theme wird da verwendet?
Funktioniert es denn mt dem Standard Wordpress Theme?

Ich habe das Theme OceanWP. Mit dem Standard habe ich es noch nicht probiert. Meine Seite ist halt mit dem OceanWP aufgebaut...

 

[Midnight Sun]

Hallo Zusammen,
ich bin totaler Anfänger und absolut neu in dem Gebiet, weshalb ich eure Hilfe brauche.

Ich habe ein mehrspaltiges Kontaktformular mit dem Contact Form 7 Plugin erstellt.
Mein Problem ist, dass man bei dem Textfeld "Name" und "Email" nichts mehr eintragen kann. Das passiert sobald ich in css meine linken Textfelder mit "float: left" positionieren möchte.
Komischerweise funktionieren die rechten Textfelder einwandfrei. Betrifft also nur die zwei Linken Felder.

Woran kann das liegen?

Hier meine Formularvorlage:

<p>


<p> [submit "Senden"] </p>

Du öffnest am Anfang einen Absatz <p> schließt ihn aber nicht mit </p>
Zudem würde ich die <div> weglassen und zB <span> verwenden.
Wenn zB Bootstrap im Hintergrund läuft, solltest du das CSS von dort verwenden.

 

[LauraK2805]

Du öffnest am Anfang einen Absatz <p> schließt ihn aber nicht mit </p>
Zudem würde ich die <div> weglassen und zB <span> verwenden.
Wenn zB Bootstrap im Hintergrund läuft, solltest du das CSS von dort verwenden.

Stimmt das <p> war unnötig. Habe ich gelöscht. die <div> habe ich alle durch >span> ersetzt. Leider funktioniert es immer noch nicht. Von Bootstrap höre ich das erste Mal

 

[Midnight Sun]

Bin mir nicht mehr sicher, habe das Kontaktformular schon sehr lange nicht mehr verwendet...

Gib dem div, p oder span mal eine Weite von: width: 50%; und guck was passiert.

 

[LauraK2805]

Bin mir nicht mehr sicher, habe das Kontaktformular schon sehr lange nicht mehr verwendet...

Gib dem div, p oder span mal eine Weite von: width: 50%; und guck was passiert.

leider auch nicht. Ich probiere es jetzt über position: relativ (left,right,bottom,top)

 

[netzgestaltung]

ich denke für dich wäre das hier ganz gut: https://wordpress.org/plugins/cf7-grid-layout/

div darf nicht in p sein, da sind nur inline-elemente erlaubt.

ansonsten würde ich das mit flex statt float lösen:

<div class="columns double">
  <div class="column">
    <p>Name [text your-name]
      E-Mail-Adresse [email* your-email]
    </p>
  </div>
  <div class="column">
    <p>PLZ und Wohnort [text your-plz]
      Telefonnummer [tel your-telefon]
    </p>
  </div>
</div>

@media screen and (min-width: 500px) {
  .columns{
    display:flex;
    justify-content:space-between;
  }
  .columns.double .column{
    flex-basis:49%;
  }
}

half würde ich als klassennamen unbedingt vermeiden, denn auf mobil ist es dann ggf unter einander, da passt dann kaum mehr ein name gescheit. (zb auch before statt left oder after statt right bzw first, second, ...) eine last klasse ist meist nicht mehr nötig, wenn IE6/7 nicht mehr unterstützt wird, dafür gibts den :last-child oder :last-of-type pseudoselector

hier gibts alle flex optionen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/