Jak stworzyć formularz kontaktowy z wykorzystaniem pseudo selektorów CSS?

Formularze kontaktowe możemy tworzyć na wiele sposobów. Ponieważ są one bardzo popularnym elementem stron internetowych w sieci, możemy znaleźć mnóstwo poradników oraz gotowych rozwiązań, dzięki którym będą one wyglądały nietypowo. Nie zawsze jednak musimy sięgać po rozbudowane rozwiązania, które niejednokrotnie wymagają użycia JavaScript lub podpinania gotowych bibliotek czy frameworków. Dzięki kilku podstawowym pseudo selektorom w języku CSS możemy sami stworzyć dobrze wyglądający i przyjazny użytkownikom formularz.

Poniżej prezentujemy gotowy przykład takiego formularza oraz kilka objaśnień.

See the Pen CSS Pseudo Selectors Form by Eactive (@Eactive) on CodePen.

Nasz formularz prezentuje informacje o tym, co należy wpisać w dane pole w nieco ciekawszy sposób niż klasyczny „placeholder”. Efekt ten możemy uzyskać dodając do każdego z pól element „label” i zamykając je w elemencie „div”, któremu nadajemy pozycjonowanie relatywne. Następnie ustawiamy pozycjonowanie absolutne elementom „label” i deklarujemy ich zachowanie po aktywowaniu wybranego pola. Możemy to zrobić wykorzystując pseudo selektor „:focus”. W powyższym przykładzie „label” przesuwa się nad wybrane pole jednocześnie zmniejszając rozmiar czcionki. Dodatkowo po aktywacji pola dodajemy do niego obramowanie. #wiemyjak

Drugim wykorzystanym w naszym przykładzie pseudo selektorem jest „:valid”. Selektor ten zadziała jednak tylko w przypadku pól, które oznaczymy jako wymagane dodając do nich zapis „required” oraz w zależności od typu pola. Na przykład w polu input typu „text” zadziała po wpisaniu dowolnego ciągu znaków, a dla typu „email” dopiero po wpisaniu adresu w poprawnym formacie. W naszym przykładzie informujemy użytkownika o poprawnym wypełnieniu pola przez dodanie do niego obrazka oraz obramowania. Dodatkowo po wpisaniu w pole poprawnych danych ustawiamy takie same style dla jego elementu label jak w przypadku jego aktywacji, dzięki czemu nie przesłoni on wpisanej treści.

Zaprezentowany przykład to jedynie niewielka część możliwości jaką dają nam pseudo selektory CSS. Zachęcamy do jego modyfikacji oraz samodzielnego eksperymentowania.

Komentarze

Dodaj komentarz

Zamów bezpłatną wycenę

Imię i Nazwisko
E-mail*
Numer telefonu*
Adres strony internetowej*
Treść wiadomości
TAK

Jeśli chcesz zostawić nam więcej danych wypełnij brief.

Otrzymaliśmy twoje zgłoszenie

Dziękujemy!

 

Co dalej?

  1. Otrzymasz od nas maila potwierdzającego zgłoszenie.
  2. Nasz wyspecjalizowany zespół już niedługo skontaktuje się z Tobą i opowie o dalszym procesie współpracy.
  3. W oczekiwaniu na telefon zapraszamy do zapoznania się z naszymi REFERENCJAMI.

KLAUZULA INFORMACYJNA

Informujemy, że:

  1. Administratorem Twoich danych osobowych jest EACTIVE wiemy jak sp. z o.o. sp. k. z siedzibą w Świętej Katarzynie, zarejestrowana pod adresem ul. Główna 26/2, 55-010 Święta Katarzyna, reprezentowaną przez: Michała Kliszczaka - Prezesa Zarządu.
  2. Administrator nie wyznaczył Inspektora Ochrony Danych Osobowych. Wszelkie kwestie dotyczące danych osobowych można kierować na e-mail: ochronadanych@eactive.pl lub pisemnie na adres korespondencyjny: EACTIVE wiemy jak sp. z o.o. sp. k. ul. Aleksandra Zelwerowicza 18 A, 53-676 Wrocław.
  3. Twoje dane będą przetwarzane w celu odpowiedzi na zapytanie oraz przygotowania i przedstawienia propozycji współpracy.
  4. Podstawę prawną przetwarzania Twoich danych osobowych jest art. 6 ust. 1 lit. a RODO, czyli Twoja zgoda na przetwarzanie danych osobowych w jednym lub większej liczbie określonych celów oraz art. 6 ust. 1 lit. b RODO, zgodnie z którym przetwarzanie danych jest konieczne w celu podjęcia działań na żądanie osoby, której dane dotyczą.
  5. Dane osobowe nie będą przekazywane innym odbiorcom.
  6. Twoje dane osobowe będą przetwarzane do czasu cofnięcia wyrażonej zgody bądź złożenia sprzeciwu wobec przetwarzania danych.
  7. Podanie danych osobowych jest dobrowolne, jednak podanie adresu e-mail i numeru telefonu jest niezbędne do obsługi zapytania.
  8. Administrator nie przetwarza Twoich danych osobowych przy użyciu narzędzi do zautomatyzowanego podejmowania decyzji, w tym profilowania.
  9. Przysługuje Ci prawo do żądania od Administratora dostępu do Twoich danych osobowych, ich sprostowania, usunięcia, ograniczenia przetwarzania lub ich przeniesienia.
  10. Przysługuje Ci prawo do wniesienia sprzeciwu wobec przetwarzania Twoich danych, a także prawo do cofnięcia wyrażonej zgody w dowolnym momencie - wycofanie zgody nie ma wpływu na zgodność z prawem przetwarzania, którego dokonano na podstawie Twojej zgody przed jej wycofaniem.
  11. W przypadku uznania, że przetwarzanie przez Administratora danych osobowych narusza przepisy RODO przysługuje Ci prawo do wniesienia skargi do organu nadzorczego (tj. Prezesa Urzędu Ochrony Danych Osobowych).

Więcej informacji na temat zasad przetwarzania i ochrony danych osobowych przez EACTIVE wiemy jak sp. z o.o. sp. k. znajdziesz w naszej Polityce Prywatności, dostępnej tutaj.

Rozumiem