Eu costumava pedir às pessoas que me enviassem fotos por e-mail para o meu site. Fotos de perfil para sites de membros, retratos para páginas de equipe, até mesmo imagens simples de verificação de identidade – e todas as vezes, isso se transformava em uma bagunça de idas e vindas.
As pessoas esqueciam de anexar o arquivo. Ou enviavam uma foto muito grande. Às vezes, tiravam uma captura de tela de uma foto em vez de enviar a imagem real, e a qualidade ficava terrível.
Então percebi que poderia permitir que as pessoas tirassem fotos e gravassem vídeos através dos meus formulários do WordPress. Elas só precisam clicar em um botão, tirar uma foto (ou gravar um vídeo rápido), e pronto.
Neste guia, mostrarei como adicionar esse recurso de captura de câmera aos seus formulários do WordPress para que você possa pular todas as dores de cabeça que eu passei.
Por que adicionar captura de câmera ao vivo em formulários do WordPress?
A captura de câmera ao vivo em seus formulários do WordPress torna muito mais rápido e fácil para as pessoas enviarem fotos ou vídeos. Isso pode levar a mais usuários completando seu formulário.
Pense no que acontece quando você pede a alguém para enviar uma foto para o seu formulário de contato. Elas precisam parar o que estão fazendo, abrir o aplicativo da câmera, tirar a foto, fechar a câmera, encontrar a foto na galeria e, em seguida, voltar para enviá-la.
São muitos passos. E cada passo extra é outra chance de alguém desistir e abandonar seu formulário.
Com um campo de captura de câmera ao vivo, as pessoas podem tirar fotos ou gravar vídeos sem sair do formulário. Elas clicam em um botão, a câmera abre ali mesmo no navegador e elas terminam em segundos.
Isso importa mais do que você imagina. Já vi as taxas de conclusão de formulários aumentarem significativamente apenas removendo o atrito dos uploads de arquivos tradicionais.
Aqui estão algumas situações reais onde a captura por câmera faz uma grande diferença:
| Tipos de Sites | Casos de Uso |
|---|---|
| Equipes de Suporte ao Cliente | Deixe as pessoas mostrarem o problema em vez de tentar descrevê-lo com palavras. |
| Sites de Propriedades/Imóveis | Peça aos inquilinos para documentarem problemas de manutenção no local em vez de trocarem fotos por mensagem de texto. |
| Escolas/Plataformas de E-learning | Colete fotos de alunos durante admissões online sem pedir aos pais para enviarem arquivos separados por e-mail. |
| Companhias de Seguro | Acelere sinistros fazendo com que os clientes fotografem os danos imediatamente. |
A melhor parte de usar um plugin para esse fim é que tudo fica organizado automaticamente.
Quando alguém envia seu formulário, a foto ou vídeo é anexado à entrada junto com todas as outras informações. Chega de procurar na sua caixa de entrada de e-mail tentando combinar fotos com a pessoa certa. ✨
Dito isso, vou mostrar todos os passos para adicionar um recurso de captura de câmera aos seus formulários do WordPress. Aqui está tudo o que vou cobrir neste guia:
- Etapa 1: Instale e Ative o WPForms Pro
- Passo 2: Adicione o Campo de Câmera ao Seu Formulário
- Passo 3: Configure o Campo de Câmera do Seu Formulário
- Step 4: Set Up Button Style, Storage, and Access Settings
- Etapa 5: Configurar Notificações e Confirmações do Formulário
- Etapa 6: Testar e Incorporar Seu Formulário
- Perguntas Frequentes Sobre Capturar Fotos ou Vídeos da Câmera ao Vivo em Formulários do WordPress
- Mais Guias sobre o Uso de Formulários WordPress
Etapa 1: Instale e Ative o WPForms Pro
Neste guia, vou usar o WPForms, que é o melhor plugin de formulário de contato para WordPress. Escolhi este plugin porque ele tem um campo de captura de câmera, que você pode adicionar facilmente com um simples arrastar e soltar.
Você também pode usar o WPForms para criar muitos formulários diferentes, incluindo formulários de contato, formulários de pedido online com pagamentos, enquetes e pesquisas, e cadastros de newsletter.
No WPBeginner, usamos o WPForms para todos os nossos formulários – formulários de contato, solicitações de migração de site, a pesquisa anual de leitores e muito mais. Somos grandes fãs desta ferramenta e você pode saber mais sobre ela em nossa avaliação completa do WPForms.
Primeiro, acesse o site do WPForms para criar uma conta. Clique no botão ‘Get WPForms Now’, escolha um plano que atenda às suas necessidades e complete o cadastro.
💡 Observação: Você precisará do WPForms Pro para ter acesso ao recurso de captura de câmera, além de extras como lógica condicional e temas de formulário. Dito isso, você ainda pode começar com a versão gratuita do WPForms se quiser experimentar o plugin primeiro.
Após o cadastro, você deverá encontrar o arquivo zip do plugin e a chave de licença no painel da sua conta WPForms. Você pode manter esta aba aberta ou guardar seu arquivo e chave em um local seguro, como um gerenciador de senhas.
Agora, vamos ao seu painel do WordPress e navegue até Plugins » Adicionar Novo Plugin.
Na próxima tela, você pode usar a barra de pesquisa para procurar o plugin WPForms.
Clique em ‘Instalar Agora’ nos resultados da pesquisa e em ‘Ativar’ quando ele aparecer.
Se precisar de ajuda, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, vá para WPForms » Configurações na sua área de administração para ativar sua licença WPForms Pro.
Simplesmente copie sua chave de licença e cole-a na caixa. Em seguida, clique no botão ‘Verificar Chave’.
O WPForms confirmará que sua licença está ativa. Agora você está pronto para começar a criar formulários com captura de câmera.
Passo 2: Adicione o Campo de Câmera ao Seu Formulário
Nesta etapa, você criará um formulário com o recurso de captura de câmera.
Para começar, você pode navegar até WPForms » Adicionar Novo no painel de administração do seu WordPress.
Isso o levará à página de Configuração, onde você poderá nomear seu formulário.
Isso é apenas para sua referência, mas recomendo usar um nome claro e descritivo para facilitar a organização à medida que você cria mais formulários do WordPress.
Em seguida, você escolherá como construirá seu formulário.
O WPForms permite que você crie formulários usando uma tela em branco, um construtor de formulários com IA ou um modelo pronto.
Com o WPForms AI, tudo o que você precisa fazer é escrever um prompt simples. O construtor de formulários com IA o gerará para você em alguns segundos.
Para este tutorial, no entanto, vou usar o modelo de Formulário de Contato Simples.
O WPForms vem com mais de 2.000 modelos de formulários pré-fabricados, então é fácil encontrar um que atenda às suas necessidades.
Se você quiser instruções passo a passo, consulte nosso guia sobre como criar um formulário de contato no WordPress.
Assim que seu formulário abrir no construtor, olhe para a barra lateral esquerda, onde todos os campos do formulário estão listados. Role para baixo até encontrar a seção rotulada como ‘Campos Elaborados’.
Bem ali, ao lado do campo 'Upload de Arquivo', você verá o campo 'Câmera'. Você pode arrastá-lo e soltá-lo onde quiser que ele apareça em seu formulário.
💡 Observação: O campo Upload de Arquivo é ideal para coletar arquivos que os usuários já têm em seus dispositivos, como fotos salvas ou PDFs. Para este tutorial, o campo Câmera funciona melhor porque permite que os usuários capturem uma foto ou vídeo no local, sem sair do formulário.
Você notará um pequeno ícone de câmera aparecendo na prévia do seu formulário. É nele que seus usuários clicarão para capturar sua foto ou vídeo.
Uma coisa que achei interessante com este recurso é que, quando alguém clica no botão da câmera em um laptop ou desktop, verá uma contagem regressiva amigável de 3 segundos antes da captura. Isso lhes dá tempo suficiente para sorrir ou ajustar seu ângulo.
Veja como pode parecer na prévia:
Pronto – eu disse que essa parte seria rápida!
Etapa 3: Configure o Campo Câmera do Seu Formulário
A partir daqui, você pode configurar seu campo Câmera.
Clique no campo 'Câmera' que você acabou de adicionar para abrir o painel 'Opções de Campo' no lado esquerdo. É aqui que você personalizará como a captura da câmera funciona.
A primeira coisa que você verá é a configuração 'Rótulo'.
Por padrão, o campo é chamado Câmera, mas você pode renomeá-lo para corresponder ao que está coletando. Por exemplo: Foto de Perfil, Captura de Tela de Erro ou Foto de Dano, dependendo do seu caso de uso.
Em 'Descrição', você pode adicionar uma nota curta com detalhes ou instruções adicionais, como o que deve estar visível na foto ou quaisquer requisitos de qualidade.
Por exemplo:
- “Use boa iluminação para manter a imagem clara”, para fotos de perfil.
- “Certifique-se de que todo o texto esteja legível”, para capturas de tela de erro.
- “Inclua toda a propriedade no quadro”, para relatórios de danos.
Isso mantém o rótulo curto e fácil de escanear, e usa a descrição apenas para orientação útil.
Em seguida, há a configuração ‘Formato’, onde você verá duas opções:
- Foto – funciona bem para fotos de perfil, carteiras de identidade ou qualquer situação em que você precise de uma captura rápida.
- Vídeo – perfeito quando você quer que as pessoas gravem apresentações curtas, depoimentos ou expliquem algo que é mais fácil de mostrar do que descrever.
Por padrão, o WPForms o define como ‘Foto’, mas você pode alternar entre eles a qualquer momento.
Agora, você pode rolar para baixo até a configuração ‘Tamanho Máximo do Arquivo’, onde pode controlar o tamanho do arquivo enviado pelo usuário.
Você pode inserir qualquer número de megabytes (MB) que desejar. Se deixar em branco, o WPForms usará o limite padrão do seu servidor, que geralmente é de cerca de 64 MB. Você também pode aumentar o tamanho máximo de upload de arquivo, se necessário.
Recomendo definir um limite razoável com base no que você realmente precisa. Tamanhos de arquivo menores ajudam seus formulários a carregar mais rápido e economizam espaço no seu servidor.
Não se esqueça de ativar o botão ‘Obrigatório’ para que os usuários não possam pular este campo.
Se você escolheu ‘Vídeo’ como formato, também verá uma opção ‘Limite de Tempo’. O padrão é 1 minuto e 30 segundos, o que funciona bem para a maioria das situações.
🧑💻 Dica Pro: Arquivos de vídeo podem ficar grandes e prejudicar o desempenho do seu WordPress. Este campo é adequado para clipes curtos (menos de 30 segundos). Mas se você precisar que os usuários enviem vídeos longos (mais de 5 minutos), é melhor que eles façam o upload para um serviço de nuvem e compartilhem o link.
Veja nosso guia sobre por que você nunca deve fazer upload de um vídeo para o WordPress para saber mais.
Você pode ajustar essas configurações para atender às suas necessidades.
Etapa 4: Configurar Estilo do Botão, Armazenamento e Configurações de Acesso
Aqui, vou guiá-lo pelas configurações avançadas do seu campo Câmera. É aqui que você ajusta a aparência do recurso da câmera e onde seus arquivos capturados são armazenados.
Para começar, mude para a aba ‘Avançado’ no topo do painel Opções de Campo.
Vamos detalhar cada uma dessas opções de configuração.
Personalize o Estilo e o Texto do Botão da Câmera
Primeiro, encontre o menu suspenso ‘Estilo’. Você pode escolher exibir um ícone de botão ou exibi-lo como um link simples.
Eu geralmente fico com o estilo de botão porque é mais óbvio e fácil de clicar, mas a opção de link funciona bem se você quiser um visual mais limpo e minimalista.
Logo abaixo disso, você verá o campo ‘Texto do Link do Botão’. Esta é a sua chance de tornar o botão da câmera mais pessoal ou alinhado à sua marca.
Em vez do texto padrão, você pode escrever algo como “Tire Sua Foto” ou “Grave um Vídeo”. Eu já vi pessoas usarem frases divertidas como “Diga Xis!” para formulários de foto de perfil.
Esses pequenos toques tornam seu formulário de contato mais acolhedor e menos robótico.
Estilize Mais com Classes CSS
Em seguida, você verá o campo Classes CSS. Isso permite que você adicione um nome de classe personalizado para que possa estilizar este campo de câmera de forma diferente com CSS.
Por exemplo, você pode adicionar uma classe como custom-camera-btn aqui. Isso não estiliza o botão automaticamente, mas permite que você (ou um desenvolvedor) adicione CSS personalizado nas configurações do seu tema para direcionar este botão específico mais tarde.
Se você quiser adicionar mais de uma Classe CSS, pode separá-las com espaços, assim:camera-field large-button.
Deixarei em branco para manter a estilização consistente com o restante dos meus campos de formulário.
Escolha Onde Armazenar os Arquivos Capturados
Por padrão, o WPForms salva todas as fotos e vídeos capturados na pasta ‘Uploads’ do seu site, especificamente dentro do diretório WPForms.
Mas se você prefere manter todos os seus arquivos de mídia em um só lugar, ative a opção que diz ‘Armazenar arquivo na Biblioteca de Mídia do WordPress.’
Lembre-se apenas que os arquivos na Biblioteca de Mídia são frequentemente mais fáceis para o público acessar, então mantenha esta configuração desativada se você estiver coletando documentos sensíveis.
🧑💻 Dica Profissional: Você também pode conectar o WPForms ao Dropbox ou ao Google Drive se quiser armazenar arquivos externamente. Isso é útil se você estiver preocupado em usar muito espaço no servidor ou se quiser backups automáticos na nuvem.
Independentemente de onde você armazena os arquivos, você sempre pode visualizá-los no seu painel ‘Entradas’, anexados a cada envio de formulário.
Restringir Acesso a Arquivos Carregados
Se o seu formulário coleta informações sensíveis, como fotos de identidade ou documentos pessoais, você vai querer restringir quem pode visualizar esses arquivos. Role para baixo e ative ‘Ativar Restrições de Acesso a Arquivos’.
Uma vez que você ative isso, você terá duas opções de segurança. A primeira é que você pode limitar o acesso para que apenas usuários logados do WordPress possam visualizar os arquivos.
A outra opção é adicionar proteção por senha ao seu formulário para uma camada extra de segurança.
Isso é especialmente importante para formulários usados em saúde, serviços jurídicos ou qualquer outro contexto onde você esteja lidando com informações privadas.
Sem essas restrições, qualquer pessoa com o URL do arquivo poderia potencialmente visualizar a mídia enviada.
Você pode levar o tempo que precisar configurando essas opções avançadas antes de prosseguir.
Etapa 5: Configurar Notificações e Confirmações do Formulário
Agora que seu campo de câmera está funcionando, você precisa garantir que realmente seja notificado quando alguém enviar seu formulário.
Para fazer isso, você pode ir para Configurações » Notificações no criador de formulários.
O WPForms configura automaticamente uma notificação básica por e-mail que é enviada para o endereço de e-mail do administrador do seu WordPress. Toda vez que alguém enviar seu formulário com uma foto ou vídeo capturado, você receberá um e-mail com todos os detalhes.
Você pode personalizar quem recebe essas notificações alterando o campo ‘Enviar para o endereço de e-mail’. Se você quiser que várias pessoas sejam notificadas, basta inserir todos os endereços de e-mail, separando-os com vírgulas.
Você também pode usar uma smart tag para enviar notificações dinamicamente, por exemplo, para o endereço de e-mail enviado no formulário.
Veja nosso guia sobre como criar um formulário de contato com múltiplos destinatários para mais detalhes.
O e-mail de notificação incluirá um link direto para visualizar a foto ou vídeo capturado. Isso permite que você visualize o arquivo imediatamente da sua caixa de entrada sem precisar fazer login no painel do WordPress primeiro.
💡 Observação: O WordPress nem sempre envia e-mails de forma confiável, e às vezes as notificações do formulário vão para o spam ou não são enviadas. Para corrigir isso, recomendo usar o plugin WP Mail SMTP. Para mais detalhes, veja como corrigir o problema de o WordPress não enviar e-mails.
Depois que alguém envia seu formulário, ele precisa saber que foi bem-sucedido.
Vamos ao painel ‘Confirmações’ para decidir o que acontece depois que alguém envia o formulário:
- Confirmação de Mensagem – exibe uma mensagem de texto simples na mesma página após o envio, como “Obrigado! Recebemos sua submissão.”
- Confirmação de Página de Exibição – redireciona as pessoas para uma página diferente no seu site. Isso funciona bem se você quiser enviá-las para uma página de agradecimento personalizada com mais informações.
- A confirmação de Redirecionamento – envia as pessoas para qualquer URL que você desejar, mesmo em um site diferente. Eu usei isso para enviar pessoas para uma página de reserva ou uma oferta especial após o envio.
Você pode escolher a opção que fizer mais sentido para sua situação.
Eu geralmente fico com a confirmação de 'Mensagem' porque é simples e as pessoas sabem imediatamente que o envio delas funcionou.
Se você quiser usá-la também, recomendo reescrever a mensagem padrão para que ela corresponda à voz da sua marca:
Etapa 6: Testar e Incorporar Seu Formulário
Antes de compartilhar seu formulário com o mundo, você precisa ter certeza de que a captura da câmera realmente funciona.
Comece clicando no botão 'Salvar' no canto superior direito do construtor de formulários para salvar todas as suas alterações.
Agora vamos pré-visualizar este formulário em uma página para que você possa testá-lo.
Vá em frente e clique no botão 'Pré-visualizar' para abrir a pré-visualização do seu formulário em uma nova aba.
Na pré-visualização, você pode preencher os campos do seu formulário com dados fictícios.
Para garantir que a validação esteja funcionando, tente inserir um erro de digitação ou deixar um campo obrigatório em branco.
Em seguida, clique no botão da câmera no seu formulário.
Seu navegador então pedirá permissão para acessar sua câmera. Vá em frente e clique em 'Permitir desta vez' ou 'Permitir durante a visita ao site' para conceder permissão.
Observação: Por motivos de segurança, alguns navegadores bloquearão o acesso à câmera se o seu site não estiver usando HTTPS. Certifique-se de que um certificado SSL esteja instalado, caso contrário, o botão da câmera não funcionará.
Você deverá se ver na tela com uma contagem regressiva de 3 segundos. Sorria e deixe que ele capture sua foto ou vídeo.
Quando você preencher tudo, clique em ‘Enviar’ e veja se sua mensagem de confirmação aparece corretamente. Você pode então clicar no link ‘Ver Entradas’ para ver se o envio do formulário foi realizado.
Na próxima tela, você deverá ver seu teste de envio.
Na coluna Ações, clique em ‘Ver’ para ver a entrada.
Agora, você pode rolar para baixo para ver sua foto ou vídeo capturado anexado ali mesmo.
Veja como fica na minha tela:
Assim que tudo estiver certo, você pode adicionar este formulário ao seu site WordPress.
Clique no botão ‘Incorporar’ para iniciar o assistente.
Isso abrirá um pop-up onde você pode selecionar uma página existente ou criar uma nova para o seu formulário.
- Selecionar Página Existente: Um menu suspenso mostrará todas as páginas do seu site WordPress.
- Criar Nova Página: Um campo 'Nomeie Sua Página' aparecerá para você inserir um título.
Para este guia, escolherei 'Criar Nova Página'.
Em seguida, insira um nome para sua nova página, por exemplo, estou chamando a minha de “Formulário de Contato”.
Clique em ‘Vamos Lá!’
Você então chegará ao editor de blocos da página com seu formulário já carregado.
A partir daqui, você pode ajustar as 'Configurações do Formulário' no painel direito.
Por padrão, o título do formulário está oculto, então você pode querer ativá-lo para dar mais contexto aos visitantes. Você também pode habilitar a descrição se tiver adicionado uma.
Para deixá-lo ainda melhor, estilize o formulário para combinar com o tema do seu site.
Vá em frente e escolha um tema na seção Temas.
Quando estiver satisfeito com a aparência, clique em ‘Salvar’.
Com isso feito, publique ou atualize sua página e clique em ‘Ver Página’ para ver a versão ao vivo no seu site WordPress:
Para detalhes, veja nosso guia sobre como incorporar formulários no WordPress.
🧑💻 Dica Profissional: Depois de incorporar seu formulário, certifique-se de abrir a página em seu dispositivo móvel para garantir que a câmera abra suavemente e pareça natural em uma tela menor.
Perguntas Frequentes Sobre Capturar Fotos ou Vídeos da Câmera ao Vivo em Formulários do WordPress
Antes de terminarmos, aqui estão as respostas para algumas perguntas comuns que as pessoas têm sobre o uso de uploads de câmera e campos de arquivo em formulários.
Como coletar fotos no Google Forms?
O Google Forms suporta upload de arquivos, mas não possui um campo dedicado de Câmera Inteligente. Embora os usuários possam selecionar um arquivo manualmente, o WPForms oferece uma integração perfeita que aciona a câmera diretamente, tornando muito mais rápido para os usuários tirar e enviar.
Formulários do WordPress podem ter câmera?
Sim. Alguns plugins de formulário do WordPress, como o WPForms, suportam um campo de câmera que permite aos usuários tirar fotos ou gravar vídeos diretamente de seus dispositivos e enviá-los com o formulário.
O que é um campo de upload de arquivo?
Um campo de upload de arquivo permite que os usuários anexem arquivos como imagens, PDFs ou vídeos ao enviar um formulário. É útil para coisas como uploads de fotos, currículos ou documentos.
Como tiro uma foto em formulários do WordPress?
Você adiciona um campo de câmera ou upload de arquivo ao seu formulário usando um plugin de formulário que o suporte, como o WPForms. Quando os usuários abrem o formulário em um dispositivo com câmera, eles podem tirar uma foto diretamente em vez de fazer upload de um arquivo existente.
Formulários do WordPress podem tirar fotos da webcam?
Sim. Se o plugin de formulário suportar entrada de câmera ao vivo, os usuários poderão tirar fotos usando a webcam em um desktop ou a câmera em seus telefones e enviá-las imediatamente.
Mais Guias sobre o Uso de Formulários WordPress
Espero que este tutorial tenha ajudado você a adicionar um campo de câmera para permitir que os usuários tirem fotos ou vídeos ao vivo diretamente em seus formulários do WordPress.
Em seguida, você pode querer aprender:
- Como Adicionar Escolhas de Imagem em Formulários do WordPress
- Como Mostrar um Formulário de Contato Flutuante no WordPress
- Como Usar Formulários de Contato para Aumentar Sua Lista de E-mails no WordPress
- Maneiras de Usar Lógica Condicional em Formulários do WordPress
- Guia Definitivo para Usar Formulários no WordPress (Tudo o Que Você Precisa Saber)
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Tem alguma pergunta ou sugestão? Por favor, deixe um comentário para iniciar a discussão.