Jak tworzyć formularze AMP w WordPress (łatwy sposób)

Słyszeliśmy od wielu właścicieli stron WordPress, którzy podzielają tę samą frustrację. Ich formularze wyglądają dobrze, ale na stronach AMP ładują się zbyt wolno lub wcale nie działają.

Jeden właściciel małej firmy powiedział nam nawet, jak klienci rezygnowali z wypełniania formularza zamówienia, ponieważ ładował się on wiecznie na urządzeniach mobilnych.

Jeśli zdecydowałeś się użyć AMP, aby przyspieszyć działanie swojej witryny, potrzebujesz rozwiązania dla swoich formularzy. Znaleźliśmy proste podejście, które każdy może zastosować, aby tworzyć formularze kompatybilne z AMP bez problemów i kodowania.

Po wypróbowaniu wielu wtyczek i metod odkryliśmy niezawodny sposób na tworzenie szybkich, przyjaznych dla urządzeń mobilnych formularzy, które faktycznie działają.

W tym przewodniku przeprowadzimy Cię krok po kroku przez najprostszy sposób tworzenia formularzy AMP dla Twojej witryny WordPress. Niezależnie od tego, czy chcesz formularz kontaktowy, ankietę, czy formularz zamówienia, który ładuje się natychmiast na urządzeniach mobilnych.

Dlaczego tworzyć formularz AMP w WordPress?

Accelerated Mobile Pages, czyli AMP, to projekt Google, który sprawia, że strony internetowe ładują się szybciej na urządzeniach mobilnych.

Chociaż AMP oferuje wspaniałe wrażenia podczas przeglądania stron mobilnych, przyspieszając ładowanie stron internetowych, wyłącza wiele przydatnych funkcji na Twojej stronie WordPress.

Jednym z nich są formularze kontaktowe. Ponieważ AMP używa ograniczonego zestawu HTML i JavaScript, Twoje formularze WordPress nie mogą poprawnie ładować się na stronach AMP.

Alternatywnie, możesz użyć jednego z wielu responsywnych motywów WordPress, które oferują doskonałą wydajność na komputerach stacjonarnych i urządzeniach mobilnych. W ten sposób nie musisz rezygnować ze stylu swojej strony internetowej, aby zapewnić doskonałe wrażenia na urządzeniach mobilnych.

Jednak jeśli używasz AMP na swojej witrynie WordPress, możesz użyć wtyczki do wyświetlania formularzy. Oto szybki przegląd wszystkich tematów, które omówimy w tym przewodniku:

Zacznijmy od razu!

Dodawanie formularzy AMP w WordPress (krok po kroku)

Najlepszym sposobem na utworzenie formularza AMP jest użycie WPForms. Jest to najbardziej przyjazny dla początkujących plugin formularza kontaktowego WordPress, który pomaga tworzyć formularze WordPress gotowe na AMP. Ich zespół współpracował z Google, aby ułatwić tworzenie formularzy AMP dla WordPress.

Krok 1: Zainstaluj i aktywuj wtyczkę WPForms

Zarówno wersja Lite, jak i Pro WPForms pozwala na stworzenie podstawowego formularza kontaktowego gotowego na AMP. Ale w tym poradniku użyjemy wersji WPForms Pro, ponieważ oferuje więcej funkcji, narzędzi AI, szablonów formularzy, dodatków i opcji dostosowywania.

Aby zacząć, możesz odwiedzić stronę WPForms i założyć konto. Następnie kliknij przycisk „Get WPForms Now”, wybierz plan i zakończ proces rejestracji.

Po zarejestrowaniu zostaniesz przekierowany do panelu konta WPForms. Stamtąd możesz pobrać plik wtyczki i skopiować klucz licencyjny – oba będą potrzebne w kolejnych krokach.

Teraz czas dodać WPForms do swojej witryny. Z poziomu obszaru administracyjnego WordPress przejdź do Wtyczki » Dodaj nową wtyczkę.

Na następnym ekranie wyszukaj „WPForms”.

Gdy zobaczysz WPForms w wynikach, kliknij „Zainstaluj teraz”, a następnie „Aktywuj”.

Jeśli potrzebujesz dodatkowej pomocy z tym krokiem, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do WPForms » Ustawienia w swoim panelu.

