Resumo de IA
Gostaria de adicionar o Material Design aos seus campos do WPForms? Este tipo de design é uma forma muito popular de adicionar um aspeto moderno e limpo aos seus campos de formulário. Usando um pequeno trecho de PHP juntamente com CSS, pode facilmente aplicar este aspeto aos seus WPForms.
Neste tutorial, vamos guiá-lo através de cada passo sobre como conseguir isto.
Criar o Seu Formulário
Primeiro, terá de criar o seu formulário e adicionar os campos que deseja. Se precisar de assistência na criação do seu formulário, consulte este tutorial.
Para efeitos deste tutorial, estamos apenas a criar um formulário de feedback simples. O nosso exemplo incluirá os campos de formulário Nome, Email, Assunto e Texto em Parágrafo.
É importante lembrar que o nosso tutorial foca-se em adicionar este tipo de design apenas a campos que aceitam entrada de texto direta. Adicionar este tipo de design a todos os campos do formulário pode não ter o efeito desejado que espera, por isso lembre-se de testar o seu formulário primeiro para garantir que o aspeto é exatamente o que procura.
Material Design – Trecho PHP
Em seguida, vamos adicionar um pequeno trecho de PHP. Precisamos de fazer isto para mover o rótulo do campo do formulário de antes do campo para depois.
Para obter assistência sobre como adicionar um trecho de código ao seu site, consulte este tutorial.
Este trecho só será executado no ID de formulário 697. Se o ID do formulário corresponder, a 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á então o rótulo a aparecer depois do campo do formulário.
Material Design – Trecho CSS
O seu passo final é adicionar este CSS ao seu site, que adicionará o aspeto de design Material a todos os nossos campos de formulário.
Se precisar de ajuda para adicionar CSS ao seu site, consulte este tutorial.
E é tudo! Adicionou agora o aspeto de Material Design aos seus campos de formulário! Se quiser experimentar outras soluções de CSS, dê uma vista de olhos a toda a nossa Documentação de Estilização.