Neste tutorial do Gravity Forms, aprenderemos três coisas:
- Como adicionar uma entrada personalizada a qualquer tipo de campo de sua escolha
- Como adicionar configurações personalizadas ao seu formulário
- E, finalmente, como postar remotamente valores enviados para campos específicos após cada envio de formulário.
Esta postagem pressupõe que você deseja adicionar funcionalidade ao Gravity Forms para enviar uma solicitação de postagem remota após cada envio de formulário. Dentro da postagem remota, você enviará valores do formulário, que são personalizáveis por configurações adicionais no editor de formulários. Exemplos comuns de onde isso seria útil são enviar, por exemplo, nome e e-mail para uma lista de newsletter do Mailchimp, ou realmente qualquer outra integração de terceiros.
A maneira de resolver isso na prática é primeiro adicionar configurações personalizadas a cada campo, onde o editor pode digitar os nomes das chaves. A chave e seus valores enviados serão enviados para um URL de terceiros após cada envio de formulário. Também adicionaremos uma configuração para que você possa escolher para cada formulário ativar esse tipo de envio de terceiros.
Todo o código abaixo pode ser colocado no código do seu tema functions.phpou plugin.
Adicionando uma entrada personalizada aos campos
A primeira etapa é adicionar a entrada aos campos no editor de campo onde você pode digitar o nome da chave para esse valor. Somente incluiremos e enviaremos valores onde essa entrada foi preenchida.
Escolhendo onde colocar sua entrada
Gravity Forms oferece ganchos que podemos usar para adicionar coisas personalizadas no editor de campo. O nome do gancho depende de qual guia você deseja que seu campo apareça.
- "Guia geral:
gform_field_standard_settings - Aba “Aparência":
gform_field_appearance_settings - Aba “Avançado”:
gform_field_advanced_settings
Em cada gancho você terá dois parâmetros; posição e ID do formulário. Cada configuração de Gravity Forms integrada tem um número de posição fixo. Você pode comparar esse número para decidir exatamente onde deseja que seu HTML personalizado ou entrada esteja. Listar todas as configurações e sua posição seria muito longo neste post. Mas o Gravity Forms adiciona suas configurações em incrementos de 5. Por exemplo, na aba General, o “Field label” está na posição 0 e “Description” está na posição 10. Colocar seu HTML na posição 10 fará com que ele apareça após Description. Não compare a posição com nenhum número que não seja um multiplicador de 5.
Estou adicionando meu campo personalizado na guia Avançado, na posição 50, que fica logo após a entrada “Admin Field Label”.
A maior parte do código acima é autoexplicativo. Estou adicionando HTML no mesmo formato que o Gravity Forms esperaria uma configuração. No entanto, na entrada em si, você precisa fornecer uma onchangefunção Javascript. Nós simplesmente dizemos a ele para executar a função do GravityForms para salvar quaisquer alterações feitas em nossa entrada. A propriedade que fornecemos em SetFieldProperty, thirdPartyInput, é importante lembrar, dentro dessa chave é onde nossa entrada personalizada será salva no array de campos do Gravity Forms ao enviar.
Adicionando uma dica de ferramenta (opcional)
Você pode fazer outra coisa opcional com sua entrada; adicionar uma dica de ferramenta. Se você quiser isso, adicione esta chamada de função dentro do código que você acabou de adicionar e forneça uma chave (única) como string:
E, em seguida, adicione outra função que se conecte ao filtro gform_tooltipse adicione o conteúdo da dica de ferramenta à chave correspondente, assim:
Adicionar uma dica de ferramenta é totalmente opcional, mas uma boa maneira de explicar aos proprietários do site o que essa entrada faz. Modifique o conteúdo para o que se adapta à sua funcionalidade.
Definindo quais tipos de campo adicionar sua entrada personalizada
Você pode notar que seu campo não está aparecendo em nenhuma guia Avançado. Isso ocorre porque precisamos informar ao Gravity Forms em quais tipos de campo queremos que essa entrada apareça. Por padrão, ela não aparecerá em nenhum.
A maneira como fazemos isso é, na verdade, com Javascript. O GravityForms possui Javascript que oculta automaticamente todas as configurações e, em seguida, opta por exibir as específicas com base no tipo de campo. Então nosso campo está lá, mas o Gravity Forms simplesmente o escondeu.
Nós nos gform_editor_jsligamos e precisamos fazer duas coisas. Primeiro, decidimos em quais tipos de campo a entrada deve aparecer. E, em segundo lugar, nos certificamos de que a entrada seja preenchida com seu valor no carregamento.
Estou adicionando a entrada aos tipos de campo text, textarea, email, phonee number. Lembre-se de considerar como você vai lidar com os valores dos campos enviados. Se você optar por permitir esse campo, por exemplo, no tipo de campo de caixa de seleção, deverá ser capaz de analisar e manipular os valores enviados corretamente.
Agora, finalmente, você poderá ver sua entrada personalizada na guia Avançado, se o campo for de qualquer um dos tipos fornecidos. Você também verá que ele foi salvo com sucesso e é carregado com seu valor salvo. Sempre que o formulário for enviado a partir de agora, se esta entrada for preenchida, o array do campo do formulário conterá a propriedade thirdPartyInput.
O próximo passo é adicionar uma configuração no próprio formulário para ativar o envio para terceiros. Isso é opcional, mas recomendado. Queremos evitar a execução de código desnecessário ou enviar algo para terceiros quando não pretendemos.
Adicionando uma configuração personalizada às configurações do formulário
Adicionar configurações personalizadas às configurações do formulário é bastante simples. Precisamos nos conectar ao filtro gform_form_settingse anexar nosso HTML com quaisquer entradas que você desejar, e depois no filtro gform_pre_form_settings_savee garantir que nossas entradas personalizadas sejam salvas no objeto de formulário.
É assim que você adicionaria uma configuração personalizada às configurações do formulário:
O filtro gform_form_settings espera que as chaves sejam um rótulo de seção e, em seguida, uma matriz para cada configuração. Adicionamos apenas um com a chave submit_3rd_party. Na própria entrada da caixa de seleção, usamos o método do Gravity Forms rgar()para extrair valores de uma determinada chave de um array (o formulário), para garantir que buscamos o valor salvo do nosso campo. Modifique o HTML para atender às suas necessidades.
O campo aparecerá agora na parte inferior das configurações do formulário. Mas ainda não salvará suas alterações, então precisamos corrigir isso:
add_filter('gform_pre_form_settings_save', function($form) {
$form['submit_3rd_party'] = rgpost('submit_3rd_party');
return $form;
}, 10, 2);
Este pedaço de código usa outro dos métodos auxiliares do Gravity Forms, rgpost(), para extrair valores enviados (de $_POST) e os salva no array de formulário fornecido com nossa chave desejada. Se você adicionar mais configurações, será necessário repetir isso para cada configuração.
E é tudo o que precisamos para adicionar configurações de formulário personalizadas! Sempre que você tiver acesso ao objeto de formulário, poderá verificar o valor de $form['submit_3rd_party'].
Enviar valores enviados para terceiros
Um bom gancho a ser usado para ações personalizadas, como realizar uma solicitação e enviar dados de um formulário enviado, é gform_after_submission. Neste ponto, toda a validação foi aprovada e o objeto de entrada (resposta) foi criado. Com este gancho temos acesso ao objeto de entrada e ao objeto de formulário.
O que você faz nesta ação é com você e como você precisa extrair os dados e como você realiza a solicitação de postagem. Quanto a este exemplo, estou fazendo uma simples solicitação de postagem usando a função do WordPress wp_remote_post()com uma matriz de todos os campos que preencheram nossa entrada personalizada no corpo.
Você verá que primeiro verifico se o formulário ativou envios. Se tiver o código percorre todos os campos do formulário e verifica se cada campo adicionou algo em nossa entrada personalizada. Se a entrada realmente não estiver vazia, o código também verifica se alguma coisa foi enviada para este campo. Você pode remover este if-check se estiver bem para enviar valores vazios.
A parte sobre o URL e como os dados serão enviados é algo que você obviamente precisará ajustar. Você também pode, opcionalmente, fazer algo com a resposta, por exemplo, enviar um e-mail se houver falha ou algo assim. Depende de você como você deseja lidar com sua funcionalidade.