如何在自定义HTML页面中实现Django Allauth注册功能？

Hey there! Let's work through why your custom signup form isn't saving data to the database and how to get the post-signup redirect working correctly. Here's what's going wrong and how to fix it:

Key Problems in Your Current Template #

1. Missing name attributes on input fields
   Django (and allauth) relies on the name attribute of form inputs to map user input to the backend form fields. Your inputs only have id and v-model, but no name—so the backend never receives the data you enter.

2. Incorrect password confirmation field name
   Allauth expects the password confirmation field to be named password2, but your template uses a custom signup_repassword id with no matching name.

3. Conflicting submit buttons
   You have both an <input type="submit"> and a styled <h4> that doesn't act as a submit button. This can cause confusion, and the styled button won't trigger the form submission unless you add JS (which isn't necessary here).

4. Wrong approach to post-signup redirect
   Changing the form's action to your custom page bypasses allauth's signup processing logic—so the data never gets saved. You need to let allauth handle the form submission first, then configure it to redirect to your desired page.

Modified Working Template #

Here's a fixed version of your mysite/templates/account/signup.html that addresses all these issues:

<form class="signup" id="signup_form" method="post" accept-charset="utf-8" action="{% url 'account_signup' %}">
    {% csrf_token %}
    {% if redirect_field_value %}
        <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
    {% endif %}
    <div class="signup_body">
        <div class="container">
            <!-- Username Field (adjust if you use email-only auth) -->
            <div class="home_list">
                <div class="row">
                    <div class="col-12">
                        <div>name</div>
                        <div class="textinput">
                            <input type="text" id="signup_name" name="username" placeholder="please name" required>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Email Field -->
            <div class="home_list">
                <div class="row">
                    <div class="col-12">
                        <div>email</div>
                        <div class="textinput">
                            <input type="email" id="signup_email" name="email" placeholder="please email" required>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Password Field -->
            <div class="home_list">
                <div class="row">
                    <div class="col-12">
                        <div>password</div>
                        <div class="textinput">
                            <input type="password" id="signup_password" name="password1" placeholder="password" required>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Password Confirmation Field -->
            <div class="home_list">
                <div class="row">
                    <div class="col-12">
                        <div>double check password</div>
                        <div class="textinput">
                            <input type="password" id="signup_repassword" name="password2" placeholder="type again" required>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Styled Submit Button -->
            <div class="home_list_btn">
                <button type="submit" class="grobal_btn grobal_btn_primary grobal_btn_round">
                    <h4>Complete</h4>
                </button>
            </div>
        </div>
    </div>
</form>

Key Changes Explained #

• Added name attributes matching allauth's expected field names: username, email, password1, password2
• Replaced the duplicate submit buttons with a single styled <button type="submit"> (so it properly triggers form submission)
• Added required attributes to enforce basic frontend validation (you can also let allauth handle backend validation)
• Kept the form's action pointing to {% url 'account_signup' %} so allauth processes the submission

Setting Up Post-Signup Redirect #

To redirect to your custom page after successful signup, add this line to your settings.py:

ACCOUNT_SIGNUP_REDIRECT_URL = '/your-custom-page/'  # Replace with your actual URL path

If you need dynamic redirects (e.g., based on user input), you can override allauth's signup view, but this static setting works for most cases.

Additional Notes #

• If you're using Vue.js with v-model, make sure the v-model values are synced with the input's name attributes, or handle form submission via AJAX (but that's a more advanced approach for later)
• Verify your settings.py has allauth properly configured (e.g., ACCOUNT_AUTHENTICATION_METHOD set to username or email to match your fields)
• Make sure your template is in the correct path (mysite/templates/account/signup.html) so Django uses it instead of the default allauth template

内容的提问来源于stack exchange，提问作者Joe