Formularz kontaktowy - darmowy moduł dla Joomla 5 i 6

Ten moduł nie powstał „bo tak”, tylko z bardzo konkretnej potrzeby — i pewnie wielu z Was miało podobne doświadczenia 😐

Ostatnio sprawdzałem formularz kontaktowy na jednej z własnych stron i… okazało się, że nie działa.
Na stronie był zainstalowany Convert Forms. Pierwsza myśl? Aktualizacja coś zepsuła. Cofnąłem więc komponent do przedostatniej wersji — efekt? Nadal brak wysyłki formularza.

Wtedy zapaliła się lampka 💡
Wyglądało na to, że komponent utracił kompatybilność z Joomla 5.

I to niestety nie jest odosobniony przypadek.

Na Joomla Extensions Directory (JED) jest dziś mnóstwo rozszerzeń, które:

• są „odświeżone” tylko po to, żeby nie wysypywały się na nowszych wersjach Joomla,

• ale realnie nie są testowane ani poprawnie dostosowane do Joomla 5 czy Joomla 6.

Na próbę zainstalowałem jeszcze Rapid Contact — efekt był identyczny. Formularz się wyświetlał, ale mail nie wychodził.

Co ciekawe:

• moduły typu Brief / zapytanie ofertowe wysyłały e-maile poprawnie (był pisany od zera pod Joomla 6),

• więc było jasne, że to nie wina samej Joomla ani konfiguracji serwera 📬

W tym momencie decyzja była prosta:
🧹 usunąłem wszystkie formularze i napisałem własny moduł kontaktowy, od zera.

Efekt?

• działa poprawnie,

• został przetestowany na Joomla 5 oraz Joomla 6,

• i robi dokładnie to, co formularz kontaktowy powinien robić — bez kombinowania.

 

Jeżeli jesteś zainteresowany stworzeniem strony internetowej zajrzyj tutaj: tworzenie stron Joomla!

Lub zobacz na jakich platformach tworzymy strony WWW.

 

🎯 Czym jest DC Joo Contact i po co go używać?

DC Joo Contact to darmowy moduł kontaktowy dla Joomla, który:

• osadzasz jak każdy inny moduł — w dowolnej pozycji szablonu,

• działa stabilnie na Joomla 5 i Joomla 6,

• nie udaje „kombajnu”, tylko skupia się na jednym zadaniu: pewnej wysyłce wiadomości.

Najważniejsze cechy modułu:

• ⚡ Wysyłka AJAX-em przez com_ajax – bez przeładowania strony

• 🧩 Możliwość dodawania własnych pól (repeatable / subform)

• 🎨 Prosta personalizacja wyglądu:

  • osobno styl modułu,

  • osobno styl formularza,

  • osobno przycisk wysyłki

Jeśli potrzebujesz:

• prostego formularza kontaktowego,

• który faktycznie wysyła e-maile,

• i nie rozsypie się przy aktualizacji Joomla…

…to właśnie po to powstał ten moduł 🙂

 

⚙️ 1. Jak działa moduł „od kuchni” (bez zaglądania w kod)

Ten moduł został zaprojektowany tak, żeby działał stabilnie, był lekki i nie robił bałaganu w Joomla — nawet wtedy, gdy masz na stronie więcej niż jeden formularz 📦

Bez wchodzenia w techniczne detale, mechanika wygląda tak 👇

Zobacz wideo prezentujące DC Joo Contact w kacji:

 

⚡ 1.1 Front działa szybko i bez przeładowań

Formularz wysyła dane asynchronicznie (AJAX), więc:

• strona nie przeładowuje się po kliknięciu „Wyślij”,

• użytkownik od razu dostaje komunikat sukcesu lub błędu,

• całość działa płynnie i nowocześnie.

 

📦 1.2 Opcjonalne doładowanie jQuery

Moduł może sam doładować jQuery z CDN, ale tylko jeśli tego potrzebujesz:

• przydaje się, gdy szablon nie ładuje jQuery,

• albo gdy masz konflikt wersji i chcesz mieć pełną kontrolę.

Decyzja należy do Ciebie — checkbox w panelu i po sprawie ✔️

 

🎨 1.3 Własny CSS + animowane tła gradientowe

Moduł ładuje dedykowany plik CSS (dc_joo_contact.css), który:

• odpowiada za wygląd formularza,

• obsługuje animowane tła oparte o gradienty 🌈,

• zawiera style komunikatów sukcesu i błędu (również z animacją).

Dzięki temu formularz:

• nie wygląda „systemowo”,

• a jednocześnie nie koliduje ze stylami szablonu.

 

🚀 1.4 JavaScript zoptymalizowany pod wydajność

Zamiast kilku osobnych plików JS:

• skrypty są łączone w jeden bundle,

• zapisywane w cache jako dc_joo_contact.bundle.js,

