Merge pull request #10 from ErhanCitil/feature/contact-form

[#8] Contact Form

src/bobvance/conf/base.py

@@ -115,6 +115,7 @@
     "bobvance.accounts",
     "bobvance.utils",
     "bobvance.base",
+    "bobvance.contact",
     "phonenumber_field",
 ]
 

src/bobvance/contact/admin.py

@@ -0,0 +1,7 @@
+from django.contrib import admin
+from bobvance.contact.models import Contact
+# Register your models here.
+class ContactAdmin(admin.ModelAdmin):
+    list_display = ("name", "email", "created_at")
+
+admin.site.register(Contact, ContactAdmin)

src/bobvance/contact/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ContactConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'bobvance.contact'

src/bobvance/contact/forms.py

@@ -0,0 +1,22 @@
+from django import forms
+from .models import Contact
+
+class ContactForm(forms.ModelForm):
+    class Meta:
+        model = Contact
+        fields = ['name', 'email', 'message']
+        widgets = {
+            'name': forms.TextInput(attrs={
+                'class': 'form-control',
+                'placeholder': 'Erhan'
+            }),
+            'email': forms.EmailInput(attrs={
+                'class': 'form-control',
+                'placeholder': 'erhan@maykinmedia.nl'
+            }),
+            'message': forms.Textarea(attrs={
+                'class': 'form-control',
+                'placeholder': 'Dit is een test bericht!'
+            }),
+        }
+

src/bobvance/contact/migrations/0001_initial.py

@@ -0,0 +1,24 @@
+# Generated by Django 3.2.21 on 2023-10-06 13:28
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Contact',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100)),
+                ('email', models.EmailField(max_length=254)),
+                ('message', models.TextField()),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+            ],
+        ),
+    ]

src/bobvance/contact/models.py

@@ -0,0 +1,11 @@
+from django.db import models
+
+# Create your models here.
+class Contact(models.Model):
+    name = models.CharField(max_length=100)
+    email = models.EmailField()
+    message = models.TextField()
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    def __str__(self):
+        return self.name

src/bobvance/contact/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

src/bobvance/contact/urls.py

@@ -0,0 +1,6 @@
+from django.urls import path
+from .views import ContactView
+
+urlpatterns = [
+    path('contact/', ContactView.as_view(), name='contact'),
+]

src/bobvance/contact/views.py

@@ -0,0 +1,13 @@
+from django.shortcuts import render
+from django.views.generic import FormView
+from bobvance.contact.forms import ContactForm
+
+# Create your views here.
+class ContactView(FormView):
+    template_name = 'contact/contact.html'
+    form_class = ContactForm
+    success_url = '/contact/'
+
+    def form_valid(self, form):
+        form.save()
+        return super().form_valid(form)

src/bobvance/templates/base/index.html

@@ -8,10 +8,12 @@
                     <div class="px-10 max-w-xl">
                         <h2 class="text-2xl text-white font-semibold">Koelkasten</h2>
                         <p class="mt-2 text-white">Ontgrendel een wereld waarin uw boodschappen langer knapperig, gezond en heerlijk blijven. Onze koelkasten zorgen voor optimale versheid, innovatieve technologie en stijlvol design, en gaan naadloos op in uw keuken en leven. Ontdek het zelf en laat elke maaltijd een verse reis zijn.</p>
+                        <a href="{% url 'products' %}">
                         <button class="flex items-center mt-4 px-3 py-2 bg-blue-600 text-white text-sm uppercase font-medium rounded hover:bg-blue-500 focus:outline-none focus:bg-blue-500">
                             <span>Shop Nu</span>
                             <svg class="h-5 w-5 mx-2" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                         </button>
+                    </a>
                     </div>
                 </div>
             </div>

src/bobvance/templates/base/products.html

@@ -1,4 +1,5 @@
 {% extends 'master.html' %}
+{% block title %} Assortiment | Bobvance {% endblock %}
 {% block content%}
 {% include 'components/header.html'%}
 

src/bobvance/templates/components/footer.html

@@ -89,7 +89,7 @@ <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase titl
                     <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">Contact</h2>
                     <nav class="mb-10 list-none">
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">Verstuur een bericht</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900" href={% url 'contact' %}>Verstuur een bericht</a>
                         </li>
                         <li class="mt-3">
                             <a class="text-gray-500 cursor-pointer hover:text-gray-900">Kon. Wilhelminaplein 1, 1062 HG Amsterdam</a>

src/bobvance/templates/components/header.html

@@ -31,7 +31,7 @@
             <div class="flex flex-col sm:flex-row">
                 <a class="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0" href="{% url 'home' %}">Home</a>
                 <a class="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0" href="{% url 'products'%}">Shop</a>
-                <a class="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0" href="#">Contact</a>
+                <a class="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0" href="{% url 'contact'%}">Contact</a>
                 <a class="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0" href="#">Over ons</a>
             </div>
         </nav>

src/bobvance/templates/contact/contact.html

@@ -0,0 +1,22 @@
+{% extends 'master.html' %}
+{% block extra_cdn %} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> {% endblock %}
+{% block title %} Contact | Bobvance {% endblock %}
+{% block content%}
+{% include 'components/header.html'%}
+
+<div class="items-center justify-center p-12">
+    <h1 class="text-4xl font-bold text-center mb-6">Neem nu contact met ons op! </h1>
+    <div class="mx-auto w-full max-w-[550px]">
+      <form action="/contact/" method="POST">
+        {% csrf_token %}
+        <div class="p-10">
+        {{form.as_p}}
+        <button class="mt-20 btn bg-blue-600 text-white"> Verzenden </button>
+      </div>
+      </form>
+    </div>
+  </div>
+
+
+{% include 'components/footer.html' %}
+{% endblock %}

src/bobvance/templates/master.html

@@ -12,6 +12,7 @@
         <link href="{% static 'bundles/bobvance-css.css' %}" media="all" rel="stylesheet" />
         <script src="https://cdn.tailwindcss.com"></script>
         <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
+        {% block extra_cdn%}{% endblock %}
         {% block extra_css %}{% endblock %}
     </head>
 

src/bobvance/urls.py

@@ -38,6 +38,7 @@
         name="password_reset_complete",
     ),
     path("", include("bobvance.base.urls")),
+    path("", include("bobvance.contact.urls")),
 ]
 
 # NOTE: The staticfiles_urlpatterns also discovers static files (ie. no need to run collectstatic). Both the static