Resumo de IA
Você quer permitir que os usuários enviem arquivos em seu site? O recurso de Upload de Arquivo no WPForms permite que você colete facilmente arquivos e mídias através de seus formulários online.
Este guia mostrará como usar o campo de Upload de Arquivo no WPForms.
- Criando um Formulário de Upload de Arquivo
- Permitindo Tipos de Arquivo para Upload
- Definindo o Tamanho Máximo de Arquivo para Uploads
- Escolhendo Entre os Estilos "Moderno" vs. "Clássico"
- Enviando Múltiplos Arquivos
- Incluindo Links de Upload de Arquivo em Notificações
- Anexando Arquivos a E-mails de Notificação do Formulário
- Armazenando Arquivos Enviados
- Restringindo o Acesso a Arquivos
- Habilitando Captura por Câmera
- Comprimindo Arquivos Enviados
- Perguntas Frequentes
Antes de começar, você precisará garantir que o WPForms esteja instalado e ativado em seu site WordPress. Assim que você verificar sua licença, crie um novo formulário ou edite um existente.
Criando um Formulário de Upload de Arquivo
Após abrir o construtor de formulários, adicione um campo de Upload de Arquivo ao seu formulário. Você pode adicionar campos ao seu formulário clicando no nome do campo no lado esquerdo do construtor de formulários, ou arrastando e soltando o campo para o local desejado na área de visualização.
Permitindo Tipos de Arquivo para Upload
Segurança é uma grande prioridade para nós no WPForms. Por padrão, permitimos apenas uploads de tipos de arquivo seguros (os mesmos permitidos pelo core do WordPress). São eles:
- Imagens como .png, .gif, .jpg
- Documentos como .doc, .xls, .ppt, .pdf
- Áudio como .wav, .mp3, .mp4
- Vídeo como .mpg, .mov, .wmv
Adicionando Tipos de Arquivo Permitidos
Se você quiser que seus formulários suportem tipos de arquivo adicionais, confira nosso tutorial sobre como permitir que os usuários enviem tipos de arquivo adicionais.
Restringindo Tipos de Arquivo
Para restringir quais extensões de arquivo você deseja permitir para um formulário específico, clique no campo Upload de Arquivo no construtor de formulários. Em seguida, no painel Opções do Campo, você pode especificar as extensões que deseja permitir (separadas por vírgulas) no campo Extensões de Arquivo Permitidas.
Isso impedirá que arquivos com quaisquer outras extensões sejam enviados para seus formulários.
Definindo o Tamanho Máximo de Arquivo para Uploads
Por padrão, o tamanho máximo de arquivo para seus formulários será limitado ao limite definido pelo seu servidor. Para descobrir o máximo definido pelo servidor para seus formulários, clique no campo Upload de Arquivo no construtor de formulários.
Em seguida, ao lado da configura ilde{A}§ ilde{A}£o Tamanho M ilde{A}¡ximo do Arquivo, passe o mouse sobre o ilde{A}cone de ponto de interroga ilde{A}§ ilde{A}£o (?) para revelar o tamanho m ilde{A}¡ximo de arquivo que seu servidor pode manipular.
Se voc ilde{A}ª quiser limitar ainda mais o tamanho m ilde{A}¡ximo do arquivo para seus formul ilde{A}¡rios, voc ilde{A}ª pode fazer isso especificando um n ilde{A}ºmero no campo Tamanho M ilde{A}¡ximo do Arquivo.
Observa ilde{A}§ ilde{A}£o: Se voc ilde{A}ª quiser aumentar o tamanho m ilde{A}¡ximo de upload para seu site, voc ilde{A}ª precisar ilde{A}¡ entrar em contato com seu provedor de hospedagem para descobrir se ilde{A}© poss ilde{A}vel. Para mais detalhes, voc ilde{A}ª pode conferir o tutorial do WPBeginner sobre como aumentar o tamanho m ilde{A}¡ximo de upload de arquivos no WordPress.
Escolhendo Entre os Estilos ilde{A}"Moderno ilde{A}" vs. ilde{A}"Cl ilde{A}¡ssico ilde{A}"
O campo de Upload de Arquivo inclui duas op ilde{A}§ ilde{A}µes de estilo das quais voc ilde{A}ª pode escolher: Cl ilde{A}¡ssico e Moderno.
Para visualizar essas op ilde{A}§ ilde{A}µes, voc ilde{A}ª precisar ilde{A}¡ abrir o construtor de formul ilde{A}¡rios e clicar no campo Upload de Arquivo na ilde{A}¡rea de pr ilde{A}©-visualiza ilde{A}§ ilde{A}£o para ver as op ilde{A}§ ilde{A}µes do campo. Em seguida, clique na aba Avan ilde{A}§ado para mostrar configura ilde{A}§ ilde{A}µes adicionais.
As op ilde{A}§ ilde{A}µes avan ilde{A}§adas incluem um menu suspenso Estilo, onde voc ilde{A}ª pode escolher entre Moderno e Cl ilde{A}¡ssico.
Estilo Moderno
O estilo Moderno do campo de Upload de Arquivo exibe uma caixa de arrastar e soltar. Quando um visitante usa seu formul ilde{A}¡rio, ele pode clicar neste campo para selecionar arquivos de seu dispositivo ou pode arrastar arquivos para dentro da caixa a partir de sua ilde{A}¡rea de trabalho.
Este estilo tamb ilde{A}©m permite que os usu ilde{A}¡rios fa ilde{A}§am upload de v ilde{A}¡rios arquivos em um ilde{A}"nico campo de Upload de Arquivo.
O estilo Moderno usa upload AJAX para processar uploads de arquivos. Isso ilde{A}© ilde{A}"til porque o upload de arquivos, especialmente arquivos grandes, pode exigir muitos recursos do servidor de hospedagem do seu site e, eventualmente, resultar em um atraso ap ilde{A}"s o envio do seu formul ilde{A}¡rio.
No entanto, o upload AJAX d ilde{A}¡ um pontap ilde{A}" inicial no processo de upload para permitir que seus formul ilde{A}¡rios sejam enviados mais rapidamente.
Estilo Cl ilde{A}¡ssico
O estilo Cl ilde{A}¡ssico do campo de Upload de Arquivo exibir ilde{A}¡ um bot ilde{A}£o Escolher Arquivo. Semelhante ao estilo Moderno, os usu ilde{A}¡rios podem arrastar arquivos para este bot ilde{A}£o ou clicar no bot ilde{A}£o para selecionar arquivos de seus dispositivos.
No entanto, o estilo Cl ilde{A}¡ssico n ilde{A}£o suporta o upload de v ilde{A}¡rios arquivos em um ilde{A}"nico campo de Upload de Arquivo.
Observa ilde{A}§ ilde{A}£o: Quer personalizar a apar ilde{A}ancia do seu bot ilde{A}£o de Upload de Arquivo para melhor corresponder ilde{A} marca da sua empresa? Confira nossa documenta ilde{A}§ ilde{A}£o para desenvolvedores para obter instru ilde{A}§ ilde{A}µes passo a passo sobre como modificar a estiliza ilde{A}§ ilde{A}£o do bot ilde{A}£o para campos de upload Modernos e Cl ilde{A}¡ssicos.
Enviando Múltiplos Arquivos
Para permitir que seus usu ilde{A}¡rios fa ilde{A}§am upload de v ilde{A}¡rios arquivos de uma vez, voc ilde{A}ª precisar ilde{A}¡ verificar se o seu campo de Upload de Arquivo est ilde{A}¡ configurado para permitir isso. Para fazer isso, clique no campo Upload de Arquivo para abrir as op ilde{A}§ ilde{A}µes do campo.
Em seguida, na aba Avan ilde{A}§ado, defina o menu suspenso Estilo como Moderno se ainda n ilde{A}£o estiver.
Este estilo ilde{A}© necess ilde{A}¡rio antes que voc ilde{A}ª possa permitir que os usu ilde{A}¡rios fa ilde{A}§am upload de mais de um arquivo para este campo.
Retorne para a aba Geral das Opções de Campo e procure pela configuração Número Máximo de Arquivos. Por padrão, este valor será 1, mas você pode aumentá-lo conforme necessário.
Observação: Se você não tem certeza se o ambiente de hospedagem do seu site pode lidar adequadamente com o número de arquivos que você deseja enviar, certifique-se de fazer alguns testes antes de lançar seu formulário. Você também pode considerar entrar em contato com o provedor de hospedagem do seu site para obter conselhos sobre uploads.
Incluindo Links de Upload de Arquivo em Notificações
Você pode usar as Tags Inteligentes {all_fields} ou {field_id} para incluir arquivos enviados em seus e-mails de notificação.
Se você fizer isso, suas notificações por e-mail conterão links para os arquivos enviados.
Dessa forma, você pode visualizar ou baixar o arquivo rapidamente sem precisar fazer login no seu painel do WordPress.
Observação: Precisa de ajuda para configurar suas notificações por e-mail? Veja nosso tutorial sobre configuração das suas notificações para mais orientações.
Anexando Arquivos a E-mails de Notificação do Formulário
O WPForms permite que você receba os arquivos enviados através do seu formulário online como anexos. Esses anexos fornecem uma camada adicional de backup para seus arquivos. Isso significa que, mesmo que os arquivos sejam posteriormente excluídos do WordPress, você ainda poderá acessá-los em seu e-mail.
Para habilitar isso, você precisará ir para a seção Avançado das configurações de notificação do formulário e ativar a opção Habilitar Anexos de Upload de Arquivo.
Observação: Este recurso está desativado por padrão. Você precisará habilitá-lo manualmente para começar a receber anexos de arquivos em seus e-mails de notificação.
Para saber mais sobre este recurso, consulte nosso guia sobre anexos de upload de arquivos.
Armazenando Arquivos Enviados
Por padrão, os arquivos enviados pelo usuário são armazenados no diretório Uploads do seu site, dentro da pasta WPForms.
No entanto, se você preferir enviar seus arquivos para a Biblioteca de Mídia do WordPress, navegue até a aba Avançado no painel Opções de Campo e ative a opção Armazenar arquivo na Biblioteca de Mídia do WordPress.
Não importa onde você armazene seus arquivos, você sempre poderá acessá-los nas Entradas do seu formulário clicando no link do arquivo dentro de uma entrada individual.
Observação: Excluir uma entrada de formulário também remove quaisquer arquivos que foram enviados nessa entrada. É sempre uma boa ideia salvar arquivos essenciais em um local separado.
Se desejar, você também pode excluir um arquivo enviado de uma entrada específica editando a entrada. Basta clicar no ícone da lixeira vermelha ao lado do link do arquivo.
Observação: Se você configurou seu campo de Upload de Arquivo para armazenar uploads na Biblioteca de Mídia, você terá que excluir o arquivo da Biblioteca de Mídia.
Após excluir os arquivos que deseja remover da entrada, certifique-se de clicar no botão Atualizar para salvar suas alterações.
Restringindo o Acesso a Arquivos
O campo Upload de Arquivo permite controlar quem pode acessar os arquivos enviados, restringindo o acesso a usuários específicos do WordPress ou adicionando proteção por senha. Para fazer isso, clique no campo Upload de Arquivo para abrir as opções do campo.
Em seguida, na aba Avançado, ative o botão de alternância Ativar Restrições de Acesso a Arquivos.
Uma vez ativado, você pode escolher entre restrições baseadas em usuário ou proteção por senha. Para detalhes completos sobre a configuração dessas opções, confira nosso guia sobre como restringir o acesso a arquivos enviados.
Habilitando Captura por Câmera
Além de enviar arquivos do dispositivo, você também pode permitir que os usuários capturem fotos ou vídeos diretamente no campo Upload de Arquivo.
Para ativar essa opção, abra a aba Avançado no painel Opções do Campo e ative a configuração Ativar Câmera.
Uma vez ativado, você poderá definir o Formato (Foto ou Vídeo) e ajustar o Limite de Tempo se escolher Vídeo.
No frontend, os usuários verão um texto atualizado no campo de upload que diz: "Arraste e solte o arquivo, escolha o arquivo para enviar ou capture com a câmera." Eles podem enviar um arquivo como de costume, ou clicar no link da câmera para tirar uma nova foto ou gravar um vídeo.
Para detalhes completos sobre o uso da opção de câmera, confira nosso guia sobre usando o campo Câmera.
Comprimindo Arquivos Enviados
O WPForms não comprimirá nenhum arquivo enviado para o seu site. No entanto, se você optar por armazenar seus arquivos na Biblioteca de Mídia do WordPress, o WordPress comprimirá automaticamente suas imagens.
Observação: Se você deseja otimizar suas imagens antes de enviá-las para o seu site, confira o tutorial do WPBeginner sobre como otimizar facilmente imagens para melhorar o desempenho do seu site.
Perguntas Frequentes
Estas são algumas das perguntas mais comuns que surgem em relação ao campo Upload de Arquivo.
Eu gostaria de permitir que os usuários enviassem arquivos grandes no meu formulário, mas não está funcionando. Quais são minhas opções?
Ao usar o estilo Moderno para uploads de arquivos, o WPForms envia automaticamente os arquivos em "pedaços". Isso melhora a eficiência do upload e permite que você evite algumas limitações definidas pelo seu servidor (incluindo timeouts do servidor).
Isso ajudará na maioria dos problemas de upload de arquivos grandes em um formulário, mas é importante notar que o tamanho máximo de um arquivo ainda será limitado pelo seu servidor através de uma configuração chamada MAX_FILE_UPLOAD. Isso significa que se o seu servidor tiver um limite de tamanho de arquivo de 10 MB, você não poderá enviar um arquivo maior que isso.
Se você quiser ajustar os limites de tamanho de upload de arquivos do seu servidor, entre em contato com seu provedor de hospedagem. Para saber mais, veja o tutorial do WPBeginner sobre aumentar o tamanho máximo de upload de arquivos no WordPress.
Usuários do Cloudflare devem observar que os limites de upload são determinados pelo tipo de plano. Os limites atuais são os seguintes:
- Grátis e Pro: 100 MB
- Business: 200 MB
- Enterprise: 500 MB (entre em contato com o suporte para personalização)
Para mais informações, consulte os limites de tamanho de upload da Cloudflare.
Não estou enviando um arquivo grande, mas o processo de upload de arquivos trava e nunca termina. Por que isso pode acontecer?
Configurações incorretas na conexão SSL do seu site podem impedir o upload adequado de arquivos.
Por exemplo, você pode ter esse problema se o seu site carregar em uma conexão insegura (HTTP), mas os ativos do site, como arquivos enviados, carregarem em uma conexão segura (HTTPS) (ou vice-versa). Isso causará um erro de conteúdo misto e impedirá o upload de arquivos em seus formulários.
O host do seu site pode atualizar facilmente suas configurações de SSL, portanto, certifique-se de entrar em contato com eles se encontrar esse erro. Você também pode consultar o guia do WPBeginner para solucionar problemas de SSL no WordPress.
Por que os arquivos enviados aparecem como links em vez de anexos nos e-mails de notificação?
Anexos de upload de arquivos está desativado no seu formulário. Você precisará ativá-lo na opção Avançado das configurações de notificação do formulário. Para saber mais, confira nosso guia sobre como ativar anexos de upload de arquivos.
Anexar arquivos a notificações por e-mail é desativado por padrão, pois pode prejudicar a entregabilidade do e-mail. Por exemplo, se um provedor de serviços de e-mail permitir apenas um tamanho máximo de arquivo de 10 MB, mas um usuário enviar um arquivo maior que 10 MB, o e-mail não será entregue.
Por que meus uploads de arquivos não funcionam nos navegadores móveis do Facebook e Instagram em dispositivos Android?
Alguns navegadores dentro de aplicativos atualmente não suportam uploads de arquivos. Os exemplos mais notáveis disso são os navegadores do Facebook e Instagram.
A boa notícia é que criamos um plugin que corrigirá esse problema para nossos usuários. Você pode baixar o plugin Escape Facebook/Instagram In-App Browsers clicando no botão abaixo:
Baixar o Plugin Escape Facebook/Instagram In-App Browsers
Depois de baixar o plugin, você só precisará instalá-lo e ativá-lo em seu site.
Meu formulário não envia e tem um campo de Upload de Arquivo. O que pode estar errado?
Se o seu formulário parar de enviar ou travar após a adição de um campo de Upload de Arquivo, o problema geralmente está relacionado a limites de tamanho de arquivo, configurações incorretas de SSL ou um conflito de JavaScript. Tente enviar o formulário sem anexar um arquivo — se ele for enviado, o campo de Upload de Arquivo é a causa. A partir daí, verifique os limites máximos de tamanho de arquivo definidos pelo seu servidor, revise as dicas de solução de problemas de SSL na FAQ acima e teste conflitos de plugins.
Uploads de arquivos não estão funcionando no Safari. Como posso corrigir isso?
O Safari pode, às vezes, apresentar problemas com o estilo de upload Moderno (arrastar e soltar), especialmente com imagens HEIC ou quando as configurações de privacidade bloqueiam solicitações entre domínios necessárias para uploads AJAX. Se os usuários relatarem problemas ao enviar arquivos no Safari, tente mudar o campo de Upload de Arquivo para o estilo Clássico na aba Avançado para ver se isso resolve o problema. Se o problema persistir, teste conflitos de plugins — o Safari é mais sensível a conflitos de JavaScript do que outros navegadores.
É isso! Agora você sabe como usar o campo de Upload de Arquivo no WPForms.
Em seguida, quer aprender a enviar diferentes e-mails de notificação com base em como os usuários preenchem seu formulário? Confira como criar notificações condicionais de formulário no WPForms para um tutorial completo.