Jak stworzyć atrakcyjną stronę kontaktową w Prestashop?

Strona kontaktowa rzadko jest pierwszym miejscem, o którym myśli się przy starcie sklepu. Najpierw idą produkty, koszyk, płatności. Kontakt pojawia się później — zwykle wtedy, gdy klient nie może znaleźć telefonu, adresu albo prostego formularza. A to właśnie tam, w tej jednej podstronie, sklep pokazuje czy jest prawdziwą firmą, czy tylko witryną z przyciskiem „Kup”.

W tym tekście chcę spokojnie opowiedzieć, po co w ogóle jest strona kontaktowa, jak wiąże się z zaufaniem i E-E-A-T, oraz jak wygląda moduł, który napisałem do PrestaShop, bo natywna strona kontaktu od lat zostaje w tyle. Na końcu jest dokumentacja kart panelu i instrukcja instalacji.

🙂 Nie obiecuję, że po instalacji sklep sam zacznie sprzedawać. Obiecuję tylko, że strona „Kontakt” może wreszcie wyglądać i działać tak, jak oczekuje tego klient.

 

Po co sklep internetowy w ogóle ma stronę kontaktową?

Strona kontaktowa to nie ozdoba w menu. To miejsce, w którym klient może:

• 📞 zadzwonić albo napisać, gdy coś nie gra z zamówieniem,
• 🏢 sprawdzić, czy za sklepem stoi konkretna firma — nazwa, adres, godziny,
• 🗺️ zobaczyć, gdzie jesteście, jeśli odbiera osobiście albo chce odwiedzić siedzibę,
• ✉️ zostawić wiadomość bez zakładania konta i bez szukania maila w stopce,
• 📄 trafić do polityki prywatności i dać świadomą zgodę, zanim wyśle dane.

W praktyce ta strona pełni kilka funkcji naraz. Jest kanałem obsługi. Jest wizytówką firmy. Jest też sygnałem dla osoby, która jeszcze nie kupiła: „tu ktoś jest, da się do was dotrzeć”.

Gdy kontaktu brakuje albo jest byle jaki — jeden stary formularz, zero adresu, mapa z 2014 roku — klient nie zawsze napisze na support. Częściej po prostu zamyka kartę.

Artykuł jest długi więc od razu ci pokażę jak może wyglądać Twoja strona kontaktowa po instalacji modułu:

 

E-E-A-T: kontakt jako element zaufania i autorytetu

Google od lat mówi o E-E-A-T: Experience, Expertise, Authoritativeness, Trustworthiness — doświadczenie, ekspertyza, autorytet, wiarygodność. To nie jest jeden znacznik w HTML. To zestaw sygnałów, z których wynika, czy treść i firma stojąca za stroną wyglądają na rzetelne.

Strona kontaktowa nie zastąpi dobrych opisów produktów ani uczciwych regulaminów. Ale jest jednym z tych miejsc, które naprawdę budują zaufanie. I to nie tylko w oczach wyszukiwarki — przede wszystkim w oczach człowieka.

• 🌱 Experience (doświadczenie) — konkretne dane, godziny, kilka lokalizacji, jasny opis jak się z wami skontaktować. To pokazuje, że sklep działa na co dzień, a nie tylko „w internecie”.
• 🎓 Expertise (ekspertyza) — uporządkowana strona, czytelny formularz, zgoda RODO, recaptcha. Nie krzyczy „jesteśmy ekspertami”. Po prostu wygląda na to, że ktoś tu myślał o obsłudze.
• 🏛️ Authoritativeness (autorytet) — pełne dane firmy, mapa, spójna identyfikacja z resztą sklepu. Trudniej zaufać sklepowi, którego nie da się namierzyć.
• 🤝 Trustworthiness (wiarygodność) — to serce tej strony. Adres, telefon, mail, formularz który naprawdę dochodzi, zgoda na przetwarzanie danych. Klient ma poczucie, że zostawia wiadomość u kogoś, kto za nią odpowie.

W sklepach internetowych — a to treść bliska pieniądzom i danym osobowym — wiarygodność nie jest dodatkiem. Strona kontaktowa jest jednym z najprostszych, najbardziej ludzkich elementów E-E-A-T, jakie sklep może mieć.

🙏 Nie twierdzę, że sam formularz „załatwia SEO”. Twierdzę tylko, że sklep bez uczciwego kontaktu wygląda słabiej. I klienci to czują szybciej niż algorytm.

 

