Strony WWW bez Kodowania: Integracje Formularza

0:00Witaj w kolejnej lekcji, w zasadzie ostatniej, która kończy informacje o tym

0:04jak wykorzystać te natywne integracje w Carrd i w wielu innych Web Builder'ach.

0:08A chciałbym Ci powiedzieć o tym, jak

0:10możemy przekazywać dane z formularza jeśli wybierzemy nasz formularz.

0:14Mamy tutaj kilka zakładek, z czego w

0:15zakładce Fields mamy oznaczone pola, pole Company Name, któremu nadaliśmy

0:19identyfikator Company Name, pole Email Address, które jeszcze nie ma

0:23identyfikatora, więc nadajemy mu identyfikator i email address.

0:27Wybieram polecenie Done, żeby zapisać te

0:29zmiany, więc jedno i drugie pole teraz ma identyfikator.

0:32To jak działa nasz formularz to

0:35domyślna funkcjonalność we wewnątrz Carrd, czyli po prostu wysyła on email na jakiś

0:40konkretny adres email, który możemy tu podać

0:41lub na adres naszego konta

0:43z jakimś tematem, z możliwością odpowiedzi do tej osoby, która wypełniła formularz,

0:48bo przekazujemy to pole email jak również z jakimś body czyli np.

0:52powiadomieniem.

0:53Hej, napisał do Ciebie ktoś o adresie email i wtedy możemy przekazać tutaj

0:57identyfikator email address z firmy i możemy przekazać Company Name itd.

1:02więc to jest taki prosty sposób.

1:03Oczywiście te maile będą do nas dochodzić, a my możemy później z nimi coś zrobić,

1:07ale Carrd ma jeszcze możliwość, wysłania tego formularza na inne sposoby.

1:13Niektóre z nich chcę teraz mówić, o

1:14niektórych tylko wspomnę, bo będziemy zajmować się nimi w części o automatyzacji,

1:18ale chcę, żebyś wiedział, że te opcje tu istnieją, tzn.

1:20że możemy np.

1:21dane z tego formularza wysłać na jakiś adres URL.

1:24Jeżeli mamy działający serwer czy jakąś

1:27usługę, która potrafi odebrać te dane, to możemy wysłać jedną z metod np.

1:31AJAX'owo i nasz serwer może te dane odebrać i jakoś je sobie przetworzyć.

1:36Kolejną metodę, którą mamy na kontach Pro

1:39jest to możliwość wysłania tego do Zapier'a. Zapier

1:42to jest taki serwis, który umożliwia nam meta automatyzację, a prościej mówiąc po

1:48prostu przekazuje dane między różnymi usługami i różnymi narzędziami.

1:52Czyli my możemy w tym momencie dane z formularza wysłać do Zapier.

1:56Zapier je w jakiś sposób przechowa i

1:58możemy powiedzieć, żeby później te dane przekazał np.

2:02do arkusza na Google Sheets albo wysłał nam mailem, ale Zapier

2:05umożliwi nam to, że będziemy mogli oprócz takiej prostej jednej automatyzacji zrobić

2:11jeszcze np. jednocześnie wysyłkę maila do tej osoby, która się zapisała.

2:15Więc oprócz tego, że np. Zapier weźmie te dane i wpiszemy je do

2:19arkusza w Google Sheets, wyślemy nam maila z potwierdzeniem o tym, że ktoś się

2:22zapisał, to jeszcze możemy tej samej osobie w tym samym scenariuszu wysłać

2:27informację o tym, że przyjęliśmy jej zgłoszenie.

2:29Więc Zapier

2:31pozwoli nam zrobić tutaj wiele różnych kroków i wykonać je na tych danych, które

2:35zostaną odebrane z formularza i m.in. Zapier'em

2:38właśnie będziemy zajmować się w kolejnych lekcjach.

2:41Następnie mamy opcję, wysyłania do Airtable albo zrobienia niczego, czyli

2:46skupmy się na tej opcji wysyłania do Airtable, bo to być może jest coś, co Ci się przyda.

2:51Jest to opcja, która umożliwia wysłanie tych danych automatycznie do takiego

2:55arkusza, który możemy założyć sobie na Airtable.

2:58Możemy założyć tam darmowe konto.

3:00Ja stworzyłem arkusz, który nazywa się

3:02Slack Landing Page, Slack LP i jest to praktycznie to samo co Google Sheets

