Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Hallo grüße euch :)
Vielleicht kann mir jemand bezüglich meines Kontaktformulars helfen. Ich möchte, dass die Felder nicht untereinander, sondern in 2 Spalten dargestellt werden.
Versucht habe ich es bereits mit:
<div class="wps-form-row">
und
<div class="wps-form-column">
wie habe ich diese richtig zu platzieren?
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.
Hast du denn das CSS zu deinem Code auch eingebunden?
https://wp-styles.de/contact-form-7…hrspaltig-1026/
Ansonsten versuche es mit display:inline; oder mit display:flex; oder mit float:left;. Es gibt so viele Möglichkeiten.
@SirEctor Vielen Dank für deine Antwort!
Bloß weiß ich damit leider überhaupt nichts anzufangen.
Kannst du hieraus entnehmen ob ich den Code eingebunden habe? :(
<div class="wps-form">
<!-- Contact Form 7 Code -->
</div>
<div class="wps-form-row">
<div class="wps-form-column">
<label> Firmenname (Pflichtfeld)
[text* your-name] </label>
</div>
</div>
<div class="wps-form-column">
<label> Ansprechpartner
[text your-name] </label>
</div>
</div>
<div class="wps-form-row">
<div class="wps-form-column">
<label> E-Mail-Adresse (Pflichtfeld)
[email* your-email] </label>
</div>
</div>
<div class="wps-form-column">
<label> Telefon
[tel tel-154] </label>
</div>
</div>
<div class="wps-form-row">
<div class="wps-form-column">
<label> Artikel
[text product-name] </label>
</div>
</div>
<div class="wps-form-column">
<label> Menge/Stückzahl (Pflichtfeld)
[number* number-606] </label>
</div>
</div>
</div>
<label> Anmerkungen
[textarea your-message] </label>
[submit "Senden"]
nein hast du nicht. Hast du den Link angeklickt?
Klar, den Link hatte ich zuvor schon mal gefunden, weshalb ich überhaupt von diesem "row & column" erfahren hatte :D
Ich denke du meinst diesen Kram hier.. ?
"<style>
.wps-form {
width: 100%;
margin: 0 auto;
}....."
Wie ich dem Link entnehmen kann ist dies doch bloß für mobile Ansichten oder?
Inzwischen kommt beim speichern auch einfach die Fehlerseite 404 :(
Bin für heute auch echt durch mit dem Thema.
Erstens:
Wie ich dem Link entnehmen kann ist dies doch bloß für mobile Ansichten oder?
Das stimmt so nicht!! Genau lesen und nochmals lesen und .......... [size=10]/* Notebook / Desktop */[/SIZE]
Zweitens:
Wenn ich den Code in #3 ansehe stimmen einige </div> NICHT.
Formatiere den Code wie im Link von @SirEctor - mit Einrücken der zusammengehörigen div´s und Kommentiere die einzelnen Blöcke, wie im Link!
Schon das erste </div> ist falsch!!!
Da steht "Zunächst wird der gesamte Code mit einem Container umfasst" wobei die Betonung auf "der gesamte Code" wird umfasst - kapiert?
Das ist so ungefähr wie Rechnen mit Klammern. Wo eine geöffnet wird muß die auch wieder geschlossen werden - Achtung bei Verschachtelung! ;-)
Wenn du eine zu früh/spät schließt, wird der Teil danach nicht richtig berechnet.
<div class="wps-form">
<div class .....-row >
<div class .....-column >
<label> xxxxxxxx </label>
</div>
</div>
.
.
.
</div>So sieht das mit dem Notepad++ aus - schön übersichtlich
Das ist aber nur die Vorarbeit, ohne der Anpassung des Styles in den "Zusätzlichen CSS" wird da nichts mit 2 Spalten!!!! (Steht aber auch im Link von #2).
@SEpp55 Hey danke dir :)
Ich setz mich gleich nochmal ran & schaue was sich machen lässt.
"Ungefähr wie rechnen mit Klammern.."
Kein Wunder weshalb ich sowas nicht verstehe bzw. nicht verstehen will :D
Danke dir!
Inzwischen konnte ich ein ganz bisschen mehr Verständnis erzeigen :D
Sobald ich nun aber:
<style>
.wps-form {
width: 100%;
margin: 0 auto;
}
.wps-form-row {
display: flex;
flex-direction: column;
width: 100%;
}....
einfüge, kommt die Fehlerseite 403.
Wieder ein simpler Denkfehler?
Auflösung!
Ja, dieser Block sollte in die Zusätzlichen CSS eingefügt werden und nicht ins CF7 Formular!!
Wobei mit <style> am Beginn und mit </style> am Ende Fehler ausgegeben werden - das austauschen gegen eigenen Kommentar -
z.B.
/*beginn-cf7-style 2-spaltig*/
.wps-form {
width: 100%;
margin: 0 auto;
}
.
.
.
.
/*ende-cf7-style*/
Damit wird das dann 2-spaltig ;-)
Sagen wir mal so.. es ist nun mehrspaltig wie gewünscht ;)
Ich danke dir nochmal :) Werde nun für "den Rest" jemand externen beauftragen.
Überhaupt nicht meine Welt.
Lösche mal die beiden div's
Sorry, ich habe die 2. Seite nicht beachtet .....
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!