Skip to main content

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 ?

Olha, 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. 


@Thiago-youcon  ainda enfrentando o mesmo problema??


Estou sim


Oi @Thiago-youcon quando você usa a opção de incorporar do formulário, o Pipefy gera um código com iframe padrão (iframe width="560" height="580").

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!

 

 

 


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 ?


@Thiago-youcon sim, neste caso, você teria que criar o código de incorporação manualmente, inserindo os parâmetros para que ele fique responsivo.

 

Não consigo te ajudar com essa pare mais avançada de HTML.


Certo, entrei em contato com a Ajuda do pipefy, vamos ver se conseguem criar para mim. Muito obrigado Lucas.


Olá, @Thiago-youcon

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;
}

 


@weberson.loureiro muito obrigado, enviei pro desenvolvedor do site. Dou um feedback se solucionarmos kkk


Reply