Como criar seu próprio formulário de pesquisa personalizado no WordPress (3 maneiras)

Deseja criar facilmente um formulário de pesquisa personalizado no WordPress sem qualquer codificação?

Um formulário de pesquisa personalizado permite que os visitantes pesquisem e filtrem facilmente o conteúdo do seu site com apenas alguns cliques.

Quando os usuários encontram rapidamente o que estão procurando, é mais provável que permaneçam em seu site por mais tempo. Eles também são mais propensos a tomar medidas para comprar um produto, ler seu blog, assinar um boletim informativo e muito mais.

Neste post, mostraremos como criar facilmente um formulário de pesquisa personalizado no WordPress para aprimorar a experiência do usuário e aumentar as conversões.

Antes disso, vamos ver se você realmente precisa criar um formulário de pesquisa personalizado para o seu site.

Por que criar um formulário de pesquisa personalizado?

Um formulário de pesquisa personalizado é ideal para sites com muito conteúdo, produtos, documentação e perguntas frequentes. É um recurso obrigatório em lojas de comércio eletrônico, diretórios de negócios on-line, sites de escolas/faculdades e sites semelhantes.

A opção de pesquisa ajudará os usuários a encontrar o que precisam sem gastar minutos ou até horas procurando.

Então, aqui está o motivo pelo qual você deve criar um formulário de pesquisa personalizado para o seu site WordPress:

• Ajuda os usuários a navegar pelo seu conteúdo
• Economiza tempo encontrando coisas mais rapidamente
• Aumenta as conversões e vendas
• Otimiza seu site para usuários móveis
• Reduz a taxa de rejeição

Agora, mostraremos como criar um formulário de pesquisa personalizado no WordPress usando um plug-in de criação de formulários.

Como criar um formulário de pesquisa personalizado no WordPress

O primeiro método que você pode usar é a opção de pesquisa padrão oferecida pelo WordPress.org. Você pode ativar uma pesquisa básica do WordPress que permite pesquisar páginas e postagens em seu site.

Este método é um pouco complicado embora. Envolve codificação e edição de arquivos como o functions.php que são altamente sensíveis. Um passo errado e você pode quebrar seu site.

Você precisará usar a função “ get_search_form() ” para exibir o formulário de pesquisa em seu site. Isso irá ajudá-lo a encontrar o arquivo searchform.php no seu tema WordPress. Se não puder ser encontrado, a opção de pesquisa principal padrão do WordPress será usada.

Mas, para personalizar a caixa de pesquisa do WordPress, você precisará adicionar mais código ao arquivo.

Se você não se sente confortável com a codificação, é melhor usar um plug-in de pesquisa confiável do WordPress para ativar uma pesquisa no site. E é exatamente isso que vamos fazer para este tutorial.

Você encontrará vários plugins no mercado que permitem personalizar o formulário de pesquisa do WordPress.

Certifique-se de escolher um plugin do WordPress que não apenas permita que você crie uma pesquisa personalizada, mas também adicione filtros e mostre os resultados certos para seus visitantes.

Recomendamos o uso do SearchWP, o plugin de pesquisa nº 1 para WordPress que permite pesquisar TUDO em seu site. Você também pode usar o Formidable Forms para criar um formulário de pesquisa personalizado. Abaixo, mostraremos como criar um formulário de pesquisa personalizado usando esses 2 plugins.

Criar um formulário de pesquisa personalizado usando SearchWP

SearchWP é de longe o melhor plugin de pesquisa personalizado para WordPress. É fácil de usar, exibe resultados precisos e oferece controle sobre seu formulário de pesquisa.

SearchWP é realmente incrível e possui recursos premium incríveis, portanto, é um plugin premium. Você pode se inscrever para um plano a partir de $ 99 por ano. E embora você não fique desapontado, há uma garantia de reembolso de 14 dias.

Isso permitirá que você habilite uma pesquisa para tudo. Pesquise detalhes do produto, conteúdo de campos personalizados, saída de código de acesso, conteúdo de tabela de banco de dados personalizado, pesquisa multisite entre sites e muito mais em seu site.

Você terá acesso a recursos, incluindo:

