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

Czy słyszałeś o Accelerated Mobile Pages (AMP)? Przyspieszone strony mobilne (AMP) Google mogą pomóc przyspieszyć twoją witrynę internetową i zapewnić szybką obsługę na urządzeniach mobilnych.

Jednak AMP usuwa różne elementy z twojej witryny internetowej, aby poprawić wydajność. Należą do nich formularze WordPress.

Prostym sposobem na obejście tego jest tworzenie formularzy, które są obsługiwane przez AMP. Z naszego doświadczenia wynika, że najprostszym sposobem na to jest użycie WPForms.

W tym artykule pokażemy, jak tworzyć formularze AMP w WordPressie za pomocą WPForms (w najprostszy sposób).

Dlaczego warto utworzyć formularz AMP w WordPress?

Accelerated Mobile Pages lub AMP to projekt Google, który sprawia, że witryny internetowe wczytują się szybciej na urządzeniach mobilnych.

Chociaż AMP zapewnia doskonałe wrażenia podczas przeglądania na urządzeniach mobilnych, sprawiając, że twoje strony internetowe wczytują się szybciej, to wyłącza wiele przydatnych funkcji na twojej witrynie internetowej WordPress.

Jednym z nich są formularze kontaktowe. Ponieważ AMP używa ograniczonego zestawu HTML i JavaScript, twoje formularze WordPress nie mogą wczytywać się poprawnie 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 stylizacji twojej witryny internetowej, aby zapewnić doskonałe wrażenia na urządzeniach mobilnych.

Jeśli jednak korzystasz z AMP na swojej witrynie WordPress, możesz użyć wtyczki do wyświetlania formularzy. Zobaczmy, jak dodać formularz AMP do twojej witryny.

Dodawanie formularzy AMP w WordPress (krok po kroku)

Najlepszym sposobem na utworzenie formularza AMP jest użycie WPForms. Jest to najbardziej przyjazna dla początkujących wtyczka do formularzy kontaktowych WordPress, która pomaga tworzyć formularze WordPress gotowe do AMP.

Ich zespół współpracował ostatnio z Google, aby ułatwić korzystanie z formularzy AMP w WordPress.

Krok 1: Instalacja i włączanie wtyczki WPForms

W tym poradniku użyjemy wersji WPForms Pro, ponieważ oferuje ona więcej funkcji, szablonów formularzy, dodatków i opcji konfiguratora. Istnieje również wersja WPForms Lite, której można użyć, aby rozpocząć za darmo.

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

Najpierw należy zainstalować i włączyć wtyczkę WPForms. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Krok 2: Dodaj AMP do twojej witryny WordPress

Zanim utworzymy formularz, ważne jest, abyś miał skonfigurowany AMP na swojej witrynie WordPress.

Aby korzystać z AMP z WordPressem, należy zainstalować i włączyć oficjalną wtyczkę AMP dla WordPressa. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu, wtyczka automatycznie doda pomoc techniczną Google AMP dla twojej witryny WordPress.

Możesz jednak zmienić ustawienia AMP dla twojej witryny internetowej, przechodząc do AMP ” Ustawienia z kokpitu.

Na stronie ustawień AMP można włączyć lub wyłączyć AMP na twojej witrynie internetowej, wybrać tryb witryny dla AMP i wybrać obsługiwane szablony.

Więcej szczegółów można znaleźć w naszym przewodniku na temat tego, jak poprawnie skonfigurować Google AMP na twojej witrynie WordPress.

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

Krok 3: Utwórz nowy formularz AMP w WPForms

Wystarczy przejść do WPForms ” Dodaj nową stronę, aby utworzyć nowy formularz WordPress. WPForms jest domyślnie zgodny [może być też „kompatybilny”] z AMP, więc nie trzeba włączać żadnych specjalnych ustawień.

Na ekranie konfiguracji formularza można wybrać szablon formularza i wpisz nazwę u góry. Możesz wybrać Pusty formularz, jeśli chcesz zacząć od zera lub użyć gotowego szablonu, aby szybko edytować go zgodnie z twoimi potrzebami.

W tym poradniku wybierzemy szablon„Prosty formularz kontaktowy„.

Następnie zobaczysz stronę kreatora formularzy, na której znajdują się różne opcje umożliwiające dostosowanie twojego szablonu.

Z tego miejsca można dodawać lub usuwać pola formularza. Aby utworzyć nowe pole w twoim formularzu, wystarczy kliknąć pole formularza w lewym panelu i przeciągnąć je na szablon formularza.

Następnie można skonfigurować opcje pola. Wystarczy kliknąć pole, a opcje pola pojawią się po lewej stronie.

Można na przykład edytować etykietę i format pola, uczynić je polem wymaganym, skonfigurować logikę warunkową i nie tylko. Podobnie można dostosować wszystkie inne pola.

