Como exibir um formulário de contato flutuante no WordPress (3 métodos)

Muitos proprietários de sites acham difícil fornecer acesso fácil às opções de contato sem sobrecarregar o design do site. Os formulários de contato flutuantes oferecem uma solução, permitindo que os usuários entrem em contato facilmente, independentemente de onde estejam no site.

Usamos essa estratégia em nossos próprios sites para coletar feedback dos usuários e permitir que os visitantes entrem em contato conosco com facilidade. Felizmente, há muitos plug-ins do WordPress que podem ajudá-lo a fazer o mesmo em seu site.

Neste artigo, mostraremos como exibir um formulário de contato flutuante no WordPress.

O que é um formulário de contato flutuante e por que usá-lo?

Um formulário de contato flutuante permanece na tela, como no canto inferior ou no painel lateral, à medida que os visitantes navegam em um site. Normalmente, ele aparece como um pequeno botão ou ícone que se expande em um formulário completo quando clicado ou passado o mouse sobre ele.

Aqui estão alguns benefícios de usar um formulário de contato flutuante:

• Acessibilidade. Como o formulário flutua e permanece fixo, os visitantes do site podem acessá-lo de qualquer página da Web, a qualquer momento.
• Intrusão mínima. Ao contrário dos pop-ups, que podem interromper a experiência do usuário, os formulários flutuantes normalmente são menos perturbadores e ainda assim são perceptíveis.
• Chamada para ação. A presença constante de um formulário flutuante lembra gentilmente os usuários de se envolverem, o que ajuda a aumentar as conversões.

Como proprietário de um site, você pode usar um formulário de contato flutuante para suporte ao cliente, consultas de vendas e coleta de feedback.

Ao permitir que os visitantes obtenham ajuda instantaneamente enquanto navegam no seu site, façam perguntas sem sair da página ou compartilhem suas sugestões a qualquer momento, um formulário de contato flutuante pode melhorar a experiência do usuário no seu site.

Com o WordPress, é possível exibir um formulário de contato flutuante de várias maneiras.

Nas seções a seguir, compartilharemos três métodos fáceis para exibir um formulário de contato flutuante em um site do WordPress. Basta usar os links rápidos abaixo para escolher o método que você deseja usar:

Vamos começar!

Método 1: Criar um formulário de contato flutuante no WordPress usando o UserFeedback

Se quiser criar um formulário de contato flutuante simples com opções de personalização diretas, esse método é para você.

O UserFeedback é um plug-in do WordPress que pode ajudá-lo a criar formulários de feedback personalizáveis, formulários de contato flutuantes e pesquisas pop-up. Esse plug-in vem com modelos e perguntas incorporados, inclusive para formulários de pesquisa de experiência em sites e lojas de comércio eletrônico.

Usamos o UserFeedback em nossos próprios sites, e você pode saber mais em nossa análise completa do UserFeedback.

Ao usar o UserFeedback, você pode aprimorar o seu site com base na opinião real do usuário, aumentar a satisfação do cliente e resolver qualquer problema imediatamente.

Primeiro, você precisa instalar e ativar o plug-in UserFeedback. Se você não souber como instalar um plug-in, siga nosso guia sobre como instalar um plug-in do WordPress.

Depois de ativar o UserFeedback no seu site, você poderá começar a criar o primeiro formulário de pesquisa. No painel do WordPress, navegue até UserFeedback ” Surveys ” Create New.

Depois de fazer isso, você chegará à seção “Setup” (Configuração).

Com o UserFeedback, você pode começar com uma página em branco com a opção “Start from Scratch” (Iniciar do zero) ou usar um modelo predefinido. Neste guia, usaremos o modelo “Website Feedback”.

Para escolher o modelo, basta clicar nele.

Em seguida, vamos editar a cópia. Neste exemplo, estamos alterando o rótulo “Website Feedback” para “Do you have any feedback?”.

Em seguida, talvez você queira clicar no menu suspenso “Question Type” (Tipo de pergunta) para escolher como os visitantes podem responder a essa pergunta. Neste exemplo, escolheremos “Single Text Field”.

Depois disso, você pode mudar a pergunta para “Nome”.

Agora, você precisará de outro campo de pergunta para o endereço de e-mail do usuário.

Você pode rolar a tela um pouco para baixo e clicar no botão “Add Question” (Adicionar pergunta). Depois de fazer isso, vá em frente e configure o tipo e o título da pergunta como fez na etapa anterior.

