Webflow: Formularz Kontaktowy

Webflow 2020+

0:00Cześć. Witam cię w kolejnej lekcji. W której zajmiemy się przygotowaniem formularza.

0:04Okaże się to dosyć proste z pomocą webflow

0:07ale najpierw przygotujmy jak zwykle naszą strukturę czyli możemy skopiować sobie

0:12header block i block section po to żeby przesunąć je teraz poniżej.

0:17W ten sposób i header block zmienimy na header form.

0:23I tak samo block section zmienimy sobie na forum section.

0:28Następnie usuniemy z tego zawartość w kontencie czyli block cart.

0:32No i przekopiujemy sobie szybko tekst

0:35get te quote i your next project wrzucimy na górę.

0:41W to miejsce dobra czyli wstępny setup mamy za sobą.

0:44Teraz trzeba się zastanowić jak można ten formularz umieścić tutaj

0:48i teraz przejdźmy do "A", tutaj znajduje się cała sekcja formularze.

0:51Moglibyśmy zrobić to też predefiniowany layoutem.

0:54Tutaj są dwa na razie layout czyli contact form trochę bardziej rozbudowany jak

0:59również subsribe forum czyli taki prosty formularz do zapisywania się do zbierania

1:04adresów e-mail ale chciałbym żebyśmy zrobili to po kolei bo chce wyjaśnić też

1:08rzeczy które znajdują się tutaj w sekcji forms.

1:10Warto je dobrze zrozumieć i nawet jak

1:13później będziesz upraszczał sobie pracę przez to gotowe layoutu. To teraz zobaczmy co to w

1:17ogóle jest przede wszystkim możemy wstawić form blocka.

1:21To jest podstawowy budulec formularza jest on niezbędny.

1:25Z tego powodu, że będzie zawierał ogólny znacznik formularza który

1:29jest potrzebny do osadzenia w nim tych wszystkich elementów które znajdują się

1:32poniżej więc klikamy sobie na form blocka i teraz tak mamy pewne ustawienia.

1:37Pamiętasz na pewno, że te ustawienia forms settings to jest jakby skrócona wersja.

1:42To co się pojawia tutaj to jest skrócona

1:43wersja wszystkich ustawień które są po prawej stronie możemy kliknąć show all settings.

1:47I wtedy zawsze przenosimy się do blocku settings po prawej stronie taki formularz został

1:51dodany z dwoma polami czyli imię oraz adres e-mail, a także z guzikiem submit.

1:57I to wszystko tutaj w środku jest.

1:59Mamy formularz w środku jest pole czyli label oznaczające ten pierwszy imput.

2:04Później jest drugi imput i przycisk guzik submit.

2:08Co to są te success, error ?

2:09Otóż są to stany formularza które ułatwią gdyby ogarnia za nas czyli on troszczy się

2:13o to aby formularz był poprawnie wypełniony i w razie gdy formularz nie

2:17jest poprawnie wypełniony. Przykładowo adres e-mail nie zgadza się

2:21z odpowiednim wyrażeniem regularnym to wtedy pokazuje nam stan error.

2:26Możemy do tego stanów przyłączyć się w form settings klikając na error.

2:30I zobaczy że mamy informację że coś poszło nie tak.

2:33Oczywiście ten error message to jesteśmy

2:35teraz tutaj ten tekst, możemy w pełni modyfikować webflow daje nam pełną kontrolę

2:40nad tym jak te błędy będą się wyświetlać jak również na całym formularzu mamy też

2:44tam succes czyli w momencie gdy formularz zostanie wysłany pomyślnie. Wtedy

2:48on znika i pojawia się taka oto wiadomość którą też możemy dostosować.

2:52Więc bardzo fajnie bo będziemy mogli sobie tym wszystkim zarządzać.

2:56Teraz jeśli chodzi o samą form block

2:58po przeniesieniu się do znaczników w form tutaj możemy z pomocą "A" dodawać

3:02wszystkie rzeczy które znajdują się w forms.

3:05Może poza file upload jest dostępny wtedy kiedy mamy hosting na webflow.

