Create contact app and complete contact template

booking/templates/booking/booking_success.html

@@ -39,8 +39,8 @@ <h5 class="card-title">Thank you for your booking, {{ booking.user.get_full_name
 
             <div class="row mt-4 d-flex justify-content-center align-items-center">
                 <h5>Next Steps</h5>
-                <p>If you have any questions or need to make changes to your booking, please contact me at
-                    example@example.com.</p>
+                <p>If you have any questions or need to make changes to your booking, please <a
+                        href="{% url 'contact' %}">contact us.</a></p>
                 <div class="col-auto">
                     <a href="{% url 'home' %}" class="btn btn-profile-color">Return to Home <i
                             class="fa-solid fa-house"></i></a>

contact/admin.py

@@ -0,0 +1,9 @@
+from django.contrib import admin
+from .models import Contact
+
+# Register your models here.
+@admin.register(Contact)
+class ContactAdmin(admin.ModelAdmin):
+    list_display = ('ticket_id', 'full_name', 'email', 'date_submitted')
+    search_fields = ('full_name', 'email', 'ticket_id')
+    list_filter = ('date_submitted',)

contact/apps.py

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

contact/forms.py

@@ -0,0 +1,15 @@
+from django import forms
+from .models import Contact
+
+class ContactForm(forms.ModelForm):
+    class Meta:
+        model = Contact
+        fields = ['full_name', 'email', 'message']
+        widgets = {
+            'message': forms.Textarea(attrs={'rows': 5, 'placeholder': 'Type your message here...'}),
+        }
+        labels = {
+            'full_name': 'Full Name',
+            'email': 'Email Address',
+            'message': 'Your Message',
+        }

contact/migrations/0001_initial.py

@@ -0,0 +1,26 @@
+# Generated by Django 5.1.2 on 2024-11-23 17:35
+
+import uuid
+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')),
+                ('ticket_id', models.UUIDField(default=uuid.uuid4, editable=False, unique=True)),
+                ('date_submitted', models.DateTimeField(auto_now_add=True)),
+                ('full_name', models.CharField(max_length=255)),
+                ('email', models.EmailField(max_length=254)),
+                ('message', models.TextField()),
+            ],
+        ),
+    ]

contact/models.py

@@ -0,0 +1,13 @@
+from django.db import models
+import uuid
+
+# Create your models here.
+class Contact(models.Model):
+    ticket_id = models.UUIDField(default=uuid.uuid4, editable=False, unique=True)
+    date_submitted = models.DateTimeField(auto_now_add=True)
+    full_name = models.CharField(max_length=255)
+    email = models.EmailField()
+    message = models.TextField()
+
+    def __str__(self):
+        return f"Ticket {self.ticket_id} - {self.full_name}"

contact/templates/contact/contact_form.html