• Indexação de documentos PDF e Office
• Integração automática com Native WP Search, sem codificação!
• Vários motores de busca
• Derivação de palavras-chave
• Suporte avançado a campos personalizados
• Integração WooCommerce
• Excluir ou atribuir resultados
• Estatísticas de pesquisa e insights
• Fácil personalização do algoritmo

O plug-in também se integra ao bbPress, WP Job Manager, Easy Digital Downloads e muito mais. Além disso, você terá acesso a suporte comprometido e documentação detalhada.

E tudo o que mencionamos está apenas no plano básico, então o plug-in vale totalmente o preço de apenas US $ 8,25 por mês. Você terá muito mais recursos nos planos mais avançados.

Depois de se inscrever para uma conta, você pode começar com o tutorial abaixo.

Etapa 1: ativando o SearchWP

Dentro da sua conta SearchWP, você pode acessar sua chave de licença, detalhes da conta e downloads. Você precisará baixar o arquivo do plugin. E você também desejará copiar sua chave de licença, pois precisará dela em breve.

Em seguida, vá até o painel wp-admin e navegue até Plugins » Adicionar novo » Carregar plug-in.

Selecione o arquivo de plug-in que você baixou para o seu computador e clique no botão Instalar agora .

Depois de instalá-lo e ativá-lo, você precisa visitar a página Configurações »PesquisarWP e clicar na opção de menu 'Licença'.

Pegue sua chave de licença da sua conta SearchWP e cole-a aqui na caixa Licença.

Clique no botão Ativar e você está pronto para configurar o mecanismo de pesquisa.

Etapa 2: Personalizando o mecanismo de pesquisa

Dentro da guia SearchWP no painel wp-admin, selecione a opção de menu 'Engines'. Uma vez dentro, clique no botão 'Adicionar novo' para criar um novo mecanismo de pesquisa.

Isso criará um novo mecanismo de pesquisa chamado 'suplementar'. Para alterar o nome, você precisa clicar no botão 'Fontes e configurações'.

Agora você verá uma opção para escolher se deseja pesquisar postagens, páginas, arquivos de mídia, comentários e usuários. As configurações recomendadas já foram adicionadas aqui, então você pode deixar como está.

Para identificar o mecanismo de pesquisa posteriormente, vamos nomeá-lo 'Personalizado' no campo 'Etiqueta do mecanismo'.

Aqui, você pode ver que a opção 'Keyword Stems' foi selecionada. Isso desconsiderará as terminações de palavras quando seus usuários fizerem uma pesquisa para que os resultados de pesquisa mais relevantes sejam exibidos.

Quando estiver pronto aqui, pressione o botão 'Concluído' para armazenar suas alterações.

Agora, de volta à página do mecanismo, você pode ver uma seção chamada 'Relevância do atributo aplicável' em cada subtítulo. Isso permite priorizar diferentes atributos de postagem ou incluir apenas determinadas categorias ou tags em sua página de resultados de pesquisa.

Tudo o que você precisa fazer é usar os controles deslizantes para ajustar a 'Relevância do atributo'.

Isso afetará como os mecanismos de pesquisa valorizam e classificam o conteúdo do seu site. Por exemplo, se você quiser que o Google preste mais atenção ao título do post do que ao conteúdo, você pode dar mais importância ao título aqui.

Em seguida, o SearchWP permite controlar se determinado conteúdo é incluído ou excluído dos resultados da pesquisa. Para isso, você pode criar regras.

Isso pode permitir que os clientes encontrem rapidamente produtos na mesma categoria em que estão navegando. Ou permita que os visitantes pesquisem conteúdo sobre o mesmo tópico sobre o qual estavam lendo.

Para definir regras, há um botão 'Editar regras' em cada seção.

Ao clicar nele, você verá um pop-up com configurações para categorias, tags, formato, data de publicação e ID da postagem.

Você pode criar regras como quiser aqui para controlar como seu mecanismo de pesquisa se comporta.

E quando terminar, certifique-se de clicar no botão 'Salvar mecanismos' na parte superior da página para criar seu mecanismo de pesquisa personalizado.

Agora você configurou seu mecanismo de pesquisa do WordPress com sucesso. Está pronto para ser adicionado ao seu site.