A próxima etapa é definir as configurações do formulário.

Na guia “Configurações”, você pode ativar o rastreamento das visualizações e respostas do formulário usando o Google Analytics e o MonsterInsights. Basta ativar a opção ‘Enable Google Analytics Tracking’ para usar o recurso.

Se quiser saber mais sobre como usar o Google Analytics para rastreamento, leia nosso guia sobre como configurar as metas do Google Analytics para seu site WordPress.

Depois disso, talvez você queira rolar a guia para baixo para configurar a segmentação e o comportamento.

Na seção “Targeting”, é possível escolher o tipo de dispositivo e a página da Web que exibirá o formulário do questionário.

As opções de tipo de dispositivo incluem desktop, tablet e celular. Se quiser que o formulário seja exibido em todos esses dispositivos, você pode selecionar todos os três.

Em seguida, você pode escolher todas as páginas em que deseja exibir o formulário flutuante. Recomendamos escolher a opção “All Pages” para que os visitantes possam acessar o formulário em qualquer lugar do site.

Depois disso, vamos rolar a tela para baixo e configurar o comportamento do formulário. Aqui, você definirá:

• Tempo de exibição. Escolha quando o formulário aparecerá em suas páginas.
• Duração da exibição. Defina a frequência com que o formulário será exibido aos visitantes.
• Tempo de execução da pesquisa. Especifique por quanto tempo o formulário aparecerá nas páginas designadas.

Agora, você está pronto para passar para a próxima etapa.

Na guia “Notifications” (Notificações), você digitará o endereço de e-mail que receberá as notificações de envio de formulários. Você pode adicionar vários destinatários, mas precisará certificar-se de usar uma vírgula para separar cada um deles.

Por fim, talvez você queira reservar algum tempo para verificar seu formulário uma última vez antes de finalizá-lo.

Na parte superior da guia “Publish” (Publicar), você verá “Summary of Website Feedback” (Resumo do feedback do site). Você pode examinar os pontos um a um para ver se as configurações do formulário estão corretas.

Se tudo estiver certo, você pode rolar para baixo até a seção “Publish” (Publicar).

Lá, você pode alterar o status de “Rascunho” para “Publicar”. Como alternativa, você pode agendar um lançamento ativando a opção “Schedule for Later” e definindo a data e a hora.

Depois disso, basta clicar em “Save and Publish” (Salvar e publicar) para exibir o formulário.

E é isso! Você exibiu com êxito um formulário de contato flutuante no seu site WordPress usando o UserFeedback.

Método 2: Criar um formulário de contato flutuante no WordPress usando o WPForms e o OptinMonster

Se quiser ter mais controle de design sobre o formulário de contato flutuante, este é o método ideal para você. Usaremos o WPForms para criar o formulário e o OptinMonster para fazê-lo flutuar em seu site do WordPress.

O WPForms é um plug-in de arrastar e soltar fácil de usar para criar formulários do WordPress. Com mais de 1.800 modelos disponíveis, você pode configurar rapidamente um formulário com apenas alguns cliques. Para saber mais, você pode ver nossa análise completa do WPForms.

Para criar formulários com o WPForms, a primeira coisa que você precisa fazer é instalar e ativar o plug-in em seu site. Se precisar de mais ajuda, leia nosso guia sobre como instalar um plug-in do WordPress.

Após a ativação, você pode navegar até WPForms ” Add New no painel do WordPress.

Isso o redirecionará para a interface do construtor de formulários.

Lá, tudo o que você precisa fazer é digitar o nome do formulário e selecionar um modelo. Neste exemplo, vamos criar um formulário de contato e chamá-lo de “Formulário de contato”.

Depois de nomear seu formulário, você pode rolar o painel para baixo para selecionar um modelo.

Neste exemplo, usaremos a opção “Formulário de contato simples”. Para começar a criar, basta passar o mouse sobre ela e clicar em “Use Template” (Usar modelo).

Isso o redirecionará para o painel “Fields” (Campos) do construtor de formulários.

A partir daqui, talvez você queira revisar o formulário de contato e ajustar o conteúdo pré-criado. Se tudo já estiver certo, você pode clicar no botão “Save” (Salvar).

Para obter instruções detalhadas, consulte nosso guia passo a passo sobre como criar um formulário de contato.

Depois de terminar de criar o formulário, é hora de ajustar as configurações para que ele seja exibido como um formulário flutuante.

Para isso, você precisará instalar o OptinMonster e conectar seu site WordPress ao plug-in.