3:09Wtedy możemy wrzucić tutaj taki widget

3:11który pozwoli użytkownikom dodawać pliki i wysyłać je do nas.

3:15Natomiast mamy do dyspozycji

3:16np. zwykły imput który możemy opatrzyć jakimś labelem. Ten label jest tutaj przykładem

3:20jest tutaj mamy większy dłuższy tekst dla użytkownika do wpisania czyli tekst area,

3:25mamy check -boxy, radio buttony, select który również ma jakieś swoje właściwości

3:30zawsze jeżeli wybierzemy taki element to zobacz, że mamy coś takiego.

3:34Przejdźmy do all settings. Jak w tym przypadku choice i możemy tutaj

3:39oznaczyć first choice pierwszy wybór drugi trzeci itd.

3:42I to wszystko będzie poprawnie działać.

3:44Te wybory są widoczne na liście.

3:48W związku z tym wszystko to mamy już zrobione przez webflow lub wcześniej

3:51zdefiniowane możemy zaznaczyć czy te pole jest wymagane czyli w

3:56required akurat tego select, a możemy pozwolić użytkownikowi przykładowo

4:00zaznaczyć wiele elementów w ramach jednego select-a.

4:03To jest naprawdę ogromna oszczędność czasu

4:05gdybyśmy mieli kodować sami naprawdę byłoby mocno mocno pracochłonne

4:10wyrzuce tego selekta co jeszcze jest w formie z czego możemy skorzystać.

4:14Mamy jeszcze re-captcha czyli

4:16możliwość zrealizowania zwalidowania czyli żeby roboty nie wysyłały nam

4:20nie spamowały naszego formularza możemy włączyć captche.

4:23No i w końcu form button który jest domyślnie dodany i powinien być w każdym w

4:27zasadzie formularz bo pozwala użytkownikowi wysłać dane.

4:30Ten form button będzie wysyłał dla nas

4:32dane na określony adres URL określoną metodą i do obsłużenia takiego formularza

4:38potrzebny jest nam jakiś kod backendowy czyli serwer który będzie działał

4:42np. Z kodem php który obsłuży nam taki formularz my te dane wyślemy metodą post

4:46do naszego serwera który przetworzy nam to żądanie i wyśle maila.

4:52To oczywiście wykracza poza zakres tego kursu ale ja pokażę ci w jednej z

4:55kolejnych lekcji jak można to zrobić bez kodów serwerowego i w prosty sposób jak można

5:00taki formularz dane z niego odbierać i zapisywać sobie gdzieś

5:03np. w arkuszu. Teraz na razie skupmy się na konstrukcji

5:07tego forma i ja będę potrzebował wyrzucić pola name które nie są potrzebne i

5:14tekst filed name, zostawię tylko e-mail adres i guzik submit.

5:18Zobaczmy co jeszcze znajduje się w naszym formularzu jest akapit tekstu który trzeba

5:22tutaj dodać od razu mogę skopiować treść która się znajduje

5:25i dorzucimy zwykły paragraf, a następnie wklej do niego tekst tylko

5:30zadbamy aby on znalazł się może być w formularzu jak najbardziej.

5:33Tylko że trochę wyżej.

5:35No i teraz dostosujemy teraz style.

5:37Mamy tu element szerokości mniej więcej czterysta na trzysta pięćdziesiąt.

5:41Takie taką wielkość możemy nadać na sam formularz.

5:44Możemy zrobić także forum content.

5:46Będzie nam form block będzie nam

5:47trzymał ten cały formularz czyli będzie

5:51np. flex-em i będzie starał się wszystkie elementy wyśrodkować w poziomie i w pionie.

5:55Natomiast sam formularz możemy zmienić na

5:58tyle że max weight damy tutaj czterysta pikseli na trzysta pięćdziesiąt pikseli max high.

6:03To już powinno nam całkiem ładnie zadziałać.

6:05teraz jeszcze tło dla tego elementu kolor background wybierzemy na biały

6:11zaokrąglone narożniki i na dwanaście pikseli, a następnie dodamy jeszcze box shadow.

6:17Z tego co udało mi się wydaje mi się, że to

