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.

Historie takie jak te zainspirowały nas do znalezienia prostego rozwiązania. Podejście, z którego każdy może skorzystać, aby tworzyć formularze kompatybilne z AMP bez bólu głowy 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 lub AMP to projekt Google, który sprawia, że witryny ł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:

• Dodawanie formularzy AMP w WordPress (krok po kroku)
• Dodawanie Google reCAPTCHA do Twojego formularza AMP
• Dodatkowa wskazówka: Spraw, aby Twoja witryna WordPress była przyjazna dla urządzeń mobilnych

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

W tym samouczku użyjemy wersji WPForms Pro, ponieważ oferuje ona więcej funkcji, narzędzi AI, szablonów formularzy, dodatków i opcji dostosowywania. Istnieje również wersja WPForms Lite, której możesz użyć, aby zacząć za darmo.

Zarówno wersja Lite, jak i Pro WPForms pozwala na stworzenie podstawowego formularza kontaktowego gotowego na AMP.

Najpierw musisz zainstalować i aktywować wtyczkę WPForms. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

Krok 2: Dodaj AMP do swojej strony WordPress

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

Aby używać AMP z WordPress, musisz zainstalować i aktywować oficjalny plugin AMP dla WordPress. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować plugin 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.

Ze strony ustawień AMP możesz włączyć lub wyłączyć AMP na swojej stronie internetowej, wybrać tryb strony internetowej dla AMP i wybrać obsługiwane szablony.

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. Lub możesz otworzyć stronę w przeglądarce stacjonarnej, 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. Google AMP obsługuje tylko reCAPTCHA v3, więc musisz wybrać opcję typu reCAPTCHA „Oparta na wyniku (v3)”.

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.

Mamy nadzieję, że ten artykuł pomógł Ci łatwo dowiedzieć się, jak tworzyć formularze AMP w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia formularzy zgodnych z RODO w WordPress oraz naszymi ekskluzywnymi wyborami najlepszych narzędzi do tworzenia formularzy online.

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.