Customized django all-auth form not submitting

Question

I am using the django all-auth login form. I wanted to customize the look of the form fields so I changed login.html within the account folder to look like this:

<form class="login" method="POST" action="{% url 'account_login' %}">
    {% csrf_token %}
    {% for field in form.visible_fields|slice:'2' %}
        <div class="row form-group">
            {% if field.name == 'login' %}
                <input type="text" placeholder="Email"><i class="fas fa-at"></i>
            {% else %}
                <input type="password" placeholder="Password"><i class="la la-lock"></i>
            {% endif %}
        </div>
    {% endfor %}
    <a href="{% url 'account_reset_password' %}">Forgot Password?</a>
    <button type="submit">Sign In</button>
</form>

The form renders exactly how I would like it to, however nothing happens when I click on submit. What is strange to me is that the form submits perfectly fine if in place of my for loop I simply type {{ form.as_p }}, it just doesn't look how I want. Can anyone see an error in my loop, or is there something else wrong here. I have been looking for a solution online but so far been unsuccessful

Answer 1

You need to specify the names of the fields in your input tags otherwise the POST dictionary will be empty. You are using {% if field.name == 'login' %} but you forgot to specify the name attribute. Same applies for the password input.

<form class="login" method="POST" action="{% url 'account_login' %}">
    {% csrf_token %}
    {% for field in form.visible_fields|slice:'2' %}
        <div class="row form-group">
            {% if field.name == 'login' %}
                <input name='login' type="text" placeholder="Email"><i class="fas fa-at"></i>
            {% else %}
                <input name='password' type="password" placeholder="Password"><i class="la la-lock"></i>
            {% endif %}
        </div>
    {% endfor %}
    <a href="{% url 'account_reset_password' %}">Forgot Password?</a>
    <button type="submit">Sign In</button>
</form>