Wklej swój klucz licencyjny w pole „Klucz licencyjny” i kliknij „Zweryfikuj klucz”, aby połączyć swoje konto.

Po zakończeniu WPForms jest zainstalowany, aktywowany i gotowy do użycia na Twojej stronie.

Krok 2: Dodaj AMP do swojej strony WordPress

Zanim utworzymy formularz, ważne jest, aby mieć skonfigurowane AMP na swojej witrynie WordPress.

Aby korzystać z AMP z WordPress, musisz zainstalować i aktywować oficjalną wtyczkę AMP dla WordPress z panelu „Wtyczki” w obszarze administracyjnym.

Szczegółowe informacje znajdziesz w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczka automatycznie doda obsługę Google AMP do Twojej witryny WordPress.

Możesz jednak zmienić ustawienia AMP dla swojej witryny, przechodząc do AMP » Ustawienia z poziomu pulpitu nawigacyjnego.

Jeśli jesteś początkujący, zalecamy wybór trybu czytnika (czasami nazywanego klasycznym). Zapewnia to, że Twoja główna witryna na komputery pozostaje dokładnie taka sama, podczas gdy odwiedzający mobilni otrzymują super-szybką wersję AMP.

Więcej szczegółów znajdziesz w naszym przewodniku jak prawidłowo skonfigurować Google AMP na swojej stronie WordPress.

Po skonfigurowaniu AMP, następnym krokiem jest utworzenie formularza kontaktowego zgodnego z AMP na Twojej stronie WordPress.

Krok 3: Utwórz nowy formularz AMP w WPForms

Po prostu przejdź do strony WPForms » Dodaj nowy, aby utworzyć nowy formularz WordPress.

WPForms jest domyślnie kompatybilny z AMP, więc nie będziesz musiał włączać żadnych specjalnych ustawień.

Na ekranie konfiguracji formularza możesz zacząć od nazwania swojego formularza.

Następnie wybierzesz, w jaki sposób zbudujesz formularz.

Możesz wybrać pusty formularz, jeśli chcesz zacząć od zera. Jeśli wolisz łatwiejszą i szybszą opcję, możesz skorzystać z kreatora formularzy AI. Pozwoli Ci to stworzyć formularz za pomocą prostego polecenia.

Lub użyj gotowego szablonu, który możesz szybko edytować zgodnie ze swoimi potrzebami. WPForms Pro zawiera ponad 2000 gotowych szablonów do wyboru!

W tym samouczku wybierzemy szablon „Prosty formularz kontaktowy”.

Następnie zobaczysz stronę kreatora formularzy, gdzie dostępne są różne opcje dostosowywania szablonu.

Stąd możesz dodawać lub usuwać pola formularza. Aby dodać nowe pole do formularza, wystarczy kliknąć pole formularza z lewego panelu i przeciągnąć je na szablon formularza.

Następnie możesz skonfigurować opcje pola.

Po prostu kliknij pole, a następnie po lewej stronie pojawią się „Opcje pola”.

Na przykład możesz edytować etykietę i format pola, uczynić je polem wymaganym, skonfigurować logikę warunkową i wiele więcej. Podobnie możesz dostosować wszystkie inne pola.

Możesz również dodać więcej pól do swoich formularzy. WPForms zawiera podstawowe pola, takie jak rozwijane i suwak, a także bardziej zaawansowane, takie jak selektor daty i podział strony.

Po prostu przeciągnij i upuść typy pól z lewego panelu do prawego lub zmień ich kolejność w podglądzie formularza, przeciągając je w górę lub w dół.

Następnie możesz kliknąć zakładkę „Ustawienia”, aby skonfigurować ustawienia formularza.

Ustawienia „Ogólne” pozwalają zmienić nazwę formularza, tekst przycisku wysyłania, tekst przetwarzania przycisku wysyłania i inne.

Następnie możesz kliknąć zakładkę „Powiadomienia”, aby skonfigurować powiadomienia e-mail, które poinformują Cię, gdy użytkownik wypełni formularz.

Następnie możesz kliknąć zakładkę „Potwierdzenie”, aby skonfigurować wiadomość potwierdzającą, która zostanie wyświetlona po przesłaniu formularza przez użytkownika.

