Se você não sabe já, o Gravity Forms é, de longe, o plugin de formulários de contato do WordPress, mais novinho para iniciantes. Nós usamos isso em nosso site da Galeria WordPress, site WordPress Coupons e praticamente todos os novos clientes também. Recentemente, ao trabalhar no site de um cliente, tivemos que ajustar o estilo do formulário para combinar o design que exigiu que nós colocássemos texto do espaço reservado em Gravity Forms. Infelizmente e surpreendentemente, esse recurso não é incorporado ao Gravity Forms (Yet). Enquanto eles têm uma opção para adicionar texto do espaço reservado em campos suspensos e campo de postagem: categoria, não há nenhuma opção para adicionar espaço reservado nos campos de entrada e campos de texto. Isso se tornou um grande problema para nós. Pesquisamos através da área de suporte de formulários Gravity onde a única solução disponível era um hack que nem funcionava corretamente. Embora nos permitisse colocar texto no espaço reservado, teve problemas importantes. Se o usuário acabou de enviar sem preencher o campo, o formulário irá validar em vez de retornar erros. Após uma boa pesquisa, acabamos encontrando a solução. Neste artigo, mostraremos como adicionar texto do espaço reservado em formas de gravidade usando filtros jQuery e Gravity Form.
Então, você provavelmente está se perguntando por que diabos precisamos de texto do espaço reservado quando os rótulos existem? Bem, no projeto em que estávamos trabalhando, não podíamos usar rótulos para fins de estilo.
Tudo o que precisamos fazer foi adicionar uma função usando os filtros Gravity Forms e usar jQuery para enviar o texto.
Código final
O código final está abaixo. Você pode simplesmente copiar e colar isso em seu arquivo functions.php e fazê-lo funcionar. Mas se você quiser ler mais sobre a função e como ela funciona, continue a ler o artigo. Continue continuando a ler para ver como adicionar texto do espaço reservado nos campos suspensos.
Marcador de posiçãoDigite o espaço reservado / texto padrão para este campo. “> (?)
Então, a primeira coisa que tivemos que fazer foi adicionar um valor de espaço reservado em campos Gravity Forms no painel de administração. Para fazer isso, você precisa abrir o arquivo functions.php do seu tema e cole o seguinte código:
Marcador de posiçãoDigite o espaço reservado / texto padrão para este campo. “> (?)
Esse pequeno bit de função adicionará um campo de texto de espaço reservado no seu backend de Gravity Forms. Exemplo de captura de tela abaixo:
Agora que adicionamos o campo no painel de administração, você pode prosseguir e preenchê-los com o texto desejado. O próximo passo é exibir o texto no formulário atual. Para fazer isso, iremos utilizar o jQuery. O que você precisa fazer é colar o seguinte código no arquivo functions.php do seu tema logo após o código anterior:
/ * Usamos jQuery para ler o valor do espaço reservado e injetá-lo em seu campo * /
add_action ('gform_enqueue_scripts', "my_gform_enqueue_scripts", 10, 2);
função my_gform_enqueue_scripts ($ form, $ is_ajax = false) {
?>
Isso exibirá o texto do espaço reservado em campos de entrada e campos de texto e mantê-lo validado. Agora que cobrimos isso, ainda precisamos adicionar texto do espaço reservado nos nossos campos suspensos que este pequeno trecho não faz por nós. Felizmente Gravity Forms tem que incorporado por padrão.
Adicionar texto do marcador de posição no formulário de gravidade campo suspenso
Tudo o que você realmente precisa fazer é criar um rótulo com um valor em branco. Sim, isso pareceu confuso para nós quando ouvimos isso também. Mas na verdade não é. Então, adicione um campo suspenso em Gravity Forms. Clique na caixa de seleção que diz Habilitar Valores. Em seguida, adicione uma etiqueta com um valor em branco. Consulte a imagem abaixo:
Isso é tudo o que você precisa fazer para adicionar texto do espaço reservado em Formulários de Gravidade. Você provavelmente está se perguntando se este é o plugin de formulário de contato do WordPress amigável para iniciantes, então por que não adicionou algo tão simples? Bem, nós nos perguntamos exatamente o mesmo. Então nosso fundador @syedbalkhi entrou em contato com um dos parceiros da Gravity Forms, Carl Hancock. Abaixo está a conversa que eles tiveram:
– Syed Balkhi (@syedbalkhi) 13 de setembro de 2011
@syedbalkhi Sim. Estávamos esperando que o suporte de atributo de espaço reservado HTML5 se expandisse para que possamos usar HTML5 puro. Mas não tem.
– Carl Hancock (@carlhancock) 13 de setembro de 2011
@syedbalkhi Então estávamos tentando evitar, então não precisamos voltar para javascript. Infelizmente, os navegadores não colaboraram.
– Carl Hancock (@carlhancock) 13 de setembro de 2011
Então, como você pode ver que é algo que eles estão cientes, e será adicionado nos lançamentos futuros. Para ver todas as coisas incríveis que os formulários de Gravidade podem fazer, basta verificar nossa publicação sobre Gravity Forms.
Crédito para a incrível função e o snippet jQuery vai para Jorge Pedret (@jorgepedret).