Contact Form 7 – własne szablony

Open in ChatGPT
Ask questions and chat about this page directly in ChatGPT

O wtyczce Contact Form 7

Contact Form 7 to popularna i darmowa wtyczka do WordPressa, która pozwala użytkownikom tworzyć i zarządzać formularzami kontaktowymi na swoich stronach. Jest szeroko stosowana ze względu na swoją prostotę, elastyczność oraz możliwości dostosowywania.

Wstęp

W tym poradniku poprowadzę Cię krok po kroku przez proces tworzenia niestandardowych szablonów formularza Contact Form 7, które możesz wykorzystać na dowolnej stronie, którą posiadasz, zarządzasz lub użytkujesz.

• Uwaga: niektóre porady i sztuczki, którymi się tutaj podzielę, pochodzą z moich wcześniejszych poradników na ten temat: https://wp-doin.com/category/contact-form-7/, więc pomysł polega na ponownym ich wykorzystaniu.
• Uwaga 2: zakładam, że wiesz już, jak zainstalować, aktywować i skonfigurować Contact Form 7 oraz jak z niego korzystać, więc tę część pomijam.
• Uwaga 3: Potrzebujesz podstawowej znajomości HTML i CSS, aby zrozumieć ten poradnik.

Konfiguracja Contact Form 7

Domyślny wygląd formularza Contact Form 7

Domyślnie formularz Contact Form 7 wygląda tak:

Konfiguracja niestandardowego szablonu Contact Form 7

Pomysł polega na wykorzystaniu bazowego Contact Form 7 bez dodatkowych wtyczek. Aby to zrobić, proponuję dodać niestandardową klasę do formularza Contact Form 7. Można to zrobić na dwa proste sposoby:

• 1. Owinąć cały formularz w niestandardowy kontener z własną klasą CSS – patrz załączony obrazek.

• 2. Lub podczas osadzania formularza, dodać do niego niestandardową klasę CSS, na przykład:

contact-form-7 id="1234" title="Contact form Template" html_class="c-custom-template-wrap c-custom-template-wrap--blue" – pamiętaj o dodaniu nawiasów kwadratowych [] wokół tego tekstu, w przeciwnym razie formularz się nie załaduje.

Następnie użyjemy tej konfiguracji jako bazy dla dwóch różnych szablonów. Mówiąc prosto: każda inna klasa przypisana do formularza Contact Form 7 będzie odpowiadała nieco innemu wyglądowi, co umożliwi ich dostosowanie. Przenoszenie kodu z jednej strony na drugą powinno być proste: po prostu skopiuj kod HTML, wklej CSS i przypisz inną klasę do wybranego formularza. Lub: utwórz dwa różne formularze oparte na powyższym znaczniku.

Aby uprościć sprawę, zastosuję pierwszą z opisanych metod. Załóżmy, że nasz końcowy kod HTML formularza Contact Form 7 wyglądałby następująco:

Teraz, mając gotowy szablon, możemy przypisać różne klasy CSS, które będą zmieniały jego wygląd. Zacznijmy od czegoś naprawdę prostego.

Szablon Contact Form 7: Niebieski

Możesz zauważyć, że dodaliśmy dwie klasy do naszego szablonu formularza Contact Form 7: c-custom-template-wrap oraz c-custom-template-wrap–blue. Pierwsza z nich służy do ogólnej modyfikacji wyglądu formularza, a druga do zmiany jego kolorystyki na niebieską.
Zrobimy teraz małe dopracowanie. Upewnimy się, że nasz formularz ma dwie kolumny i niebieskie tło. Aby to zrobić, przejdź do Wygląd → Dostosuj → Dodatkowy CSS lub sekcji Custom CSS. Uwaga: ta opcja zależy od używanego motywu, więc może być konieczne ręczne dodanie kodu: tutaj.

Po tych zmianach nasz niebieski szablon formularza Contact Form 7 będzie miał niebieskie tło, zaokrąglone rogi i będzie podzielony na dwie kolumny:

Szablon Contact Form 7: Żółty

Analogicznie do powyższego przykładu, zrobimy to samo dla żółtego szablonu – zamieńmy klasę .c-custom-template-wrap–blue na .c-custom-template-wrap–yellow i dodajmy poniższy kod CSS:

