Jedną z najważniejszych sekcji każdej strony internetowej jest formularz kontaktowy, który może być tak prosty, jak dodanie kilku prostych pól i przycisku do wysłania wprowadzonych informacji, ale zawsze możemy pójść trochę dalej i jeśli jesteśmy kreatywni, zaimplementować formularz kontaktowy, który nie tylko spełnia swoją funkcjonalność, ale również zapewnia efekt wizualny i przyjazny dla użytkownika.
Zobaczmy, jakie kroki należy następnie wykonać, aby zaimplementować ten formularz, który będzie symulował kopertę, która po najechaniu kursorem myszy pozwoli użytkownikowi wypełnić dane w ramach tego, co będzie literą, a wszystko to za pomocą HTML Tak CSS3.
Aktywa lub zasoby
Najpierw musimy mieć kopertę tam, gdzie trafi nasz list, do tego użyjemy dwóch różnych obrazów, jednego od góry koperty, a drugiego od dołu, co w połączeniu z przejściami da nam pożądany efekt.
Jak widzimy, nie są one wcale skomplikowane, jednak te obrazy znajdują się w repozytorium stworzonym dla tego przykładu, które znajdziesz na końcu samouczka w odpowiednim linku do pobrania.
Budowa formularza
Najpierw utworzymy plik HTML, który będzie się nazywał contact_form.html który będzie zawierał nasz formularz jako taki oraz plik .css, który będzie odpowiadał za obsługę jego stylów oraz przejść, zobaczmy jak to wygląda:
Formularz kontaktowyTeraz wystarczy utworzyć nasz plik .css o nazwie style.css a tam umieścimy style dla naszej formy i wykorzystamy przejścia, aby wygenerować pożądany efekt, najpierw zmienimy nieco wygląd naszego ciała, aby nadać mu wygląd litery:Cześć!
Wiadomość:Wpisz swoje dane
Imię i nazwisko: E-mail:
ciało {tło: #ccc url ('img / bg_carta_fuera.png.webp'); kolor: # 7c7873; font-family: 'helvetica';} p {text-shadow: 0 1px 0 #fff; font-size: 24px;} # wrap {szerokość: 530px; margines: 20px auto 0; wysokość: 1000px;} h1 {margin-bottom: 20px; text-align: center; rozmiar czcionki: 48px; cień tekstu: 0 1px 0 # ede8d9; }Gdy to zrobimy, zaimplementujemy przejścia w div, który zawiera formularz do tego, którego użyjemy przemiana w różnych wariantach dla każdej przeglądarki i z wartością wyluzować Damy Ci efekt powolnego startu i zakończenia:
#form_wrap {przepełnienie: ukryte; wysokość: 446px; pozycja: względna; góra: 0px; -przejście na webkit: wszystkie jedynki z łatwością wychodzą .3; -moz-transition: wszystkie jedynki ułatwiają-wychodzą .3; -o-przejście: wszystkie jedynki luzy ,3 s; przejście: wszystkie 1s luz-w-out .3s;}Teraz z pseudoelementami przed Tak despues de uzupełnimy efekt listu wychodzącego z koperty, zobaczmy:
#form_wrap: przed {content: ""; pozycja: bezwzględna; dół: 128px; lewy: 0px; tło: url ('img / before.png.webp'); szerokość: 530px; wysokość: 316px;} #form_wrap: after {content: ""; pozycja: bezwzględna; dół: 0px; lewo: 0; tło: url ('img / after.png.webp'); szerokość: 530px; wysokość: 260px; }Na koniec dodajemy kilka stylów do przycisku przesyłania, aby kontrolować zarówno wyświetlanie, jak i efekty na nim:
#form_wrap input [type = submit] {pozycja: względna; rodzina czcionek: 'helvetica'; rozmiar czcionki: 24px; kolor: # 7c7873; cień tekstu: 0 1px 0 #fff; szerokość: 100%; wyrównanie tekstu: środek; krycie: 0; tło: brak; kursor: wskaźnik; -moz-border-radius: 3px; -webkit-obramowanie-promień: 3px; promień obramowania: 3px; -przejście na webkit: nieprzezroczystość .6s łatwość-in-out 0s; -moz-transition: nieprzezroczystość .6s łatwość-in-out 0s; -o-przejście: nieprzezroczystość .6s łatwość-w-out 0s; przejście: nieprzezroczystość .6s łatwość-w-out 0s; } #form_wrap: najedź na wejście [typ = prześlij] {z-index: 1;opacity: 1; -przejście na webkit: nieprzezroczystość .5s łatwość-w-out 1.3s; -moz-transition: nieprzezroczystość 0,5 s złagodzenie 1,3 s; -o-przejście: nieprzezroczystość 0,5 s, łatwość wychodzenia 1,3 s; przejście: nieprzezroczystość .5 s złagodzenie 1,3 s;}Zobaczmy więc, jak wygląda nasz początkowy formularz kontaktowy po uruchomieniu go w przeglądarce:
POWIĘKSZAĆ
Jeśli najedziemy na niego kursorem myszy, zobaczymy funkcjonalność jaką wyświetla się formularz, aby móc wprowadzić dane i wysłać:
POWIĘKSZAĆ
Jak widać konstrukcja tego formularza była dość prosta a najlepsze w tym wszystkim jest to, że nie jesteśmy związani z żadną zewnętrzną biblioteką więc jego implementacja jest dość prosta na każdej stronie internetowej, pozostaje tylko każdemu rozszerzyć przykład i wykonać funkcjonalność wysyłam za pomocą niektórych języków programowania, takich jak PHP, Rubin, Pyton lub nawet Node.js.
