Django: Prevent form from resetting when a form is not valid

Question

I am trying to prevent the form from resetting when there is an invalid input, but when there is an invalid input my whole form is resetting and I don't understand why. This is basically a registration form and the point is to not have the form reset when form.is_valid() is false. Also, if you could help with displaying messages. How do I incorporate a strength password bar under the password field.

 <center><div class= 'form-container'>
            <h1 style="font-weight:normal;font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif;position: relative;top: 20px;">Sign-up</h1>
            <form method="post" id = "register-inputs" action = {% url 'register' %}>
                {% csrf_token %}
                <div>
                    <div class="user-register">
                      <input type = 'text' name = 'first_name' required>
                      <span class="highlight"></span>
                      <span class="bar"></span>
                      <label>First name</label>
                    </div>
                    <div class="user-register">
                      <input type = 'text' name = 'last_name' required>
                      <span class="highlight"></span>
                      <span class="bar"></span>
                      <label>Last name</label>
                    </div>
                    <div class="user-register">
                      <input type = 'text' name = 'email' required>
                      <span class="highlight"></span>
                      <span class="bar"></span>
                      <label>Email</label>
                    </div>
                    <div class="user-register">
                      <input type = 'text' name = 'username' required>
                      <span class="highlight"></span>
                      <span class="bar"></span>
                      <label>Username</label>
                    </div>
                    <div class="user-register">
                      <input  type = 'password' name="password1" required>
                      <span class="highlight"></span>
                      <span class="bar"></span>
                      <label>Password</label>
                    </div>
                    <div class="user-register">
                      <input  type = 'password' name="password2" required>
                      <span class="highlight"></span>
                      <span class="bar"></span>
                      <label>Confirm Password</label>
                    </div>
                    <input class="btn btn-primary" type="submit" value="Sign up!">
                    <div class="social-media-btns">
                        <div class="or-login"></div>
                        <div class="social-icons">
                            <a href = "https://www.instagram.com" target="_blank" class="social-icon social-icon--instagram">
                                <i class="fa fa-instagram"><img width="40" style="display: flex; justify-content:center" src="{% static 'social_media_btn/instagram-icon.png' %}"></i>
                                <div class="tooltip">Instagram</div>
                            </a>
                            <a target="_blank" href="https://www.facebook.com" class="social-icon social-icon--facebook">
                                <i class="fa fa-facebook">
                                    <img width="15" style="display: flex; justify-content:center" src = "{% static 'social_media_btn/facebook-icon.png' %}">
                                </i>
                                <div class="tooltip">Facebook</div>
                            </a>
                            <a target="_blank" href="https://www.google.com" class="social-icon social-icon--google">
                                <i class="fa fa-google">
                                    <img width="40" style="display: flex; justify-content:center" src="{% static 'social_media_btn/google-icon.png' %}">
                                </i>
                                <div class="tooltip">Google</div>
                            </a>
                        </div>
                    </div>
                    <br>
                    <p>Already have an account? <span><a href="{% url 'login' %}">Login!</a></span>
                    </p>
    
                </div>
            </form>
        </div></center>

views.py

def register(request):
    form = RegistrationForm()
    if request.method == 'POST':
        form = RegistrationForm(request.POST)
        if form.is_valid():
            user = form.save()
            user.refresh_from_db()
            user.profile.first_name = form.cleaned_data.get('first_name')
            user.profile.last_name = form.cleaned_data.get('last_name')
            user.profile.email = form.cleaned_data.get('email')
            user.save()
            username = form.cleaned_data.get('username')
            password = form.cleaned_data.get('password1')
            user = authenticate(username=username, password=password)
            login(request, user)
            return redirect('register')

    else:
        form = RegistrationForm()

    context = {'form': form}
    return render(request, 'register.html', context)

Answer 1

You can't see the values when the form is invalid because you have a custom HTML form (not Django rendered) and the value attributes aren't bound to the form fields. So do the following:

<div class="user-register">
    {{ form.first_name }}
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>First name</label>
</div>

OR

<div class="user-register">
    <input type = 'text' name = 'first_name' required value="{{ form.first_name.value }}">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>First name</label>
</div>

But I personally recommend the first one.

UPDATE To style your fields within Django, use widgets. So for example, for the first_name field, do the following:

forms.py

class MyForm(forms.Form):
    first_name = forms.CharField(
        widget=forms.TextInput(
            attrs={"class": "custom-css-classes go-here"}
        )
    )
...