Formulário incorporado a um aplicativo: gif/video em branco aparece ao preencher uma pergunta.

Olá meus amigos,

Seguinte, meu formulário https://form.jotform.com/203354926566664 foi elaborado há mais de um ano, antes da reformulação do widget de upload de arquivos.

Esse widget antigo dá um bug quando o formulário é incorporado no meu aplicativo, apresentando uma tela branca, só saindo quando damos vários cliques na tela.
Para resolver isso, eu uso o código fonte inteiro do formulário, ao invés da URL em modo embed.
Entretanto, toda vez que eu preciso fazer qualquer alteração no formulário, eu preciso copiar novamente o código fonte e incorporar no app, apagando o que lá está.

Agora há pouco eu fui tentar inserir o novo widget de upload de arquivos, para poder ver se eu não precise mais ficar usando o código fonte, mas ele só entra no modelo antigo, e não no novo.

Eu gostaria de ajuda nesse sentido, por favor.

Grato,
Carlos.

Boa noite, Carlos.

Notei que o link do formulário que você compartilhou com a gente está quebrado. Você poderia nos enviar o link novamente? Ou você já conseguiu resolver este problema e excluiu o formulário?

Esperamos sua resposta 😀✨

Consegui rastrear o formulário agora. Vou dar uma verificada e volto com uma resposta o mais rápido possível.

Parece que você realmente excluiu o formulário. Entretanto, estou observando este que deve ser o principal:https://www.jotform.com/200414710882650.

Você poderia compartilhar o link do seu site/aplicativo? Gostaríamos de pedir sua permissão para testar o seu formulário lá. Para resolver o problema de incorporar todo o código fonte após fazer alterações no seu formulário, te indico incorporar usando o código IFRAME.

Guia Completo 👉 como-obter-o-codigo-iframe-do-formulario

Agora há pouco eu fui tentar inserir o novo widget de upload de arquivos, para poder ver se eu não precise mais ficar usando o código fonte, mas ele só entra no modelo antigo, e não no novo.

Para isso, você terá que atualizar o tema do seu formulário para o novo modelo onde o novo widget de upload de arquivos é suportado. Selecione a opção no topo direito do seu formulário. Note que você terá que fazer algumas alterações no design do seu formulário, sugiro testar com um clone.

Assim, Carlos, te sugiro criar um clone do seu formulário, alterar para o novo Tema Padrão, alterar o design de acordo com suas preferências, e finalmente, incorporar o seu formulário usando o código IFRAME.

Se após esses passos, você ainda tem problemas com o widget, por favor, não hesite em nos contatar.

Atenciosamente,

Opa, desculpa aí Gustavo, eu criei um clone do formulário, depois deletei ele e te enviei aqui a URL desse mesmo formulário deletado... rsrs.. mal aí.

Mas atualizei o layout para a versão mais atual, incorporei o formulário no meu app e o problema da tela branca continua, não resolveu.

Aqui o link do app para plataforma iOS, só ocorre o problema para iOS:
https://apps.apple.com/us/app/roberto-molnar/id1505120213

Sobre incorporar o formulário usando o código iFrame eu já tentei e dá o mesmo problema... só resolve mesmo usando o código inteiro.

Bom dia, Carlos. Não tem problema, tudo bem :)

Muito obrigado pelas informações adicionais.

Testei o seu aplicativo aqui, e pude reproduzir um erro similar. Não tive problemas com o widget upload de arquivos. O erro comigo acontece na primeira pergunta do seu formulário. Em qualquer escolha que eu faço nessa primeira pergunta, um vídeo em tela branca aparece no formulário. Se eu fecho esse vídeo, posso seguir tranquilamente o preenchimento do formulário.

Depois de escolher uma dessas opções aparece esse gif.

Depois de fechar posso seguir com o formulário tranquilo.

Sinceramente, não tenho nenhuma segurança do que está acontecendo. Quando você testa seu formulário, essa tela branca só aparece ao fazer o upload de um arquivo, ou aparece em outros lugares? Você pode me passar o link do formulário que está atualmente no seu aplicativo? Quero testar colocando o formulário em um website e ver se tem o mesmo comportamento.

