add_tailwindcss, crispy_forms

Author: WindShiba

backendapi/forms.py

@@ -3,9 +3,8 @@
 
 
 class RegistrationForm(forms.Form):
-    name = forms.CharField(label="Enter your name", max_length=100, required=True)
-    surname = forms.CharField(label="Surname", max_length=100, required=True)
-    discord = forms.CharField(label="Discord", max_length=100, required=True)
-    phone = forms.CharField(label="Phone", max_length=100, required=True)
+    first_name = forms.CharField(label="Enter your name", max_length=100, required=True)
+    last_name = forms.CharField(label="Last Name", max_length=100, required=True)
+    email = forms.CharField(label="Discord", max_length=100, required=True)
+    phone_number = forms.CharField(label="Phone", max_length=100, required=True)
     crew = forms.CharField(label="Crew", max_length=100, required=True)
-

config/settings.py

@@ -49,7 +49,8 @@
     "tailwind",
     "theme",
     "django_browser_reload",
-
+    "crispy_forms",
+    "crispy_tailwind",
 ]
 
 MIDDLEWARE = [
@@ -151,3 +152,6 @@
 
 NPM_BIN_PATH = os.getenv("NPM_BIN_PATH")
 
+CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"
+
+CRISPY_TEMPLATE_PACK = "tailwind"

requirements.txt

@@ -5,5 +5,6 @@ psycopg2-binary==2.9.10
 djangorestframework==3.15.2
 django-tailwind>=3.6.0
 django-browser-reload==1.13.0
+crispy-tailwind==0.5.0
 
 

theme/templates/registration.html

@@ -1,14 +1,24 @@
 {% extends "base.html" %}
+{% load tailwind_filters %}
 
 
 {% block title %}registration{% endblock %}
 
 {% block content %}
-<h1> foo</h1>
-<form method="POST">
-    {% csrf_token %}
-    {{ form }}
-    <Button> Click</Button>
-    asdasd
-</form>
+<div class="max-w-md mx-auto bg-white shadow-lg rounded-lg p-8 mt-10">
+    <h1 class="text-2xl font-semibold text-gray-800 mb-6">Registration Form</h1>
+
+    <form method="POST" class="space-y-6">
+        {% csrf_token %}
+
+        <!-- Render Crispy Form -->
+        {{ form|crispy }}
+
+        <!-- Submit Button -->
+        <button type="submit"
+                class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg shadow-md">
+            Register
+        </button>
+    </form>
+</div>
 {% endblock %}