Po tych zmianach żółty szablon formularza Contact Form 7 będzie wyglądać następująco:

Podsumowanie

Mimo że Contact Form 7 domyślnie nie obsługuje szablonów, bardzo łatwo jest stworzyć własne, korzystając z prostych reguł HTML i CSS. Takie szablony można następnie rozwijać i wykorzystywać jako oddzielne komponenty. Po prostu skopiuj i wklej kod, który stworzyłeś, i zaoszczędź mnóstwo czasu przy ponownym tworzeniu formularzy 🙂

Szukasz alternatywy do Contact Form 7?

Poznaj Gravity Forms – świetne, przystępne cenowo formularze, które są znacznie prostsze w obsłudze niż Contact Form 7.

Gravity Forms to popularna wtyczka do WordPressa, która pozwala tworzyć różnego rodzaju formularze bez konieczności programowania. Możesz wykorzystać ją zarówno do prostego formularza kontaktowego, jak i bardziej rozbudowanych formularzy zapytań ofertowych, rejestracji, zapisów na wydarzenia czy ankiet.

Podstawy Gravity Forms

Najważniejszą zaletą Gravity Forms jest intuicyjny kreator formularzy. Formularz buduje się metodą „przeciągnij i upuść” – wybierasz potrzebne pola i umieszczasz je w odpowiedniej kolejności. Do dyspozycji są m.in. pola tekstowe, adres e-mail, telefon, lista rozwijana, pola wyboru, przyciski opcji, przesyłanie plików czy pola dotyczące płatności.

Każde pole można następnie skonfigurować. Możesz określić jego nazwę, opis, zaznaczyć, czy jest wymagane, ustawić domyślną wartość czy zdefiniować sposób walidacji wpisywanych danych.

Gravity Forms pozwala również tworzyć bardziej zaawansowane formularze z logiką warunkową. Oznacza to, że kolejne pola mogą pojawiać się tylko wtedy, gdy użytkownik wybierze konkretną odpowiedź. Przykładowo, jeśli w formularzu zapytania klient zaznaczy „Chcę otrzymać wycenę”, mogą automatycznie pojawić się dodatkowe pytania dotyczące zakresu usługi.

Dużą zaletą jest także obsługa powiadomień i zgłoszeń. Po wysłaniu formularza dane mogą zostać zapisane w WordPressie, a administrator może otrzymać wiadomość e-mail z informacją o nowym zgłoszeniu. Można również skonfigurować automatyczną wiadomość zwrotną dla osoby, która wypełniła formularz.

Gravity Forms a Contact Form 7

W porównaniu z Contact Form 7 Gravity Forms stawia przede wszystkim na wygodę obsługi. Contact Form 7 jest bardzo prosty i darmowy, ale przy bardziej rozbudowanych formularzach często wymaga korzystania z dodatkowych wtyczek, konfiguracji i znajomości składni formularzy.

Gravity Forms oferuje więcej funkcji bezpośrednio w jednym narzędziu. Dzięki temu łatwiej stworzyć formularz, zarządzać jego ustawieniami i później modyfikować go bez ingerowania w kod.

Kiedy warto użyć Gravity Forms?

Gravity Forms sprawdzi się szczególnie wtedy, gdy formularz ma robić coś więcej niż tylko przesyłać wiadomość e-mail. Można go wykorzystać m.in. do:

• formularzy kontaktowych,
• zapytań ofertowych,
• zapisów na wydarzenia i szkolenia,
• ankiet i formularzy opinii,
• rejestracji użytkowników,
• formularzy z możliwością przesyłania plików,
• formularzy płatności i zamówień,
• wieloetapowych formularzy,
• formularzy wykorzystujących logikę warunkową.

Podsumowując, Gravity Forms to dobre rozwiązanie dla osób, które chcą szybko tworzyć profesjonalne formularze w WordPressie, ale nie chcą za każdym razem zajmować się kodowaniem lub konfiguracją wielu dodatkowych rozszerzeń. Największą wartością jest połączenie prostego kreatora z dużymi możliwościami rozbudowy formularzy.

Chcesz wiedzieć więcej? Zajrzyj na nasze wpisy dotyczące Gravity Forms.