• a jego wersja zmienia się automatycznie przy każdej modyfikacji (sprytne rozwiązanie problemów z cache przeglądarki).

Efekt?
➡️ szybciej się ładuje
➡️ nie trzeba „czyścić cache, bo coś nie działa” 😄

 

🧩 1.5 Wiele formularzy na jednej stronie? Bez problemu

Moduł bez problemu obsługuje wiele instancji jednocześnie:

• każdy formularz działa niezależnie,

• skrypt operuje na kontenerach .dc-mod-joo_contact,

• nie ma konfliktów ani mieszania danych.

Możesz mieć:

• formularz w stopce,

• formularz na stronie kontaktowej,

• i kolejny w landing page — wszystko działa równolegle 👍

 

🧩 2. Konfiguracja krok po kroku

W tej części przechodzimy przez konfigurację modułu dokładnie tak, jak wygląda w panelu Joomla 🖥️
Każda podsekcja odpowiada jednej zakładce ustawień, dzięki czemu łatwo powiązać opis z konkretnymi opcjami.
Wszystkie przykłady i opisy bazują na realnych ekranach konfiguracji, więc bez problemu odtworzysz te ustawienia u siebie ⚙️🙂

 

🧾 2.1 Treść modułu

Zakładka Treść modułu odpowiada za to, co użytkownik widzi w pierwszej kolejności — czyli komunikat, który ma go zachęcić do kontaktu ✉️

Do dyspozycji masz:

• Tytuł modułu (headline) – główny nagłówek formularza

• Opis modułu – krótki tekst wprowadzający, który wyjaśnia, po co jest formularz

• Tekst przycisku wysyłki – domyślnie „Wyślij”, ale nic nie stoi na przeszkodzie, aby był bardziej dopasowany do kontekstu

• Etykiety pól systemowych:

  • Imię / Nazwa firmy

  • E-mail

Te dwa pola są systemowe — zawsze obecne w formularzu, ale ich label możesz dowolnie zmienić, np. pod kątem branży lub stylu komunikacji.

Przykładowe warianty treści:

👉 Wariant krótki, neutralny

• Tytuł: Skontaktuj się z nami

• Opis: Masz pytania? Napisz do nas, odpowiemy jak najszybciej.

• Przycisk: Wyślij wiadomość

👉 Wariant bardziej sprzedażowy

• Tytuł: Bezpłatna wycena projektu

• Opis: Opisz krótko swój projekt — wrócimy z konkretną propozycją.

• Przycisk: Wyślij zapytanie

 

🎨 2.2 Design modułu

Ta zakładka pozwala ustawić wygląd całego modułu jako bloku — niezależnie od samego formularza.

Dostępne opcje obejmują:

• Tło modułu – dwa pola kolorów, które tworzą gradientowe tło 🌈

• Kolor tytułu

• Kolor opisu

• Rozmiar fontu tytułu

• Rozmiar fontu opisu

Gradientowe tło jest animowane, dzięki czemu moduł subtelnie „żyje” i wyróżnia się na tle strony, bez nachalnych efektów ✨

 

🧩 2.3 Design formularza

W tej sekcji konfigurujesz wygląd samego formularza, czyli pól oraz przycisku.

Możesz ustawić m.in.:

• Kolor i rozmiar etykiet pól

• Wygląd pól formularza:

  • kolor tła,

  • kolor i grubość obramowania,

  • kolor i rozmiar tekstu

• Zaokrąglenie rogów pól

• Padding (osobno pion i poziom)

Dla przycisku wysyłki dostępne są:

• kolor tła + kolor po najechaniu (hover),

• kolor tekstu + hover,

• rozmiar fontu przycisku.

Dzięki temu formularz łatwo dopasować zarówno do minimalistycznych layoutów, jak i bardziej rozbudowanych landing page’y 🎯

 

🧱 2.4 Formularz (pola)

To jedna z najważniejszych zakładek w całym module 🧠

Na starcie:

• pola Imię / Nazwa firmy oraz E-mail są dodawane automatycznie,

• w panelu widoczna jest informacja, że są to pola systemowe.

Dodatkowo możesz tworzyć własne pola formularza w postaci listy (subform powtarzalny):

• input tekstowy,

• textarea,

• select,

• checkbox,

• radio.

Każde pole możesz:

• oznaczyć jako wymagane,

• opisać własną etykietą.

Po stronie frontu działa pełna walidacja:

• wymagane inputy, textarea i selecty,

• wymagane checkboxy,

• wymagane radio (użytkownik musi wybrać jedną opcję).

JS nie tylko waliduje formularz, ale też zbiera wartości wszystkich pól i przygotowuje je do wysyłki 📦

 

📬 2.5 E-mail (wysyłka)

Tutaj konfigurujesz co dzieje się po kliknięciu „Wyślij”.

Dostępne ustawienia:

• Adres odbiorcy (mail_to) – pole obowiązkowe

• Temat wiadomości

