Como criar um formulário front-end ACF [sem código!]

Olhando para usar formulários personalizados avançados em seu site WordPress, mas não sabe como codificar? Este guia ajudará você a criar um formulário de front-end ACF rapidamente!

Tempo aproximado de leitura: 6 minutos

Advanced Custom Fields (ACF) é uma ferramenta poderosa.

Com a capacidade de personalizar seus campos e criar seus formulários exatamente como você deseja, suas possibilidades são quase infinitas.

Mas há um problema. Você precisa saber como codificar para obter seus formulários ACF no front-end do seu site.

Ou você?

Esta postagem mostrará como criar um formulário de front-end ACF no WordPress sem nenhum código sem esforço! E tudo é feito usando o Formidable Forms , o construtor de formulários ACF perfeito.

Vamos entrar nisso.

O que há de errado em usar o formulário front-end de campos personalizados avançados?

Na verdade, não há nada de errado em usar o ACF para criar seu formulário front-end de campos personalizados avançados!

ACF é uma ferramenta poderosa; se você souber codificar em PHP, poderá criar formulários exclusivos rapidamente.

Mas, se você não sabe codificar, fica coçando a cabeça com a língua estrangeira à sua frente.

Basta verificar este código de exemplo de formulário ACF abaixo:

Então, você tem duas opções:

1. Aprenda a codificar e criar seus formulários de front-end com ACF
2. Deixe o Formidable Forms fazer todo o trabalho duro para você

Embora tenhamos uma equipe de excelentes desenvolvedores aqui no Formidable, imaginamos que você não.

Portanto, vamos nos concentrar na opção nº 2 hoje para nosso tutorial de formulário de front-end de campos personalizados avançados.

Como exibir o formulário front-end ACF com o Formidable

Para começar, você precisará de algumas coisas:

1. Plano de negócios Formidable Forms
2. Plug-in ACF (gratuito ou profissional)

Obtenha formulários formidáveis ​​agora!

Para usar alguns dos campos mais avançados com o frontend ACF, a versão pro é necessária. No entanto, para campos básicos, você pode usar a versão gratuita.

Se você quiser mais informações, certifique-se de verificar nossos documentos da ACF Knowledgebase!

Portanto, depois de instalar e ativar o Formidable Forms, vá para Formidable → Add-ons e clique no botão Instalar para o plug-in ACF Form WordPress .

Então, são apenas alguns passos fáceis:

Vamos começar.

Etapa 1: criar campos de formulário ACF

Para o nosso exemplo, temos um blog de observação de pássaros chamado Here Birdie Birdie .

Queremos uma maneira de os usuários terem seus envios de observação de pássaros que serão exibidos automaticamente como um tipo de postagem personalizada no blog.

Então, queremos criar alguns campos para os usuários inserirem informações:

1. Nome
2. Encontro
3. Tempo
4. Lista de pássaros viu
5. Comentários adicionais

Portanto, a primeira coisa que queremos fazer é acessar o ACF para personalizar os campos. Felizmente, o Formidable oferece suporte ao mapeamento para 19 tipos de campo ACF diferentes. Então, você tem muitas opções.

Para fazer isso, vá para Campos personalizados → Grupos de campos e clique em Adicionar novo .

Em seguida, você pode adicionar seus campos clicando no botão Adicionar campo .

Então, vamos criar os campos listados acima e personalizá-los para atender às nossas necessidades.

Usaremos um campo ACF Repeater para tornar mais fácil para os visitantes mostrarem todos os pássaros que viram. O campo do repetidor permite que os usuários adicionem ou removam quantas entradas desejarem.

Usaremos um campo Dropdown ( Selecione no ACF) nesses campos para que o visitante possa escolher em uma lista de pássaros. Também adicionaremos um campo numérico para inserir por quanto tempo eles viram cada ave.

Sinta-se à vontade para personalizar isso de acordo com suas próprias necessidades. Mas, para obter recursos mais avançados (como os Repetidores , você deve adquirir o ACF Pro).

Quando terminar, clique em Salvar alterações .

Etapa 2: crie seu formulário de front-end ACF no Formidable

