[Django]-How to add custom styling to Forms created with Django CreateView

13👍

✅

You could write a model form for Question and pass it to the create view,

class QuestionForm(forms.ModelForm):

    class Meta:
        model = Question
        fields = ('myfield1', 'myfield2) 
        widgets = {
        'myfield1': forms.TextInput(attrs={'class': 'myfieldclass'}),
        }

or you could override init method for specifying a certain class for every field,

def __init__(self, *args, **kwargs):
    super(QuestionForm, self).__init__(*args, **kwargs)
    self.fields['myfield1'].widget.attrs.update({'class' : 'myfieldclass'})

Then, pass it to the attribute form_class of CreateView,

class QuestionCreate(CreateView):
    model = Question
    form_class = QuestionForm

👤zaidfazil

[Django]-Search field in Django Template

7👍

I had a similar problem in my Django application based on the Bootstrap framework. My first attempt:

# views.py
from django.views.generic.edit import UpdateView
from . import models

class ModuleUpdateView(UpdateView):
    model = models.Module
    fields = ['name', 'description', 'status']

looked as follow:

Not very nice indeed! The second attempt implied defining a custom ModelForm for my view and applying all the customisations therein:

# forms.py
from .models import Module

class ModuleForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(ModuleForm, self).__init__(*args, **kwargs)
        for visible in self.visible_fields():
            visible.field.widget.attrs['class'] = 'form-control'

    class Meta:
        model = Module
        fields = ['name', 'description', 'status']

Please note the for cycle in __init__, which adds the form-control CSS class to all visible form fields. The CSS styling for form-control is provided by Bootstrap so I didn’t even have to modify my stylesheets.

Once I have my custom ModelForm I can rewrite my View class as follows:

# views.py
from django.views.generic.edit import UpdateView
from . import forms, models

class ModuleUpdateView(UpdateView):
    model = models.Module
    form_class = forms.ModuleForm

and you can see the results below.

Far better!

Hope that helps, feel free to comment in case of questions.

👤Sal Borrelli

4👍

class FooForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(FooForm, self).__init__(*args, **kwargs)
        self.fields['field1'].widget.attrs = { 'class': 'fooclass' }

    class Meta:
        model = FooModel
        fields = ['field1', 'field2']

you cannot directly add css to the CreateView for that you need to create a ModelForm and use the form_class = FooForm in your create view, and in this ModelForm you can use specific class for the fields and use css to style them as needed

👤Exprator

1👍

The best way is to override the get_form function.

class QuestionCreate(CreateView):
    model = Question
    fields = ['title', 'body', 'category', 'MyField']

    def get_form(self, form_class=None):
        form = super(QuestionCreate, self).get_form(form_class)
        form['MyField'].field.widget.attrs.update({'class' : 'MyClass'})
        return form

Or if you want to add the attribute to all fields you can use a for-loop as follows:

class QuestionCreate(CreateView):
    model = Question
    fields = ['title', 'body', 'category', 'MyField']

    def get_form(self, form_class=None):
        form = super(OPCCreateView, self).get_form(form_class)
        for visible in form.visible_fields():
            visible.field.widget.attrs.update({'class' : 'MyClass'})
        return form

👤DeepBlue