feat: add FAQ question form with email notifications and validations

- Created `FaqQuestionForm` in `forms.py` with custom field validations
- Added FAQ form to the FAQ section with CSRF protection and error handling
- Integrated email notifications to administrator upon FAQ submission
- Updated styles and scripts for form inputs, validation messages, and messages UI
- Adjusted FAQ section layout in `faq.html` and related CSS for responsiveness
- Implemented tests for FAQ form submission and email notifications

templates/home/_fragments/faq.html

@@ -1,4 +1,4 @@
-<section class="faq-section container">
+<section class="faq-section container" id="faq-section">
     <h2>ОТВЕТЫ НА ВОПРОСЫ</h2>
     <div class="faq-grid">
 
@@ -44,23 +44,30 @@
 
     <div id="back-form" style="display: none;" class="back-form">
         <h2>НЕ НАШЛИ ОТВЕТ НА ВАШ ВОПРОС?</h2>
-        <form action="">
-            <label class="q-label" for="name" style="margin-top: 69px;">
-                <input type="text" placeholder="Имя" id="name">
-            </label>
+        <form action="{% url 'home' %}" method="post">
+            {% csrf_token %}
+            {{ faq_form.non_field_errors }}
 
-            <label class="q-label" for="number">
-                <input type="text" placeholder="Номер телефона" id="number">
+            <label class="q-label" for="{{ faq_form.name.id_for_label }}" style="margin-top: 69px;">
+                {{ faq_form.name }}
             </label>
+            {{ faq_form.name.errors }}
 
-            <label class="q-label" for="question">
-                <input type="text" placeholder="Ваш вопрос" id="question">
+            <label class="q-label" for="{{ faq_form.phone.id_for_label }}">
+                {{ faq_form.phone }}
             </label>
+            {{ faq_form.phone.errors }}
+
+            <label class="q-label" for="{{ faq_form.question.id_for_label }}">
+                {{ faq_form.question }}
+            </label>
+            {{ faq_form.question.errors }}
 
             <div class="back-form-accept-checkbox">
-                <input type="checkbox" id="accept" name="accept">
-                <label for="accept">Я согласен с политикой обработки персональных данных</label>
+                {{ faq_form.accept }}
+                <label for="{{ faq_form.accept.id_for_label }}">{{ faq_form.accept.label }}</label>
             </div>
+            {{ faq_form.accept.errors }}
 
             <button class="back-form-submit" type="submit">ОТПРАВИТЬ ВОПРОС</button>
         </form>
@@ -78,5 +85,12 @@
 <script>
     document.addEventListener('DOMContentLoaded', function () {
         Fancybox.bind('[data-fancybox]')
+
+        {% if faq_form.is_bound and faq_form.errors %}
+        const openFaqButton = document.querySelector('.faq-cta a[data-fancybox]')
+        if (openFaqButton) {
+            openFaqButton.click()
+        }
+        {% endif %}
     })
-</script>
+</script>