Any ideas as to why my Django form won't render widget classes?

Question

I have this ModelForm and I am trying to render a class in the html, however it won't work.

Here is what I have:

class UserProfileForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = (
            'first_name',
            'profile_pic',
            'location',
            'title',
            'user_type',
            'website',
            'twitter',
            'dribbble',
            'github'
                )

        widget = {
            'first_name':forms.Textarea(attrs={'class':'form-control'}),
            'profile_pic':forms.TextInput(attrs={'class':'form-control'}),
            'location':forms.TextInput(attrs={'class':'form-control'}),
            'title':forms.TextInput(attrs={'class':'form-control'}),
            'user_type':forms.TextInput(attrs={'class':'form-control'}),
            'website':forms.URLInput(attrs={'class':'form-control'}),
            'twitter':forms.TextInput(attrs={'class':'form-control'}),
            'dribbble':forms.TextInput(attrs={'class':'form-control'}),
            'github':forms.TextInput(attrs={'class':'form-control'}),
        }

I have tried this...

class UserProfileForm(forms.ModelForm):
    first_name = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))

    class Meta:
        model = UserProfile
        fields = (
            'first_name',
            'profile_pic',
            'location',
            'title',
            'user_type',
            'website',
            'twitter',
            'dribbble',
            'github'
        )

EDIT Here are the two ways I have tried rendering forms in the template

Automatic:

<div class="form-group">
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.as_p }}
        <input class="btn btn-primary" type="submit" value="Save" />
    </form>
</div>

Manually rendering each field: Please excuse the bootstrap setup I have here.

<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.non_field_errors }}

    <div class="form-row">
        <div class="form-group col">
            {{ form.first_name.errors }}
            <label for="{{ form.first_name.id_for_label }}">Name:</label>
            {{ form.first_name }}

            {{ form.profile_pic.errors }}
            <label for="{{ form.profile_pic.id_for_label }}">Profile Picture:</label>
            {{ form.profile_pic }}
        </div>
        <div class="col-3">
            {{ form.location.errors }}
            <label for="{{ form.location.id_for_label }}">Location:</label>
            {{ form.location }}
        </div>
    </div>
    <div class="fieldWrapper">
        {{ form.location.errors }}
        <label for="{{ form.location.id_for_label }}">Location:</label>
        {{ form.location }}
    </div>
    <div class="fieldWrapper">
        {{ form.title.errors }}
        <label for="{{ form.title.id_for_label }}">Title:</label>
        {{ form.title }}
    </div>
    <div class="fieldWrapper">
        {{ form.user_type.errors }}
        <label for="{{ form.user_type.id_for_label }}">User Type:</label>
        {{ form.user_type }}
    </div>
    <div class="fieldWrapper">
        {{ form.website.errors }}
        <label for="{{ form.website.id_for_label }}">Website:</label>
        {{ form.website }}
    </div>
    <div class="fieldWrapper">
        {{ form.about.errors }}
        <label for="{{ form.about.id_for_label }}">About:</label>
        {{ form.about }}
    </div>
    <div class="fieldWrapper">
        {{ form.twitter.errors }}
        <label for="{{ form.twitter.id_for_label }}">Twitter:</label>
        {{ form.twitter }}
    </div>
    <div class="fieldWrapper">
        {{ form.dribbble.errors }}
        <label for="{{ form.dribbble.id_for_label }}">Dribbble:</label>
        {{ form.dribbble }}
    </div>
    <div class="fieldWrapper">
        {{ form.github.errors }}
        <label for="{{ form.github.id_for_label }}">Github:</label>
        {{ form.github }}
    </div>
    <input class="btn btn-primary" type="submit" value="Save" />
</form>

The view:

class UserEditProfileView(LoginRequiredMixin,UpdateView):
    login_url = '/login/'
    model = UserProfile
    fields = [
            'first_name',
            'profile_pic',
            'location',
            'title',
            'user_type',
            'about',
            'website',
            'twitter',
            'dribbble',
            'github'
            ]
    template_name_suffix = '_edit_form'

    def get_success_url(self):
        userid = self.kwargs['pk']
        return reverse_lazy('users:user_profile',kwargs={'pk': userid})

Neither of them work, I have been looking all over for how to get this to work but I can't seem to figure it out.

You should post your view, there's where you define which template to use. — schrodingerscatcuriosity, Nov 12 '17 at 04:28
Where is the glue between your model and your form class from the point of view of your `UserEditProfileView`? — dahrens, Nov 12 '17 at 09:52
Read https://stackoverflow.com/questions/21606739/django-update-model-with-formview-and-modelform#25034144 — dahrens, Nov 12 '17 at 16:40
@dahrens isn't that person just having issues with getting the form to save the data and populate it if data was already saved? — Garrett, Nov 12 '17 at 16:59
sorry - it was not the topic of the question - but the solution was hidden inside ;) — dahrens, Nov 12 '17 at 17:11

dahrens · Accepted Answer · 2017-11-12T17:18:13.523

2

By default UpdateView generates a form for you, which is used further.

Specify your custom form class like that:

class UserEditProfileView(LoginRequiredMixin,UpdateView):
    model = UserProfile
    form_class = UserProfileForm

It is hidden in the docs. You need to browse through the mixins used by the UpdateView. The FormMixin provides this attribute for you.

If you don't provide one - ModelForm is smart enought to create one.

edited Nov 12 '17 at 17:18

answered Nov 12 '17 at 17:11

dahrens

3,879
1
20
38

This worked. I thought it was the `form_class` but wasn't sure. Thanks – Garrett Nov 12 '17 at 17:49

Any ideas as to why my Django form won't render widget classes?

1 Answers1