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.

#wiemyjak prowadzić skuteczną strategię SEO i SXO
POZNAJ naszą ofertę na POZYCJONOWANIE

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.