feat: Add crispy forms

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -366,4 +366,12 @@ h1 {
 .tags {
     margin-left: auto;
     padding: 5px;
+}
+
+form {
+    padding: 20px;
+}
+
+.form-group {
+    margin: 30px;
 }

src/fellchensammlung/templates/fellchensammlung/forms/form_add_adoption.html

@@ -1,15 +1,19 @@
 {% extends "fellchensammlung/base_generic.html" %}
 {% load i18n %}
+{% load crispy_forms_tags %}
 
 {% block content %}
-  <h1>{% translate "Vermitteln" %}</h1>
-    {% blocktranslate %}
-    Bitte mach dich zunächst mit unseren Regeln vertraut. Dann trage hier die ersten Informationen ein.
-    Du bekommst in einem weiteren Schritt die Möglichkeit einzelne Tiere zu deiner Vermittlung hinzuzufügen und Fotos hochzuladen.
-    {% endblocktranslate %}
-    <form method = "post" enctype="multipart/form-data">
+    <h1>{% translate "Vermitteln" %}</h1>
+    <p>
+        {% blocktranslate %}
+            Bitte mach dich zunächst mit unseren Regeln vertraut. Dann trage hier die ersten Informationen ein.
+            Du bekommst in einem weiteren Schritt die Möglichkeit einzelne Tiere zu deiner Vermittlung hinzuzufügen und
+            Fotos hochzuladen.
+            </p>
+        {% endblocktranslate %}
+    <form method="post" class="card" enctype="multipart/form-data">
         {% csrf_token %}
-        {{ form.as_p }}
+        {{ form | crispy}}
         <button type="submit">{% translate "Weiter" %}</button>
     </form>
 {% endblock %}

src/notfellchen/settings.py

@@ -144,6 +144,8 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'fontawesomefree',
+    'crispy_forms',
+    "crispy_bootstrap4",
 ]
 
 MIDDLEWARE = [
@@ -240,6 +242,9 @@ LANGUAGES = (
     ('de', _('German')),
 )
 
+CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap4"
+CRISPY_TEMPLATE_PACK = 'bootstrap4'
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field