Dlaczego w ogóle napisałem ten moduł

PrestaShop ma natywną stronę kontaktową i moduł formularza. Da się z nich korzystać. Problem w tym, że od lat wygląda to jak funkcja, o którą platforma po prostu nie dba. Formularz jest, ale strona jako całość — dane firmy, układ, mapa, zgoda, wygląd, wielojęzyczność — zostaje na barkach motywu albo kolejnych wtyczek.

Przy wdrożeniach sklepów ciągle wychodziło to samo: klient chce porządny kontakt, a ja muszę składać go z kawałków. Native contact + ręczny CMS + mapa w iframe + zgoda dopisana w szablonie. Działa, ale jest kruche i brzydkie w utrzymaniu.

Podobny problem znam z OpenCart i WooCommerce. Tam też kontakt bywa „stroną informacyjną plus plugin na formularz”. Platforma sprzedaje produkty. Strona „napisz do nas” jest na szarym końcu. Nie oceniam tego z pretensją — tak po prostu jest. Sklepy jednak potrzebują czegoś więcej niż samego pola na wiadomość.

Dlatego powstał moduł Design Cart Contact Page (dc_contact_page). Chciałem mieć w PrestaShop jedno miejsce, w którym składa się całą stronę kontaktową: dane, formularz, mapę, zgody i wygląd. Bez walki z motywem przy każdym sklepie.

Jeśli ktoś ma już dobrą stronę kontaktu w motywie — super. Ten moduł jest dla tych, którym native nie wystarcza.

 

Co robi Design Cart Contact Page

Moduł może zastąpić natywną stronę kontaktu PrestaShop albo działać pod własnym adresem. Na froncie układa się klasycznie: dane po lewej, formularz po prawej, mapa pod spodem albo w lewej kolumnie pod danymi.

W skrócie:

• 📍 dane kontaktowe z ikonami Lucide, kolorem i separatorami między siedzibami,
• 📝 własny kreator pól formularza (tekst, e-mail, liczba, treść, radio, checkbox, plik),
• ✅ zgoda RODO, reCAPTCHA v2 i kilka prostych zabezpieczeń antyspamowych,
• 🗺️ Google Maps z wieloma pinami i stylem ze Snazzy Maps,
• 🎨 typografia tytułów i wygląd formularza z panelu, bez grzebania w CSS,
• 🌍 treści wielojęzyczne — przełącznik języka jest cały czas nad kartami.

Wersja opisana w tym artykule: 1.0.5. Kompatybilność: PrestaShop od 1.7 w górę (moduł powstał i był rozwijany przy PrestaShop 9).

 

Dokumentacja panelu — karta po karcie

Po instalacji wchodzisz w Moduły → Design Cart Contact Page → Konfiguruj. Na górze jest pasek języka treści. Działa dla wszystkich kart. Zanim coś zapiszesz w polach wielojęzycznych, wybierz język, w którym edytujesz.

💾 Zapis jest wspólny dla całego formularza (przycisk u góry i na dole). Nie zapisuje się „tylko aktywna karta” — zapisuje się cała konfiguracja.

 

Karta Ogólne

Tryb strony

Tu decydujesz, skąd bierze się publiczna strona kontaktu.

• 🔁 Zastąp natywną stronę kontaktu — moduł przejmuje standardowy adres kontaktu PrestaShop. Klient klika „Kontakt” jak dotychczas, a widzi stronę z modułu.
• 🔗 Dedykowana strona modułu — strona żyje pod własnym aliasem. Przydaje się, gdy natywnego kontaktu nie chcesz ruszać albo potrzebujesz drugiego, osobnego landingu.

Alias dedykowanej strony działa tylko w trybie dedykowanym. Obok widać publiczny adres URL — tylko do odczytu, żeby skopiować link do menu albo stopki.

Widoczne sekcje

Trzy przełączniki:

• 📌 Pokaż dane kontaktowe — lewa kolumna,
• 📝 Pokaż formularz — prawa kolumna,
• 🗺️ Pokaż mapę — mapa na froncie.

Gdy mapa jest włączona, pojawia się położenie mapy:

• Wyświetlaj mapę pod danymi kontaktowymi — mapa wchodzi do lewej kolumny, pod adresami, obok formularza.
• Wyświetlaj mapę pod danymi kontaktowymi i formularzem — mapa na pełną szerokość pod obiema kolumnami. To układ domyślny.

