Jak utworzyć niestandardowy formularz rejestracji w Elementorze

Rifat E Mar 18, 2024

Jednym z krytycznych błędów popełnianych przez większość małych firm jest korzystanie z formularzy rejestracyjnych, które są dość powszechne i identyczne z wszystkimi innymi formularzami rejestracyjnymi w Internecie.

Zawsze, gdy mamy możliwość przeglądania formularzy naszych klientów w odpowiedzi na ich zapytania, konsekwentnie zauważamy tę tendencję.

Aby pomóc naszym czytelnikom w tworzeniu przyciągających wzrok formularzy rejestracyjnych, które powiększą Twoją listę biuletynów, postanowiliśmy szybko przygotować ten artykuł.

W tym samouczku dowiesz się, jak używać Elementora , najpopularniejszego narzędzia do tworzenia stron dla WordPress, do tworzenia unikalnego formularza rejestracyjnego.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Niestandardowy formularz rejestracyjny w Elementorze

Zainstaluj Elementora i WPForms

Nauczymy Cię, jak używać Elementora do tworzenia niestandardowych formularzy rejestracyjnych, ponieważ większość użytkowników używa go do publikowania swoich stron.

Zainstaluj Elementora, jeśli nie jest jeszcze zainstalowany na Twojej stronie.

Do tego kursu nie jest wymagana licencja premium Elementor. Alternatywnie możesz tworzyć formularze rejestracyjne za darmo, łącząc Elementor z WPForms !

Chociaż możesz używać kombinacji Elementora i WPForms, aby całkowicie bezpłatnie tworzyć wspaniałe niestandardowe formularze rejestracyjne, sugerujemy użycie licencji WPForms Pro, aby uzyskać dostęp do bardziej wyrafinowanych funkcji w celu uzyskania lepszych wyników.

wpforms | Best Lead Generation WordPress Plugin

Po zainstalowaniu obu wtyczek można teraz rozpocząć tworzenie w pełni spersonalizowanego formularza rejestracyjnego!

Utwórz lub edytuj stronę za pomocą Elementora

Formularz rejestracyjny możesz dodać do nowo utworzonej strony lub już istniejącej. Formularz biuletynu jest zazwyczaj zintegrowany jako jedna z wielu części większej strony docelowej. Jednakże, dla uproszczenia, utworzymy nową stronę zawierającą tylko formularz rejestracyjny.

Aby rozpocząć, kliknij Strony > Dodaj nową stronę w panelu WordPress.

Gdy już znajdziesz się w środku, kliknij przycisk Edytuj za pomocą Elementora znajdujący się u góry edytora bloków WordPress.

Edytor Elementora zostanie załadowany wkrótce po naciśnięciu przycisku. Możesz użyć edytora „przeciągnij i upuść”, aby stworzyć w pełni funkcjonalną stronę docelową.

Widget WPForms zostanie wykorzystany w następnym kroku do zbudowania spersonalizowanego formularza rejestracji.

Utwórz nowy formularz rejestracji

Teraz jedyne, co musimy zrobić, to dodać niestandardowy formularz rejestracji, znajdźmy więc i przeciągnijmy widżet WPForms do sekcji po prawej stronie.

Możesz wybierać spośród dowolnych zapisanych formularzy utworzonych za pomocą WPForms lub zbudować nowy po wstawieniu widżetu WPForms na swoją stronę.

Wybierając przycisk + Nowy formularz znajdujący się w lewym oknie, wygenerujemy nowy formularz rejestracyjny.

Kreator formularzy WPForms zacznie się teraz ładować jako nakładka. Formularz rejestracyjny, który musisz zintegrować ze swoją stroną, możesz utworzyć tutaj.

Zacznij od nazwania formularza. Jest to przydatne, ponieważ możesz zlokalizować go w panelu WordPress i odwołać się do niego później.

Następnie znajdź odpowiedni szablon, korzystając z paska wyszukiwania znajdującego się pod panelem wyboru szablonu i przesuwając w dół. W tej lekcji będziemy używać szablonu formularza zapisu do biuletynu.

Po wybraniu szablonu na ekranie zostanie załadowany kreator formularzy. Pola Imię i Adres e-mail są już zawarte w tym szablonie i to wszystko, czego potrzebujesz, aby zapisać się do newslettera.

