Czy chcesz tworzyć formularze przyjazne dla AMP na twojej witrynie WordPress?
Przyspieszone strony mobilne (AMP) pomagają przyspieszyć witryny internetowe. Jednak AMP usuwa formularze WordPress, aby poprawić wydajność Twojej witryny.
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, nie może poprawnie wczytywać twoich formularzy WordPress 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 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.
Uwaga: Pola Modern Style Dropdown i Number Slider nie są zgodne [mogą być też „kompatybilne”] z Google AMP. Zamiast tego należy użyć pól rozwijanych w stylu klasycznym i liczbowym.
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 WordPress oraz najlepszym kreatorem stron typu „przeciągnij i upuść” dla WordPress.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
That’s great news. I can finally use the potential of the paid WP Forms I have on the site (that is, besides being able to use it on all the sites I’ve done thanks to unlimited sites). Thank you for the detailed instructions on how to use WP Forms on websites with AMP.
Konrad says
Great info! For those on a budget, are there any good free alternatives to WPForms that offer AMP compatibility?
WPBeginner Support says
If we find one we would recommend we will be sure to share!
Administrator
Adrian says
This article is a game-changer for anyone seeking to optimize their WordPress site for mobile performance with Accelerated Mobile Pages (AMP). The clear and concise explanation of how AMP impacts WordPress forms, and the subsequent guidance on creating AMP-friendly forms using WPForms, is incredibly valuable.
WPBeginner Support says
Glad you found it helpful!
Administrator
Shafqat Khan says
Great tutorial! AMP forms are crucial for mobile performance, and your guide simplifies the process with WPForms. I appreciate the clear steps, especially for adding Google reCAPTCHA, which is essential for security. Your articles are always a valuable resource!
WPBeginner Support says
Glad you’ve found our content helpful!
Administrator
Ralph says
Seems like it is good idea to do this if my site can be faster for mobile. I personally don’t like using my smartphone for reading websites, but from Google Analytcis i see my website went from 55-60% mobile users montly to 73-75% mobile users montly. Sometimes it is lower but it is inevitable trend that all bloggers should respect and adapt.
WPBeginner Support says
Glad you liked our recommendation
Administrator
Aman says
Thanks WP Begginer, Helpful for my website and works completely well.
WPBeginner Support says
Glad to hear our guide could help!
Administrator
faizan says
I learned information from WP Beginner and collected many things that can help me for creating best website
WPBeginner Support says
Glad to hear our guides have been helpful
Administrator
Mikolaj says
Great article! It’s super helpful for anyone who wants to keep their WordPress site AMP-friendly while still having forms. WPForms looks like the way to go. Thanks for sharing!
WPBeginner Support says
Glad you found the post helpful!
Administrator
Czarek says
This article is a valuable resource for anyone looking to optimize their WordPress site for mobile users while still maintaining the functionality of forms. It’s important to acknowledge that while Accelerated Mobile Pages (AMP) can significantly boost website speed, it often comes at the cost of removing certain features, including forms. The fact that this article addresses this issue by providing a solution is highly beneficial.
The recommendation to use WPForms for creating AMP-friendly forms is particularly noteworthy as it offers an easy and efficient method for ensuring your website remains user-friendly on mobile devices. This approach can help website owners strike a balance between speed and functionality, ensuring a positive user experience.
My question is: Are there any specific considerations or best practices to keep in mind when implementing AMP forms on a WordPress site using WPForms, especially in terms of form design, user experience, and potential impacts on SEO?
WPBeginner Support says
For AMP forms the main thing to keep in mind is ensuring that your users can use the form and there are not strange formatting issues when viewed.
Administrator
Ronald says
What about user-submitted content forms (for posts or custom post types)? How about user registration/login forms? I know WP Forms has those features at premium costs, but do they still work with AMP?
WPBeginner Support says
Currently the AMP support is valid only for the basic contact form feature.
Administrator
Irene says
This is nice. I’m so adding AMP and reCaptcha to my site as I’m already using wpforms lite. But I hope it doesn’t take up much resources.
Thanks WPbeginners. Following you has been one of the best decisions I made this year. God bless the day I found you.
WPBeginner Support says
Glad our guide could be helpful
Administrator