@@ -0,0 +1,84 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block content %}
+<div class="container d-flex justify-content-center align-items-center min-vh-100 mt-3 mb-3">
+    <div class="card p-4 shadow-lg min-vw-20 max-vw-40">
+        <div class="card-body">
+            <!-- Heading -->
+            <h2 class="card-title text-center mb-4">
+                Contact Us
+            </h2>
+
+            <!-- Form Description -->
+            <p class="text-center">
+                Have any questions or concerns? Please fill out the form below and we will get back to you as soon as
+                possible.
+            </p>
+
+            <!-- Contact Form -->
+            <form method="post" action="{% url 'contact' %}" class="mt-3">
+                {% csrf_token %}
+
+                <!-- Error Handling -->
+                {% if form.non_field_errors %}
+                <div class="alert alert-danger">
+                    {% for error in form.non_field_errors %}
+                    <p>{{ error }}</p>
+                    {% endfor %}
+                </div>
+                {% endif %}
+
+                <!-- Full Name Field -->
+                <div class="mb-3">
+                    <label for="id_full_name" class="form-label">Full Name:</label>
+                    <input type="text" name="full_name" id="id_full_name" class="form-control"
+                        placeholder="Enter your full name" value="{{ form.full_name.value|default:'' }}" required>
+                    {% if form.full_name.errors %}
+                    <div class="text-danger">
+                        {% for error in form.full_name.errors %}
+                        <p>{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+
+                <!-- Email Field -->
+                <div class="mb-3">
+                    <label for="id_email" class="form-label">Email:</label>
+                    <input type="email" name="email" id="id_email" class="form-control" placeholder="Enter your email"
+                        value="{{ form.email.value|default:'' }}" required>
+                    {% if form.email.errors %}
+                    <div class="text-danger">
+                        {% for error in form.email.errors %}
+                        <p>{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+
+                <!-- Message Field -->
+                <div class="mb-3">
+                    <label for="id_message" class="form-label">Message:</label>
+                    <textarea name="message" id="id_message" class="form-control" rows="5"
+                        placeholder="Type your message here" required>{{ form.message.value|default:'' }}</textarea>
+                    {% if form.message.errors %}
+                    <div class="text-danger">
+                        {% for error in form.message.errors %}
+                        <p>{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+
+                <!-- Submit Button -->
+                <div class="d-grid gap-2">
+                    <button type="submit" class="btn btn-custom-color w-100">
+                        Submit
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+{% endblock content %}

contact/templates/contact/contact_success.html

@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/contact.css' %}">
+{% endblock %}
+
+{% block content %}
+<div class="container d-flex justify-content-center align-items-center min-vh-100 mt-3 mb-3">
+    <div class="card p-4 shadow-lg min-vw-20 max-vw-40">
+        <div class="card-body text-center">
+            <!-- Success Message Heading -->
+            <h2 class="card-title mb-4">
+                Thank You for Reaching Out!
+            </h2>
+
+            <!-- Success Message Content -->
+            <p class="mb-4">
+                Your message has been successfully submitted. Our team will review it and get back to you soon. Below is
+                your ticket ID for reference.
+            </p>
+
+            <!-- Ticket ID Display -->
+            <p class="display-6 font-weight-bold">{{ ticket_id }}</p>
+
+            <!-- Link to Home Button -->
+            <div class="row justify-content-center mt-5 mb-3">
+                <div class="col-auto">
+                    <a href="{% url 'home' %}" class="btn btn-contact-color w-100 mt-4">
+                        Return to Home <i class="fa-solid fa-house"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock content %}

contact/tests.py

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

contact/urls.py

@@ -0,0 +1,7 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path('', views.contact_view, name='contact'),
+    path('success/', views.contact_success, name='contact_success'),
+]

contact/views.py

@@ -0,0 +1,30 @@
+from django.shortcuts import render, redirect
+from django.contrib import messages
+from .forms import ContactForm
+
+# Create your views here.
+def contact_view(request):
+    if request.method == 'POST':
+        form = ContactForm(request.POST)
+        if form.is_valid():
+            contact = form.save()
+            # Store the ticket ID in the session
+            request.session['ticket_id'] = str(contact.ticket_id)
+            return redirect('contact_success')
+    else:
+        form = ContactForm()
+
+    return render(request, 'contact/contact_form.html', {'form': form})
+
+
+def contact_success(request):
+    # Retrieve and clear the ticket ID from the session
+    ticket_id = request.session.get('ticket_id')
+    if not ticket_id:
+        # If there's no ticket ID in the session, redirect to the contact form
+        return redirect('contact')
+
+    # Clear the ticket ID from the session after retrieving it
+    del request.session['ticket_id']
+
+    return render(request, 'contact/contact_success.html', {'ticket_id': ticket_id})

signcoding/settings.py

@@ -61,6 +61,7 @@
     'personaluser',
     'booking',
     'newsletter',
+    'contact',
 ]
 
 # Cloudinary configuration to ensure that images are loaded in HTTPS

signcoding/urls.py

@@ -26,6 +26,7 @@
     path('user/', include('personaluser.urls')),
     path('bookings/', include('booking.urls')),
     path('newsletter/', include('newsletter.urls')),
+    path('contact/', include('contact.urls')),
 ]
 
 if settings.DEBUG:

static/css/contact.css

@@ -0,0 +1,11 @@
+/* Return to Home button */
+.btn-contact-color {
+    background-color: #3C0008;
+    color: #F9F6EE;
+}
+
+.btn-contact-color:hover {
+    background-color: #F9F6EE;
+    border: 0.1rem solid #3C0008;
+    color: #3C0008;
+}

templates/403.html

@@ -2,9 +2,26 @@
 {% load static %}
 
 {% block content %}