3:06czy Excel, aczkolwiek ma dużo większe możliwości.

3:09Ja zdecydowanie wolę korzystać z Airtable.

3:11Zresztą nauczyę Cię tego narzędzia w tej sekcji o automatyzacji.

3:15Zrobiłem tutaj dwie kolumny jedna kolumna to email, a druga kolumna to company.

3:19Czyli te kolumny są jakby tożsame z

3:21danymi, które dana osoba wpisuje u nas w formularzu.

3:25I to co musimy tu przekazać to API Key oraz Base ID.

3:29Te dane znajdujemy w następujący sposób: Base ID znajdujemy klikając na ten link i

3:34odnajdując odpowiedni dokument, do którego chcemy wstrzyknąć dane.

3:37W tym przypadku u mnie to jest Slack LP i

3:40ID of this base is i mam tutaj podany numer, identyfikator.

3:45Możemy go tutaj przekleić oraz API Key.

3:48Klikamy w ten link i przechodzimy do sekcji ustawień swojego konta.

3:51Następnie odkrywamy swój API Key i wklejamy go tutaj.

3:54Oczywiście jest to sekretny nasz klucz, którego nie należy nikomu przekazywać,

3:58więc ja też nie pokażę Ci go w tej lekcji, przynajmniej tego mojego.

4:01I mamy jeszcze Table Name, czyli nazwa

4:03tabeli, w której mają znaleźć się nasze wyniki.

4:06U mnie ta tabela nazywa się Signups.

4:08Można dwa razy kliknąć, żeby zmienić nazwę.

4:10Ja po prostu ją skopiuję, żeby upewnić się, że podam poprawną nazwę.

4:14I to właśnie do tej tabeli mają trafić moje wyniki.

4:17Teraz po sukcesie mogę zostać

4:20przekierowany na URL, albo może zostać wyświetlona jakaś wiadomość.

4:23Będę przekierowany do tego thank you page'a, więc tutaj nic się nie zmieni.

4:27Jeżeli coś pójdzie nie tak mamy wiadomość i reCAPTCHA, te wszystkie opcje tutaj już były.

4:31Wkleiłem sobie moje API Key i zapisałem tak abyś już go nie widział.

4:34I teraz przechodzę jeszcze do drugiej zakładki, która jest równie ważna,

4:37ponieważ w Fields mam nazwy dla pól, które muszę wypełnić.

4:41Nadałem identyfikatory, ale to nie wystarczy.

4:44Będę musiał mieć dla tych pól ustalone

4:45nazwy i te nazwy powinny być takie same jak nazwy poszczególnych pól w Airtable, więc

4:50mam tutaj Email z dużej litery i Company z dużej litery.

4:53Wpisuję tutaj nazwę Email i w Company Name jako name uzupełniam Company.

4:58Wybieram polecenie Done teraz mogę już

5:00opublikować zmiany na mojej stronie

5:01Publish Changes i po opublikowaniu powinienem móc dopisać je tutaj.

5:06Wybieram polecenie View Site podając adres email i nazwę firmy.

5:09Wybieram polecenie Sign Up for Free.

5:11I teraz jestem już na stronie

5:12Podziękowania, a w tabeli Signups automatycznie został dodany wpis.

5:17Możesz tak dodawać bardzo dużo różnych pól, także checkboxy itd.

5:22Ważne, żeby typy danych, które tutaj

5:24znajdują się w Airtable się zgadzały z polami, które wysyłasz.

5:27Czyli przykładowo tu mam Single line text, ale tutaj już będę miał typ danych email.

5:31No i oczywiście żeby zgadzały się

5:32wszystkie nazwy, jak również nazwa tej tabeli.

5:36No i żebyśmy przekazali poprawne API Key

5:39oraz poprawny identyfikator tego, tej całej bazy.

5:43Poza tym w ten sposób właśnie możemy sobie

5:46stworzyć taki mini CRM z osobami, które są tutaj zarejestrowane.

5:49Aczkolwiek jeśli chodzi o mnie, ja tego sposobu raczej nie używam.

5:53Raczej używam połączenia z Zapier.

5:55Albo wysyłania tego na adres URL.

5:57Pokażę Ci to w tym trochę bardziej

5:59zaawansowanej części, ponieważ to daje mi zdecydowanie więcej możliwości.

6:03Natomiast mamy jeszcze taką możliwość, aby przejść do formularza i zamiast korzystać

