Strony WWW bez Kodowania: Obsługa i style Formularza

0:00Cześć, witaj w kolejnej lekcji.

0:01Gdzie jesteśmy dokładnie w tym miejscu, gdzie byliśmy przed chwilą.

0:04Zajmiemy się teraz dostosowaniem formularza.

0:06To co w sumie moglibyśmy zrobić,

0:07jeśli zaznaczymy cały kontener to mamy

0:10możliwość zmiany procentowej szerokości kolumn, które tu są.

0:13Wydaje mi się, że tu jest trochę szersza ta kolumna środkowa.

0:17W związku z tym spróbujmy może zmienić ją na szerokości powiedzmy 39%.

0:23Wtedy automatycznie pozostałe się dostosują i wygląda to bliżej oryginału.

0:28No dobra, to teraz przejdźmy do samego formularza.

0:30Zaznaczam formularz.

0:32I co my tutaj mamy?

0:33Po pierwsze ten formularz jest ułożony

0:35trochę inaczej i zawiera jeszcze jakieś tło.

0:37Takie półprzezroczyste tło, a pola formularza znajdują się obok siebie.

0:41Ponieważ wcześniej zdefiniowaliśmy już tę strukturę pól.

0:44A jeśli chodzi o ustawienia wysyłania i samej konfiguracji tego co ma, jak ma

0:48działać formularz, to zrobimy to chwilę później.

0:50To teraz możemy już przejść do tej najważniejszej sekcji na tą lekcje, czyli

0:54do sekcji Appearance, gdzie zmienimy właśnie wygląd.

0:57I pierwsza rzecz to ustawienia form.

0:59Tutaj jest to podzielone na 3 zakładki Form, Fields i Button.

1:02W zakładce Fields jest jeszcze jest coś takiego

1:03jak Inputs i Labels, czyli pola input i label'e, które ewentualnie możemy zmienić z

1:08tych inline'owych, czyli wewnątrz pól na standardowe, czyli

1:11na górze będą się pojawiać, a wewnątrz pól można jeszcze dodać jakiś

1:15tekst, taki place holder text, ale w naszym przypadku nie ma to miejsca.

1:18W naszym przypadku jest dokładnie tak jak mieliśmy, czyli zostawiamy Inline.

1:22Tutaj już nie będziemy zaglądać jeśli

1:23chodzi o Form Appearance, to jest najważniejsze ustawienie, które pozwoli nam zmienić to z

1:27kolumn na rzędy i rzędy pozwolą dopasować się do tej struktury, którą mamy tutaj.

1:34Co dalej?

1:35W Spacing możemy ustawić, odległości pomiędzy tymi elementami.

1:38Margins pozwolą nam ustawić marginesy przy całym tym polu.

1:42Widzisz z resztą, że potrzebujemy trochę

1:44szerszy rząd albo trochę zmniejszyć przycisk, ale zaraz to zrobimy.

1:47Ale w pierwszej kolejności zajmiemy się polami.

1:50Fields mamy tutaj inputs, czy input'y styl tych input'ów.

1:53Zobaczmy, to nie jest outline, tylko styl

1:56musimy zmienić na Solid, a następnie kolor tekstu zostawiamy czarny.

2:01Nie zmienimy na taki szary, mniej więcej taki.

2:04Zobaczmy to na białym background'ie, żeby było dokładnie widać tak jak tutaj.

2:08OK, w porządku.

2:10I możemy teraz zmienić wysokość tych input'ów.

2:12Wydaje mi się, że są troszkę niższe, a także możemy zadbać o Corner Rounding,

2:17czyli zaokrąglić narożniki mniej więcej tak jak tutaj.

2:21Fajnie by było zmienić font na Lato jak zwykle i oczywiście jego rozmiar

2:25troszeczkę potrzebujemy mniejszy, nie wiem czy aż taki, może ciut większy

2:29jeszcze zaraz spróbujemy to wszystko poustawiać.

2:32Weight chyba zostawiamy tak jak jest,

2:35albo ciut pogrubione font w ten sposób no i Letter Spacing zostawiamy.