6:19było piętnaście, trzydzieści pięć i chyba możemy tutaj uznać że sześć procent.

6:25nie sześćdziesiąt , a sześć procent.

6:26Będzie ok.

6:28No właśnie to są dobre wartości zobaczymy tylko jakie jest o tej sześć procent.

6:32tak jak w poprzednich elementach.

6:34I dalej jeszcze musimy dostylować sobie to pole imput zawiera ono border takiego koloru

6:39który sobie skupiły grubości trzech pikseli więc przejdźmy teraz do tego pola.

6:44Aha email adres czyli ten label nie będzie nam tutaj potrzebny ale

6:48zależałoby nam na tym żeby w środku w polu tekstowym znalazła się informacja

6:53type your e-mail teraz jak możemy to zrobić przechodząc do właściwości pola tekstowego.

6:56Jeśli przejdziemy tutaj możemy wpisać

6:59tzw. place holder. Jeżeli wpiszemy ten

7:02type your e-mail to właśnie ten place holder pojawi się w środku więc świetnie i

7:07tekst type czyli to jaki jest typ tego pola to jest e-mail i to jest ważne

7:11dlatego, że dzięki temu że wybraliśmy tutaj email to webflow pomoże nam walidować ten formularz.

7:18Czyli jeżeli ktoś pisze błędny e-mail będzie dostawał error będzie dostawał błąd

7:22tym samym label file e-mail adres nie jest nam potrzebny.

7:25A jeśli chodzi o właściwości tego pola

7:27przejdźmy do jego stylowania nadajemy mu klasę e-mail imput

7:32i spróbujmy go trochę dostylować.

7:34Przede wszystkim zależy nam na tym aby dostał ten border i

7:37border potrzebujemy z każdej strony grubości trzech pikseli, a kolor nawet nie

7:41musimy wchodzić do środka bo wystarczy wkleić wartość szesnastkową.

7:45I już jest ok. Radius robimy na osiem.

7:48Nam jeszcze pozostało nam jeszcze określenie jego szerokości.

7:52Tutaj mamy wysokość siedemdziesiąt pięć i szerokość około trzystu.

7:57Możemy zrobić max weight trzysta i wysokość ustalimy na sztywno osiemdziesiąt pięć pikseli.

8:03Na cały element form trzeba będzie dodać margines

8:06to jest czterdzieści około czterdzieści pikseli więc dajmy sobie przepraszam padding nie margines dajmy sobie

8:11padding czterdzieści pikseli tyle, że chcemy żeby z każdej strony więc pomocą shift-a.

8:15Po prostu przesuniemy przeciągnięcie na czterdzieści pikseli.

8:18Tam było dokładnie czterdzieści jeden zostawmy.

8:20No i teraz jeszcze jesteśmy już na form.

8:22To może wyrównajmy wszystkie elementy czyli

8:25tekst oraz guzik submit po prostu za pomocą opcji inline na tekście.

8:30Natomiast ta opcja niestety nie wyrówna nam imputa.

8:33Jak widzisz teraz imput jest wyrównany do lewej strony mimo, że jest w środkowany.

8:36Tutaj jest wyrównany do lewej strony.

8:39I żeby imput był zawsze na środku musielibyśmy qoute form dokonać jakichś zmian

8:43przykładowo zmienić jego display znowu na flex.

8:46Nie chcemy horizontal tylko w vertical ale ten order, a następnie wyrównujemy

8:50wszystko do środka i teraz dopiero będzie to ładnie wyśrodkowane.

8:55Należałoby jeszcze zmienić ten przycisk

8:57submit przejdźmy do jego stylowania command return, wpiszę że to jest quote submit button

9:02spróbujmy usunąć z niego tło będzie miało przezroczysty kolor.

9:06Czyli możemy zrobić dowolny kolor ale po prostu musi być przezroczysty.

9:10Jeśli chodzi o tekst to będzie nasz midnight blue.

9:14Wybierzmy kolor tekstu musimy go stąd

9:17wybrać eksplisite bo to w ten sposób napisze nam ten kolor tekstu.