6:08z tej wersji custom, skorzystać sobie z Contact albo Sign Up.

6:11Jeśli wybierzemy opcję Contact to w zasadzie nie mamy dodatkowych danych,

6:15tylko formularz jest przesyłany na jakiś adres email lub nasz domyślny dla konta

6:18jeśli podamy.

6:19Ale jeśli wybierzemy Sign Up, to możemy tutaj na tej samej zasadzie połączyć się z

6:24różnymi usługami takimi jak MailChimp czy Revue, ConvertKit, MailerLite itd. więc

6:29chodzi o to, że automatycznie email, który zostanie wpisany i name, który

6:34zostanie wpisany tutaj w to pole zostanie przekazany do naszej listy np.

6:38na MailChimp'ie znów musimy podać API Key,

6:41musimy tym razem podać Audience ID, czyli identyfikator tego, tej konkretnej grupy,

6:45czyli konkretnej listy, którą mamy stworzoną na MailChimp'ie.

6:48I to tyle. Wystarczy tyle opcji, a zostanie

6:52odpowiednio przypisana taka osoba do naszej listy mailingowej na MailChimp'ie.

6:56To samo możemy zrobić z Revue. Revue

6:58to jest taki serwis, który umożliwia

7:00pisanie editorial newsletter'ów, czyli po prostu zarabianie na newsletter'ach.

7:05Jeżeli chcesz pisać wartościowe treści i

7:06dostarczać je do swoich odbiorców, oni mogą Ci za to płacić

7:10i mogą zapisywać się na taką listę Revue właśnie np. przez taki SignUp form

7:15automatycznie wystarczy, że podasz API Key do swojego Revue.

7:19Kolejny mamy ConvertKita.

7:21Tutaj też podajemy API Key.

7:22Podajemy również identyfikator formularza,

7:26który wcześniej zrobiliśmy na ConvertKit'cie no i też możemy odbierać te dane stąd

7:31bezpośrednio i przypisywać tych ludzi do naszego ConvertKita. ConvertKit to jest

7:35taki kombajn, który pozwala na sprzedawanie swoich produktów, na robienie

7:40różnych automatyzacji marketingu, wysyłanie sekwencji maili.

7:43Generalnie większość tych narzędzi po prostu obsługuje mailingi.

7:46Taki jest właśnie też

7:48MillerLite, gdzie też podajemy grupę i API Key i takie samo narzędzie to

7:52GetResponse, gdzie też przekazujemy sobie jakiś token listy.

7:56Tutaj dodatkowo jeszcze możemy ustalić

7:57cykl dnia autorespondera i to może jeszcze w jakiś kolejnych materiałach Ci pokażę.

8:03Natomiast najważniejsza informacja jest

8:04taka, że jeśli wybierzemy ten Signup form, możemy automatycznie zintegrować go z tymi

8:08wszystkimi serwisami do wysyłki maili, jeśli tylko z nich korzystamy.

8:12Jeśli natomiast nasza integracja nie

8:14znajduje się tutaj na liście, no to pozostaje nam wybór custom i wysyłanie

8:19tego nie do Airtable, tylko właśnie z pomocą URL lub do Zapier'a.

8:23I te rzeczy będę tłumaczył w kolejnej

8:25obszernej części tego kursu i to na nią chciałbym Cię teraz zaprosić.

8:29Ale najpierw jeszcze krótkie podsumowanie,

8:30bo zobacz, że omówiliśmy sobie naprawdę bardzo dużo rzeczy, czyli cały edytor Carrd

8:35i można powiedzieć, że to jest taki jeden edytor.

8:37Tak więc może potrafimy tylko poruszać się tylko w Carrd

8:40no właśnie nie.

8:41W zasadzie rozumiemy teraz wszystkie te najważniejsze zagadnienia, które są

8:45związane z tworzeniem tego typu stron internetowych oraz dużo rzeczy, które

8:49istnieje obok nich, a które zawsze trzeba zrobić.

8:52Czyli nauczyliśmy się też spinać domenę, spinać przekierowania, również podłączać

8:56jakieś zewnętrzne serwisy typu Pixel Facebook'a ze swoim własnym kodem.

9:00Nauczyliśmy się integrować to z analityką,

9:02więc zrobiliśmy naprawdę bardzo, bardzo dużo takich rzeczy, które trzeba zrobić

9:06przy każdej stronie, niezależnie od Web Builder'a czy edytora, z którego korzystamy.