2:41Appearance zostawiamy. Teraz guzik Sign Up, czyli przejdźmy do Button.

2:46Zobaczmy jak on tutaj wygląda.

2:47Styl ma Solid, kolor niebieski, zaokrąglone krawędzie.

2:50Jeszcze ma jakiś taki delikatny cień tutaj pod spodem.

2:52Spróbujmy to odtworzyć.

2:54Czyli zostawiamy Label Only.

2:55Nie chcemy tutaj żadnej ikony.

2:56Zostawiamy Solid.

2:58Kolor zrobimy podobny do niebieskiego.

3:00Oczywiście możemy stamtąd pobrać sobie

3:02taki sam kolor, ale myślę, że nie jest to teraz dla nas krytyczne.

3:05Tekst był zdaje się biały, białe dobrana to zostawiamy.

3:08Szerokość tego przycisku zostawimy na

3:10automatyczna będzie dostosowywać się do tekstu.

3:12Wysokość tego przycisku możemy trochę zmniejszyć i Corner Rounding dodamy,

3:17optymalnie na taki sam, taką samą wartość, jaką mieliśmy przy polach Input.

3:22Font zmienimy na Lato i zmienimy też jego wielkość, też

3:26optymalnie na taką samą, jaką mieliśmy przy polach.

3:29No i teraz wygląda już to całkiem ładnie.

3:31Dodatkowo możemy zrobić grubszy ten font trochę.

3:36No i wygląda na to, że doszliśmy do

3:37jakichś w miarę granic tego, jak możemy odtworzyć taki Sing Up form z pomocą Carrd.

3:42No bo nie mamy tu możliwości dodać tego delikatnego cienia do przycisku.

3:45Jak widzisz nie ma tej sekcji Box Shadow

3:47tutaj dla Button'a, jak również dla całego formularza.

3:50Jeśli przejdziemy w Appearance nie mamy

3:52możliwości ustawić większej ilości rzeczy, czyli np.

3:55jakiegoś padding'u, czy jakiegoś tła.

3:58No i teraz tak możemy się na to zgodzić.

4:01To znaczy możemy po prostu powiedzieć, że

4:03ok, nie ma problemu, ten formularz jest i tak spoko i to zostawić.

4:06Możemy poczekać aż twórcy Carrds dodadzą

4:08tutaj te wszystkie właściwości, czyli jakiś padding, background, color itd.

4:13I to też jest bardzo możliwe i prawdopodobne, że się stanie w najbliższej

4:15przyszłości, ponieważ sporo tutaj właściwości dodają.

4:18No a trzecia opcja to jest wziąć sprawy w

4:21swoje ręce i w momencie gdy znamy HTML i CSS możemy to bardzo łatwo dopisać.

4:26Jeśli mamy wersję Pro

4:27to możemy przejść do Settings i pokazuję to tylko poglądowo, bo nie oczekuję, że to

4:31teraz wiesz na dzisiaj, ale pokazuje, że można, że zawsze się da, bo

4:36tutaj w Styles możemy przejść do domyślnych stylów i wpisać sobie właściwości np.

4:41Background.

4:43Możemy ustawić na black na kolor czarny tła kolejno po enterze możemy sobie wpisać, że

4:49padding ma być np na 20 pikseli i teraz już nie

4:53staram się jakoś super wiernie tego

4:54odtworzyć, ale pokazuje Ci co jest tutaj możliwe.

4:57Następnie możemy zrobić opacity całego elementu na np.

5:0390%, bo wydaje mi się, że tam była jakaś przezroczystość.

5:06Aczkolwiek wydaje mi się, że lepiej by

5:08było nadać to opacity i nie na cały ten element, tylko na samo tło.

5:11Możemy to spokojnie zrobić, tylko

5:13musielibyśmy zmienić notację w Background na przykład na rgba, gdzie dostępna jest

5:18alfa czyli opacity na końcu i kolor czarny to 0,0,0,

5:22I tutaj podajemy alfę, czyli np.

5:24jeśli chcemy zrobić 60% przezroczyste tło

5:27możemy to zrobić podając wartość 0.6 i

