CODEWITHSUNDEEP
pythonhtmlcssdjango
jahantaila
jahantaila

Reputation: 908

Adding a UserCreationForm to html in Django

I am creating a registration page for my website. I have a bootstrap/html template with a form (Down Bellow), and I want to replace the html form with a UserCreationForm that I have already made in my forms.py file. The tutorial says to replace the html input fields with my user creation fields, but then bootstrap cannot style them. Forms.py:

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

Form parameters: (These are the fields from the UserCreationForm that I want to replace the HTML form fields with).

<form method = "POST" action="">
    {% csrf_token %} 

    {{form.username.label}}
    {{form.username}}

    {{form.email.label}}
    {{form.email}}

    {{form.first_name.label}}
    {{form.first_name}}

    {{form.last_name.label}}
    {{form.last_name}}

    {{form.password1.label}}
    {{form.password1}}

    {{form.password2.label}}
    {{form.password2}}
    <input type="submit" name="Register">
</form>

Upvotes: 0

Views: 596

Answers (1)

rawrex
rawrex

Reputation: 4064

I would advise you to look toward the following approach, if you can and willing to modify your UserCreationForm a bit:

class UserCreationForm(forms.Form):
    # other fields as needed...
    username = forms.CharField(
                    max_legth=100,
                    widget=forms.TextInput(attrs={'class': 'FOO_CLASS'}))
# Added a class to our input fields

So, now you can hook onto the specified class .form-control. In your CSS file and in HTML file in the question, this class supposedly introduces the styles.

Then (after your forms.py is modified) the template should look like this:

<div class="signup-form">
    <form action="" method="post">
        {% csrf_token %} 
        <h2>Sign Up</h2>
        <p>Please fill in this form to create an account!</p>
        <hr>
        <form method = "POST" action="">
            {% csrf_token %} 
            <div class="form-group">    
            {{form.username.label}}
            {{form.username}}
            </div>
            <div class="form-group">
            {{form.email.label}}
            {{form.email}}
            </div>
            <div class="form-group">
            {{form.first_name.label}}
            {{form.first_name}}
            </div>
            <div class="form-group">
            {{form.last_name.label}}
            {{form.last_name}}
            </div>
            <div class="form-group">
            {{form.password1.label}}
            {{form.password1}}
            </div>
            <div class="form-group">
            {{form.password2.label}}
            {{form.password2}}
            </div>
            <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
            </div>
        </div>
    </form>
    <div class="hint-text">Already have an account? <a href="#">Login here</a></div>
</div>

There are some other ideas based on using the ~ CSS selector and targeting the labels or inputs themselves. But this one is based on the Django's framework facilities.

Upvotes: 1

Related Questions