9:11Zobaczyłeś też, że

9:13te rzeczy są przyjazne pod kątem SEO, że robi się to szybko, że można naprawdę

9:17osiągnąć ciekawe efekty małym nakładem czasu.

9:21No i też pokazałem Ci trochę widget'ów i

9:22takich integracji, które są tutaj wbudowane w to narzędzie.

9:25No i to jest właśnie coś, co jest indywidualne dla każdego narzędzia.

9:29Carrd ma trochę integracji,

9:31inny Web Builder będzie miał jeszcze jakieś inne albo mniej, albo więcej, albo wcale.

9:36I dochodząc do takiego etapu jak teraz,

9:37okaże się, że tak naprawdę nie ma już zbyt dużo więcej rzeczy, które możesz sam

9:42wyklikać w Web Builder'ach bez rozumienia czegoś więcej.

9:46Bo gdybyś chciał przykładowo teraz zacząć łączyć z tym jakieś inne różne serwisy, no

9:50to może Ci się uda z pomocą tego custom'owego kodu, który po prostu jako snippet'y

9:54możesz przeklejać zgodnie z instrukcjami z tamtych serwisów czy narzędzi, ale z

9:59drugiej strony, jeżeli nie zaczniesz

10:01trochę lepiej rozumieć jak działa HTML, CSS, jak działa JavaScript, jak te dane są

10:05wymieniane, będzie Ci trudno wejść tutaj na jakiś zupełnie inny, kolejny poziom.

10:09Nie mówię, że to do czego doszliśmy, to jest niewiele.

10:12Myślę, że to jest naprawdę dużo i można w tym opędzić bardzo, bardzo dużo.

10:16Jakichś jest use case'ów, formularzy, zbierania

10:18danych, prostych stron, stron konferencji, wydarzeń, jakiś rozmaitych rzeczy, które

10:24w tym momencie funkcjonują w sieci, Więc możesz równie dobrze na tym poprzestać.

10:27No ale mam nadzieję, że Twój apetyt jest rozbudzony na więcej.

10:30I teraz właśnie przechodzimy do takiej

10:32części, gdzie rzeczywiście trzeba już technologii także więcej rozumieć, więc

10:37z szybkich efektów, które możemy osiągać z pomocą Web Builder'ów, to tyle.

10:40Być może znajdziesz jakieś inne Web Builder'y,

10:42które będą lepiej dopasowane do jakiś konkretnych rozwiązań, np.

10:45jeśli robisz stronę branżową z podcast'em

10:48czy przykładowo robisz stronę z jakimś, sprzedajesz ebooka czy kursy wideo, być

10:53może będą inne wyspecjalizowane Web Builder'y czy serwisy, które pozwalają Ci skorzystać

10:57z jakiegoś gotowego landing page, ale dodatkowo oferują ten cały system np.

11:01do podcast'ów albo do obsługi kursów wideo.

11:04Rzeczywiście może tak być i możesz wtedy sobie wyklikać rozmaite opcje.

11:08Jednak jeżeli na tym etapie nie zaczniesz rozumieć trochę lepiej technologii, czyli

11:12protokołu HTTP, czyli API, czyli czym jest JSON, jak są przesyłane dane w

11:16internecie, czym jest HTML, CSS, jak działa JavaScript.

11:20Być może będziesz w stanie coś zrobić, ale

11:22na pewno uzupełniając te informacje o właśnie takie podstawy niezbędne jeśli

11:28chodzi o działanie technologi będziesz w stanie zrobić dużo, dużo więcej.

11:31W związku z tym masz tutaj dwie opcje.

11:33Możesz przejść bezpośrednio do takiego do

11:35tego następnego rozdziału, w którym pokażę Ci jak automatyzować różne rzeczy, czyli

11:40dane z tego naszego formularza będziemy odbierać i z nimi robić coś więcej.

11:44No i prawdopodobnie nie będziesz miał problemu z tym, żeby to

11:48przerobić bez jakiejś większej wiedzy technologicznej.

11:51Ale możesz też przerobić na Eduweb'ie kurs,

11:53który nazywa się HTTP i API, który zdecydowanie polecam po to, aby zrobić

11:57sobie taki background pod ten kolejny rozdział.

12:00Tak czy inaczej zapraszam Cię do następnej lekcji.

12:03Bardzo Ci dziękuję za uwagę. Do tej pory.