Etapa 3: adicionando o formulário de pesquisa com código de acesso

Normalmente, adicionar um mecanismo de pesquisa ao seu site requer muita codificação, mas o SearchWP manteve isso no mínimo. Você só precisa colar um código de acesso para incorporar seu mecanismo de pesquisa, e isso é tão simples que é fácil, mesmo se você for iniciante.

Basta visitar a extensão de códigos de acesso do SearchWP e clicar no botão 'Baixar extensão'.

Depois disso, você precisa instalar e ativar a extensão em seu site WordPress da mesma forma que instalou o plugin acima.

Uma vez ativado, você poderá adicionar um código de acesso simples dentro de suas postagens, páginas e widgets.

Tudo o que você precisa fazer é editar uma postagem no Editor de blocos e adicionar um novo bloco chamado 'HTML personalizado'.

Dentro do bloco, você pode copiar e colar este shortcode:

 [searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"] <div class="search-results-wrapper"> [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4] <h2>[searchwp_search_result_link direct="true"]</h2> [searchwp_search_result_excerpt] [/searchwp_search_results] </div> <div class="no-search-results-found"> [searchwp_search_results_none] No results found, please search again. [/searchwp_search_results_none] </div> <div class="search-results-pagination"> [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"] [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"] </div>

Chamamos nosso mecanismo de 'custom'. Se você escolheu um nome diferente, precisará alterar engine=“custom” para seu próprio nome de mecanismo em quatro lugares dentro deste snippet de código.

Nesse código, o texto do botão será 'Pesquisa personalizada'. Se você quiser alterar o texto do botão de pesquisa para algo mais criativo, faça a edição na primeira linha button_text=“Custom Search” .

Este código adicionará o mecanismo de pesquisa personalizado à sua postagem do WordPress. Ele também criará uma seção para exibir os resultados da pesquisa, mostrar uma mensagem sem resultados, se necessário, e adicionar paginação se os resultados forem para várias páginas.

Você pode visualizar a postagem e verá o mecanismo de pesquisa aparecer. Você verá um campo de pesquisa junto com o botão CTA dentro de sua postagem.

Em seguida, publique ou atualize -o e faça com que o formulário de pesquisa personalizado seja ativado. Se você precisar de ajuda com isso, siga nosso guia fácil sobre como adicionar um shortcode no WordPress.

Você pode testar seu formulário personalizado inserindo alguns termos de pesquisa para ver os resultados que a ferramenta retorna.

Com isso, você aprendeu como adicionar barras de pesquisa ao seu site WordPress. SearchWP é um plugin de busca avançada que vale a pena explorar mais de seus recursos. A seguir, mostraremos como aprimorar a função de pesquisa do seu site.

Etapa 4: Definindo as configurações avançadas

Existem 2 opções avançadas que gostaríamos de abordar para melhorar seu formulário de pesquisa personalizado do WordPress.

• Adicionando Pesquisa Ajax Ativa : Isso adiciona automaticamente os resultados da pesquisa suspensa à medida que o usuário digita. Ele ajuda o usuário a encontrar sua consulta mais rapidamente. SearchWP oferece um plugin gratuito Live Ajax Lite Search no repositório do WordPress para isso.
• Usando configurações avançadas para SearchWP : Na guia Configurações »SearchWP no menu do WordPress, há uma guia Avançado. Nesta página, você pode habilitar configurações que tornarão mais fácil para seus usuários encontrarem o que estão procurando.

Isso lhe dá controle total sobre como seu mecanismo de pesquisa funciona. A seguir, mostraremos como personalizar a aparência do seu mecanismo de pesquisa.

Etapa 5: estilizando o formulário de pesquisa e a página de resultados

Se você não estiver satisfeito com a forma como sua nova barra de pesquisa aparece, você pode mudar isso.

O que você precisa saber é que o tema do seu site controla a aparência de sua página inicial, cabeçalho, barra lateral, postagens, formulário de pesquisa e resultados de pesquisa. Os formatos e estilos do seu tema WordPress são armazenados em uma folha de estilo CSS.

Você só precisa adicionar seu próprio CSS personalizado para alterar a aparência da barra de pesquisa e da página de resultados.

Se você ainda não fez isso, recomendamos fazer um backup do seu site. É importante poder restaurar seu site caso as coisas não saiam conforme o planejado. Você pode usar um site de teste (um clone do seu site) para experimentar isso primeiro.

Abaixo está um trecho de CSS personalizado que funcionará com a maioria dos temas do WordPress. A primeira seção altera o estilo do formulário de pesquisa padrão e a segunda seção personaliza os resultados da pesquisa.

Você pode copiar e colar o código a seguir para estilizar o recurso de pesquisa do site:

 .searchform { font-family:arial; font-size:16px; background:#ace5e3; color:#ffffff; border:1px solid #61c3c0; padding:10px; height:90px; width:600px; } .search-results { font-family:arial; font-size:16px; background:#ace5e3; color:#000000; border:1px solid #61c3c0; padding:10px; width:600px; }

Quer aprender mais sobre isso? O WPBeginner tem o melhor guia: Como adicionar facilmente CSS personalizado ao seu site WordPress.

Isso é tudo o que há para isso! Você criou um formulário de pesquisa totalmente personalizável usando SearchWP.

A seguir, mostraremos mais uma maneira de criar um formulário de pesquisa personalizado do WordPress.

Crie um formulário de pesquisa personalizado usando formulários formidáveis

Formidable Forms é o único plugin de criação de formulários do WordPress que vem com um recurso de visualizações totalmente integrado. Assim, você pode não apenas coletar dados de formulários, mas também exibi-los no front-end do seu site.

Com o Views, você pode criar facilmente uma página da Web para exibir os dados enviados pelo usuário diretamente do seu painel do WordPress. Você pode usar isso para exibir diretórios de negócios, diretórios de membros, listagens e muito mais.

Você também pode conectar suas visualizações a um formulário de pesquisa e permitir que os visitantes do seu site pesquisem conteúdo específico.

Dito isso, vamos começar o tutorial.

Etapa 1: instalar e ativar o plug-in Formidable Forms

Primeiro, você precisará se inscrever em uma conta do Formidable Forms. Certifique-se de obter o plano que inclui o recurso Visualizações.

Depois de se inscrever, vá para o painel de administração do WordPress e abra a guia Plugins » Adicionar novo . Procure o plugin Formidable Forms e clique no botão Instalar lá.

Se precisar de mais ajuda sobre isso, consulte nosso guia sobre como instalar um plug-in do WordPress.

Depois de instalar e ativar o plugin, você verá uma página de boas-vindas. Clique no botão Conectar uma conta para se conectar à sua conta e acessar todos os recursos premium.

Se você ainda não estiver conectado à sua conta do Formidable Forms, precisará fazer login novamente.

Em seguida, você precisa instalar o complemento Formidable Forms Pro e Visual Views em seu site.

Você pode instalá-los diretamente na guia Formidable em seu painel do WordPress ou baixar o arquivo de plug-in da sua conta.

Agora, você está pronto para criar um formulário de pesquisa personalizado no WordPress com o Formidable Forms.

Etapa 2: adicionar dados ao seu formulário de pesquisa

Antes de criar um formulário de pesquisa, você precisa coletar dados para os resultados da pesquisa.

Para criar um novo formulário, navegue até Formidable »Forms e clique no botão + Add New .

Você verá um pop-up onde poderá escolher um modelo para seu formulário. Estamos indo com o modelo de formulário em branco para este tutorial.

Em seguida, você precisa adicionar o nome e a descrição do seu formulário.

Quando terminar de nomear seu formulário, clique no botão Criar para iniciar o construtor de formulários de arrastar e soltar.

No construtor de formulários, você pode ver os campos do formulário no lado esquerdo e a visualização do formulário no lado direito da página.

Para inserir quaisquer campos de formulário, basta arrastá-los e soltá-los do menu de campos para a visualização do formulário.

Aqui, estamos adicionando estes campos: Nome, Sobrenome, E-mail e País. Você pode adicionar qualquer um dos campos de acordo com suas necessidades.

Para personalizar qualquer campo, basta clicar nele e visualizar as configurações do formulário. Existem muitas opções, como rótulo, opção obrigatória, CSS personalizado e muito mais.

Você pode até usar a opção de lógica condicional para mostrar ou ocultar campos de formulário de acordo com a entrada do usuário.

Quando terminar de adicionar campos, clique no botão Atualizar no canto superior direito do construtor de formulários.

Agora tudo que você precisa fazer é publicar este formulário em seu site para coletar dados de seus usuários ou membros do site.

Ou você também pode importar um arquivo de dados do seu computador. Para isso, abra a aba Entradas na parte superior do construtor e clique no botão Importar .

Em seguida, você verá uma janela na qual poderá fazer upload de qualquer arquivo CSV ou XML para importar dados para seu formulário. Você pode mapear os campos para os dados no arquivo para importar registros.

Depois de coletar os dados, você precisará criar um formulário de pesquisa personalizado no WordPress para permitir que os usuários pesquisem em seu site.

Etapa 3: crie seu formulário de pesquisa personalizado

Para criar um formulário de pesquisa, você precisa seguir as mesmas instruções na Etapa 2.

Vá para Formidable » Formulários » Adicionar novo e selecione um modelo em branco. Em seguida, dê um nome e uma descrição ao seu formulário de pesquisa personalizado.

Neste formulário, adicionaremos 3 campos de formulário para permitir que os usuários pesquisem os dados em seu site. Os campos são Nome, Sobrenome e País.

Você pode usar o campo de formulário de texto para os nomes e um campo suspenso de pesquisa para pesquisa de país.

Nas configurações do campo Nome , você precisa adicionar o valor padrão para conectar seu formulário de pesquisa a uma exibição de resultados posteriormente.

Para isso, adicione este shortcode na opção Default Value nas configurações do campo:

[get param=fname]

Aqui, “fname” é o texto que usamos para o campo de primeiro nome para conectar com a visualização.

Nas configurações do campo Sobrenome , adicionaremos o mesmo código de acesso:

[get param=lname]

Aqui, “lname” é o texto que usamos para o campo de sobrenome para conectar com a exibição.

Nas configurações do campo País , precisamos adicionar os nomes dos países na opção suspensa. Certifique-se de deixar a primeira opção em branco.

Se você rolar para baixo, poderá ver a opção de adicionar um texto de espaço reservado. E assim como os outros dois campos de formulário, você precisa adicionar um valor padrão aqui. Insira o código de acesso:

[obter parâmetro=país]

Aqui, “país” é o texto que usamos para o campo país para se conectar com a visualização.

Depois de adicionar os tipos de entrada, você pode alterar o layout dos campos do formulário.

Para fazê-los aparecer em uma única linha horizontal, vá para a opção CSS Layout Classes de cada campo e selecione a opção 1/4.

Se você quiser personalizar o botão, navegue até a guia Configurações »Estilo e botões e vá para as configurações do botão.

Aqui, você pode alterar o texto do botão de envio para Pesquisar e escolher o alinhamento do botão para Inline . Isso fará com que seu botão de pesquisa apareça na mesma linha que seus campos de formulário.

Agora que você aprendeu a criar um formulário de pesquisa personalizado no WordPress, vamos inserir este formulário e os resultados em uma página da web.

Etapa 4: criar uma visualização de resultados de pesquisa

Você precisa criar uma exibição para exibir os resultados da pesquisa e o formulário de pesquisa na mesma página.

Para criar uma nova visualização, abra a página Formidable » Views e clique no botão + Add New .

Em seguida, você pode ver o pop-up que permite escolher entre os tipos de exibição de Grade, Tabela, Calendário e Clássico.

Para este tutorial, vamos escolher a visualização em grade para os resultados do formulário de pesquisa.

Depois disso, você pode ver as opções para selecionar um formulário para entradas e adicionar o nome para sua visualização de resultados. Certifique-se de selecionar o formulário de coleta de dados que você criou na Etapa 2.

Clique no botão Criar uma visualização quando terminar.

No construtor de visualizações, você pode ver as opções de estilo no lado esquerdo e o construtor de layout de visualização no lado direito. Clique no link começar a adicionar conteúdo para adicionar suas entradas.

Clique no ícone “ + ” para começar a adicionar sua listagem às visualizações. Isso abrirá o editor de conteúdo de listagens.

No editor de conteúdo da página de listagem, você pode adicionar os campos de formulário da opção Personalização no lado direito da página. Basta clicar nos campos do formulário para inseri-los na visualização de resultados.

Em seguida, você pode estilizar as teclas de campo para exibir os campos de formulário no layout desejado.

Quando terminar, clique no botão Atualizar visualização . Agora você pode ver todas as entradas na página de visualizações.

Você precisa adicionar o formulário de pesquisa nesta página. Para isso, clique na opção Adicionar antes do conteúdo

Isso abrirá o editor de conteúdo onde você pode inserir o formulário de pesquisa personalizado que você criou na Etapa 3.

Tudo o que você precisa fazer é clicar no botão Formidável e selecionar seu formulário de pesquisa para inserir o código de acesso do formulário.

Clique no botão Atualizar visualização para seu formulário de pesquisa personalizado para a visualização.

Na próxima etapa, mostraremos como publicar a visualização de resultados em seu site WordPress.

Etapa 5: publicar visualização de resultados de pesquisa

Para adicionar a visualização de resultados de pesquisa em seu site, você precisa criar uma nova página e pesquisar o bloco Visualizações Formidáveis.

Depois de adicionar a visualização, você pode publicar a página em seu site. Sua página ficará mais ou menos assim.

Espere! Você ainda não terminou. Você precisa conectar seu formulário de pesquisa personalizado e a visualização de resultados para permitir que os usuários pesquisem conteúdo em seu site.

Etapa 6: conectar o formulário de pesquisa personalizado à visualização

Para conectar seu formulário de pesquisa, vá para Formidable »Formulários e abra a opção Configurações do formulário de pesquisa.

Aqui, você pode ir para a opção Ao enviar e selecionar a opção Redirecionar para URL. Em seguida, você precisa adicionar o link à página de visualizações que criou na Etapa 5.

Para isso, copie o URL da página e adicione esta parte: “?fname[21]&lname=[19]&country=[22]”.

Você pode inserir texto de campo e chaves para que o URL de redirecionamento fique assim:

http://yoursitename/user-directory/?fname[21]&lname=[19]&country=[22]

Lembre-se de ativar a opção Não armazenar entradas enviadas deste formulário para este formulário.

Agora, você precisa adicionar filtros às visualizações de resultados para que os usuários possam pesquisar a listagem pelos campos de formulário que você adicionou.

Para isso, abra a visualização que você criou anteriormente e clique na opção de filtros na parte superior da página.

Em seguida, você precisa adicionar os filtros para o nome, sobrenome e país e inserir o código de acesso como seu valor padrão para cada campo.

Uma última coisa que você precisa fazer é inserir o shortcode do seu formulário de pesquisa na opção No Entries Message no menu à esquerda. Isso permitirá que os usuários pesquisem mais conteúdo após cada pesquisa.

Não se esqueça de atualizar a visualização depois de concluir as configurações.

Teste seu formulário de pesquisa personalizado

Para verificar se o seu formulário de pesquisa está funcionando corretamente, recarregue sua página de pesquisa e use os filtros para pesquisar por listagens.

Com isso, você conhece 3 formas de adicionar um formulário de busca ao seu site. Embora a opção de pesquisa padrão do WordPress seja gratuita, não a recomendamos se você não souber o que está fazendo com o código. O plugin SearchWP é de longe o nosso método favorito. É fácil de usar e adiciona uma função de pesquisa muito mais avançada ao seu site.

Esperamos que este artigo tenha ajudado você a criar facilmente um formulário de pesquisa personalizado no WordPress com a ajuda do plug-in Formidable Forms.

Para as próximas etapas, você pode conferir estes recursos:

• Como adicionar um formulário de reserva personalizado ao seu site WordPress
• Os melhores construtores de formulários comparados (gratuitos e pagos)
• Como criar um formulário de registro com pagamentos do PayPal no WordPress

Essas postagens ajudarão você a adicionar mais funcionalidades ao seu site WordPress com a ajuda dos melhores construtores de formulários do WordPress.