9:21Zrobimy jeszcze skopiujemy te style i piszemy tutaj ask for princing.

9:28Zobacz że mamy też coś takiego jak waiting tekst.

9:29W momencie gdy ktoś kliknięcie

9:32na guzik zmienia się informacja na nim napis please wait czyli proszę czekać i ten

9:36formularz wysyła, a później przyjdzie przejdzie w stan error lub też tam succes.

9:42W ramach tego przycisku mamy jeszcze dwa takie ciekawe elementy czyli strzałke i

9:46kułeczko. Wypełnienia tego kółka teraz sobie skopiuje, a następnie przejdę do

9:50webflow i umieszcze tutaj to kółko zrobimy z pomocą w DiV blockach jeśli umieszcze

9:55tu DiV block tyle, że będzie trzeba oczywiście ten submit wrzucić do jakiegoś jednego

10:00kontenera zaraz ale generalnie taki DiV block będzie mógł mieć background kolor ten który sobie

10:06skopiowałem, a następnie będziemy mogli zaokrąglić jego narożnik i zróbmy to tak od razu może

10:11pięćdziesiąt pięć to jest dobra praktyka jeśli chcemy zrobić tego typu rzeczy czyli kółeczko.

10:15No i mimo że webflow nam go tutaj pokazuje na canvasie tak naprawdę nie ma on żadnych

10:19rozmiarów więc po wyglądzie nie będzie go widać zróbmy mu rozmiary.

10:23Zgodnie z tym co mamy w projekcie czyli pięćdziesiąt na pięćdziesiąt zrobimy też pięćdziesiąt na pięćdziesiąt pikseli. Weight i high.

10:30I teraz dopiero

10:32webflow właśnie będzie nam pokazywał zarówno na poglądzie jak i będzie to rzeczywiście dostępne u

10:37nas na stronie drugi element który potrzebujemy to strzałka i skąd taką strzałkę wziąść.

10:41Przychodzą mi do głowy w zasadzie trzy sposoby pierwszy to taki, że

10:45moglibyśmy zwyczajnie eksportować tą strzałkę z xd jako plik svg.

10:50Jeżeli miałaby być ona zupełnie customowa. Narysowana przez grafika to rzeczywiście

10:55moglibyśmy jako svg eksportować ją i umieścić tutaj.

10:58Drugi sposób to jeżeli jest to w miarę standardowy znak

11:01np. właśnie strzałka.

11:03Bardzo prawdopodobne, że znajdziemy go w tablicy znaków ascii .

11:06Jeżeli przeszukać

11:07np. HTML ascii arrow albo zapytasz google o podobną

11:10frazę to znajdziesz masę takich stron listują.

11:14Są takie znaki unicode które

11:17np. są strzałami jakimiś popularnymi tego typu

11:20ikonami i one dostępne są dla różnych fontów.

11:23Jeżeli twój font obsługuje to wystarczy, że taką strzałka sobie stąd skopiujesz.

11:27Czyli wybierasz w zasadzie taką która Ci odpowiada

11:30np. tą kopiuje się ją za pomocą command c.

11:32I teraz jeżeli przejdę do projektu

11:34klikamy sobie dwa razy i tutaj mogę w dowolnym miejscu akurat button tekst po

11:37prostu chcę to wrzucić i zobacz że ta strzałka została dorzucona.

11:41Zobaczymy jak będzie się wyświetlać.

11:42No i jest ok jeżeli to ci wystarczy to w porządku.

11:46Natomiast my to w kolejnej lekcji przyjrzymy się

11:50tzw. icon fontom.

11:51To jest bardzo popularny sposób na dołączanie rozmaitych ikon i nie trzeba ich

11:56wcale eksportować nie trzeba wymieniać plików svg

11:59wystarczy taki tak naprawdę font zainstalować sobie do webflow, a następnie

12:04można korzystać z ogromnej bazy którą on wspiera.

12:07Pokażę ci w kolejnej lekcji jak to zrobić

12:08bo myślę, że to znacznie przyspieszy projektowanie twoich

12:12prostych nawet landing page, czy stron w przyszłości.

12:14Do usłyszenia,