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

Contact 7 Form

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von Gast 119669, 2. Februar 2020.

Schlagworte:
  1. 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?
     
  2. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.341
    Zustimmungen:
    417
  3. @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"]
     
  4. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.341
    Zustimmungen:
    417
    nein hast du nicht. Hast du den Link angeklickt?
     
  5. 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.
     
  6. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.533
    Zustimmungen:
    402
    Erstens:
    Das stimmt so nicht!! Genau lesen und nochmals lesen und .......... /* Notebook / Desktop */

    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.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    So sieht das mit dem Notepad++ aus - schön übersichtlich
    upload_2020-2-3_19-39-1.png


    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).
     
    Gast 119669 gefällt das.
  7. @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!
     
  8. 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?
     
  9. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.533
    Zustimmungen:
    402
    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.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Damit wird das dann 2-spaltig ;)

    upload_2020-2-6_13-12-36.png upload_2020-2-6_13-9-58.png
     
    Gast 119669 gefällt das.
  10. 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.
     

    Anhänge:

    • 11.JPG
      11.JPG
      Dateigröße:
      50,1 KB
      Aufrufe:
      3
    • 22.JPG
      22.JPG
      Dateigröße:
      53,1 KB
      Aufrufe:
      2
    • 33.JPG
      33.JPG
      Dateigröße:
      45,4 KB
      Aufrufe:
      3
  11. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.533
    Zustimmungen:
    402
    Lösche mal die beiden div's
    upload_2020-2-6_13-45-26.png
     
    Gast 119669 gefällt das.
  12. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.533
    Zustimmungen:
    402
    Sorry, ich habe die 2. Seite nicht beachtet .....

    upload_2020-2-6_13-56-25.png
     
    Gast 119669 gefällt das.
  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