Ale to nie koniec dobrych czasów! Możemy tę formę wynieść na zupełnie nowy poziom.

Możemy to osiągnąć na przykład poprzez umieszczenie angażującego nagłówka, który zachęci więcej osób do rejestracji.

Można do tego wykorzystać pole Treść w WPForms Pro. Obszar Treść zostanie dodany na górze formularza.

Po dodaniu pola kliknij je, aby wyświetlić powiązane opcje pola w lewym panelu.

Nie musisz znać żadnego kodu, aby dodać dowolny tekst do edytora tekstu w lewym oknie. Sformatujemy go jako nagłówek 4 i dodamy do niego trochę tekstu. Aby jeszcze bardziej rozróżnić słowa, dodajmy emoji!

Pamiętaj, aby nacisnąć przycisk Podgląd aktualizacji pod edytorem, aby zobaczyć zmiany zachodzące w formularzu po prawej stronie.

Zaktualizujmy także tekst przycisku przesyłania, aby lepiej odzwierciedlał cel formularza.

Kliknij Ustawienia » Ogólne na pasku bocznym kreatora formularzy. Po dotarciu do pola Tekst przycisku przesyłania przewiń w dół. Wystarczy wpisać tutaj, aby zmienić domyślny tekst.

Fantastyczny! Forma zaczyna nabierać ładnych kształtów. To dobry moment, aby kliknąć Zapisz u góry formularza, aby go zapisać.

Jeśli jednak formularz zapisu do newslettera nie jest powiązany z Twoją platformą e-mail marketingu, jest bezużyteczny.

W następnym kroku przeprowadzimy Cię przez proces integracji formularza z oprogramowaniem marketingowym, tak aby nowo zarejestrowani użytkownicy byli automatycznie dodawani do Twojej listy subskrybentów.

Połącz formularz rejestracyjny z platformą marketingową

Różne łączniki marketingowe są obsługiwane przez WPForms, począwszy od subskrypcji Plus i wyższych. Jeśli korzystasz z WPForms Lite, nadal możesz bezpłatnie korzystać z integracji Constant Contact.

W tym przykładzie szybko przeprowadzimy Cię przez proces integracji formularza rejestracyjnego z Brevo.

Tylko na karcie Marketing na pasku bocznym.

Następnie zdecyduj, z jaką usługą ma być połączony Twój formularz. Zainstalowanie niezbędnego dodatku jest warunkiem wstępnym dla wszystkich obsługiwanych integracji marketingowych, z wyjątkiem Constant Contact.

Po kliknięciu dodatku WPForms zainstaluje go, jeśli nie jest jeszcze zainstalowany.

Tutaj używa się Brevo. Kiedy kliknęliśmy Brevo na stronie Marketing, pojawił się monit o instalację. Zainstalowanie dodatku Brevo i jego przygotowanie zajęło około 5 sekund, po kliknięciu Tak, zainstaluj i aktywuj.

Następnie kliknij przycisk Dodaj nowe konto znajdujący się w prawym górnym rogu okna po lewej stronie po wybraniu Brevo.

Wprowadź teraz pseudonim swojego konta i klucz API Brevo. Po wprowadzeniu niezbędnych danych kliknij Dodaj.

Gdy tylko połączysz się ze swoim kontem Brevo, prawy panel zostanie zaktualizowany o nową listę ustawień.

Możesz swobodnie korzystać z rozwijanych pól, aby dostosować sposób interakcji formularza z kontem Brevo. Możesz skonfigurować kilka aspektów, np. to, co dzieje się w Brevo po przesłaniu formularza, którzy subskrybenci powinni zostać dodani lub usunięci, jak mapowane są pola e-mailowe i inne.

Po zakończeniu pamiętaj o wybraniu opcji Zapisz u góry.

Integracja marketingu została zakończona. To było całkiem proste, prawda?

Stylizuj swój formularz rejestracyjny i opublikuj go

Zakończyliśmy już wprowadzanie niezbędnych funkcji do formularza rejestracyjnego. Jednakże, jak podkreśliliśmy na początku tego artykułu, efektowna forma musi nie tylko być praktyczna, ale także rzucać się w oczy.

