Forms in popups

This solution work with any form of popup like modals, offcanvas, collapse ▼ and more.

<a class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" href="#collapse_Send_Email" role="button" aria-expanded="false" aria-controls="collapse_Send_Email" style="text-decoration: none;">Send fossil ▼</a>
    <div class="collapse" id="collapse_Send_Email">
        <div class="card card-body p-1 border-0">
            <form method="POST">
                {% csrf_token %}
                {{ form_send_email.as_p }}
                <button class="save btn btn-sm btn-outline-primary" type="submit" name='send_email'>Send</button>
            </form>
        </div>
    </div>

Template (in our case fossils.html):

<p>
    <a class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#Update_Popup_Modal">Update (popup)</a>
    <a class="btn btn-sm btn-outline-danger" type="button" data-bs-toggle="modal" data-bs-target="#Delete_Popup_Modal">Delete (popup)</a>
</p>

<div class="modal fade" id="Update_Popup_Modal" tabindex="-1" aria-labelledby="Update_Popup_ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title fs-5" id="Update_Popup_ModalLabel">Update {{ fossil.fossil_name }}</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form_fossil_update.as_p }}
                {{ form_fossil_update.media }}
                <button class="save btn btn-sm btn-outline-primary" type="submit" name='fossil_update'>Update</button> <a class="btn btn-sm btn-outline-primary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
            </form>
        </div>
    </div>
    </div>
</div>    

<div class="modal fade" id="Delete_Popup_Modal" tabindex="-1" aria-labelledby="Delete_Popup_ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title fs-5" id="Delete_Popup_ModalLabel">Delete {{ fossil.fossil_name }}</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="alert alert-danger" role="alert">
                <strong>Are you sure you want to delete this fossil?</strong>
                <br><br>{{ fossil.fossil_name }}
            </div>
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <button class="save btn btn-sm btn-outline-danger" type="submit" name='fossil_delete'>Delete</button> <a class="btn btn-sm btn-outline-primary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
            </form>
        </div>
        </div>
    </div>
</div>

views.py: add the following code to our fossils view:

...
    
if request.method == "POST" and "fossil_delete" in request.POST:
    fossil.delete()
    messages.success(request, f"{fossil.fossil_name} deleted successfully")
    if fossil.fossil_species:
        return redirect('species-selected', pk=fossil.fossil_species.id)
    else:
        return redirect('homepage')

if request.method == "POST" and "fossil_update" in request.POST:
    form_fossil_update = FormFossil(request.user, request.POST, request.FILES, instance=fossil)
    if form_fossil_update.is_valid():
        fossil = form_fossil_update.save(commit=False)
        fossil.fossil_owner = request.user
        fossil.save()
        messages.success(request, f"{fossil.fossil_name} updated successfully")
        return redirect('fossil-selected', pk=fossil.id)
else:
    form_fossil_update = FormFossil(request.user, instance=fossil)

...

Add the form_fossil_update form to the context data:

return render(request, 'app_fossils/fossil.html', {
        ...
        'form_fossil_update': form_fossil_update,
        ...
        })