No meio tempo, te sugeriria tentar as opções de incorporar seu formulário.

Espero sua resposta. Muito obrigado por seguir conosco fazendo cuidadosamente os testes necessários para encontrar uma solução.

Não, a tela branca já aparece na primeira ação que executamos nele, exatamente como ocorreu com você. Para fazer o upload de um arquivo vai normal.

Aqui o link dele: https://form.jotform.com/203362404875657

E sim, eu estava usando ele incorporado com o código fonte inteiro, que é a única forma que encontrei de não dar esse bug. O que me fez animar dessa vez foi ver que o widget de upload de arquivos foi remodelado, me dando uma esperança de acerto desse problema... mas, engano meu.

Só para reforçar, isso aí foi objeto de reclamação minha lá atrás, há mais de um ano, quando então a única solução que me deram foi essa, a de tentar usar o código. Ou seja, é algo que ninguém quis mexer muito, ficando mais fácil a gambiarra.

Olá, Carlos.

Você está se referindo a esse chamado? Se sim, parece que não entendemos bem sua dúvida nessa época. Nos desculpamos por isso. Vamos fazer alguns testes aqui e tentar encontrar a fonte do problema, se for algo que sae do meu escopo, ou dos meus colegas, pedimos ajuda aos programadores.

Testei o seu formulário usando o meu celular, e esse gif em tela branca não apareceu para mim. Baixei o código fonte e acessando o arquivo HTML, também não tive nenhum problema. Parece que é realmente algo específico do aplicativo, você fez o teste em um ANDROID e não teve problemas, certo?

Testei seu aplicativo de novo, e me parece que o problema é no script que faz o campo ser requerido. Quando tento clicar em Próximo sem responder a primeira pergunta, o fundo do campo fica branco e o gif em branco aparece. Você poderia testar se o mesmo acontece contigo? Abre o formulário no seu aplicativo e clica em próximo sem responder a primeira pergunta.

Se você pode reproduzir o mesmo, você poderia testar deixando todos os campos do seu formulário como não requerido e incorporar o novo código fonte? Por favor, me dê detalhes do que acontece quando você tenta preencher o formulário. Me manda uma mensagem aqui, gostaria de testar o seu aplicativo quando nenhum campo é requerido.

Espero sua resposta.

Atenciosamente,

Oi Gustavo,

..olha só rapaz, na época eu expliquei muito bem explicado e inclusive com vídeos demonstrativos... foi falta de atitude e interesse da equipe aí, não tem outra explicação.

Mas eu renovo minhas esperanças com a sua disposição em me ajudar.

Vamos às suas solicitações:
- Sim, o problema só ocorre com aparelhos iOS;
- Sim, ocorre o mesmo comigo quando clico em próximo, sem executar nenhuma ação na primeira pergunta;
- E sim, criei outro botão e neste agora estou usando o código-fonte. Quando testo neste o quadro branco não aparece.

Se quiser você mesmo pode verificar aí no app esse novo botão, que está com o nome "página de código".
Portanto, temos no app agora um botão com a URL do formulário e outro com o código-fonte.

Aguardo suas próximas orientações.

Só reforçando o seguinte, o problema só ocorre quando o widget de upload está presente, ok ? O problema é com ele.

Olá, Carlos.

Muito, muito obrigado por retornar com uma resposta bem detalhada e seguir minha sugestão de colocar um novo código fonte no seu aplicativo, tenho certeza que assim vamos encontrar uma solução.

Fui preencher o formulário que está sem campos requeridos em Página de Código e não tive mesmo problema. Essa é a gravação quando tentei ver se a tela em branco aparecia depois de selecionar alguma opção.

Essa é a gravação quando tentei apenas pular para o próxima página, o gif em branco também não apareceu.

Ou seja, testamos desabilitar campos requeridos e o erro não se repetiu com você e nem comigo. Você está seguro que o erro é em relação ao widget upload de arquivos? Sempre que usei o formulário no aplicativo, nenhuma vez esse campo me retornou erro. Me parece que é em relação ao script, deve ter algum conflito aí.

