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.
Curso
Django - Fundamentos
Conhecer o curso
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. :D
