How to add UserCreationForm to HTML/Bootstrap template in Django
Question
I am creating a registration page for my website. I am following this tutorial. 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. Can someone please help me so the default form fields have my python usercreationform? My code is down bellow.
Register.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static "registerstyles.css" %}">
<title>GoodDeed - Register</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<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>
<div class="form-group">
<div class="row">
<div class="col">
<input type="text" class="form-control" name="first_name" placeholder="First Name" required="required" ></div>
<div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
</div>
<div class="form-group">
<label class="form-check-label"><input type="checkbox" required="required"> I accept the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a></label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
</div>
</form>
<div class="hint-text">Already have an account? <a href="#">Login here</a></div>
</div>
</body>
</html>
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>
2 answers
solution1
0 2021-06-19 10:38:05
class myUserCreationForm(UserCreationForm):
password1 = forms.CharField(
label='Password',
widget=forms.PasswordInput(attrs={'class': 'form-control'})
)
password2 = forms.CharField(
label='Password',
widget=forms.PasswordInput(attrs={'class': 'form-control'})
)
class Meta:
model = User
fields = ('username', 'password1', 'password2')
widgets = {
'username': TextInput(attrs={'class': 'form-control'}),
'first_name': TextInput(attrs={'class': 'form-control'}),
# add rest like this
}
solution2
0 ACCPTED 2021-06-24 17:15:40
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.