How to customize Django forms using Django widget tweaks

What are Django forms?

Django forms are like an advanced HTMLHyperText Markup Language form. The main differences are that these forms are from Django and are pythonic in nature.

Rendering Django forms in the template might be messy at times. However, with a good knowledge of Django forms and attributes of fields, you can easily create an excellent form with powerful features.

What is a Django widget tweak?

The Django widget tweaks is used to render form fields in templates. This allows you to adjust the properties of the form (such as method and CSS class) on the back-end without rewriting the template.

Let’s start with the installation.

Step 1

pip install pipenv 

pipenv shell
pipenv install django

Step 2

Use ./ at the end to create the project in the same directory. Then, use startapp codebase to create an app for the project.

django-admin startproject DjangoWidgetTweak ./

python manage.py startapp codebase

Step 3

python manage.py migrate
python manage.py runserver

Go to settings.py and paste the following:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # adding the codebase app
    'codebase'
    # adding the widget tweak in the installed app
    'widget_tweaks'
]

Step 4

In the codebase app folder, go to models.py to create a model for the database.

from django.db import models
class WidgetModel(models.Model):
    name = models.CharField(max_length=400)
    age = models.IntegerField()
    def __str__(self):
        return self.name

Step 5

Go to the admin.py file to register the model in the admin view.

from django.contrib import admin
from .models import WidgetModel
admin.site.register(WidgetModel)

Step 6

Create a file and name it forms.py in order to make use of Django forms.

from django import forms
from django.db.models import fields
from .models import WidgetModel
class WidgetForm(forms.ModelForm):
    class Meta:
        model = WidgetModel
        fields = '__all__'

Step 7

The Views.py file: 

from django.shortcuts import redirect, render
from .forms import WidgetForm
from django.http import HttpResponse
def home(request):
    form = WidgetForm(request.POST or None)
    if request.method == 'POST':
        if form.is_valid():
            form.save()
            return redirect('home')
        else:
            return HttpResponse('form not valid')
    context = {
        'form': form
    }
    return render(request, 'app/home.html', context)

Step 8

In the codebase app, create a folder and name it templates.

Inside the templates folder, create another folder and name it app.

Inside the app folder, create the home.html file.



Step 9


In the DjangoWidgetTweak folder, in the urls.py file, do the following:


from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    # including the codebase folder 'urls.py' file
    path('', include('codebase.urls'))
]


Step 10


Then in the codebase folder, create a file and name it urls.py</a>:


from django.urls import path
#importing home function from views.py
from .views import home
urlpatterns = [
    path('', home, name='home'),
]


Step 11


Run the following commands:




    

  • 

    makemigrations to prepare the model for migrations.
    

    • 

  • 

    migrate to move the model and any other related packages that need to be moved to the database.
    

    • 



python manage.py makemigrations

python manage.py migrate







Step 12


In case you want to create a super-user, run the following command.




python manage.py createsuperuser







Step 13


After it, to start the server, run this:




python manage.py runserver







Step 14


Then, go to http://127.0.0.1:8000/admin and login in order to access the admin panel.


Free Resources
License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)