Seria muito amável da sua parte se você pudesse fazer mais um teste. Por favor, clone o seu formulário, coloque alguns campos como requerido e incorpore no seu applicativo apenas usando o cógido que está na tag de IFRAME(<iframe> ... </iframe>). Sei que você já tentou antes com IFRAME, mas tenho a esperança de que tirando os scripts esse erro deixe de acontecer.

Espero sua resposta. Muito obrigado, novamente :)

Oi Gustavo, bom eu já comentei que com o código-fonte tudo funciona normal. Eu só adicionei no app para que você pudesse fazer testes comparativos de forma mais fácil, mas não faz sentido você me informar que testando o formulário pela opção com o código o problema não surge, isso já é fato e concreto, desde a minha primeira mensagem aqui, no dia 01/02, com a frase copiada de lá: "Para resolver isso, eu uso o código fonte inteiro do formulário, ao invés da URL em modo embed."

Sobre essa sua pergunta: "Você está seguro que o erro é em relação ao widget upload de arquivos?", eu agora clonei o formulário e removi o widget pra você comprovar por você mesmo.

No outro botão, o que está com o código, eu removi este e inseri o iFrame do formulário original, não o clonado.

Portanto, resumindo:

• botão "Projetos e orçamentos": está com a URL do formulário sem o widget de upload de arquivos;
• botão "Página de código": está com o código iFrame do formulário original.

Aguardo seu retorno,

Carlos.

Olá, Carlos.

Por favor, me permite um tempo para rodar os testes e pensar em outras possíveis soluções. Volto mais tarde com uma resposta mais completa para você.

Muito obrigado por seguir realizando os testes e retornando aqui.

Bom dia, Carlos. Desculpa-me pela longa espera.

• botão "Página de código": está com o código iFrame do formulário original.

Sim, havia entendido que você já tinha testado com o código IFRAME, o teste que pedi que você fizesse era, colocar alguns campos como requerido e incorporar o formulário no seu aplicativo usando apenas a tag <iframe> sem o código <script>, posso ver que na página "Página de código" não tem campos requeridos, você utilizou apenas a tag <iframe> para incorporar o formulário? Se sim, te peço agora que coloque algum campo como requerido.

• botão "Projetos e orçamentos": está com a URL do formulário sem o widget de upload de arquivos;

Muito obrigado por gerar esse teste, agora só falta uma coisa, coloca campos como requerido e vamos comprovar se o erro está ou não no widget upload de arquivos. Por que, sem campos requeridos e com o widget também não tivemos problema como testei aqui e você também comprovou.

Por favor, peço encarecidamente que você coloque campos requeridos nas suas páginas. Creio que esse seria o último teste antes de passar para os nossos programadores. Temos que testar diferentes cenários para tentar localizar com mais precisão possível o local do erro.

Muito obrigado pela sua colaboração. Infelizmente não tenho um app, se não, simplesmente faria vários teste com diferentes códigos tentando eliminar o erro e retornaria a ti com a solução. No entanto, vou perguntar se alguém da equipe de suporte tem um aplicativo de teste para tentar incorporar um clone do seu formulário sem erros.

Espero sua resposta. Tenha um ótimo dia :)

Oi Gustavo, tudo bem ?

"você utilizou apenas a tag <iframe> para incorporar o formulário ?"

Não sei o que chama de tag iframe, o que fiz foi copiar todo o conteúdo do iframe e colar lá.

"Por que, sem campos requeridos e com o widget também não tivemos problema como testei aqui e você também comprovou."

Não, essa sua afirmação não está correta, eu tenho o problema do quadro branco com ou sem campos requeridos, basta estar presente o widget de upload.

Acabei de colocar o primeiro campo como requerido em ambos os botões, no que recebe a URL e no que recebe o iframe.

Novamente, no da URL não ocorre o problema, lembrando que ele tá sem o widget de upload.

Sobre vc não tem um app para fazer os testes eu posso preparar um aqui só para isso, se for o caso... faço isso em 10 minutos.

Obrigado pelo retorno, Carlos.

