Contact Form 7 Spaltenbreite Numbers Feld

Gelöst lackwerk165
(@lackwerk165)

vor 2 Jahren, 3 Monaten

Hallo liebes Forum,

ich nutze das Contact Form 7 (Landing Page nicht online) und wollte ein Numbers Feld einfügen. Leider bin ich am verzweifeln, weil sich das Feld nicht über die volle Bereite der Seite erstreckt. Text- oder Dropdownfelder gehen über 100%. Das Numbers Feld nimmt gefühlt nur 5% in Anspruch.

Aus diesem Post (https://de.wordpress.org/support/topic/contact-form-7-textfeld-soll-nur-zahlen-akzeptieren/) konnte ich bereits mitnehmen, wie man die Pfeile an der Seite entfernt.

Hat jemand einen Tipp für mich? Ich nutze das WP-Ocean Theme und Elementor Free.

Viele Grüße & danke
Sascha

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 3 Monaten
Wenn du in Contact Form 7 ein Zahlenfeld einfügst, kannst du eine CSS-Klasse für das Feld angeben:

(zum Vergrößern anklicken)

Das CF7-Tag sieht dann sinngemäß so aus:
[number number-981 class:langesfeld "10"]

Diese CSS-Klasse kannst du dann verwenden, um das Feld zu formatieren:
```
input.langesfeld {
  width: 100%;
}

/* Chrome, Safari, Edge, Opera */
input.langesfeld::-webkit-outer-spin-button,
input.langesfeld::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"].langesfeld {
  -moz-appearance: textfield;
}
```
Die CSS-Klasse langesfeld kannst du auch anderen Feldern zuweisen, die dann auch auf 100% Breite des Blocks gesetzt werden. Alternativ kannst du auch eine feste Größe in Pixeln vorgeben, was aber nicht responsive ist und auf kleinen Bildschirmen abgeschnitten werden könnte.

Übrigens akzeptiert das Zahlenfeld (anders als damals von mir beschrieben) auch alphanumerische Eingaben, gibt aber in der E-Mail, die anschließend versender wird, nur ein leeres Feld aus. Es gibt keine Validierung der Eingabe. Der Sinn des Zahlenfeldes ist lediglich, das Eingabeformat des Formularfelds zu ändern (was du dann mit CSS-Regeln verwirfst).
Wenn du eine Validierung möchtest, solltest du ein Plugin wie Jquery Validation For Contact Form 7 verwenden.
- Diese Antwort wurde geändert vor 2 Jahren, 3 Monaten von Bego Mario Garde.
Thread-Starter lackwerk165
(@lackwerk165)

vor 2 Jahren, 3 Monaten

Erstmal vielen vielen Dank für diese superschnelle und ausführliche Rückmeldung an einem Sonntag!!!! Da bekomme ich ein richtig schlechtes Gewissen 🙂

Leider bleibt das Feld bei seiner ursprünglichen Größe. Ich habe das Formular jetzt mal auf eine Testseite gepackt http://holzfenster-tryba.de/copy-kundenservice/

Bestimmt wieder irgendein dummer Fehler

Danke auch für den Tip mit der Validierung!

Beste Grüße
Sascha
bscu
(@bscu)

vor 2 Jahren, 3 Monaten
Ich sehe bei dem Feld:
```
form input[type="number"] {
    max-width: 50px;
    padding: 0 0 0 8px;
}
```
Also kein Wunder, dass es so schmal ist. Du könntest im Custom-CSS dies eintragen:
```
form input[type="number"] {
    max-width: 100%;
}
```
- Diese Antwort wurde geändert vor 2 Jahren, 3 Monaten von bscu.
Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 3 Monaten

Ich hoffe ja, dass die Auftragsnummer nicht soooo lang ist. 😀

Nein, im Ernst – ich würde das Formular in einen Container packen, der eine maximale Breite von 600 Pixeln hat. Das erspart dem Webseitenbesucher ein Schleudertrauma.
Thread-Starter lackwerk165
(@lackwerk165)

vor 2 Jahren, 3 Monaten
Vielen Dank an @pixolin und @bscu! Das waren sehr wertvolle Tipps! Ich habe mich zum ersten Mal an den Theme Code getraut, um die 100% width einzustellen. (Keine Ahnung, warum das auf 50px limitiert wurde)

Die Auftragsnummern sind 9-stellig und passen wunderbar in 600px 🙂 Habe das jetzt schon auf der Live Seite eingebaut!

Jetzt ist sogar noch etwas vom Sonntag übrig

Vielen Dank noch mal
Sascha

edit: gelöst 🙂
- Diese Antwort wurde geändert vor 2 Jahren, 3 Monaten von lackwerk165.
Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 3 Monaten

Schön, dass wir helfen konnten.

Contact Form 7 ist ein tolles Plugin, auch wenn es erst einmal etwas unscheinbar daherkommt. Aber die Möglichkeiten begeistern mich immer wieder.

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Das Thema „Contact Form 7 Spaltenbreite Numbers Feld“ ist für neue Antworten geschlossen.

Ansichten