### [Como Criar um Campo de Autocompletar no Seu Formulário](https://wpforms.com/developers/how-to-create-an-autocomplete-field-in-your-form/) **Publicado:** 20 de junho de 2023 **Autor:** Equipe Editorial **Resumo:** Este tutorial mostrará como transformar um campo de Texto de Linha Única em um campo de autocompletar usando JavaScript e CSS. **Conteúdo:** Gostaria de criar um campo de autocompletar no seu formulário? A funcionalidade de autocompletar pode melhorar significativamente a experiência do usuário, fornecendo sugestões enquanto os usuários digitam, economizando tempo e garantindo a consistência dos dados. Neste artigo, demonstraremos como usar JavaScript para implementar o autocompletar para um campo de entrada de texto com uma lista de respostas pré-aprovadas. ## Criando o formulário Começaremos criando um novo formulário e adicionando nossos campos, que incluirão pelo menos um campo de formulário **Texto de Linha Única**. Se precisar de ajuda para criar seu formulário, [revise este guia útil](https://wpforms.com/docs/creating-first-form/ "Criando Seu Primeiro Formulário").  ## Criando um campo de autocompletar Agora é hora de adicionar este trecho ao seu site. Se precisar de assistência sobre onde e como adicionar um trecho personalizado ao seu site, [verifique este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Como Adicionar PHP ou JavaScript Personalizado para WPForms"). ``` /** * Transforma qualquer campo de Texto de Linha Única em um campo de autocompletar * * @link https://wpforms.com/developers/how-to-create-an-autocomplete-field-in-your-form/ */ function wpf_dev_text_autocomplete( ) { ?> **Categorias:** Campos **Tags:** CSS, Javascript, JS ---