Small fixes

static/css/style.css

@@ -490,6 +490,12 @@ header {
     white-space: nowrap;
 }
 
+.phone-link svg {
+    width: 18px;
+    height: 18px;
+    flex: 0 0 18px;
+}
+
 .breadcrumbs-container {
     display: flex;
     align-items: center;

static/js/faq-form-validation.js

@@ -0,0 +1,53 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const nameInput = document.querySelector('[data-faq-name-input]')
+    const phoneInput = document.querySelector('[data-faq-phone-input]')
+
+    const sanitizeName = function (value) {
+        return value.replace(/\d/g, '')
+    }
+
+    const sanitizePhone = function (value) {
+        let result = ''
+
+        Array.from(value).forEach(function (char) {
+            if (/\d/.test(char)) {
+                result += char
+                return
+            }
+
+            if (char === '+' && result === '') {
+                result = '+'
+                return
+            }
+
+            if (char === '-' && /\d$/.test(result) && !result.endsWith('-')) {
+                result += '-'
+            }
+        })
+
+        return result
+    }
+
+    const sanitizeInput = function (input, sanitizer) {
+        if (!input) {
+            return
+        }
+
+        input.addEventListener('input', function () {
+            const sanitizedValue = sanitizer(input.value)
+
+            if (input.value !== sanitizedValue) {
+                const position = input.selectionStart
+                input.value = sanitizedValue
+
+                if (typeof position === 'number') {
+                    const nextPosition = Math.min(position, input.value.length)
+                    input.setSelectionRange(nextPosition, nextPosition)
+                }
+            }
+        })
+    }
+
+    sanitizeInput(nameInput, sanitizeName)
+    sanitizeInput(phoneInput, sanitizePhone)
+})