Mimo że dodaliśmy już do naszego formularza trochę tekstu i emotikonów za pomocą pola Treść, możemy zrobić jeszcze więcej dzięki połączonej mocy WPForms i Elementora.

Możesz łatwo opuścić WPForms, klikając przycisk krzyżyka, gdy formularz będzie gotowy. Od tej chwili świeżo skonstruowany formularz powinien zostać wstawiony jako widżet w edytorze Elementora.

Po kliknięciu formularza wybierz zakładkę Style z panelu po lewej stronie.

Na tej stronie znajdują się opcje modyfikowania stylu różnych elementów formularza. Na przykład nie musisz znać żadnego kodu, aby zmienić wygląd przycisków, etykiet i pól.

Granice pól w naszym formularzu są domyślnie prostokątne z prostymi narożnikami. Aby jednak uzyskać bardziej zaokrąglone granice pól, wystarczy zwiększyć promień obramowania w obszarze Style pól.

Podobnie wystarczy kliknąć, aby zmienić kolor przycisków, etykiet i pól. Użyjemy domyślnych kolorów, ponieważ doskonale i ładnie uzupełniają nasz motyw. Możesz jednak poeksperymentować z alternatywnymi schematami kolorów swojego formularza.

W Elementorze możesz także modyfikować style kontenerów formularzy. Kliknij kartę Zaawansowane, aby to osiągnąć.

Ta sekcja zawiera mnóstwo interesujących ustawień, takich jak dostosowywanie tła, efekty animacji i dostosowywanie układu.

Aby kontener formularza wyglądał bardziej żywo, dodajmy kolor tła. Aby dodać więcej ustawień do menu, wybierz opcję Tło.

Wybierając ikonę wyboru koloru znajdującą się po prawej stronie, zastosujemy jednolity kolor.

Narzędzie do wybierania kolorów umożliwia proste wybranie dowolnego koloru jednym kliknięciem.

Po wybraniu koloru forma wydaje się o wiele bardziej zachęcająca!

Nie wygląda to jednak ładnie, bo elementy formularza stykają się z krawędziami pojemnika.

To prosta naprawa!

Aby uzyskać dostęp do ustawień marginesów i dopełnienia, wybierz opcję Układ z menu Zaawansowane w lewym panelu. Jedyne, co zrobiliśmy, to dodaliśmy trochę wypełnienia i efekt wygląda fantastycznie!

Jesteśmy gotowi opublikować Twój formularz w tej chwili. Jeśli jednak chcesz, możesz spędzić tutaj więcej czasu i poeksperymentować z innymi dostosowaniami.

Gdy będziesz gotowy, naciśnij dolny przycisk „Opublikuj”.

Natychmiast pojawi się powiadomienie z prośbą o wyświetlenie opublikowanej strony.

Śmiało, sprawdź swoją stronę po opublikowaniu.

To też tyle!

Właśnie użyłeś WPForms i Elementor do skonstruowania spersonalizowanego formularza rejestracyjnego.

Dzięki temu możesz mieć pewność, że Twój formularz jest dostosowany do Twojej witryny i ma wbudowane funkcje oszczędzające czas, które pomogą Ci bezproblemowo zwiększyć liczbę subskrybentów poczty e-mail!

Podsumowanie

Tworzenie niestandardowych formularzy rejestracyjnych w Elementorze jest procesem przyjaznym dla użytkownika dzięki elastycznemu widżetowi formularza i interfejsowi „przeciągnij i upuść”. Możesz z łatwością dostosować profesjonalnie wyglądające formularze, korzystając z niestandardowych pól, eleganckich opcji stylizacji i elementów charakterystycznych dla marki. Strategiczne rozmieszczenie w połączeniu z dobrą estetyką prowadzi do wyższych współczynników konwersji.

Eksperymentuj z układami i przekazuj jasne opinie użytkowników. Połącz swoje formularze z usługami e-mail, aby łatwo zbierać zgłoszenia. Ostatecznie Elementor umożliwia tworzenie formularzy rejestracyjnych pasujących do Twojej witryny i marki, ułatwiając skuteczne budowanie list. Dzięki analizom w czasie rzeczywistym możesz stale udoskonalać formularze, aby uzyskać optymalną wydajność.

Divi WordPress Theme