WPForms pozwala wyświetlić wiadomość, pokazać stronę lub przekierować użytkowników na adres URL po przesłaniu formularza.

Po zakończeniu konfiguracji możesz zapisać swój formularz.

Krok 4: Dodaj swój formularz AMP do strony

Teraz, gdy Twój formularz jest gotowy, możesz dodać go do swojej witryny WordPress.

W kreatorze formularzy WPForms zobaczysz przycisk „Osadź” na górze. Po prostu kliknij go, aby dodać formularz do nowej lub istniejącej strony.

Następnie otworzy się okno podręczne z prośbą o utworzenie nowej strony lub wybranie istniejącej.

W tym samouczku wybierzemy opcję „Utwórz nową stronę”.

Następnie musisz wprowadzić nazwę dla swojej nowej strony formularza.

Po zakończeniu po prostu kliknij przycisk „Let’s Go”.

Stąd zobaczysz podgląd swojego formularza AMP w edytorze treści.

Alternatywnie, możesz również użyć bloku WPForms, aby dodać formularz w edytorze treści.

Wybierz swój formularz AMP z listy rozwijanej.

Następnie możesz opublikować lub zaktualizować swoją stronę.

To wszystko! Nie musisz nic więcej konfigurować. Wtyczka WPForms doda teraz pełne wsparcie AMP do Twojego formularza.

Jeśli chcesz zobaczyć, jak to wygląda, możesz otworzyć stronę na swoim telefonie komórkowym. Jeśli korzystasz z Trybu Czytnika, możesz otworzyć stronę w przeglądarce na komputerze, aby ją przetestować, dodając /amp/ lub /?amp na końcu adresu URL strony, w ten sposób:

https://www.example.com/contact/?amp

Dodawanie Google reCAPTCHA do Twojego formularza AMP

Domyślnie WPForms zawiera ustawienia przeciwko spamowi, aby wyłapywać i blokować spam. Dodatkowo możesz użyć Google reCAPTCHA, aby zmniejszyć liczbę zgłoszeń spamowych.

Aby używać Google reCAPTCHA z formularzami AMP, musisz zarejestrować swoją witrynę w Google reCAPTCHA v3 i uzyskać klucze API Google.

Najpierw musisz przejść do witryny Google reCAPTCHA i kliknąć przycisk „Konsola administratora v3” w prawym górnym rogu strony.

Następnie musisz zalogować się na swoje konto Google. Po zakończeniu zobaczysz stronę „Zarejestruj nową witrynę”.

Następnie musisz wprowadzić nazwę swojej witryny w polu Etykieta. Strony Google AMP nie obsługują standardowego pola wyboru „Nie jestem robotem” (v2). Dlatego musisz użyć reCAPTCHA v3, która działa niewidocznie w tle.