Agora, criaremos o formulário que será exibido no front-end do seu site.

Então, vá para Formidável → Formulários no painel de administração do WordPress.

Em seguida, clique em Adicionar novo na parte superior da página e escolha iniciar a partir de um formulário em branco ou um dos modelos do Formidable.

Sinta-se à vontade para selecionar a opção mais adequada à sua situação. Começaremos com um formulário em branco para personalizá-lo ao nosso gosto.

Em seguida, dê um nome ao seu formulário e clique em Criar .

O plug-in o levará ao criador de formulários de arrastar e soltar do Formidable, onde você pode adicionar qualquer elemento de formulário. Nome, e-mail, número, endereço - você escolhe, está aqui.

Como já criamos nossos campos de formulário no ACF, só precisamos adicionar campos correspondentes para facilitar a conexão.

Adicionamos um campo na parte superior para que os usuários possam nomear suas postagens de blog para torná-las únicas!

Depois de terminar de criar seu formulário, clique em Atualizar para salvar suas alterações.

Nada lembra mais os anos 90 do que perder tudo o que você criou porque não economizou.

Passo 3: Mapeie seus campos

Agora que criamos nosso formulário, precisamos habilitar o mapeamento de campo ACF.

Portanto, clique na guia Configurações na parte superior da página e vá para Ações e notificações .

Em seguida, escolha a ação Criar postagem para personalizar como os campos do formulário serão exibidos.

Na ação Create Post form, role para baixo até a seção Custom Fields e clique no botão Map form fields to Advanced Custom Fields .

Escolha seu grupo de campos ACF no menu suspenso e comece a mapear seus campos personalizados com os campos formidáveis ​​clicando em Adicionar .

Além disso, se você usar um campo repetidor, terá que corresponder os repetidores corretamente e os subcampos.

Depois de mapear seus campos, clique em Atualizar para salvar suas alterações.

E é isso! Os usuários agora podem enviar suas entradas para o formulário front-end WordPress ACF, e seus campos ACF e Formidable Forms mapearão e enviarão as informações.

A partir daqui, você pode exibir as informações no front-end com uma exibição ou usar um tema compatível com ACF e, em seguida, editar a postagem, o título da postagem, o conteúdo e muito mais!

O que mais este plug-in de formulário front-end ACF pode fazer?

O Formidable pode parecer um simples construtor de formulários para ACF, mas é muito mais do que isso.

Com dezenas de funções de formulário ACF, arquivos de modelo e compatibilidade com todos os principais temas (incluindo Elementor), o Formidable faz tudo.

E tem muitos recursos e opções adicionais para sobrecarregar seu formulário:

• Formulários de várias etapas, questionários e formulários de conversação
• Várias opções de proteção contra spam
• Estilizador de formulário visual integrado
• Mais de 100 modelos de formulário
• Vistas formidáveis

Estes são apenas alguns dos recursos que você obtém. E eles são ótimos, se assim o dissermos.

Então, com a facilidade de colocar um formulário ACF no front-end e a riqueza de recursos que você obtém, o que você está esperando?

A Formidable está pronta para elevar seu site hoje mesmo .

Pronto para fazer seu formulário frontal ACF?

Se você estava se perguntando: “Como adiciono um campo ACF ao frontend?” Agora você tem sua resposta.

Com a solução simples sem código do Formidable, você pode começar a trabalhar em minutos. E este post mostrou exatamente como fazer isso.

Quer você use o WordPress ACF pro ou a versão gratuita, o Formidable é o plugin parceiro perfeito.

Então, se você está pronto para começar, pegue o Formidable Forms agora e coloque-o em seu site.

Obtenha formulários front-end ACF agora!

E siga-nos no Facebook, Twitter e YouTube para mais dicas e truques incríveis sobre WordPress.

Leia mais sobre os formulários do WordPress!

• Como redirecionar após o envio do formulário no WordPress [3 etapas!]
  consulte Mais informação

  Como vincular um botão a um formulário no WordPress [uma maneira simples!]
  consulte Mais informação

  Como alterar a cor de fundo do bloco do WordPress
  consulte Mais informação