Następnie możesz kliknąć kartę „Ustawienia”, aby skonfigurować ustawienia twojego formularza.

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

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

Następnie można kliknąć kartę „Potwierdzenie”, aby skonfigurować wiadomość potwierdzającą, która będzie wyświetlana, gdy użytkownik prześle formularz.

WPForms umożliwia wyświetlenie komunikatu, strony lub przekierowanie użytkownika na adres URL po przesłaniu formularza.

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

Krok 4: Dodaj twój formularz AMP do strony

Teraz, gdy twój formularz WordPress jest gotowy, możesz dodać go do strony.

W kreatorze formularzy WPForms u góry znajduje się przycisk „Osadzanie”. Wystarczy go kliknąć, aby utworzyć Twój formularz na nowej lub istniejącej stronie.

Następnie otworzy się wyskakujące okienko z prośbą o utworzenie nowej strony lub wybranie istniejącej.

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

Następnie wpisz nazwę twojej nowej strony formularza.

Gdy to zrobisz, po prostu kliknij przycisk „Let’s Go”.

W tym miejscu zobaczysz podgląd twojego formularza AMP w edytorze treści.

Alternatywnie można również użyć bloku WPForms, aby dodać formularz w edytorze treści. Wystarczy wybrać twój formularz AMP z rozwijanego menu.

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

To wszystko! Nie musisz konfigurować niczego więcej. Wtyczka WPForms doda teraz pełną pomoc techniczną AMP do twojego formularza.

Jeśli chcesz zobaczyć, jak to wygląda, możesz otworzyć stronę na twoim telefonie komórkowym. Możesz też otworzyć stronę w przeglądarce na komputerze, dodając /amp/ lub /?amp na końcu adresu URL twojej strony, tak jak poniżej:

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

Dodanie Google reCAPTCHA do twojego formularza AMP

Domyślnie WPForms zawiera ustawienia antyspamowe do wyłapywania i blokowania spamu. Dodatkowo możesz użyć Google reCAPTCHA, aby zmniejszyć liczbę zgłoszeń spamu.

Aby korzystać z Google reCAPTCHA w formularzach AMP, musisz zarejestrować swoją witrynę dla Google reCAPTCHA v3 i uzyskać klucze API Google.

Najpierw należy przejść do witryny internetowej Google reCAPTCHA i kliknąć przycisk „v3 Admin Console” w prawym górnym rogu strony.

Następnie należy zalogować się na twoje konto Google. Gdy to zrobisz, zobaczysz stronę „Zarejestruj nową witrynę”.

Następnie musisz wpisz nazwę twojej witryny internetowej w polu Etykieta. Google AMP obsługuje tylko reCAPTCHA v3, więc musisz wybrać opcję rodzaju reCAPTCHA „Score based (v3)”.

Następnie wpisz nazwę twojej domeny (bez https://www.) w polu Domains.

Następnie kliknij przycisk „Prześlij”.

Następnie zobaczysz komunikat o powodzeniu wraz z kluczem witryny i kluczem prywatnym, aby dodać reCAPTCHA do twojej witryny.

Wystarczy skopiować te klucze.

Teraz masz klucze API Google, aby dodać reCAPTCHA do twoich formularzy. Jest jednak jeszcze jedno ustawienie wymagane do zapewnienia zgodności AMP z reCATCHA.

Najpierw należy kliknąć odnośnik „Przejdź do ustawień”.

Następnie ponownie zobaczysz ustawienia reCAPTCHA z polem wyboru „Zezwalaj temu kluczowi na pracę ze stronami AMP”. Po prostu zaznacz to pole i kliknij przycisk „Zapisz” poniżej.

Teraz, gdy masz już klucze API Google, aby dodać reCAPTCHA do formularzy AMP, musisz je wpisz w WPForms.

Możesz otworzyć stronę WPForms ” Ustawienia ” CAPTCHA w twoim kokpicie WordPress.

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

Następnie wystarczy wkleić klucz witryny i klucz prywatny. Po zakończeniu kliknij przycisk „Zapisz ustawienia”.

Teraz, gdy Google reCAPTCHA zostało dodane do WPForms, możesz włączać je 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.

Po wyświetleniu ekranu konfiguracji formularza kliknij kartę „Ustawienia” i wybierz zakładkę „Ochrona przed spamem i zabezpieczenia”.

Z tego miejsca wystarczy włączyć opcję Google v3 reCAPTCHA.

Gdy to zrobisz, zapisz swój formularz, klikając przycisk „Zapisz” w prawym górnym rogu.

Następnie możesz ponownie odwiedzić twoją stronę kontaktową i zobaczyć formularz AMP z reCAPTCHA w działaniu.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo tworzyć formularze AMP w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia formularzy zgodnych z RODO w WordPressie i naszą ekspercką listą najlepszych wtyczek do ankiet dla WordPressa.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.