Następnie wprowadź swoją nazwę domeny (bez https://www.) w polu Domeny.

Następnie kliknij przycisk 'Wyślij'.

Następnie zobaczysz komunikat o sukcesie wraz z kluczem witryny i kluczem tajnym, aby dodać reCAPTCHA do swojej witryny.

Po prostu skopiuj te klucze.

Teraz masz klucze API Google, aby dodać reCAPTCHA do swoich formularzy. Istnieje jednak jeszcze jedno ustawienie wymagane, aby zapewnić kompatybilność AMP z reCAPTCHA.

Najpierw musisz kliknąć link „Przejdź do ustawień”.

Następnie ponownie zobaczysz ustawienia reCAPTCHA z polem wyboru „Zezwól temu kluczowi na działanie na stronach AMP”. Po prostu zaznacz pole i kliknij przycisk „Zapisz” poniżej.

Teraz, gdy masz klucze API Google do dodania reCAPTCHA do formularzy AMP, musisz je wprowadzić w WPForms.

Możesz otworzyć stronę WPForms » Ustawienia » CAPTCHA w swoim panelu WordPress.

Następnie możesz przewinąć w dół i wybrać opcję „reCAPTCHA v3”.

Następnie po prostu wklej klucz witryny i klucz tajny. Po zakończeniu kliknij przycisk „Zapisz ustawienia”.

Teraz, gdy Google reCAPTCHA zostało dodane do WPForms, możesz je włączyć w swoich formularzach tam, gdzie jest to potrzebne.

Przejdź do WPForms » Wszystkie Formularze i wybierz formularz, w którym chcesz włączyć reCAPTCHA. Po prostu kliknij przycisk „Edytuj” pod nazwą formularza.

Gdy pojawi się ekran konfiguracji formularza, kliknij zakładkę „Ustawienia” i wybierz zakładkę „Ochrona przed spamem i bezpieczeństwo”.

Stąd po prostu włącz opcję Google v3 reCAPTCHA.

Po zakończeniu zapisz formularz, klikając przycisk „Zapisz” w prawym górnym rogu.

Po tym możesz ponownie odwiedzić swoją stronę kontaktową i zobaczyć formularz AMP z reCAPTCHA w akcji.

Dodatkowa wskazówka: Spraw, aby Twoja witryna WordPress była przyjazna dla urządzeń mobilnych

Tworzenie formularzy AMP to świetny początek, ale uczynienie całej Twojej witryny przyjazną dla urządzeń mobilnych jeszcze bardziej poprawi wrażenia użytkownika. Oto kilka szybkich wskazówek:

• Użyj responsywnego menu nawigacyjnego: Ułatw odwiedzającym przeglądanie Twojej witryny i znajdowanie tego, czego potrzebują, nawet na małych ekranach.
• Dostosuj umiejscowienie i rozmiar przycisku CTA: Upewnij się, że Twoje przyciski wezwania do działania są łatwe do kliknięcia i widoczne bez nadmiernego przewijania.
• Priorytetyzuj szybkość swojej witryny: Kompresuj obrazy i używaj wtyczek buforujących, aby skrócić czas ładowania.

Witryna zoptymalizowana pod kątem urządzeń mobilnych utrzymuje zaangażowanie odwiedzających i pomaga uzyskać więcej konwersji z Twoich formularzy!

Szczegółowe informacje znajdziesz w naszym przewodniku na temat tworzenia przyjaznej dla urządzeń mobilnych witryny WordPress.

FAQ: Tworzenie formularzy AMP w WordPressie

Zanim zakończymy, oto szybkie odpowiedzi na niektóre często zadawane pytania dotyczące AMP i korzystania z niego z formularzami WordPress.

Czym jest AMP w WordPress?

AMP (Accelerated Mobile Pages) to framework, który pomaga stronom szybciej ładować się na urządzeniach mobilnych, wykorzystując uproszczoną wersję HTML i JavaScript. W WordPress AMP zazwyczaj oznacza tworzenie lekkiej wersji stron zoptymalizowanej pod kątem szybkości na telefonach i tabletach.

Czy AMP jest nadal istotne?

Dla większości stron internetowych AMP nie jest już konieczne. Google priorytetowo traktuje teraz Core Web Vitals, które można poprawić za pomocą szybkiego, responsywnego motywu i dobrej wtyczki do cachowania. Jednak wydawcy wiadomości i duże strony medialne mogą nadal czerpać korzyści z AMP.

Jak tworzyć strony AMP w WordPress?

Najprostszym sposobem jest użycie wtyczki AMP. Może ona automatycznie generować wersje AMP Twoich stron i wpisów. Po zainstalowaniu jednej z nich możesz wybrać, które treści powinny mieć wersję AMP i dostosować podstawowe ustawienia z panelu administracyjnego WordPress.

Jakie są wady AMP?

Masz mniejszą kontrolę nad wyglądem, niektóre wtyczki i skrypty nie będą działać, a zaawansowane funkcje (takie jak pewne animacje, narzędzia do śledzenia czy niestandardowy JavaScript) mogą być ograniczone. Może to sprawić, że Twoja strona będzie wydawać się bardziej ograniczona w porównaniu do zwykłej strony WordPress.

Więcej przewodników po korzystaniu z formularzy WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo tworzyć formularze AMP w WordPress. Następnie możesz również zapoznać się z naszymi poradnikami na temat:

• Jak dostosować i stylizować formularze WordPress
• Jak używać formularzy kontaktowych do rozbudowy listy e-mailowej w WordPressie
• Jak tworzyć formularze zgodne z RODO w WordPress
• Ostateczny przewodnik po korzystaniu z formularzy WordPress
• Najlepsze kreatory formularzy online (wybór ekspertów)

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.