Contact Form 7 – własne szablony

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 🙂