5:30jak widzisz to tło jest teraz 60% przezroczyste.

5:34Co tu jeszcze potrzebujemy zrobić?

5:35Potrzebujemy border-radius, czyli zaokrąglenie krawędzi np.

5:40na 12 pikseli i proszę bardzo o przesłanie zaokrąglone.

5:43No i jeszcze Company Name tutaj nam się to rozleciało.

5:45W zasadzie ten formularz powinien być na całą szerokość, więc jeśli użyjemy

5:49width i określimy to na 100% to powinno wszystko ładnie zadziałać.

5:53Czyli jak widzisz zajęło mi to minutę, ale

5:56oczywiście nauka CSS'a wcześniej zajęła mi parę godzin w związku z tym nie namawiam Cię

6:01teraz, abyś uczył się od razu CSS'a i rozumiem, jeżeli tego nie rozumiesz.

6:05Aczkolwiek jeśli będziesz tworzył stronę w Cardds czy bardziej zaawansowanych

6:09Web builder'ach to na pewno znajomość CSS'a i HTML'a będzie pomocna

6:14jak widzisz tutaj można z jego pomocą bardzo dużo fajnych rzeczy sobie zrobić.

6:18Też oczywiście nie chodzi o to, aby tutaj każdy element nagle wchodzić do styli i po

6:22prostu jakoś go do stylowywać co do piksela.

6:25Zupełnie nie! Nie o to chodzi i wydaje mi się, że też moglibyśmy np.

6:28zrobić, że ten tekst jest przeniesiony

6:30wewnątrz formularza tak jak tutaj to jest zrobione, ale szczerze nie musimy.

6:35Moglibyśmy też zniwelować margines między

6:38tym tekstem a samym formularzem i też zrobić go na takim ciemnym tle.

6:43To już chyba prędzej i mógłbyś to

6:45dosłownie w parę minut teraz pewnie zrobić.

6:47Mając te dane te style, które wykonałem.

6:50Będzie to już powtarzanie pracy, więc nie będę się na tym koncentrował.

6:53Wolę przez ten czas wytłumaczyć Ci trochę

6:55więcej rzeczy w kontekście samych ustawień formularza.

6:58W zasadzie trzeba pamiętać o tym, że rozbudowane ustawienie formularza, czyli

7:01zarówno ta zakładka Settings, jak również niektóre opcje, ten Custom form, które ja

7:05zrobiłem są dostępne tylko w wersji Pro Cards.

7:07Jest ona oczywiście bardzo tania, kosztuje tam parę dolarów dosłownie na miesiąc, ale

7:12być może nie będziesz chciał z tego korzystać, więc jedynie sygnalizuje, że to

7:15co jest fajnego jeszcze co można tu zrobić w tej wersji Pro w ustawieniach to można

7:19przejść do Events i można jakiś taki własny kod JavaScript wywoływać

7:24w momencie gdy ten formularz się wysyła,

7:26wysłał się z sukcesem albo wysłał się z błędem.

7:29Można to jeszcze tutaj dodać a w samej sekcji Form.

7:33W momencie gdy mamy tą wersję Pro i wybierzemy sobie Custom możemy też

7:36zadecydować co się stanie po wysłaniu tego formularza.

7:38Będzie to hostowane na serwerach Cart.

7:41Nie będziemy musieli pisać żadnego kodu serwerowego.

7:44Możemy zadecydować, że ten formularz zostanie wysłany mailem i co to znaczy,

7:48on wyśle się wtedy na nasz email przypisany do konta Card albo na email,

7:52który wpiszemy tutaj kolejno template tego maila można też zmienić, czyli można

7:57wpisać tu temat maila, a także body czyli treść, ciało maila.

8:01I jeszcze co ciekawe możemy posługiwać się

8:04w tej treści maila takimi właśnie skrótami, takimi bunt'ami tak zwanymi,

8:09które będą mogły zawierać identyfikatory pól input, które mamy w formularzu.

8:15Co to znaczy?

8:16Znaczy, że jeśli ja przejdę teraz do Fields do pól input np.

