Style registration form

shiftregister/app/forms.py

@@ -2,14 +2,26 @@ from django import forms
 from .models import Helper
 
 
+def text_input(type=None):
+    attrs = {"class": "input"}
+    if type != None:
+        attrs["type"] = type
+
+    return forms.TextInput(attrs=attrs)
+
+
 class RegisterForm(forms.Form):
-    name = forms.CharField(max_length=Helper.name.field.max_length, label="Name")
+    name = forms.CharField(
+        max_length=Helper.name.field.max_length, label="Name", widget=text_input()
+    )
     # actually verify phone number, lol
     phone = forms.CharField(
         max_length=Helper.phone.field.max_length,
         label="Handynummer für Benachrichtigungen",
+        help_text="Wir nutzen deine Handynummer, um dir Benachrichtigungen zu deinen Schichten zu schicken. Wir löschen alle Daten 7 Tage nach dem Festival.",
+        widget=text_input("tel"),
     )
-    okf = forms.BooleanField(label="Ich möchte SMS erhalten")
+    okf = forms.BooleanField(label="Ich bin damit einverstanden, SMS zu erhalten.")
 
 
 # placeholder form for simple submit button use cases so we get csrf protection

shiftregister/app/templates/register.html

@@ -4,8 +4,23 @@
 {% block content %}
 <form action="" method="post">
     {% csrf_token %}
-    {{ form.as_p }}
-    <p>Wir nutzen deine Handynummer, um dir Benachrichtigungen zu deinen Schichten zu schicken. Wir löschen alle Daten 7 Tage nach dem Festival.</p>
-    <input type="submit" value="Anmelden">
+{% for field in form %}
+    <div class="field">
+{% if field.widget_type == 'checkbox' %}
+        <div class="control">
+            <label class="checkbox" for="{{ field.id_for_label }}">{{ field }} {{ field.label }}</label>
+        </div>
+{% else %}
+        <label class="label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+        <div class="control">
+            {{ field }}
+        </div>
+{% endif %}
+{% if field.help_text %}
+        <p class="is-size-7 mt-1">{{ field.help_text }}</p>
+{% endif %}
+    </div>
+{% endfor %}
+    <button class="button is-link" type="submit">Anmelden</button>
 </form>
 {% endblock %}