Resumo de IA
Gostaria de adicionar o Material Design aos seus campos do WPForms? Esse tipo de design é uma forma muito popular de adicionar um visual moderno e limpo aos seus campos de formulário. Usando um pequeno trecho de PHP junto com CSS, você pode facilmente aplicar esse visual aos seus WPForms.
Neste tutorial, vamos guiá-lo por cada etapa de como conseguir isso.
Criando Seu Formulário
Primeiro, você precisará criar seu formulário e adicionar os campos que deseja. Se precisar de ajuda para criar seu formulário, por favor, consulte este tutorial.
Para fins deste tutorial, estamos apenas criando um formulário de feedback simples. Nosso exemplo incluirá os campos de formulário Nome, Email, Assunto e Texto em Parágrafo.
É importante lembrar que nosso tutorial foca em adicionar esse tipo de design apenas a campos que aceitam entrada de texto direta. Adicionar esse tipo de design a todos os campos do formulário pode não ter o efeito desejado que você espera, então lembre-se de testar seu formulário primeiro para garantir que o visual seja exatamente o que você procura.
Material Design – Trecho de PHP
Em seguida, vamos adicionar um pequeno trecho de PHP. Precisamos fazer isso para mover o rótulo do campo do formulário de antes do campo para depois.
Para obter ajuda sobre como adicionar um trecho de código ao seu site, por favor, consulte este tutorial.
Este trecho só será executado no ID do formulário 697. Se o ID do formulário corresponder, nossa primeira função wpf_dev_display_field_before removerá a ação PHP que define o rótulo do campo para ser exibido antes do campo do formulário. A próxima função forçará o rótulo a aparecer depois do campo do formulário.
Material Design – Trecho de CSS
Seu passo final é adicionar este CSS ao seu site, que adicionará o visual do Material Design a todos os nossos campos de formulário.
Se precisar de ajuda para adicionar CSS ao seu site, por favor, consulte este tutorial.
E é isso! Você adicionou o visual do Material Design aos seus campos de formulário! Se você quiser experimentar outras soluções de CSS, dê uma olhada em toda a nossa Documentação de Estilização.