• Wstęp wiadomości – edytowalna treść HTML

• Komunikat po poprawnej wysyłce

• Komunikat błędu

Jak to działa technicznie:

• formularz wysyła dane przez com_ajax,

• endpoint:
  index.php?option=com_ajax&module=dc_joo_contact&method=sendMail&format=json

• dane są składane w strukturę grupy → pola,

• po sukcesie pojawia się overlay sukcesu + formularz jest resetowany ✅

• w przypadku błędu wyświetlany jest overlay error ❌

 

🧠 2.6 jQuery

Ostatnia zakładka dotyczy jQuery.

Dostępna jest prosta opcja:

• „Załaduj jQuery” – checkbox

Warto ją włączyć, gdy:

• szablon nie ładuje jQuery,

• albo występuje konflikt wersji i chcesz wymusić stabilne rozwiązanie.

Moduł wczytuje wtedy jQuery z CDN:

• jquery-3.7.1.min.js

Jeśli Twój szablon już poprawnie ładuje jQuery — opcję możesz spokojnie zostawić wyłączoną 👍

 

🛡️ 3. UX i zabezpieczenia – warto wiedzieć

Choć moduł jest prosty w obsłudze, pod spodem zadbano o komfort użytkownika i podstawowe zabezpieczenia, które mają realne znaczenie w codziennym użyciu 👍

Kilka praktycznych rzeczy, na które warto zwrócić uwagę:

• 🤖 Honeypot anty-bot
  Formularz zawiera ukryte pole dc_joo_contact_honey.
  Użytkownik go nie widzi, ale boty często je wypełniają — jeśli tak się stanie, wysyłka jest automatycznie blokowana. To proste i skuteczne zabezpieczenie bez CAPTCHA.

• 🎨 Czytelne komunikaty sukcesu i błędu
  Informacje o powodzeniu lub błędzie wysyłki są wyświetlane jako overlay wewnątrz modułu.
  Komunikaty mają animowane gradientowe tła, dzięki czemu są dobrze widoczne i jednoznaczne dla użytkownika ✨

• 🔐 Ochrona CSRF zgodna z Joomla
  Wysyłka formularza uwzględnia token bezpieczeństwa Joomla (ukryty input z wartością 1).
  Dzięki temu żądania są poprawnie weryfikowane i zgodne ze стандартami bezpieczeństwa CMS.

Te elementy razem sprawiają, że formularz:

• jest przyjazny w użyciu,

• jasno komunikuje, co się dzieje,

• i nie przyjmuje „śmieciowych” zgłoszeń 🚫

 

📦 4. Gdzie pobrać moduł i jak zainstalować?

Moduł DC Joo Contact możesz pobrać z dwóch źródeł — w zależności od tego, co jest dla Ciebie wygodniejsze 👇

🌐 z naszej strony – gotowa paczka do instalacji w Joomla

8

💻 z GitHuba – idealne rozwiązanie, jeśli chcesz podejrzeć kod lub śledzić zmiany

 

⚙️ Instalacja modułu w Joomla

Instalacja jest banalnie prosta i nie różni się od instalacji innych rozszerzeń w Joomla 😊

1. Zaloguj się do panelu administratora Joomla

2. Przejdź do: System → Instaluj → Rozszerzenia

3. Wybierz zakładkę „Instaluj z pakietu”

4. Przeciągnij paczkę ZIP modułu do obszaru „przeciągnij i upuść”

Po kilku sekundach moduł będzie gotowy do użycia ✔️

Na koniec wystarczy:

• opublikować moduł,

• przypisać go do pozycji w szablonie,

• i przejść do konfiguracji opisanej w poprzednich sekcjach.

Gotowe — formularz działa 🚀

 

🚀 5. Podsumowanie

DC Joo Contact to moduł stworzony z myślą o prostych, skutecznych wdrożeniach — bez rozbudowanych komponentów i bez zbędnej konfiguracji 👍

Świetnie sprawdzi się, jeśli tworzysz:

• 🏢 strony firmowe

• 📄 landing page’e

• ✉️ formularze szybkiego kontaktu, gdzie liczy się niezawodność i czytelny UX

Najważniejsze korzyści modułu:

• ✅ prostota konfiguracji,

• 🧩 możliwość edycji i rozbudowy pól formularza,

• 🎨 personalizacja wyglądu modułu, formularza i przycisku,

• ⚡ wysyłka AJAX bez przeładowania strony,

• 💬 czytelne komunikaty sukcesu i błędu,

• 🧠 opcjonalne ładowanie jQuery tylko wtedy, gdy jest potrzebne.

Jeśli szukasz lekkiego formularza kontaktowego, który:

• działa na Joomla 5 i 6,

• nie udaje kombajnu,

• i po prostu wysyła e-maile…

👉 pobierz moduł, zainstaluj go i użyj tam, gdzie inne rozwiązania zawiodły 🙂