Enhance bulk add groups form with crispy forms for improved styling and usability

generic/forms.py

@@ -328,6 +328,33 @@ class ExamCollectionBulkAddGroupsForm(Form):
         self.fields["cid_user_groups"].widget.attrs["size"] = 8
         self.fields["user_user_groups"].widget.attrs["size"] = 8
 
+        # Crispy helper: render fields prettily in templates. We set form_tag=False
+        # because the HTMX partial includes the <form> tag with hx attributes.
+        try:
+            self.helper = FormHelper()
+            # render only the fields (the template contains the form element)
+            self.helper.form_tag = False
+            # use bootstrap5 templates if available in the project
+            self.helper.template_pack = "bootstrap5"
+            self.helper.form_class = "form-vertical"
+            self.helper.layout = Layout(
+                Div(
+                    Field("cid_user_groups", css_class="form-select", template="bootstrap5/layout/multi_select.html"),
+                    css_class="mb-3",
+                ),
+                Div(
+                    Field("user_user_groups", css_class="form-select", template="bootstrap5/layout/multi_select.html"),
+                    css_class="mb-3",
+                ),
+                Div(
+                    Field("exam_types", css_class="form-select"),
+                    css_class="mb-3",
+                ),
+            )
+        except Exception:
+            # If crispy isn't available for some reason, degrade gracefully.
+            self.helper = None
+
 
 class ExaminationForm(ModelForm):
     def __init__(self, *args, **kwargs):

generic/templates/generic/partials/examcollection_bulk_add_groups_form.html

@@ -1,17 +1,11 @@
+{% load crispy_forms_tags %}
 <form hx-post="{% url 'generic:exam_collection_bulk_add_groups' collection.pk %}" hx-target="#bulk-add-groups" hx-swap="innerHTML" class="bulk-add-groups-form">
     {% csrf_token %}
-    <div>
-        {{ form.cid_user_groups.label_tag }}<br/>
-        {{ form.cid_user_groups }}
-    </div>
-    <div>
-        {{ form.user_user_groups.label_tag }}<br/>
-        {{ form.user_user_groups }}
-    </div>
-    <div>
-        {{ form.exam_types.label_tag }}<br/>
-        {{ form.exam_types }}
-    </div>
+
+    {# Render fields with crispy. The form helper sets form_tag=False so the surrounding
+       <form> keeps the HTMX attributes while crispy renders nicely styled fields. #}
+    {{ form|crispy }}
+
     <div class="mt-2">
         <button type="submit" class="btn btn-primary btn-sm">Add groups</button>
         <button type="button" class="btn btn-secondary btn-sm" hx-get="{% url 'generic:examcollection_detail' collection.pk %}" hx-target="#bulk-add-groups" hx-swap="innerHTML">Cancel</button>