8:19Company Name. Zobaczy, że nie ma identyfikatora, ale

8:22jeżeli je wpisze Company Name i teraz przejdę do tego podstawowych

8:29ustawień, to teraz będę mógł posłużyć się tym Company Name pod warunkiem, że wstawię

8:33je w takich dwóch klamrowych nawiasach, a następnie automatycznie zostanie ta

8:38wartość zczytana i wstrzyknięta tutaj do tego maila to co wpisał użytkownik.

8:42W ten sposób można robić takie podsumowanie jeśli mamy np.

8:46większy formularz i ktoś wypełnia, np. na którą godzinę się z nami umawia, dodaje

8:50jakieś komentarze, podaj swój numer telefonu, to możemy w mailu

8:53wysłać wszystkie te rzeczy, które wpisał w polu i oczywiście będą one nam wtedy przydatne.

9:00I jeszcze jest taka opcja Prefill Reply-To address,

9:02czyli jeżeli mamy w formularzu pole na adres email, to automatycznie ten adres

9:06email stanie się adresem, na który możemy odpowiedzieć.

9:09Jeśli klikniemy w Gmailu odpowiedz to wtedy automatycznie będziemy wysyłać odpowiedź

9:14do takiego klienta, do osoby, która taki formularz wypełniła.

9:17Kolejne ważne rzeczy Co się stanie, gdy formularz zostanie wysłany najpierw tak,

9:21z błędem Display a message, czyli wyświetlamy wiadomości albo przekierowujemy do URL'a

9:26jeśli wyświetlimy wiadomość, możemy zdefiniować jej treść tutaj:

9:29że sorry np.

9:30coś poszło nie tak i ta wiadomość będzie wyświetlana powyżej,

9:35powyżej naszego formularza, czyli gdzieś tutaj.

9:37Możemy też włączyć reCAPTCHA, żeby boty nie mogły spamować naszego formularza, a

9:43po pomyślnym wysłaniu formularza będziemy mogli albo też wysyłać właśnie taki,

9:48w takim alertcie będzie mogła się pojawić wiadomość, którą możemy zdefiniować.

9:52Dziękuję. Albo możemy zrobić coś bardziej

9:54spektakularnego, czyli przekierować to na URL.

9:57A w tym przypadku, gdy korzystamy z Carrds,

9:59może to być nie przekierowanie na jakąś domenę, tylko na sekcje, czyli np.

10:03thank you section.

10:05Możemy sobie coś takiego zrobić i wtedy tą

10:07nazwę sobie kopiuję, dodaję kolejną sekcję będzie to Control.

10:12Upewnię się, że mam zrobioną, zrobiony ten Control właśnie na Section Break.

10:17Nie będzie to wszystko co jest poniżej widoczne.

10:20W momencie kiedy ja tu wpiszę: thank you section, wybiorę Done.

10:24No to jak tu będę dodawał rozmaite

10:26elementy to dam sobie jakiś kontener i w tym kontenerze wstawię tekst:

10:31Thank you for submitting the form to wtedy ten formularz zostanie,

10:35ta sekcja zostanie automatycznie wyświetlona w momencie, gdy ktoś po prostu

10:39się zarejestruje, więc ten Thank you page jeszcze sobie dopracujemy.

10:43Ale chciałem pokazać to w kontekście właśnie ustawień formularza.

10:46Jeśli chodzi o wysyłanie czegoś innego niż email to możemy wysłać ten formularz np.

10:52do Zapiera do Airtable albo w ogóle nic nie robić.

10:54Ale te opcje jeszcze będę pokazywał Ci później.

10:57W momencie gdy będziemy robić sobie

10:59rozszerzenie o automatyzacje takiej strony, czyli będziemy właśnie z pomocą np.

11:03Zapiera mogli odebrać dane z takiego

11:05formularza, wrzucić je do jakiegoś naszego CRM'a po wysyłać maile.

11:09Tym wszystkim będziemy się zajmować w części poświęconej automatyzacjom.

11:13Na teraz to wszystko.

11:14Mamy zbudowaną pierwszą sekcję strony i zapraszam Cię na kolejne.