我的错误消息显示在页面的顶部，但消息也被重复，这意味着它们也显示在各个字段旁边

<div class="w3-half w3-center w3-border w3-round w3-border-black" style="width: 40%;">
    <div class="w3-card-4 w3-border w3-border-black w3-pale-blue" >
        <h4> Registration Form</h4>
    </div>
    
    <form method="post" action="">
  
        {% if form.errors %}
        <!-- {% for field, errors in form.errors.items %} -->
        <ul class="messages w3-red">
            {% for error in errors %}
            <li> {{ error }} </li>
            {% endfor %}
        </ul>
        <!-- {% endfor %} -->
        {% endif %}
        
        {% csrf_token %}
        {{form.as_p}}
    <input type="submit" class="w3-button w3-black w3-round  w3-hover-red" value="Register" style="margin-left: 25px;">
    </form>
    <p> Already signed up? Please <a href="{% url 'user_login' %}" > Login </a> </p>
       
</div>