Não sei o que chama de tag iframe, o que fiz foi copiar todo o conteúdo do iframe e colar lá.

Não sei se você não recebeu a imagem que te enviei, mas o cógido IFRAME abaixo é o que preciso que você incorpore no aplicativo.

Não, essa sua afirmação não está correta, eu tenho o problema do quadro branco com ou sem campos requeridos, basta estar presente o widget de upload.

Estou confudido, te pedi para fazer esse teste:
Se você pode reproduzir o mesmo, você poderia testar deixando todos os campos do seu formulário como não requerido e incorporar o novo código fonte? Por favor, me dê detalhes do que acontece quando você tenta preencher o formulário. Me manda uma mensagem aqui, gostaria de testar o seu aplicativo quando nenhum campo é requerido.

E está foi sua resposta:
- E sim, criei outro botão e neste agora estou usando o código-fonte. Quando testo neste o quadro branco não aparece.

Eu também fiz esse teste com o widget upload de arquivos e sem campos requeridos e não tive erros, comparto de novo contigo a gravação, veja o gif inteiro, por favor.

Agora vi seu aplicativo novamente, e com campos requeridos e sem o widget upload de arquivos, também não acontece erros. Quando tiramos os campos requeridos e mantivémos o upload de arquivos, não tive erros. E agora, sem o upload de arquivos e com campos requeridos, também não houve problemas. Assim, creio que podemos concluir com os teste que fizemos que não é algo específico com campos requeridos ou o widget upload de arquivos.

A última coisa que te pediria é que tenha um formulário com campos requeridos e o widget upload de arquivos, assim como começamos, e incorpore o aplicativo usando usando só o iframe sem o script, como mostrado abaixo.

Por favor, poste aqui o código que você usou.

Estou perguntando aos meus colegas se eles tem um app para testar isso também.

Ok, fiz como você pediu, usei só a tag do iframe com campos requeridos e o widget em questão.

Ocorreu que o formulário não correu para cima, mostrando apenas a primeira opção da primeira pergunta, a opção do "Home theater". Mesmo assim consegui clicar nele e apareceu o quadro branco.

Ou seja, confirmando tudo o que eu já te descrevi, o formulário só funciona normal se usado o código-fonte inteiro.

Eu posso preparar um app aqui só pra vc fazer seus testes e então eu te dou acesso à ele como moderador, de forma que vc possa mexer nele como quiser e testar no seu aparelho usando o arquivo APK.

Olá, Carlos.

Confirmei o mesmo erro aqui. Muito obrigado por todos os testes e paciência. Se você me permite, gostaria de saber o que você usa para criar seus aplicativos, é um construtor de aplicativos?

Eu posso preparar um app aqui só pra vc fazer seus testes e então eu te dou acesso à ele como moderador, de forma que vc possa mexer nele como quiser e testar no seu aparelho usando o arquivo APK.

Isso seria genial, espero sua resposta em relação a isso.

Atenciosamente,

 Se você me permite, gostaria de saber o que você usa para criar seus aplicativos, é um construtor de aplicativos?

É sim, eu faço na plataforma de nome Appy Pie... www.appypie.com

E sim, vamos proceder com o plano do app de testes pra você. Me passa um endereço de email pra eu te dar acesso aqui.

No aguardo.

Bom dia, Carlos.

Muito obrigado pela informação.

Meu endereço de email é gustavo@jotform.com. Vou fazer alguns testes lá, se não puder resolver, já temos todas as informações necessárias para levar esse problema aos nossos programadores.

Atenciosamente,

Bom, achei que não precisa eu criar um app só para isso, eu te dei acesso ao próprio app em que estou usando esses formulários, o Roberto Molnar.

Você acessa o painel de edição desse app por esse link: https://www.fazzapp.com/user/app/23fb129de317, entrando com seu email e a senha que foi enviada para ele.

Qualquer problema você me informa.

Dessa forma você pode mexer nos dois botões à vontade, mudando a URL do "Projetos e orçamentos" ou mudando o código do "Página de código".

Muito obrigado, Carlos.