reCAPTCHA v2

Opcjonalna ochrona formularza checkboxem Google.

• włączenie reCAPTCHA v2,
• klucz witryny (site key),
• klucz tajny (secret key) — po zapisaniu pole jest puste; zostaw puste, jeśli nie chcesz zmieniać zapisanego sekretu.

Klucze bierzesz z konsoli Google reCAPTCHA (typ: checkbox, v2). Bez włączonego recaptcha formularz i tak ma honeypot i minimalny czas wypełnienia — o tym na karcie Formularz.

 

Karta Tytuły

Cztery bloki typografii. Każdy ma własny tekst (wielojęzyczny) i wygląd.

1. 🏠 Tytuł strony — nagłówek w pełnoszerokościowym hero. Tu dodatkowo ustawiasz kolor tła belki.
2. 📌 Tytuł sekcji kontaktowej — nad lewą kolumną.
3. 📝 Tytuł sekcji formularza — nad prawą kolumną.
4. 🗺️ Tytuł sekcji mapy — nad mapą.

W każdym bloku (tam, gdzie ma to sens) znajdziesz:

• Tytuł — treść nagłówka, osobno dla każdego języka,
• Tag nagłówka — H1–H6 (na hero strony warto zostawić H1),
• Kolor tekstu — picker z paletą i pipetą,
• Kolor tła — tylko przy tytule strony (hero),
• Rozmiar czcionki w pikselach,
• Grubość czcionki,
• Wyrównanie — lewo, środek, prawo,
• Wersaliki — przełącznik uppercase.

Jeśli pole tytułu zostawisz puste, ten nagłówek po prostu się nie wyświetli. Nie trzeba usuwać całego bloku.

 

Karta Dane kontaktowe

Tu składasz lewą kolumnę strony. To nie jest jeden duży edytor tekstu — to lista kafelków, które możesz przeciągać.

Dwa przyciski:

• ➕ Dodaj informację kontaktową — telefon, adres, e-mail, godziny, NIP, cokolwiek potrzebujesz.
• ➖ Dodaj separator — linia między siedzibami albo działami (np. Warszawa / Kraków). Separator może mieć opcjonalny tytuł.

Każda pozycja kontaktowa ma:

• 🎨 ikonę Lucide — wybierasz z pickera,
• 🎨 kolor ikony — ten sam picker co przy tytułach i formularzu,
• pogrubienie treści,
• etykietę (wielojęzyczną), np. „Telefon”,
• treść (wielojęzyczną) — tu wpisujesz numer, adres, godziny; nowa linia łamie tekst na froncie.

Kolejność zmieniasz przeciąganiem uchwytu. Kosz usuwa kafelek. Ostatnią pozycję też można skasować — lewa kolumna będzie wtedy pusta, jeśli nie dodasz nic nowego.

 

Karta Formularz

To najszersza karta. Składa się z kilku sekcji.

Ustawienia poczty

• 📬 E-mail odbiorcy — na ten adres idzie wiadomość z formularza.
• Temat wiadomości — wielojęzyczny temat maila do sklepu.
• Komunikat sukcesu — co zobaczy klient po udanym wysłaniu.
• Komunikat błędu — co zobaczy, gdy wysyłka się nie uda.

Pola formularza

Kreator pól. Domyślnie są imię i nazwisko, e-mail i wiadomość. Możesz dodać kolejne, zmienić kolejność przeciąganiem i usunąć zbędne (zostaje co najmniej jedno pole).

Przy każdym polu ustawiasz:

• etykietę wyświetlaną (wielojęzyczną),
• nazwę pola — identyfikator w formularzu, np. name, email, company,
• typ: text, number, email, textarea, radio, checkbox, file,
• wymagane — tak / nie.

Dla radio, checkbox i pliku pojawia się dodatkowe pole Opcje (jedna wartość w wierszu):

• radio / checkbox — etykiety opcji do wyboru,
• plik — dozwolone rozszerzenia, np. pdf, jpg, png. Limit wielkości to 5 MB.

Na dole tej sekcji jest etykieta przycisku wysyłania (wielojęzyczna), np. „Wyślij”.

Na froncie formularz ma własną walidację (komunikaty przy polach, nie dymki przeglądarki): puste wymagane pola, format e-maila, zgoda RODO i recaptcha. Serwer i tak sprawdza token, honeypot, czas, linki, RODO i captcha jeszcze raz.

Zgoda RODO

