Unleashing the Power of Elegance: A Guide to Styling Django Forms

Introduction
In web development, Django forms come in handy in speeding up development and making the data collection process much simpler. They however lack the visually appealing look and feel we desire. So, how do we style them? In this article, we shall explore 2 effective ways of styling Django forms and make them visually appealing and leave a lasting impression on your users.

Styling Django Forms: The Two Approaches

1. Django crispy-forms

This is a popular third-party Django app that improves the rendering and styling of Django forms. It is built on top of Django’s built in Django forms framework and makes it easy to control the way forms are represented in the website. With Crispy Forms, you can quickly specify how your forms should be rendered on the frontend, making the process of styling and customizing the form layouts easier and more standardized. You can learn more about Django crispy forms from their official documentation here.

• To use crispy forms, we must first install it to our local machine using the command: pip install django-crispy-forms

• After a successful install, add it to the installed apps list in your Django application
  

INSTALLED_APPS = [
    .
    .
    .
    'crispy_forms',
]

• On your html template that contains the django form, add the load crispy for tags at the top of your page.

{% load crispy_forms_tags %}

• Finally add the ‘|crispy’ filter to your form content as shown:

<form action="" method="post">  
    {{form|crispy}}
    <input type="submit"/>
</form>

Now refresh your page and see the results. For more in-depth information and advanced usage of Django Crispy Forms, refer to their official documentation.

2. Manual Styling

Manual styling involves assigning custom classes or id attributes to individual form fields, similar to traditional HTML forms. By doing so, you gain complete control over the form's appearance and behavior, enabling you to tailor it to their specific design preferences. This method proves particularly advantageous when seeking to achieve a fully customized and unique styling for Django forms, as it allows for seamless integration with CSS, empowering the creation of visually stunning and user-centric web interfaces. Let’s now see how it’s done.

• Create a new file ‘forms.py’ in your apps root folder

• In the forms.py file, import forms and other necessary modules.

from django import forms

• Start by creating a form using the default Django form creation method.

class UserRegister(UserCreationForm):
    class Meta:
        model = User
        fields = ['username','email','password1','password2']

• Now customize the fields as desired.

username = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control','placeholder':'Your username'}))

 email = forms.EmailField(widget=forms.EmailInput(attrs={'class':'form-control','placeholder':'Your email Eg: [e-mail]'}))

password1 = forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control','id':'pass-one','placeholder':'Enter password'}))

 password2 = forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control','id':'pass-two','placeholder':'Repeat password'}))

Some explanation:

• username=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control','placeholder':'Your username'})): By changing the 'username' field's widget to a TextInput and adding some HTML attributes using the attrs dictionary, this line personalizes the field. In this instance, the field will be displayed as a text input with the placeholder text "Your username" and the class "form-control," which is frequently used in Bootstrap-based projects.

• email=forms.EmailField(widget=forms.EmailInput(attrs={'class':'form-control','placeholder':'Your email Eg: [e-mail]'})): The 'email' field is modified by this line, which changes the widget to an EmailInput and adds HTML attributes by using the attrs dictionary. The field's placeholder text will read, "Your email Eg: [e-mail]," and the field will be shown as an email input with the class "form-control."

• password1=forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control','id':'pass-one','placeholder':'Enter password'})): This line alters the 'password1' field by changing its widget to a PasswordInput and adding HTML attributes using the attrs dictionary. The field will display as a password input with the class "form-control," an id of "pass-one," and the default text "Enter password."

• password2=forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control','id':'pass-two','placeholder':'Repeat password'})): This line alters the 'password2' field, similar to the 'password1' field, but with a different id attribute ('pass-two') and a placeholder text 'Repeat password'.

Now with these adjustments, the UserRegister form will display with the desired styles and placeholder texts for each field, making the user registration process more aesthetically pleasing and user-friendly.

Conclusion

Using these 2 methods guarantees your Django forms will be visually appealing and will certainly leave a lasting impression on your users. Remember to keep user experience at the forefront of your design choices. A user centric interface will not only enhance the overall usability of your application but also pave the way for increased user satisfaction and loyalty.

Comments

[o-plueas]

Awesome! Well explained. I have been using manual styling. I will give crispy-form a try. Thanks 👍

[Conrad]

Thank you! I'm glad you found the explanation useful. Crispy-forms can definitely save you a lot of time and effort when it comes to styling forms. Give it a try, and if you have any questions or need further assistance, feel free to ask. Good luck with your coding!