6–10 minut
Cześć! W drugiej części przedstawię jak za pomocą CSS stylizować formularz na urządzeniach mobilnych jak smartfon i tablet. Za zmianę wyglądu odpowiada Media Queries. W poniższym tekście wyjaśnię pojęcie takiej jak Media Queries, orientacja pionowa i pozioma oraz jak zmienić wygląd formularza kontaktowego we wtyczce Contact Form 7.
Zapraszam do lektury!
Definicja
Media Queries w CSS pozwala na dopasowanie wyglądu strony internetowej do urządzeń mobilnych, takich jak telefony i tablety. Strona automatycznie zmienia swój wygląd w zależności od wielkości i rozdzielczości ekranu. Jeżeli ustawimy witrynę pod odpowiednią rozdzielczość ekranu smartfona, będzie ona czytelna i wygodna w obsłudze. Na przykład, gdy otwierasz stronę na telefonie, tekst może być większy lub mniejszy niż na komputerze, przyciski staną się bardziej czytelne, a menu dostosuje się do wielkości ekranu. Strona będzie wyglądała dobrze i działała poprawnie na każdym urządzeniu.
W przypadku wtyczki Contact Form 7, która umożliwia dodanie formularza kontaktowego na witrynie, na smarfonie formularz wygląda nieestetycznie i dla użytkownika, może on utrudniać wypełnianie pól np. przyciski, mogą być za małe lub pola zbyt szerokie. Dlatego zastosujemy Media Queries, który pomaga dopasować formularz do rozmiaru ekranu telefonu, poprzez zmianę szerokości pól, wielkość czcionki czy przycisków, aby były wygodniejsze w obsłudze.
Warto wiedzieć, że Media Queries mogą także wykrywać orientację ekranu, a dokładniej – czy ekran jest ustawiony w pozycji pionowej (portrait) czy poziomej (landscape). Orientacja ekranu jest istotna, ponieważ gdy użytkownik obraca telefon, układ strony zmienia się, aby lepiej dopasować się do ekranu i zapewnić wygodniejsze przeglądanie witryny.
Tryb pionowy i poziomy
Orientacja pionowa (orientation: portrait) – sprawdza, czy ekran jest ustawiony pionowo,
np. telefon trzymany w normalny sposób.
Orientacja pozioma (orientation: landscape) – sprawdza, czy ekran jest ustawiony poziomo,
np. telefon obracany jest na bok.
Kiedy urządzenie jest w trybie pionowym (portrait), formularz ma normalny rozmiar czcionki i marginesy, ale jeśli użytkownik obróci urządzenie poziomo (landscape), zwiększa się rozmiar czcionki i margines wewnętrzny, czyli padding, ponieważ ekran jest szerszy i mamy więcej przestrzeni do wykorzystania.
Zastosowanie orientation w media queries pozwala na jeszcze lepsze dopasowanie wyglądu strony w zależności od tego, jak użytkownik trzyma swój telefon. Na przykład na telefonie w trybie poziomym może być więcej miejsca na szerszy formularz, a w trybie pionowym lepiej sprawdzi się formularz
o mniejszej szerokości.
W jaki sposób zmienić wygląd na urządzeniach mobilnych?
Tak jak w poprzedniej części przechodzimy w Kokpicie na zakładkę Wygląd – Dostosuj – Dodatkowy CSS
Skorzystam z wcześniej wprowadzonego formularza kontaktowego za pomocą wtyczki Contact Form 7. Po lewej stronie widać kod wprowadzony w CSS na monitor komputera. W tym samym miejscu oddzielając komentarzem, wprowadzę kod odpowiadający za wygląd formularza po stronie mobilnej.
Po przełączeniu na widok Formularza na tablecie, jak widać formularz nie, jest dostosowany, ma za małe pola do wpisania tekstu przez użytkownika, również pole do wpisania wiadomości jest za duże. Formularz jest za wąski, jeżeli chodzi o widok na Tablecie. Pokaże, jak poprzez kod CSS można wszystko poprawić.
Każdy kod, którym dostosujemy wygląd do urządzeń mobilnych, zaczyna się od @media. Następnie wpisujemy maksymalną rozdzielczość ekranu, w przypadku Tabletu jest to 1024 px, czyli max-width oraz orientację ekranu poziomą, czyli portrait. W wygląd dostosują WordPress, tylko umożliwia podgląd widoku o orientacji pionowej, poniżej wskaże gdzie znaleźć drugą orientację ekranu poziomą, czyli landscape.
Rozpocznę od ogólnej klasy formularza ze wtyczki Contact Form 7 mianowicie .wpcf7-form i zwiększę szerokość formularza na 70%, bo jak pamiętamy, na ekranie monitora komputera jest ustawione 50%. Odsunę formularz od lewej, aby był bardziej pośrodku, stosując kod margin-left: 15%. Następnie zmienię wielkość czcionki nazwy etykiet poprzez wpisanie .wpcf7-form label (etykieta), otworzę nawiast klamrowy i wpiszę font-size, czyli wielkość czcionki 12 px. Kolejną rzeczą do dostosowania będzie wielkość pola do wpisania tekstu przez użytkownika textarea. Zacznę od głównej klasy .wpcf7 textarea i ustawię wysokość – height na 150px. Ostatnie co zmodyfikuję to wyrażenie zgody. Pomniejszę czcionkę. Jego klasa to .wpcf7-form-control-wrap input [type=”checkbox”],
za wielkość czcionki odpowiada font-size, ustawie wielkość na 12px.
Po skończeniu zmiany, wyglądu po stronie tabletu, przechodzę na ostatnią zakładkę, czyli smartfony. Jak widać powyżej formularz, nie jest dostosowany. Nazwa etykiety znajduję się bliżej prawej strony oraz pole do wpisania wiadomości przez użytkownika jest za duże.
Tak jak wcześniej rozpoczynam od wpisania @media maksymalna szerokość – max-width ustawiam na 600 px oraz orientacja ekranu na pionową – portrait. Po czym zajmę się stylizacja formularza od ogółu do szczegółu.
Wpisuję ogólną klasę .wpcf7-form i zwiększam szerokość formularza do 80%, dodatkowo odsuwam go od lewej marginesem, margin-left: 10%. Zmniejszam czcionkę nazwy etykiet na 12px, wprowadzam kod font-size: 12px i kończę średnikiem. Również odsuwam etykiety, ich nazwę od lewej strony kontenera, w którym się znajduje formularz kodem margin-left: 28%. Pole do wpisania przez użytkownika wiadomości pomniejszam poprzez zastosowanie klasy .wpcf7 textarea i ustawienie wysokości height na 100px. 100px to za mało więc wprowadzę 150px. Przycisk Wyślij, nie jest pośrodku. Przesunę go marginesem z lewej, ale najpierw zacznę od klasy, .wpcf7-form input [type=”submit”] wymienne stosowany jest „button”, następnie kod margin-left: 30%, zmiana czcionki na mniejszą przy ekranie smartfona – font-size 12px oraz użyję margin-bottom z wartością ujemną na -5% celem wprowadzenia marginesu dolnego po to by przycisk znajdował się bliżej formularza.
Na końcu użyje klasy .wpcf7-form-control-wrap, to jest klasa służąca modyfikacji wyrażenia zgody. Zmniejszę jej czcionkę font-size: 10px; margines od góry ustawie na -1%, odpowiada za to margin-top oraz odsunę od lewej strony – margin-left: 3%, by bardziej dostosował się do szerokości formularza.
Wygląd formularza w pozycji poziomej możemy zmienić w narzędziu developerskim w przeglądarce Google Chrome czy Firefox Developer Edition. Przeszłam do narzędzia developerskiego za pośrednictwem Google Chrome, klikając na formularz prawym przyciskiem myszki i wybierając ostatnią opcję Zbadaj.
W narzędziu developerskim jest cały kod naszej strony internetowej stworzonej w WordPress. U góry strony obok zakładki Elementy jest przycisk odpowiadający za przełączenie widoku urządzenia – wygląda jak monitor komputera ze smartfonem.
Dostosowanie formularza w orientacji poziomej landscape odbywa się w ten sposób: kod CSS wpisujemy tak jak dotychczas, czyli w zakładce Wygląd – Dostosuj – Dodatkowy CSS. Następnie przechodzimy na drugą zakładkę, w której znajduje się narzędzie developerskie i po wpisaniu kodu tak odświeżamy, strony np. klikając F5 lub poprzez kliknięcie, w pasku adresu strony internetowej i klikamy Enter.
Nową rozdzielczość lub orientację ekranu wpisujemy pod wskazaną wcześniej orientacją ekranu, czyli rozpoczniemy od rozdzielczości tabletu 1024px i orientacji pionowej, po czym pod spodem wprowadzamy kolejny raz rozdzielczość tabletu 1024px, ale orientację poziomą – landscape. Ma to na celu zachowania czystości kodu oraz gdy powrócimy do kodu za jakiś czas zorientować się w nim.
Wpisujemy @media maksymalna szerokość max-width 1024px, ale orientation landscape. Podobnie jak wyżej ogólna klasa kontenera .wpcf7-form i zwiększam szerokość na 70% i odsuwam od lewej strony marginesem, margin-left: 15%;.
Formularz w pozycji pionowej jest teraz szerszy i użytkownik ma więcej miejsca na uzupełnienie pól.
Zmieniam wielkość czcionki nazwy etykiet na 12px poprzez font-size. Textarea gdzie użytkownik witryny wpisuje wiadomość, jest za duża, zatem pomniejszam do 150px, odpowiada za to kod: .wpcf7 textarea, height – wysokość – 150px;. Ostatnia zmiana czeka wyrażenie zgody. Tutaj również zmieniam czcionkę na 12px, wprowadzając klasę .wpcf7-form-control-wrap input[type=”checkbox”] a następnie font-size: 12px; kończąc średnikiem. Kod ma taką strukturę klasa nazwa klasy nawias klamrowy a w nim nazwa modyfikacji dwukropek wartość w pikselach,
czy w procentach oraz zawsze na końcu średnik.
Tak wygląda formularz w narzędziu developerskim po wprowadzeniu zmian kodem CSS.
Została jeszcze rozdzielczość na smartfony. Tak wygląda formularz po wprowadzeniu zmian przy orientacji poziomej, czyli landscape. Kod, który zastosowałam, jest następujący: @media maksymalna szerokość max-width 600px orientation landscape. W przycisku Wyślij zmieniłam czcionkę na 12px, przypomnę klasę i całą ścieżkę .wpcf7-form input [type=”submit”] nawias klamrowy {} a w nim font-size: 12px;. Dodatkowo w wyrażeniu zgody pomniejszyłam czcionkę na 10px. Ścieżka .wpcf7-form-control-wrap nawias klamrowy {} a w środku font-size: 10px;.
Ostatnia rozdzielczość to @media {max-width 600px and orientation portrait}, maksymalna szerokość 600 pikseli i orientacja pionowa. Cały formularz został zmniejszony do 50% szerokości kontenera. Ogólna klasa .wpcf7-form otwarcie nawiasu klamrowego { width: 50%; – szerokość formularza oraz margin-left, margines z lewej strony na 25%; i zamykam nawiasem klamrowym }. Wielkość czcionki nazw etykiet dopasuję do szerokości ekranu, zmniejszając ją na 10px. Ponownie klasa .wpcf7-form label (etykieta) { font-size: 10px;, chce, żeby etykieta była bardziej na środku zastosuję margin-left czyli margines z lewej strony 30%; i zakończę nawiasem klamrowym }. Jak w każdej szerokości formularza zmniejszę pole do wpisania wiadomości, .wpcf7 textarea otwieram nawias { height: 100px, wysokość ustawie na 100 pikseli. Przycisk wysyłania wiadomości przez użytkownika przemieszczę marginesem z lewej, margin-left -10%, wielkość czcionki font-size: 10px; a mieści się on w klasie .wpcf7-form input [type=”submit”] lub button. Wyrażenie zgody przez użytkownika ustawie względem formularza poprzez odsunięcie go marginesem. Zaczynamy od klasy .wpcf7-form-control-wrap input [type=”checkbox”] { margin-left: wartość ujemna -10%; } i zamykam nawiasem klamrowym.
Zadanie dla Was! Spróbujcie sami dopasować formularza kontaktowy za pomocą CSS.
Wiecie już, jak wygląda struktura kodu, gdzie go należy umieścić w WordPress
oraz jakie są dostępne rozdzielczości do dopasowania.
Dajcie znać w komentarzu czy udało się Wam dopasować formularz, czy były jakieś problemu
i jakie były tego efekty.
Powodzenia!
Zajrzyj do pierwszej części, w której zmiany dokonywałam na ekran monitora, link poniżej!
Strona działa, ale nikt się nie odzywa – co sprawdzić?
Strona działa, ale nikt się nie odzywa. Co sprawdzić? Wchodzisz do sklepu, wszystko wygląda…
Strona działała, ale Google jej nie widział. Sprawdziłam te ustawienia WordPress
Strona działa, można ją otworzyć z linku, więc pojawia się pytanie:
dlaczego nie wyświetla się…
Formularz kontaktowy nie wysyła wiadomości
Pewnego dnia dzwoni klient i mówi:
Wysłałam tydzień temu zapytanie przez formularz na stronie,
ale…
WordPress to nie tylko szablon.
WordPress to nie tylko szablon. Co decyduje o tym, czy strona naprawdę działa Na…
SEO-wiec, copywriter i marketer czym się różnią i jak wpływają na stronę
Gdy planujesz stronę internetową albo chcesz ją poprawić, pojawiają się trzy pojęcia:
SEO, copywriting…