Inseri um formulário público em meu website, mas ele não fica responsivo para quem acessa na versão Mobile. Alguém sabe como corrigir isto ?
Solved
FORMULÁRIO PÚBLICO - COMO CONSEGUIR DEIXAR RESPONSIVO EM WEBSITE
Best answer by Anonymous
Olá,
Vou enviar uma posivel solução. Poderia testá-la, por gentileza?
1 - Criar uma div ao redor do ifram, como no exemplo abaixo:
<div class="mydiv-container">
<!-- código do iframe -->
</div>2 - Se o iframe tiver qualquer especificação de largura (width) ou altura (height), remova-as
3 - Adicione esse código CSS.
(Atenção, algumas propriedades do código CSS abaixo como border, margin e padding, podem mudar dependendo da sua necessidade)
/* responsive iframe */
.mydiv-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
margin-bottom: 3%;
}
.mydiv-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #ccc;
}
+6Olha, eu já usei o formulário pelo celular e funcionou normalmente. Aconselho conservar com o pessoal do chat e atendimento para que eles possam te ajudar.
Rafael Jefté
+15Oi
Para corrigir este problema, você pode utilizar o site: https://iframely.com/
Neste site, você precisa copiar o link púbico do seu formulário e colar no local indicado.
Exemplo:
Link Público do Formulário: https://app.pipefy.com/public/form/r1q1n9jj
Código para incorporação gerado pelo Pipefy (não responsivo):
<iframe width="560" height="580" src="https://app.pipefy.com/public/form/r1q1n9jj?embedded=true" frameborder="0"></iframe>Código gerado pelo Iframely (Responsivo):
<div class="iframely-embed"><div class="iframely-responsive" style="padding-bottom: 52.5%; padding-top: 120px;"><a href="https://app.pipefy.com/public/form/r1q1n9jj" data-iframely-url="//iframely.net/YKEPaQo"></a></div></div><script async src="//iframely.net/embed.js"></script>Boa sorte!
Democh
Certo, tentei aqui, mas no caso ele não fica com a visualização de formulário, e sim com um banner para acessar o formulário, e não é muito intuitivo. Não existe outra maneira de corrigir ?
+15
Não consigo te ajudar com essa pare mais avançada de HTML.
Democh
Certo, entrei em contato com a Ajuda do pipefy, vamos ver se conseguem criar para mim. Muito obrigado Lucas.
Olá,
Vou enviar uma posivel solução. Poderia testá-la, por gentileza?
1 - Criar uma div ao redor do ifram, como no exemplo abaixo:
<div class="mydiv-container">
<!-- código do iframe -->
</div>2 - Se o iframe tiver qualquer especificação de largura (width) ou altura (height), remova-as
3 - Adicione esse código CSS.
(Atenção, algumas propriedades do código CSS abaixo como border, margin e padding, podem mudar dependendo da sua necessidade)
/* responsive iframe */
.mydiv-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
margin-bottom: 3%;
}
.mydiv-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #ccc;
}
Reply
Rich Text Editor, editor1
Editor toolbars
Press ALT 0 for help
Join us in the Pipefy Community! 🚀
No account yet? Create an account
Login with your Pipefy credentials
or
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.