<html lang="de-de" dir="ltr"><head></head><body>### [So erstellen Sie ein Autovervollständigungsfeld in Ihrem Formular](https://wpforms.com/developers/how-to-create-an-autocomplete-field-in-your-form/)

**Veröffentlicht:** 20. Juni 2023
**Autor:** Redaktionsteam

**Auszug:** Diese Anleitung zeigt Ihnen, wie Sie ein einzeiliges Textfeld mithilfe von JavaScript und CSS in ein Autovervollständigungsfeld umwandeln.

**Inhalt:**

Möchten Sie ein Autovervollständigungsfeld in Ihrem Formular erstellen? Die Autovervollständigungsfunktion kann die Benutzererfahrung erheblich verbessern, indem sie Vorschläge anbietet, während Benutzer tippen, Zeit spart und die Datenkonsistenz sicherstellt. In diesem Artikel zeigen wir Ihnen, wie Sie JavaScript verwenden, um die Autovervollständigung für ein Text-Eingabefeld mit einer Liste vordefinierter Antworten zu implementieren.

## Erstellen des Formulars

Wir beginnen mit der Erstellung eines neuen Formulars und dem Hinzufügen unserer Felder, darunter mindestens ein Formularfeld vom Typ **Einzeiliger Text**. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, [lesen Sie bitte diese hilfreiche Anleitung](https://wpforms.com/docs/creating-first-form/ "Erstellen Ihres ersten Formulars").

![Erstellen Sie Ihr Formular und fügen Sie Ihre Felder hinzu](https://wpforms.com/wp-content/uploads/2023/06/wpforms-autocomplete-create-form.jpg)

## Erstellen eines Autovervollständigungsfelds

Jetzt ist es an der Zeit, diesen Codeausschnitt zu Ihrer Website hinzuzufügen. Wenn Sie Hilfe benötigen, wo und wie Sie einen benutzerdefinierten Codeausschnitt zu Ihrer Website hinzufügen können, [lesen Sie bitte diese Anleitung](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "So fügen Sie benutzerdefiniertes PHP oder JavaScript für WPForms hinzu").

```

/**
 * Wandelt jedes einzeilige Textfeld in ein Autovervollständigungsfeld um
 *
 * @link https://wpforms.com/developers/how-to-create-an-autocomplete-field-in-your-form/
 */
  
function wpf_dev_text_autocomplete( ) {
?&gt;

**Kategorien:** Felder

**Schlagwörter:** CSS, Javascript, JS

---</body></html>