O OptinMonster é um poderoso plugin de geração de leads e pop-ups. Ele pode ajudá-lo a criar e gerenciar campanhas para converter visitantes em assinantes e clientes pagantes.

Você pode conferir nosso guia detalhado sobre como criar uma lista de e-mails com o OptinMonster.

Após a ativação, você pode clicar no item de menu “OptinMonster” no painel do WordPress.

Em seguida, você verá a tela de boas-vindas, onde poderá clicar em “Connect Your Existing Account” (Conectar sua conta existente) para começar a usar o plug-in.

Uma nova janela será aberta e, nela, você poderá clicar em “Connect to WordPress” (Conectar ao WordPress).

Em seguida, a OptinMonster solicitará os detalhes de sua conta para concluir o processo.

Depois de verificado, você estará pronto para criar sua primeira campanha.

Para começar, basta navegar até OptinMonster ” Campaigns no painel do WordPress.

Quando chegar a “Campaigns”, você estará pronto para criar e configurar seu formulário flutuante.

Para começar, basta clicar no botão “Create Your First Campaign” (Criar sua primeira campanha).

Agora, é hora de selecionar um tipo de campanha.

A OptinMonster tem vários tipos de campanha, inclusive uma barra flutuante. Embora possa parecer o tipo de campanha perfeito, uma barra flutuante tem espaço limitado. Portanto, é melhor usá-la em outros casos, como para anunciar promoções de vendas ou compartilhar códigos de cupom.

Se você quiser saber mais sobre como usar uma barra flutuante, recomendamos que consulte nosso guia sobre como criar uma barra de rodapé flutuante fixa no WordPress.

Para manter o design organizado, você pode escolher “Slide-in” como tipo de campanha para adicionar o formulário de contato do WPForms.

Um slide-in flutuante permanecerá no canto inferior direito da tela do usuário. Portanto, ele pode ajudar a manter seu conteúdo legível, o design da Web organizado e a experiência do usuário excelente.

Você pode simplesmente clicar no tipo de campanha para usá-lo.

Em seguida, vamos rolar o painel para baixo e selecionar um modelo.

Para usar um modelo, basta passar o mouse sobre o bloco do modelo e clicar em “Use Template” (Usar modelo). Aqui, estamos escolhendo “Subscribe to Newsletter (Light)”.

Depois de escolher o tipo de campanha e o modelo, uma janela pop-up será exibida.

Você só precisa dar um nome à sua campanha. Neste exemplo, chamaremos nossa campanha de “Floating Contact Form” (Formulário de contato flutuante).

Depois de decidir o nome, você pode clicar em “Start Building”.

O OptinMonster o redirecionará para o criador de campanhas.

A interface de criação de campanha tem duas seções. O lado esquerdo contém todos os recursos que você pode adicionar à sua campanha, e o lado direito é a visualização ao vivo.

Para obter mais informações, consulte nosso tutorial sobre como adicionar um formulário de contato deslizante no WordPress.

Para adicionar o formulário de contato do WPForms, role para baixo no painel esquerdo para localizar o bloco WPForms.

Depois de encontrá-lo, basta arrastar e soltar o bloco WPForms na visualização ao vivo no painel direito.

Em seguida, você verá um menu suspenso “Form Selection” (Seleção de formulário). Clique nele e escolha “Contact Form” (Formulário de contato). O bloco na visualização ao vivo carregará o shortcode do formulário.

Depois disso, talvez você queira ir para a guia “Regras de exibição”. É nessa guia que você pode definir o tempo e as páginas de exibição do formulário de contato flutuante.

Para garantir que seu formulário flutue e permaneça fixo desde o primeiro segundo, recomendamos configurar os dois primeiros menus suspensos como “tempo na página” e “é imediato”.

Em seguida, para exibir o formulário em todas as páginas, você pode definir os seguintes menus suspensos como “caminho do URL atual” e “qualquer página”.

Depois disso, você pode ir para a guia “Publicar”.

Nessa guia, a primeira coisa que você precisa fazer é alterar o status de publicação da campanha para “Publish” (Publicar) ou “Schedule” (Programar).

A próxima etapa é usar o recurso “Live Site Inspector” para testar a aparência da campanha em sua página da Web. Para isso, basta digitar o URL do seu site na caixa de texto e clicar em “Test”.

Isso o redirecionará para uma nova guia.

Se tudo estiver do jeito que você quer, volte para o criador de campanhas da OptinMonster e salve sua campanha.

