# Formulários - Como criar campos responsivos nos formulários

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FSSkKjpSH8jWWqiSZUjtU%2Fimage.png?alt=media&#x26;token=04dbc541-08c9-4df8-8d4e-23585ca527f0" alt=""><figcaption></figcaption></figure>

Veja como criar um botão responsivo no exemplo abaixo, usando o botão **Enviar** como referência:

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FICO8YHLaVCc1njq83jso%2F2024-03-30_10h46_561.png?alt=media&#x26;token=e45d0ad5-2dab-485f-8e7b-75ea2eb86cff" alt=""><figcaption><p>Ele se adapta ao tamanho da tela do lead.</p></figcaption></figure>

Acesse a página de Criação de Formulários e clique no botão **ENVIAR** e depois na opção **DIMENSÕES**.

Note que a unidade de medida selecionada é o Pixel, que é uma unidade estática, ou seja, que não se adapta corretamente aos diversos tamanhos de tela dos dispositivos que os usuários podem usar.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FieqRT8YcXkjqVAviFT2O%2F2024-03-30_10h44_42.png?alt=media&#x26;token=af1b9f85-c303-498e-a6d8-49dea058590c" alt=""><figcaption><p>Botão que usaremos como exemplo.</p></figcaption></figure>

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FtIiTOCSXB7zvsuvBHmzW%2F2024-03-30_10h45_09.png?alt=media&#x26;token=a2149822-4bee-4579-a150-8ac58107b8b6" alt=""><figcaption><p>O mesmo procedimento pode ser feito para outros componentes.</p></figcaption></figure>

Na seleção de medias você encontrará **outras** opções, mas a **melhor** opção para esse caso é usar a unidade de medida de **Porcentagem**, pois ela é uma unidade dinâmica que se ajusta às telas dos usuários. É **importante** manter a largura em **100%**.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2F5ivdYRd383YfbnA7D8p3%2F2024-03-30_10h46_41.png?alt=media&#x26;token=524c1af5-e22c-4f50-82a6-ec1bcfc0bed3" alt=""><figcaption></figcaption></figure>

Observe que o botão Enviar se **ajusta** as bordas do formulário!

Para verificar como o botão ficará nas diferentes telas, nós oferecemos a opção de Visualização em Formato para tablet, celular e computador. Assim você poderá ter uma ideia de como será o resultado final.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FVMLClPGFHGvapdJ6iAZo%2F2024-03-30_10h46_56.png?alt=media&#x26;token=3e922935-504d-43b8-9f54-efb9a6c62e1c" alt=""><figcaption><p>O mesmo pode ser feito para tablets e outros formatos de tela.</p></figcaption></figure>

*Agora seu botão já está pronto para se adaptar às diferentes telas.*