Te peço esse dia para que eu possa fazer esses testes e amanhã retorno com uma resposta e como vamos proseguir. Se está tudo bem para ti, não precisa responder o chamado aqui, eu mesmo retornarei a ti na segunda-feira com mais detalhes das minhas tentativas. Recebi os emails de autorização e acesso. Muito obrigado por pela sua compreensão, empenho e amabilidade ao comunicar o problema que você está tendo. Assim que possível, retorno aqui.

Tenha um excelente domingo 😀✨

Bom dia, Carlos.

Fiz vários testes aqui e encontrei algumas formas de incorporar seu formulário no seu aplicativo sem aparecer esse gif em branco que tanto incomoda. Por favor, abra seu aplicativo e teste os botões: Projetos e Orçamentos, JOTFORM PARTIAL IFRAME, JOTFORM SCRIPT, JOTFORM SITE LINK, JOTFORM SOURCE CODE, JOTFORM TOTAL IFRAME.

Utilizei todas essas páginas para incorporar um clone do seu formulário com campos requeridos e campo de upload de arquivo. No meu teste em IOS, os botões JOTFORM SCRIPT e JOTFORM SOURCE CODE(foi melhor) não tiveram nenhuma problema. Você pode testar todos botões e enviar ao final. Esse formulário está em minha conta, assim que, não há problema de usar limites de envio. Faça os testes e me dê sua opinião. Me parece que encontramos uma forma de resolver o problema.

Espero sua resposta.

Tenha um excelente começo de semana 😀✨

Opa, que bom que conseguiu acessar e fazer todas as experiências que precisou fazer, inclusive criando novos botões pra facilitar.

Mas então, eu só testei os que você informou não ter tido nenhum problema e, realmente, nos meus testes aqui não vi aparecer a famigerada tela branca.

Só notei que na opção JOTFORM SOURCE CODE ele deixa transparecer alguns comandos da plataforma, conforme mostra a imagem abaixo, mostrado pela seta, o que não ocorre com JOTFORM SCRIPT. Acredito que o Jotform Script está perfeito.

Obrigado pelo seu esforço, Gustavo !
Aguardo as novas orientações,
Carlos.

Olá, Carlos.

Bom ver que estamos perto da solução. No caso dessas opções em laranja no topo, isso deve ter acontecido porquê eu tenha essas permissões, quando você adicionar o código do seu formulário, provavelmente isso não ira acontecer. E como o JOTFORM SCRIPT funcionou bem, essa deve ser a melhor forma de incorporar o formulário no seu aplicativo, já que, ele irá automaticamente acompanhar as mudanças feitas no seu formulário. Assim, acompanha abaixo com bastante atenção o código que você deve colocar no seu aplicativo.

Tente fazer isso aí, se algum erro apresentar, me passa aqui o link do formulário que você quer incorporar no seu aplicativo agora. Mas, estou seguro que com esse código tudo deve estar certo agora.

Como sua última pergunta não é mais em relação a esse problema, vou move-la para outro chamado aqui:2750257, para evitar confusão entre os tópicos.

Obrigado a ti ela paciência e empenho também para encontrar uma solução. Espero sua confirmação aqui para ver se tudo está ok.

Atenciosamente,

Olá Gustavo, como vai ?

Fiz os testes com a opção do script e realmente está funcionando bem, inclusive quando faço alterações no formulário reflete no app. Está no jeito agora. Eu não sei porque na época em que tentei essa opção não funcionou, mas tenho 100% de certeza que tentei todas.

Mas enfim, estamos resolvidos nisso agora, te agradeço muito a disposição em ajudar, não é todo dia que vemos isso nas assistências técnicas de plataformas.

Valeu mesmo !

Bom dia, Carlos.

Fico feliz demais por termos juntos e com paciência chegado a uma solução. É isso que torna meu trabalho divertido e gratificante para mim. Fazer o máximo que podemos para ajudar as pessoas indiferentemente do ela precisa. Agradeço a você pela disposição, esforço e amabilidade durante todo o processo.

Se você precisar de algo mais, saiba que estamos a disposição.

Tudo de bom para ti hoje e sempre. Abraços!