Access to ModelForm Fields for styling

Using Django Forms & APIs
1

HI does someone know how I can get access to the individual fields from the automatically created form when I use modelForm? Usually I have a view like this:

class SignUpView(CreateView):
    form_class = UserCreationForm
    success_url = reverse_lazy("login") 
    template_name = "registration/signup.html"

And a template which uses the form just by inserting the entire form as a tag like this:

<h2>Sign Up</h2>
<form method="post">
{% csrf_token %}
  {{ form.as_p }}
<button type="submit">Sign Up</button> 
</form>

But what if I want to connect the individual fields to a custom html field like using a special email field like this:

<input type="email" class="form-control border-0 bg-light rounded-end ps-1" placeholder="E-mail" id="exampleInputEmail1">

to which I want to connect the form field ‘email’ which was given to me from django which in turn connects to the user model. Is there a way to do this or do I have to manually create a form => connect it to the model => connect it to the template => validate it manually.

thanks for any answer.

2

You work in the other direction - you start with the form field, and modify its attributes such that when it is rendered, it produces the right html. If necessary, you can go so far as to create a custom template for that field - but that’s almost never necessary.

3

thanks for the answer. the thing is I have a html/css template for a signup page. it is already pre made frontend stuff and I just want to connect it to the backend function with the form/model for user signup. How can I do this. Because django just creates very simple form output which has no styling at all.

4

So you use that information to style your form in Django.

Sure - just like a pure html input element has no styling until you apply styles to it.

See the docs at Widgets | Django documentation | Django

5

Okay that means I have to add the classname and attributes via the widgets in the model defenition and not in the html directly? There is only one problem: I didn´t create the Form from a modelForm directly. It comes from the auth model and is directly loaded into the view. Where do I need to add these widgets then?

from django.contrib.auth.forms import UserCreationForm 

class SignUpView(CreateView):

    form_class = UserCreationForm
    success_url = reverse_lazy("login") 
    template_name = "registration/signup.html"

As you can see the model comes preBuild from the UserCreationForm. Can you tell me how I can customize it? or Do I have to write a model myself?

6

Not in the model definition, in the Form.

You’ve got a couple different options - you can create your own form class that inherits from UserCreationForm, or you could override the get_form method in the SignUpView class, or you might be able to do what you need directly in your signup.html template.

(By the way, none of this is related to the Model. The Model is not affected by styling issues.)

7

thanks for the answer again. I have found something which makes the process way more easy than defining all the classnames and attributes via the widgets. I haven´t checked it out completely yet but it seems to be working. Here it is widget tweaks.

Let me know what you think of this library since I´m completely new to django and can´t evaluate if it´s any good.

For the long run I think I will make an API and connect to Angular in which things like this are a bit easier.

8

I don’t know anything about it.

Personally, I use Django crispy forms for formatting forms.

Best of luck to you then.