Formularfeld-Eingaben großschreiben

Einleitung

Möchten Sie die Eingaben in Ihren WPForms-Formularfeldern großschreiben? Sie können problemlos CSS und text-transform verwenden, um die Eingabewerte zu formatieren. Die Eingabe wird jedoch genau so gespeichert, wie sie eingegeben wurde. Mit einem kleinen JavaScript-Snippet können Sie in Echtzeit sicherstellen, dass diese Werte mit Großschreibung angezeigt und gespeichert werden.

In diesem Tutorial führen wir Sie Schritt für Schritt durch, wie Sie dies erreichen.

Erstellung des Formulars

Zuerst müssen Sie Ihr Formular erstellen. Für dieses Tutorial haben wir unserem Formular ein Feld für Absatztext und ein Feld für Einzeiligen Text hinzugefügt.

Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, lesen Sie bitte diese Dokumentation.

Hinzufügen des CSS-Klassennamens

Als Nächstes verwenden wir eine CSS-Klasse für jedes dieser Formularfelder, um das CSS für die Regel text-transform auszulösen, die wir in einem anderen Schritt hinzufügen werden. Um die erforderliche CSS-Klasse hinzuzufügen, klicken Sie im Formular-Generator auf das Feld Einzeiliger Text und dann auf Erweitert, um es zu öffnen.

Unter CSS-Klassen fügen Sie capitalize hinzu und wiederholen diese Schritte auch für das Feld Absatztext.

Implementierungsoptionen

Nur mit CSS (optional)

Dieses benutzerdefinierte CSS bewirkt, dass das Formularfeld großgeschrieben angezeigt wird, die Eingabe jedoch weiterhin die Feldwerte genau so anzeigt, wie sie eingegeben wurden.

Wenn Sie Hilfe beim Hinzufügen von benutzerdefiniertem CSS benötigen, lesen Sie bitte dieses Tutorial.

Kopieren Sie dieses CSS einfach und fügen Sie es auf Ihrer Website ein.

.capitalize {
    text-transform: capitalize;
}

Nur mit JavaScript (empfohlen)

Um die Eingabewerte von Formularfeldern während der Formularausfüllung im Handumdrehen großzuschreiben und sicherzustellen, dass die Eingabeinformationen mit der Großschreibung gespeichert werden, fügen wir ein kleines Skript hinzu, das das Feld sofort großschreibt, während der Text eingegeben wird.

Wenn Sie Hilfe beim Hinzufügen von JavaScript zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.

/*
 * Capitalize form field text
 *
 * @link  https://wpforms.com/developers/how-to-capitalize-form-field-inputs/ 
 */

function wpf_dev_capitalize() {
    ?>
    <script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery( '.wpforms-field.capitalize input' ).keyup(function() {
				jQuery(this).val(jQuery(this).val().substr(0, 1).toUpperCase() + 	jQuery(this).val().substr(1).toLowerCase());
				});
		jQuery( '.wpforms-field.capitalize textarea' ).keyup(function() {
				jQuery(this).val(jQuery(this).val().substr(0, 1).toUpperCase() + 	jQuery(this).val().substr(1).toLowerCase());
			});
	});
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_capitalize', 30 );

Dieser Ausschnitt sucht nach jedem Formularfeld, das nicht nur die Standard-CSS-Klasse wpforms-field, sondern auch die CSS-Klasse capitalize hat. Während der Benutzer tippt, wird der Text automatisch großgeschrieben, und wenn das Formular übermittelt wird, speichert die Eingabe diese Felder mit Großbuchstaben.

FAQ

Was, wenn ich den gesamten Text großschreiben möchte, nicht nur den ersten Buchstaben?

Wenn der Text vollständig großgeschrieben werden soll (z. B. „hallo“ wird zu „HALLO“), verwenden Sie text-transform: uppercase anstelle von text-transform: capitalize. Weitere Details zu den CSS-Eigenschaften für die Texttransformation finden Sie in Mozillas Dokumentation zu text-transform.

Und das ist alles, was Sie brauchen! Möchten Sie verhindern, dass Benutzer URLs in Ihre Formularfelder eingeben? Sehen Sie sich unseren Artikel über das Blockieren von URLs in Formularfeldern an.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end