Django Form withWidget

Adi Ramadhan
2 min readOct 5, 2020

Simple use of widget in django form with bootstrap html.
Official doc here.
Bootstrap official doc for form here.

No widget — With Widget

Step 1: Preparation, Create Django Project, Initial Migration
create virtualenv: virtualenv venv
start virtualenv: venv/Scripts/activate
install Django in virtualenv: pip install django==3.0
Create Django: django-admin startproject myproject
Go to myproject folder: cd myproject
Initial Migration: python migrate

Step 2: Create Django Apps
Create apps: python startapp myapp
Add myapp to INSTALLED_APPS in myproject/

Step 3: Set up Templates Folder
Create folder templates in myapp

Add template directory in TEMPLATES parameter in myproject/

os.path.join(BASE_DIR, 'myapp', 'templates')

Step 5: Create HTML Files in myapp/templates Folder
Create bootstrap base, create myapp/templates/base.html CDN Bootstrap.

Create custom-form template, myapp/templates/custom-form.html

Step 6: Create Basic in myapp Folder
Create forms in myapp, myapp/

Step 7: Create Function Based View in myapp/
Update myapp/ Add Function Based View method that render html file and using CustomForm.

Step 8: Setup URLs in myapp and myproject Folder
Create myapp/

Update myproject/

Step 9: Run Server and Testing
Run Server: python runserver

No Widget Form

Step 10: Update in myapp Folder, add Widget
Update forms in myapp, myapp/


Form with widget