Se já trabalha há algum tempo com WordPress e Advanced Custom Fields, saberá que o ACF não é apenas uma ferramenta para adicionar campos personalizados no backend: também permite criar custom post types e taxonomias personalizadas.
No entanto, poucas pessoas sabem que o ACF permite também criar formulários completamente funcionais no front-end do site, para adicionar conteúdo ao CPT que tenha programado e com os mesmos campos personalizados que criou no back-end, sem que o utilizador tenha de aceder ao painel de administração.
Há algum tempo tivemos de criar exatamente este sistema para um cliente, e a documentação oficial do ACF pareceu-nos um pouco parca em palavras e pouco detalhada, pelo que decidimos publicar este tutorial para outros programadores que necessitem fazer o mesmo.
Nota importante: este tutorial destina-se a programadores já familiarizados com WordPress, os Custom Post Types (CPT) e o funcionamento básico do ACF. Não vamos explicar como instalar o plugin e criar os campos necessários nem como criar um CPT de raiz, assumimos que isso já está claro.
O que vamos ver, passo a passo, é:
- Como montar um formulário de envio a partir do front-end que guarde os registos como rascunhos
- O WordPress avisa-o por email sempre que alguém envia um registo
- Opcionalmente, redireciona-se o utilizador para uma landing de confirmação de “Registo Recebido” ou similar
O cenário
Imagine que gere DiretorioEmpresasACME.com, um diretório online onde as empresas podem aparecer listadas com toda a sua informação.
Até agora, as fichas eram adicionadas manualmente por si a partir do admin do WordPress, mas pretende que as próprias empresas possam enviar a sua informação mediante um formulário público, e simplesmente revisa e publica cada envio.
Para isso tem criado no WordPress:
- Um Custom Post Type chamado “Empresas”, cujo slug interno é /empresa/
- Um grupo de campos ACF associado a esse Custom Post Type, com os seguintes campos:
| Dado | Nome do campo | Tipo |
|---|---|---|
| Denominação legal | nome_legal_empresa | Texto |
| Setor | setor_empresa | Seleção |
| Número de trabalhadores | numero_trabalhadores | Seleção |
| Página web | web_empresa | URL |
| Telefone | telefone_empresa | Texto |
| Faturação anual | faturacao_anual_empresa | Seleção |
| Província | provincia_empresa | Seleção |
| Cidade | cidade_empresa | Texto |
Além disso:
- O campo de título do post (o nativo do WordPress) será usado como o nome comum da empresa
- O campo de conteúdo do post (também nativo do WordPress) permitirá colar uma descrição da empresa
O que precisa de saber antes de começar
O ACF oferece duas funções para construir formulários front-end:
acf_form_head()> Se coloca antes deget_header()- Esta função regista os assets necessários (CSS e JS), processa os dados enviados e gere o redirecionamento
- É obrigatória e deve executar-se nessa ordem
acf_form()> Se coloca dentro de la plantilla, donde quieras que aparezca el formulario- Como verá no snippet de código, aceita um array de parâmetros para configurar o seu comportamento
A chave para criar um post novo (em vez de editar um existente) é o parâmetro 'post_id' => 'new_post', combinado com 'empresa' e 'draft'para especificar o tipo de conteúdo e o estado do post.
Para que o formulário funcione corretamente precisamos de criar 2 coisas:
- Um template dentro do nosso theme onde se carregará o formulário do ACF
- Uma função dentro do ficheiro functions.php que nos enviará o email de aviso sempre que alguém envie um formulário
Passos para pôr em marcha o seu formulário ACF
Vamos ver os passos necessários para pôr isto em marcha.
Passo 1: criar o template de página e a página de formulário
Crie o ficheiro form-enviar-empresa.php na pasta do seu tema filho. Pode fazê-lo por FTP ou mediante o navegador de ficheiros do servidor ou alojamento.
Lembre-se de usar um tema filho ou perderá o ficheiro com a próxima atualização do seu tema de WordPress
Este ficheiro atuará como template de página do WordPress e conterá toda a lógica do formulário.
Este é o código que usaremos para o template (o nome do template e o seu conteúdo está em espanhol):
<?php
/**
* Template Name: ACF Form Enviar Empresa
*/
// IMPORTANT: acf_form_head() must go before get_header()
acf_form_head();
get_header();
?>
<div id="formulario-empresa" style="max-width: 900px; margin: 60px auto; padding: 0 20px;">
<h1>Añade tu empresa al directorio</h1>
<p>Rellena el formulario con los datos de tu empresa. Revisaremos la información antes de publicarla en el directorio.</p>
<?php
acf_form(array(
'post_id' => 'new_post',
'post_title' => true,
'post_content' => true,
'new_post' => array(
'post_type' => 'empresa',
'post_status' => 'draft',
),
'submit_value' => 'Enviar empresa',
'updated_message' => '¡Gracias! Tu empresa ha sido recibida y la revisaremos pronto.',
));
?>
</div>
<?php get_footer(); ?>Com esta configuração, após o envio do formulário o utilizador fica na mesma página e é-lhe mostrada a mensagem de confirmação Obrigado! A sua empresa foi recebida e vamos revê-la em breve.
Se preferir redirecionar o utilizador para uma landing page específica, vá à secção alternativa mais abaixo.
Passo 2 — Criar a página no WordPress
Com o ficheiro de template já carregado no seu tema filho:
- Vá a Páginas > Adicionar nova
- Atribua-lhe um título descritivo, tipo “Formulário de envio de empresas” ou algo similar
- Em Atributos de página, selecione o template php que criámos antes, no nosso caso
form-enviar-empresa.php - Adicione metatítulo e metadescrição mediante o plugin SEO que use
- Publique a página
O WordPress usará o seu template PHP em vez do editor visual, pelo que não é necessário adicionar nada no editor da página.
Passo 3: criar um aviso por email no functions.php
Sempre que alguém envie o formulário, pode receber uma notificação para saber que tem uma nova empresa adicionada que está em rascunho pendente de que a reveja e publique.
Para conseguir isso, adicione isto ao functions.php do seu tema filho:
/**
* ACF Form email notification
*/
add_action('acf/save_post', 'notificar_nueva_empresa', 20);
function notificar_nueva_empresa( $post_id ) {
if ( get_post_type($post_id) !== 'empresa' ) {
return;
}
if ( is_admin() ) {
return;
}
if ( get_post_status($post_id) !== 'draft' ) {
return;
}
$nombre = get_the_title($post_id);
$sector = get_field('sector_empresa', $post_id);
$trabajadores = get_field('num_trabajadores', $post_id);
$web = get_field('web_empresa', $post_id);
$telefono = get_field('telefono_empresa', $post_id);
$provincia = get_field('provincia_empresa', $post_id);
$ciudad = get_field('ciudad_empresa', $post_id);
$enlace_admin = admin_url('post.php?post=' . $post_id . '&action=edit');
$to = 'info@directorioEmpresasACME.com';
$subject = '[DirectorioEmpresas] Nueva empresa pendiente: ' . $nombre;
$body = "Se ha recibido una nueva empresa para revisar.\n\n";
$body .= "──────────────────────────\n";
$body .= "Empresa: {$nombre}\n";
$body .= "Sector: {$sector}\n";
$body .= "Trabajadores: {$trabajadores}\n";
$body .= "Web: {$web}\n";
$body .= "Teléfono: {$telefono}\n";
$body .= "Provincia: {$provincia}\n";
$body .= "Ciudad: {$ciudad}\n";
$body .= "──────────────────────────\n\n";
$body .= "Revisar y publicar:\n{$enlace_admin}\n";
wp_mail($to, $subject, $body);
}Notas:
O hook acf/save_post dispara-se sempre que o ACF guarda dados, tanto a partir do admin como a partir do front-end, portanto receberíamos um email sempre que um post em rascunho fosse criado, mesmo por nós próprios a partir do escritório do WordPress.
Como não faz muito sentido enviar emails constantemente, as verificações de is_admin() e get_post_type() garantem que o email só se envie quando corresponde.
Alternativa: redirecionar para uma landing de confirmação uma vez enviado o formulário
O snippet php anterior apenas mostra uma mensagem após o envio do formulário tipo Obrigado! A sua empresa foi recebida e vamos revê-la em breve. O utilizador fica na mesma página e não acontece mais nada.
Se preferir, pode redirecionar o utilizador para um URL específico após o envio.
Crie uma landing page para onde levar o utilizador
Crie uma landing page para onde levar o utilizador uma vez tenha enviado o formulário, no nosso exemplo criámos esta página:
https://DirectorioEmpresasACME.com/empresa-recibida/
Na landing page informe o utilizador que o formulário foi enviado corretamente. Também pode aproveitar a página para vender subscrições ou serviços relacionados com o seu site. Seja elegante e profissional!
Modifique o template php do seu theme
Depois, deve modificar o template para o seu theme que criou previamente, no nosso caso form-enviar-empresa.php
Simplesmente deverá substituir o parâmetro 'updated_message' por 'return' na funçãoacf_form() e apontar para a landing page que previamente tenha criado, assim:
acf_form(array(
'post_id' => 'new_post',
'post_title' => true,
'post_content' => true,
'new_post' => array(
'post_type' => 'empresa',
'post_status' => 'draft',
),
'submit_value' => 'Enviar empresa',
'return' => 'https://DirectorioEmpresasACME.com/empresa-recibida/',
));Notas e resolução de problemas
Informação complementar para que o seu formulário ACF funcione perfeitamente.
Se o formulário aparece vazio
Para que acf_form() mostre os campos, o grupo de campos do ACF deve estar configurado para mostrar-se no lugar correto.
Se o formulário aparece vazio e ao criar uma nova empresa no escritório do WordPress também não aparece nenhum campo, seguramente atribuiu o grupo de campos ao post type errado (por defeito o ACF atribui um grupo de campos novo a ‘Posts’).
Vá a ACF > Grupos de campos e edite o seu grupo. A regra de localização deve mostrar o grupo de campos no lugar correto, no nosso exemplo fictício: Tipo de conteúdo > é igual a > Empresas
Os campos não são responsive em móvel
Os campos do formulário herdam os estilos visuais que tenha configurado no ACF.
Ou seja, se configurou 3 campos para que se mostrem a 33 % de largura em ACF > Apresentação > Atributos do contentor, porque pretende criar 3 colunas (ou uma linha com 3 campos) assim é como mostrarão no formulário.
Essas larguras aplicam-se como estilos inline no HTML e pode ser que não respondam automaticamente em móvel.
Se isso lhe acontecer, para solucionar, adicione isto no functions.php:
/**
* CSS responsive para el formulario de empresas
*/
add_action('wp_head', 'formulario_empresa_css_responsive');
function formulario_empresa_css_responsive() {
if ( ! is_page('añade-tu-empresa') ) {
return;
}
?>
<style>
@media (max-width: 768px) {
#formulario-empresa .acf-field[style] {
width: 100% !important;
float: none !important;
}
}
</style>
<?php
}O seletor [style] aponta especificamente para os elementos com estilos inline, que são os que o ACF gera para as larguras de campo e que de outro modo ignorariam uma regra CSS normal.
O fluxo completo de trabalho
- O utilizador preenche o formulário na página que tenhamos criado
- O post é criado como rascunho no apartado do Custom Post Type ‘empresa’
- Opção A: mostra-se ao utilizador uma mensagem de confirmação na mesma página ao enviar o formulário corretamente
- Opção B: dirige-se a outra página, por exemplo DiretorioEmpresasACME.com/empresa-recebida/
- Recebe um aviso por email em info@DiretorioEmpresasACME.com com um resumo da informação enviada e uma ligação direta ao rascunho
- Entra no seu escritório do WordPress, revisa e publica
Considerações finais
Alguns pontos a ter em conta antes de pôr isto em produção:
- O formulário funciona para toda a gente, também para utilizadores não autenticados
- A função
acf_form()funciona para toda a gente por defeito, sem necessidade de estar registado. - Se pretende restringir o uso do formulário a utilizadores autenticados, adicione uma verificação com
is_user_logged_in()antes deacf_form_head().
- A função
- A lógica condicional que tenha programado no ACF, funcionará também no formulário.
- Se tem campos com lógica condicional configurada no ACF (por exemplo, mostrar o campo “cidade” só se a “província” é whatever), essa lógica que tenha programado é a mesma que se carregará no formulário, porque o ACF carrega o seu próprio JavaScript para geri-lo.
- Esvazie a cache se os estilos não carregarem corretamente (sim, quase sempre é problema da cache)
- Se usa um plugin de cache ou um page builder com geração de CSS estático (como Divi), pode ser que os estilos e scripts não se carreguem corretamente para utilizadores não autenticados até que a cache se esvazie por completo.
- Se vir que o formulário funciona autenticado mas não em incógnito, esse é o primeiro sítio onde olhar.
- Limpe caches de plugins, servidor e navegador e volte a verificar os estilos.
- Nota: não instalámos nenhum sistema anti-spam.
- Este formulário não inclui nenhum sistema antispam. Se o puser em produção e vir que recebe envios spam, considere adicionar um sistema de honeypot ou integrar Captcha mediante algum dos plugins disponíveis no repositório do WordPress
Esperamos que este tutorial lhe tenha sido útil
Se tem experiência com ACF e CPT no WordPress, esperamos que este tutorial expanda os seus conhecimentos sobre este poderoso plugin para WordPress. Cumprimentos e até breve!