How to use Django Widget Tweaks

Django provides a simple way to create the form. There are multiple ways to create the forms, but Django built-in form is strongly recommended. Because it will automate a good amount of work and provide stable and secure functionality. But the problem with the Django built-in form is that it doesn't allow easily let us edit the form for customize design.

In this tutorial, we will see one of the popular ways to customize the Django form. We will include our custom CSS, classes, or id in the individual fields in the forms. Let's see why we need to use the Django widget tweaks.

Problem with Django Built-in Form

Before moving towards the Django widget tweaks package, we will elaborate on a bit of the problem we face in Django built-in forms.

We create a form using the Bootstrap classes. Let's see the code of the simple form.

Here we have designed a simple form with some attributes, and we can add more according to our requirements. Now we will create a model in the model.py file.

Using this model, we create a Django Form. Create a forms.py file and add the following code.

form.html

Run the server and visit http://127.0.0.1:8000/form/.

Installation of Django Tweaks

To customize the Django built-in forms, we need to use Django tweaks. We install using the following command.

Once it is installed in the system add the widget_tweaks to your INSTALLED_APPS.

Usage

In this section, we will show few of many options the package offers. If you want to understand all, you can take the reference of its official documentation. The widget-tweaks app provides the two sets that can be used together or standalone.

• A render_field template tag for customizing form fields by an HTML-like syntax.
• Several template filters for customizing form field HTML attributes and CSS classes.

The render_fields are easier to use and make the field customization much easier for designers and front-end developers.

However, template filters are more powerful than the render_field tag. But they are quite complex and less HTML-like syntax.

To start working with it, we must load the following tag in the template file.

Now expand your form by iterating through its fields, in order to expose the input tags, replacing this.

From this

Output:

As shown in the above code, the form design has improved, but our form is not looking.

Now we use the django tweaks and add extra attributes to the field element.

We have applied the bootstrap class in each Django form field. We will have all our code in the CSS file for customizing each filed by class or id.

Let's understand the following implementation of render_field.

Django-tweaks package is a powerful tool to customize the form fields. It helps us to apply the bootstrap class in each field. So we have to design the HTML, with CSS, and use it in Django by just replacing the input tag with render_field and form.field_name with {%%} at the end and design it with our choice.