Django Python Estilizando formulários automáticos do Django com Bootstrap

Veja neste artigo como estilizar, de forma automática, formulários do Django com Bootstrap.

Fagner Pinheiro 17 de janeiro de 2019

No artigo passado “Criando formulários automaticamente com Django“, vimos o quão simples é a criação de formulários automáticos com o Django. Porém, os formulários gerados utilizam HTML puro, ou seja, não há nenhuma estilização para melhorar o visual da aplicação. Sendo assim, neste artigo veremos como estilizar os formulários gerados automaticamente com o Django utilizando o Bootstrap.

Instalando e configurando o crispy-forms

O primeiro passo para estilizar os formulários de uma aplicação é instalar a biblioteca crispy-forms, é ela quem irá estilizar os formulários da nossa aplicação. Para isso, vamos até a aba Project Interpreter do PyCharm, buscamos por django-crispy-forms e instalamos a biblioteca:

Após isso, vamos até o arquivo settings.py do projeto e registramos a biblioteca. Para isso, no array INSTALLED_APPS, adicionamos a seguinte linha:

INSTALLED_APPS = [
    ...
    'crispy_forms',
    'app',
]

Com isso, indicamos ao nosso projeto que faremos uso da biblioteca crispy-forms. O próximo passo é determinar qual framework utilizaremos para estilizar nossos formulários. O crispy-forms possui suporte aos seguintes:

  • bootstrap
  • bootstrap3
  • bootstrap4
  • uni-form
  • foundation

Para definir qual será utilizado, precisamos adicionar a configuração CRISPY_TEMPLATE_PACK logo após o array INSTALLED_APPS do arquivo settings.py e determinar qual framework será utilizado. Neste artigo usaremos o bootstrap4, conforme podemos ver abaixo:

INSTALLED_APPS = [
    ...
    'crispy_forms',
    'app',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'

Estilizando os formulários

Após instalar e configurar o crispy-forms, precisamos configurar o formulário para utilizar o bootstrap4. Para isso, no arquivo responsável por renderizar o formulário de cadastro de usuários, precisamos carregar a biblioteca crispy-forms, importar o bootstrap via CDN e, por fim, indicar que usaremos o a biblioteca para estilizar o formulário do Django. No final, o conteúdo do formulário possuirá a seguinte estrutura:

<!DOCTYPE html>
{% load crispy_forms_tags %} ## Carregando a biblioteca
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cadastro</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> ## Importando o bootstrap
</head>
<body>
<main class="container">
{{ form|crispy }} ## Determinando que usaremos o crispy forms
<button class="btn btn-primary">Cadastrar</button>
</main>
</body>
</html>

Ao final, o formulário que antes era assim:

Será renderizado assim:

Tudo isso, novamente, de forma automática e sem escrever uma única linha de código HTML. 😀

Deixe seu comentário

Conheça o autor desse artigo

  • Foto Autor Fagner Pinheiro
    Fagner Pinheiro

    Professor na TreinaWeb e graduado em Sistemas de Informação pelo Instituto Federal da Bahia. Apaixonado por desenvolvimento web, desktop e mobile desde os 12 anos de idade. Já utilizou todos os sistemas operacionais possíveis, mas hoje se contenta com o OSX instalado em seu desktop. Quando não está trabalhando, é IGL e Awper do time de CS:GO da Treinaweb. Até passou em uma peneira do Cruzeiro, mas preferiu estudar Python.

    Posts desse Autor

Artigos relacionados