-<div style="text-align: center; margin-top: 50px;">
-    <h1>403 Forbidden</h1>
-    <p>You do not have permission to access this page.</p>
-    <a href="{% url 'tutors' %}">Back to Tutors List</a>
+<div class="container d-flex justify-content-center align-items-center min-vh-100 mt-3 mb-3">
+    <div class="card p-4 shadow-lg min-vw-20 max-vw-40">
+        <div class="card-body text-center">
+            <!-- Heading -->
+            <h2 class="card-title mb-4 text-danger">
+                403 Forbidden
+            </h2>
+
+            <!-- Error Message -->
+            <p class="lead">You do not have permission to access this page.</p>
+
+            <!-- Back to Tutors List Link -->
+            <div class="row justify-content-center mt-5 mb-3">
+                <div class="col-auto">
+                    <a href="{% url 'home' %}" class="btn btn-custom-color w-100 mt-4">
+                        Return to Home <i class="fa-solid fa-house"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 {% endblock %}

templates/allauth/layouts/base.html

@@ -4,6 +4,7 @@
 {% url 'tutors' as tutor_url %}
 {% url 'user_profile' as personaluser_url %}
 {% url 'booking_create' as bookings_url %}
+{% url 'contact' as contact_url %}
 {% url 'account_login' as login_url %}
 {% url 'account_signup' as signup_url %}
 {% url 'account_logout' as logout_url %}
@@ -152,15 +153,16 @@ <h6 class="custom-text-h6"><strong>Site Navigation:</strong></h6>
                             <a href="{% url 'tutors' %}" class="nav-link nav-footer-custom">Tutor</a>
                         </li>
                         <li class="nav-item">
-                            <a href="" class="nav-link nav-footer-custom">Contact</a>
+                            <a href="{% url 'contact' %}" class="nav-link nav-footer-custom">Contact</a>
                         </li>
                     </ul>
                 </div>
             </div>
             <div class="horizontal-rule"></div>
             <div class="col-sm-4 col-xs-12 contact-footer-column">
                 <h6 class="custom-text-h6">If you have any enquiries, please contact us</h6>
-                <a class="btn btn-warning" role="button" href=""><i class="fa-solid fa-envelope"></i> Contact form</a>
+                <a class="btn btn-warning" role="button" href="{% url 'contact' %}"><i class="fa-solid fa-envelope"></i>
+                    Contact form</a>
             </div>
             <div class="horizontal-rule"></div>
             <div class="col-sm-4 col-xs-12">

templates/base.html

@@ -4,6 +4,7 @@
 {% url 'tutors' as tutor_url %}
 {% url 'user_profile' as personaluser_url %}
 {% url 'booking_create' as bookings_url %}
+{% url 'contact' as contact_url %}
 {% url 'account_login' as login_url %}
 {% url 'account_signup' as signup_url %}
 {% url 'account_logout' as logout_url %}
@@ -152,15 +153,16 @@ <h6 class="custom-text-h6"><strong>Site Navigation:</strong></h6>
                             <a href="{% url 'tutors' %}" class="nav-link nav-footer-custom">Tutor</a>
                         </li>
                         <li class="nav-item">
-                            <a href="" class="nav-link nav-footer-custom">Contact</a>
+                            <a href="{% url 'contact' %}" class="nav-link nav-footer-custom">Contact</a>
                         </li>
                     </ul>
                 </div>
             </div>
             <div class="horizontal-rule"></div>
             <div class="col-sm-4 col-xs-12 contact-footer-column">
                 <h6 class="custom-text-h6">If you have any enquiries, please contact us</h6>
-                <a class="btn btn-warning" role="button" href=""><i class="fa-solid fa-envelope"></i> Contact form</a>
+                <a class="btn btn-warning" role="button" href="{% url 'contact' %}"><i class="fa-solid fa-envelope"></i>
+                    Contact form</a>
             </div>
             <div class="horizontal-rule"></div>
             <div class="col-sm-4 col-xs-12">

templates/error.html

@@ -14,7 +14,7 @@ <h1 class="text-center mb-4"><strong>Error Occurred <i class="fa-solid fa-exclam
             <h4 class="alert-heading">Oops!</h4>
             <p>{{ message }}</p>
             <hr>
-            <p class="mb-0">If you need assistance, please contact support@example.com.</p>
+            <p class="mb-0">If you need assistance, please <a href="{% url 'contact' %}">contact us.</a></p>
         </div>
     </div>