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.
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
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, 9 Monaten von bscu.
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.
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, 9 Monaten von lackwerk165.
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.