Django Styling a UserCreationForm with css

Question

I a trying to add some style to the UserCreationForm, I cannot user Bootstrap for this project so need to modify its html and css directly. I have not been able to find anything in its documentation the allows me to do this.

I added a email field to my UserCreationForm field by adding this snippet of code to models.py

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

and I pass the form as context to my template in views.py

def register(request):
    if request.method == 'GET':
        if request.user.is_authenticated:
            return redirect('news')
        else:
            form = CreateUserForm()
            context = {'form': form}
            return render(request, 'base1.html', context)

    if request.method =='POST':
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            user = form.cleaned_data.get('username')
            messages.success(request, 'Account was created for ' + user)
            return redirect('login')

    return render(request, 'registration.html', context)

this is how I have manage to display it inside my HTML5 template

       <form action="" method="post">
            {% csrf_token %}
            <h1 class="t34"> Register </h1>
            <div class="t34">{{form.username.label}}</div>
            {{form.username}}

            {{form.email.label}}{{form.email}}
            {{form.password1.label}}{{form.password1}}
            {{form.password2.label}}{{form.password2}}
            <input type="submit" name="Create User">
        </form>

More over I have looked at several tutorials and did not find what I was looking for as well as an Stackoverflow where this answers seem to help but since they are years old the links are no longer valid and I have no way of looking at the documentation.

Django - Styling a UserCreationForm with css from 5 years ago

How do I style my user registration form using Bootstrap in DJango? from 5 years ago and please no bootstrap.

So how do I modify the style of the fields in UserCreationForm and ad my own css and/or html?

And where can I find the documentation for this? (I have looked at the documentation site many times but it is huge and I can't seem to find anything about this.)

score 0 · Accepted Answer · answered Nov 04 '20 at 09:11

You can use layouts at Django crispy form.

class SendFeedbackForm(forms.Form):
title = forms.CharField(label="Title",widget=forms.TextInput(attrs={'class': 'custom-feedback-class', 'onkeyup':'feedback_form_control()'}))
message = forms.CharField(label="Your Message", widget=forms.Textarea(attrs={'class': 'custom-feedback-class', 'onkeyup':'feedback_form_control()'}) ) 

def __init__(self, *args, **kwargs):
    super(SendFeedbackForm, self).__init__(*args, **kwargs)

    self.helper = FormHelper()
    self.helper.form_method = 'POST'
    self.helper.layout = Layout(
    'title',
    'message',
    Submit('submit','Send', css_id="id_feedback_submit", css_class='feedback-disabled-button '),
    )

I can give a example I use. While creating this form, my main goal is to get 2 input fields. When these fields are empty, do not activate the "send" button. When both of these fields are full, let the "send" button work. So I need to add both css and js rules.

index.html

<head>
<style>
    .custom-feedback-class {
        border-radius: 25px !important;
    }

</style>
</head>
<body>

 <div>
    <form method = "post">
       {% csrf_token %}
       {% crispy form_sendfeedback %}
    </form>
 </div>
  .
  .
  .
<script>
   function feedback_form_control(){
    .
    .
    .
    }

 <script>

 </body>

Django Styling a UserCreationForm with css

1 Answers1