• przełącznik Pokaż ramkę RODO,
• treść zgody — wielojęzyczna, nowa linia łamie tekst. Checkbox jest wymagany, zanim klient wyśle formularz.

Bezpieczeństwo

Działa razem z recaptcha, nie zamiast niego.

• 🍯 Ukryte pole anti-bot (honeypot) — człowiek go nie widzi; bot często je wypełnia i wiadomość odpada.
• ⏱️ Minimalny czas wypełniania w sekundach — zbyt szybkie wysłanie jest odrzucane.
• 🔗 Odrzucaj wartości z URL (http, https, www) — przydaje się, gdy spam wkleja linki w każde pole.

Wygląd formularza

Kolory, obramowania i typografia bez edycji szablonu. Wszystkie kolory idą przez ten sam picker.

Blok formularza:

• tło bloku,
• domyślny kolor tekstu.

Etykiety pól:

• kolor, rozmiar, grubość, wersaliki.

Pola:

• tło, kolor tekstu, kolor i grubość ramki, rozmiar czcionki, zaokrąglenie.

Przycisk wysyłania:

• tło, kolor tekstu, kolor ramki,
• to samo dla stanu hover,
• grubość ramki, zaokrąglenie, rozmiar i grubość czcionki,
• wyrównanie (lewo / środek / prawo),
• wersaliki.

 

Karta Mapa

Google Maps

• 🔑 Google API Key — klucz z Google Cloud z włączonym Maps JavaScript API.
• 🔍 Domyślny zoom (1–20), używany gdy jest jeden pin.
• 📐 Wysokość mapy w pikselach (200–900).
• 📍 Obrazek pina — własna grafika (png, jpg, gif, webp, svg). Można też zaznaczyć usunięcie aktualnego pina i wrócić do domyślnej pinezki Google.

Bez klucza API mapa się nie załaduje. To ograniczenie Google, nie modułu.

Lokalizacje

Możesz dodać kilka siedzib. Każda ma:

• nazwę (wielojęzyczną) — np. „Siedziba główna”,
• adres (wielojęzyczny) — treść dymka po kliknięciu pina,
• szerokość i długość geograficzną.

Współrzędne najłatwiej skopiować z latlong.net. Przy kilku pinach mapa sama dopasowuje kadr. Kolejność na liście zmieniasz przeciąganiem. Lokalizację można usunąć — także ostatnią.

Styl Snazzy Maps

Tu wklejasz JSON stylu mapy ze snazzymaps.com. Dzięki temu mapa nie musi być standardowo niebiesko-żółta — może pasować do kolorystyki sklepu. Puste pole = domyślny wygląd Google.

 

Pobieranie i instalacja

Moduł można pobrać z dwóch miejsc:

0

 

Instalacja idzie przez natywny instalator PrestaShop. Nie trzeba wgrywać plików po FTP, chyba że tak wolisz.

1. W panelu sklepu wejdź w Moduły → Menedżer modułów.
2. Kliknij Wgraj moduł (albo „Upload a module”, zależnie od języka panelu).
3. Wskaż paczkę ZIP z modułem.
4. Po wgraniu kliknij Instaluj przy Design Cart Contact Page.
5. Wejdź w Konfiguruj, uzupełnij dane, formularz i mapę, zapisz.
6. Na froncie sprawdź stronę kontaktu (natywną albo dedykowany URL z karty Ogólne).

Jeśli wybierzesz tryb dedykowanej strony, dodaj link do menu albo stopki ręcznie — PrestaShop samo nie wstawi nowej pozycji w nawigacji.

Do mapy potrzebujesz własnego klucza Google. Do recaptcha — własnej pary kluczy z konsoli Google. Moduł ich nie dostarcza, tylko przyjmuje.

Przy odinstalowaniu znikają zapisane ustawienia modułu. Same wiadomości, które zdążyły dojść na skrzynkę, zostają w poczcie — moduł nie prowadzi osobnej skrzynki w panelu sklepu.

 

Na zakończenie

Strona kontaktowa nie wygra sam z siebie rankingu. Może jednak sprawić, że sklep przestanie wyglądać jak anonimowa witryna z koszykiem. Adres, telefon, mapa, uczciwa zgoda i formularz, który naprawdę dochodzi — to mała rzecz, a klient od razu czuje różnicę.

Jeśli w dokumentacji czegoś brakuje albo któraś opcja jest opisana niejasno, daj znać. Poprawię. 🙌