Pronto! Você criou com sucesso um formulário de contato flutuante usando o WPForms e o OptinMonster.

Método 3: Criar um formulário de contato flutuante no WordPress usando um plug-in de formulário flutuante gratuito

Nosso último método permite exibir um ícone flutuante que redireciona para a página do formulário de contato. Essa abordagem é um pouco diferente, mas pode ser eficaz.

Vários plugins gratuitos permitem adicionar ícones de contato flutuantes ao seu site WordPress. Algumas opções populares incluem o Simple Floating Menu e o Float Menu. Em geral, esses plug-ins exigem que você incorpore um URL nas configurações.

Neste tutorial, demonstraremos como fazer isso usando o Simple Floating Menu. Se precisar de ajuda para instalar o plug-in, leia nosso guia sobre como instalar um plug-in do WordPress.

Antes de acessar a área de configuração do plug-in Simple Floating Menu, vamos copiar o URL da página em que você exibe o formulário de contato.

Para fazer isso, navegue até a página em questão e copie o URL da barra de URL.

Agora, você pode abrir o Simple Floating Menu no painel do WordPress.

Quando estiver na área de configurações do plug-in, você deverá ativar o ícone do formulário flutuante. Para isso, ative o controle deslizante “Enable Floating Menu” (Ativar menu flutuante). Em seguida, ele passará de cinza para verde ou de desativado para ativado.

Em seguida, localize o campo “Button URL” (URL do botão) para colar o URL.

Depois de inserir o URL do botão, você verá uma notificação se suas configurações foram salvas com êxito.

Neste momento, seu ícone flutuante já deve estar ativo em seu site WordPress. No entanto, você pode personalizar ainda mais a posição e a aparência do botão.

Acima do campo “Button URL”, você pode alterar o ícone padrão para algo mais relevante. Esse plug-in oferece dezenas de opções de ícones, portanto, se você se sentir preso, é uma boa ideia usar o recurso de filtro.

O “Texto da dica de ferramenta” será exibido quando os visitantes do site passarem o mouse sobre o ícone flutuante. Recomendamos preencher esse campo para dar aos visitantes um contexto sobre onde o ícone os levará.

Em seguida, se quiser redirecionar os visitantes para uma nova página depois de clicar no ícone, basta marcar a caixa de seleção no campo “Abrir em nova guia”.

Você pode editar as cores do ícone flutuante rolando a tela para baixo. Sinta-se à vontade para ser criativo com as cores do plano de fundo, do ícone e do efeito de foco, desde que elas correspondam à personalidade de sua marca ou de seu site.

Quando terminar, clique em “Save Settings” (Salvar configurações).

Em seguida, você pode ir para a guia “Settings” (Configurações) para obter mais recursos de personalização.

Nessa guia, você pode escolher onde deseja que o formulário apareça em seu site, como no canto superior esquerdo, no meio à direita ou no canto inferior direito.

Há também configurações de orientação do botão. Você pode escolher vertical ou horizontal. Talvez você também queira alterar o estilo do botão. A forma padrão é um retângulo, mas você pode optar por um círculo, um triângulo ou até mesmo uma estrela.

Você pode encontrar mais configurações de personalização no painel.

Basta ajustar o tamanho do ícone flutuante, os estilos de sombra, a tipografia e muito mais para torná-lo mais exclusivo.

Quando terminar, basta salvar para não perder o progresso.

Agora, você pode ir em frente e ver como o ícone flutuante fica em seu site.

Para sua referência, veja como é o nosso ícone flutuante:

Alternativa: Use um Chatbot em seu site

Um formulário de contato flutuante é uma ótima maneira de permitir que os visitantes entrem em contato com você. Mas se você quiser fornecer respostas imediatas aos seus usuários, pode valer a pena instalar um chatbot.

Um chatbot pode ser alimentado por IA ou gerenciado diretamente pela sua equipe de suporte. Por exemplo, uma ferramenta como o Chatbot pode obter informações do seu site e da central de ajuda para fornecer respostas com tecnologia de IA imediatamente aos visitantes.

Para obter detalhes sobre como configurar isso, consulte nosso tutorial sobre como adicionar um chatbot no WordPress.

Esperamos que este guia o tenha ajudado a criar e exibir um formulário de contato flutuante no WordPress. Em seguida, confira nosso guia sobre como criar formulários mais interativos no WordPress e nossa seleção especializada dos melhores plug-ins de formulário de contato do WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.