Как поместить Django-форму в модальное окно Bootstrap?

Я использую стандартные django.contrib.auth.urls, чтобы отображать формы авторизации. Проблема в том, что если использовать для этих целей модальные окна Bootstrap, то по какой-то причине форма поля ввода формы не передаются в шаблон и выглядит это вот так:

Шаблон модального окна:

# index.html
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
                {% include 'registration/login.html' %}
            </div>
        </div>
    </div>
</div>

Шаблон формы:

# login.html
<form method="post" action="{% url 'login' %}">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Войти">
    <input type="hidden" name="next" value="{{ next }}">
</form>

Код ссылки:

<a class="nav-link" href="{% url 'login' %}" data-toggle="modal" data-target="#loginModal">Войти</a>

Если перейти по прямому адресу, но элементы формы есть:

Может быть они не загружаются, потому что при нажатии на ссылку не происходит непосредственного перехода по ней? Как это можно исправить?

$('#login').click(function () {
        let loginUrl = $(this).data('url');
        let csrfToken = $(this).data('csrf-token');

        $.ajax({
            url: loginUrl,
            type: 'GET',
            data: {
                csrfmiddlewaretoken: csrfToken
            },
            success: function (response) {
                $('#loginModal .modal-body').html(response);
            }
        });
    });