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 Form 7 Breite der Felder

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von Stefan341, 11. Oktober 2018.

  1. Stefan341

    Stefan341 Member

    Registriert seit:
    24. April 2018
    Beiträge:
    24
    Zustimmungen:
    0
    Hallo,
    Ich habe ein Problem mit dem Plugin Contact Form 7.

    Ich würde gerne die Breite einzelner Felder bestimmen. Zb muss das Feld für die Hausnummer nicht so breit sein wie das Feld für die Straße.

    Außerdem möchte ich einzelne Felder auf einer maximale Anzahl von Zeichen begrenzen. Super wäre es, wenn eine Fehlermeldung erscheint, wenn zu viele Zeichen eingegeben wurden.

    Geht sowas?

    Danke im Voraus
     
    #1 Stefan341, 11. Oktober 2018
  2. Henk1060

    Henk1060 Well-Known Member

    Registriert seit:
    4. September 2014
    Beiträge:
    3.927
    Zustimmungen:
    349
    #2 Henk1060, 11. Oktober 2018
  3. Stefan341

    Stefan341 Member

    Registriert seit:
    24. April 2018
    Beiträge:
    24
    Zustimmungen:
    0
    Das wäre in meinem Fall ja size. Aber egal was ich da angebe, es hat keine Wirkung.
     
    #3 Stefan341, 11. Oktober 2018
  4. Stefan341

    Stefan341 Member

    Registriert seit:
    24. April 2018
    Beiträge:
    24
    Zustimmungen:
    0
    Ich hoffe nochmal auf etwas Hilfe.
    So sehen meine Felder aus. Ich möchte sie nebeneinander haben und unterschiedliche Längen verwenden. Das Feld für die Hausnummer muss ja nicht so lang sein sein wie das Feld für zB. die Straße. Mit folgendem Code steht es untereinander und die size-Angabe hat keine Wirkung.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #4 Stefan341, 6. November 2018
  5. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    152
    Zustimmungen:
    9
    Dass die untereinander stehen soll schon so sein. Size sagt NICHT aus, dass das Feld 10(was eigentlich?) lang ist, sondern dass die maximalen Zeichen innerhalb des Feldes 10 sind.
    Um die Länge anzupassen, schreibst du im Customizer unter zusätzliche CSS:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das dann natürlich angepasst auf alle Felder.
     
    #5 fhwebdesign, 6. November 2018
  6. Stefan341

    Stefan341 Member

    Registriert seit:
    24. April 2018
    Beiträge:
    24
    Zustimmungen:
    0
    Super. Danke!
    Ich bin eher dafür es in der style.css des Child-Themes zu machen, aber das ist ja egal.

    Nun brauche ich nur noch eine Lösung für das Problem einzelne Felder nebeneinander zu bekommen und dann zwischen den Feldern den Abstand zu bestimmen. Hat da jemand eine Idee?
     
    #6 Stefan341, 7. November 2018
  7. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    152
    Zustimmungen:
    9
    Morgen,
    ich weiß ja nicht wie versiert du bist, deshalb der Rat zum Customizer. Ansonsten würde ich es auch in die style.css schreiben.

    Nebeneinander bekommst du sie normalerweise so:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Abstände dann über padding / margin anpassen.

    Vorsicht: Dieser CSS-Code greift auf alle ContactForm7-Formulare!
     
    #7 fhwebdesign, 7. November 2018
    Zuletzt bearbeitet: 7. November 2018
  8. Stefan341

    Stefan341 Member

    Registriert seit:
    24. April 2018
    Beiträge:
    24
    Zustimmungen:
    0
    Das hat leider keine Wirkung :(
     
    #8 Stefan341, 7. November 2018
  9. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    152
    Zustimmungen:
    9
    Dann bräuchte ich mal bitte den Link zur Seite. Je nach Version von ContactForm7 ist der Aufbau leicht anders.
     
    #9 fhwebdesign, 7. November 2018
  10. Stefan341

    Stefan341 Member

    Registriert seit:
    24. April 2018
    Beiträge:
    24
    Zustimmungen:
    0
    https://fahrschulteamborken.de/onlineanmeldung/
     
    #10 Stefan341, 7. November 2018
  11. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    152
    Zustimmungen:
    9
    Danke. Versuche mal bitte alle <p>(zumindest die, die mit den nebeneinander-Feldern in Verbindung stehen) mit einer individuellen ID zu versehen. Danach lässt sich das einfacher abarbeiten.
     
    #11 fhwebdesign, 7. November 2018
  12. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    #12 maxe, 7. November 2018
    fhwebdesign gefällt das.
  13. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    152
    Zustimmungen:
    9
    #13 fhwebdesign, 7. November 2018
  14. Stefan341

    Stefan341 Member

    Registriert seit:
    24. April 2018
    Beiträge:
    24
    Zustimmungen:
    0
    Ich habe es jetzt nach dem zweiten Link gemacht. Hat super geklappt.
    Jetzt habe ich noch eine andere Frage. Ich habe meine Eingabefelder stylisch etwas verändert. Das funktioniert ja ganz gut im css.

    Auf Input sprechen nur Textfelder an. Was muss ich angeben um Pull-Down-Menüs, Textareas, Radio-Buttons und die normalen Auswahlfelder anzusprechen?
     
    #14 Stefan341, 8. November 2018
  15. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    152
    Zustimmungen:
    9
    Da nutzt du dann folgende elemente anstatt input[name=hsn]:
    select
    textarea
    input[type=radio]
    und
    input
     
    #15 fhwebdesign, 8. November 2018
  16. TobiasNDS

    TobiasNDS Member

    Registriert seit:
    28. März 2014
    Beiträge:
    9
    Zustimmungen:
    0
    Hallo zusammen,
    der Beitrag ist zwar schon älter, könnte mir aber trotzdem helfen.

    Wofür steht das hsn in dem Beispiel?
    input[name=hsn] { width: 50px; }

    Ist hsn der Name des jeweiligen Elementes von Contact Form 7?

    Bei mir heißt es z.B. "vorname-299":

    <label> Vorname
    [text* vorname-299 id:vorname class:vorname placeholder "Vorname"] </label>


    Füge ich nur die size und maxlength hinzu, wird das Textfeld nicht mehr angezeigt:

    <label> Vorname
    [text* vorname-299 id:vorname class:vorname placeholder "Vorname" size:50 maxlength:60] </label>


    Über eure Hilfe würde ich mich sehr freuen!
     
    #16 TobiasNDS, 22. November 2020
    Zuletzt bearbeitet: 22. November 2020
  17. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.660
    Zustimmungen:
    1.783
    Das Beispiel nutzt das name Feld als Selektor für CSS. Wenn Dein Feld einen id oder eine class hat, kannst Du auch das für CSS verwenden. Mehr dazu CSS Grundlagen Selektoren (google).

    Ansonsten versuche mal, die Reihenfolge der Felder lt. Dokumentation Contact Form 7 zu verwenden.
     
    #17 b3317133, 22. November 2020
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  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.
    Akzeptieren Weitere Informationen...
    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.
    Akzeptieren Weitere Informationen...
    Information ausblenden