Jak dostosować formularze WordPress w Elementorze [+ SZABLONY]

Czy chcesz stworzyć i dostosować własny formularz WordPress w Elementorze?

Dostosowanie formularza witryny to świetny sposób na zaprezentowanie swojej marki, personalizacji i intencji. A dzięki intuicyjnym kreatorom oferowanym przez WPForms i Elementor dostosowywanie jest proste.

W tym artykule pokażemy, jak dostosować swoje ulubione formularze WordPress w Elementorze. Ponadto udostępniamy niektóre z naszych najpopularniejszych szablonów formularzy, które być może zechcesz kupić dla siebie.

Utwórz teraz formularz WordPress

Czy potrzebuję Elementora dla WordPressa?

Nie musisz koniecznie instalować wtyczki Elementor dla swojej witryny WordPress, ale jest ona niezwykle przydatna.

Elementor to wtyczka do tworzenia stron, która oferuje interfejs „przeciągnij i upuść”, dzięki czemu jest idealna dla osób nieposiadających dużych umiejętności kodowania ani wiedzy projektowej. Oferuje szeroką personalizację, umożliwiając tworzenie pożądanych układów i projektów stron internetowych.

Dlatego potrzeba go dla Twojej witryny WordPress zależy od Twoich konkretnych wymagań i preferencji. Jeśli znasz HTML, CSS i masz duże umiejętności projektowania, możesz nie potrzebować Elementora.

Elementor jest dostępny zarówno w wersji bezpłatnej, jak i premium, więc zawsze możesz zacząć od wersji darmowej i w razie potrzeby uaktualnić ją, dzięki czemu można ją dostosować do swoich potrzeb.

Jak dostosować formularze WordPress w Elementorze

Zainstaluj i aktywuj wtyczki

Jest rzeczą oczywistą, że do wykonania tych kroków będziesz potrzebować zarówno WPForms, jak i Elementora.

Ale i tak to powiemy: pamiętaj o zainstalowaniu i aktywowaniu wtyczek WPForms i Elementor w panelu WordPress.

Aby uzyskać szczegółowe instrukcje dotyczące instalowania wtyczek na swojej stronie internetowej, zapoznaj się z tym podręcznym przewodnikiem.

Teraz możesz rozpocząć dostosowywanie. Pokażemy Ci jak to zrobić w Elementorze, zaczynając od niezbędnych elementów potrzebnych do podstawowego kontaktu. Następnie będziemy opierać się na tych elementach (gra słów zamierzona) dla każdego przykładu formularza, ponieważ staną się one nieco bardziej złożone.

Chcesz jeszcze więcej inspiracji? Sprawdź inne podejście do dodawania i dostosowywania formularzy WordPress w Elementorze.

Formularz kontaktowy

Formularz kontaktowy to jeden z najbardziej niezbędnych formularzy w Twojej witrynie i pozostaje naszym najpopularniejszym szablonem formularza.

Aby utworzyć formularz kontaktowy w Elementorze, najpierw przejdź do panelu WordPress. Kliknij Strony na pasku bocznym, a następnie Dodaj nowy .

Następnie kliknij niebieski przycisk Edytuj za pomocą Elementora , aby załadować narzędzie do tworzenia stron Elementor, które umożliwia osadzenie formularza kontaktowego i dostosowanie różnych elementów strony.

Teraz otworzy się narzędzie do tworzenia stron Elementor, w którym możesz przeciągać i upuszczać wszelkiego rodzaju bloki i elementy, które chcesz umieścić na stronie.

Śmiało, przeciągnij blok WPForms i upuść go na stronie. Teraz możesz wybrać formularz z menu rozwijanego tutaj lub dodać nowy formularz.

Kliknijmy + Nowy formularz , aby umieścić nasz formularz w bloku.

Następnie załaduje się kreator WPForms, dzięki czemu będziesz mógł dostosować formularz, którego chcesz używać w Elementorze.

Najpierw nadaj nazwę formularzowi , wpisując ją w polu u góry ekranu. Nazwiemy nasz „Formularz kontaktowy”, abyśmy wiedzieli, gdzie i jak z niego później skorzystać.

Następnie wybierz szablon z galerii, aby zbudować formularz.

Możesz użyć pustego szablonu formularza, aby zbudować formularz od zera, lub możesz uzyskać przewagę, korzystając z konkretnego szablonu, który jest wstępnie przygotowany i zawiera wszystkie niezbędne pola.

W naszym formularzu kontaktowym użyjemy szablonu.

Możesz przewinąć stronę w dół, aby przeglądać szablony, lub wyszukać coś konkretnego. Wyszukiwanie na przykład „Formularza kontaktowego” spowoduje wyświetlenie wszelkiego rodzaju szablonów formularzy kontaktowych do wyboru.

Do zbudowania formularza użyjemy szablonu Prosty formularz kontaktowy.

Jest to jeden z naszych najpopularniejszych szablonów formularzy, dlatego zalecamy jego użycie, aby również czerpać z niego korzyści!

I jak zawsze ten szablon formularza można łatwo dostosować za pomocą dodatkowych pól i ustawień. Po prostu kliknij i przytrzymaj żądane pole i przeciągnij je na formularz. Następnie wystarczy kliknąć pole, aby je edytować.

Dzięki szablonowi prostego formularza kontaktowego Twój formularz zbiera nazwę użytkownika, dzięki czemu możesz spersonalizować wszelką korespondencję z nim, a także przekazuje Ci wiadomość lub komentarz od niego.

Dodatkowym elementem dostosowywania, który należy uwzględnić w formularzu, jest wiadomość z potwierdzeniem, którą użytkownicy otrzymują po przesłaniu formularza. Przejdź do sekcji Ustawienia w kreatorze formularzy i kliknij kartę Potwierdzenia .

Tutaj możesz edytować wiadomość, która pojawia się na ekranie po kliknięciu przez użytkownika formularza „Wyślij”.

W naszym szablonie prostego formularza kontaktowego wiadomość z potwierdzeniem brzmi: „Dziękujemy za skontaktowanie się z nami! Wkrótce się z Tobą skontaktujemy.”

Uwaga: wszystkie szablony formularzy, które oferujemy w naszej galerii, są gotowe i zawierają odpowiednią wiadomość potwierdzającą dla użytkowników, ale zachęcamy do edytowania tej wiadomości w dowolny sposób!

Po zakończeniu dostosowywania formularza kliknij przycisk Zapisz u góry. Kreator formularzy można zamknąć, klikając X w prawym rogu okna kreatora formularzy.

Teraz wrócimy do narzędzia do tworzenia stron Elementor.

Dzięki naszemu szablonowi formularza kontaktowego osadzonemu na stronie możemy teraz dostosować style formularzy. Możemy edytować styl pól, etykiet, przycisków i nie tylko.

W naszym formularzu użyliśmy ustawień stylu pola, aby za pomocą kilku kliknięć zwiększyć promień i kolor obramowania.

Możesz zobaczyć, jak zaledwie kilka szybkich dostosowań ma duży wpływ na styl tej strony formularza.

Jakie stylizacje wymyślisz?

Pamiętaj o opublikowaniu strony formularza po zakończeniu dostosowywania stylów formularzy.

Po prostu kliknij przycisk Publikuj na dolnym pasku narzędzi.

Teraz będziemy opierać się na tych krokach, aby dostosować więcej stron formularzy za pomocą Elementora.

Formularz zapisu do newslettera

Innym powszechnym typem formularza, który możesz chcieć umieścić na swojej stronie internetowej, jest formularz zapisu do biuletynu.

Aby dostosować ten formularz w Elementorze, zaczniesz od pierwszych kroków od góry: dodania i edycji nowej strony w Elementorze, użycia bloku WPForms w celu dodania nowego formularza i wybrania szablonu, który będzie używany w przypadku formularza.

Ponieważ tego formularza będą używać odwiedzający Twoją witrynę do rejestrowania się w celu otrzymywania od Ciebie biuletynów, potrzebujesz szablonu zawierającego pola do zbierania ich imion i nazwisk oraz adresów e-mail.

Dlatego użyjemy szablonu formularza zapisu do newslettera.

Następnie możesz użyć narzędzia do tworzenia formularzy, aby dodać dodatkowe pola, takie jak pole wyboru warunków korzystania z usługi, niestandardową komendę CAPTCHA zapobiegającą rejestrowaniu się jako spam, a nawet funkcje geolokalizacji.

Jeśli chodzi o wiadomość potwierdzającą, jest ona ponownie załatwiona za Ciebie dzięki szablonowi.

Jak zawsze zachęcamy Cię do napisania dowolnej wiadomości, jaką chcesz otrzymać od swoich nowych subskrybentów. W międzyczasie pojawia się informacja: „Dziękujemy za zapisanie się do newslettera! Wkrótce się skontaktujemy.”

Nie zapomnij zapisać formularza zapisu do biuletynu po jego zakończeniu, przed wyjściem.

Następnie, ponownie w Elementorze, możemy ponownie dostosować styl formularza. Tym razem zmieńmy Style pól , Style etykiet i Style przycisków .

Pójdziemy dalej i dostosujemy tutaj Style pól , tak jak to zrobiliśmy w powyższym formularzu kontaktowym: zwiększamy promień obramowania do 10 pikseli i zmieniamy jego kolor na czarny.

Teraz skupmy się również na stylach etykiet. Aby etykiety na formularzu były bardziej widoczne, zwiększ ich rozmiar. Wybierzmy także zabawny kolor komunikatu o błędzie. Ten kolor można zobaczyć w przypadku gwiazdek na etykietach pól.

Następnie zwróć uwagę na przycisk Prześlij.

Jak widać na naszym formularzu, użyliśmy stylów przycisków , aby zwiększyć rozmiar przycisku, a także kolory tła i obramowania, aby dopasować je do reszty naszej stylizacji.

Aby uzyskać idealne dopasowanie kolorów, po prostu skopiowaliśmy różowy kolor wybrany za pomocą selektora kolorów w stylach etykiet i wkleiliśmy go do selektora kolorów tła dla stylów przycisków.

Następnie będziemy jeszcze bardziej kreatywni, korzystając ze wszystkich opcji stylizacji formularzy w Elementorze.

Formularz rejestracyjny obozu

Formularze rejestracyjne to jedne z naszych najbardziej poszukiwanych szablonów, a szablony formularzy rejestracyjnych na obozy cieszą się ostatnio największym zainteresowaniem.

Przejdziemy przez większość kroków, które już tu omówiliśmy, i od razu przejdziemy do wybierania szablonu formularza z WPForms.

Aby skorzystać z tego formularza, pobierz szablon formularza rejestracyjnego obozu skautów z naszej galerii.

Nie będziemy się zbytnio martwić edycją pól formularza ani wiadomości potwierdzającej, chociaż możesz dostosować szablon do potrzeb swojej organizacji.

Następnie w kreatorze stron Elementor będziemy pracować w ustawieniach zaawansowanych .

Ta zakładka ustawień pozwala nam wiele zrobić w zakresie stylizacji za pomocą bloku WPForms, w tym przesłać obraz dla niestandardowego tła.

Kliknij kartę Tło pod ustawieniami zaawansowanymi, aby utworzyć tło. i upewnij się, że Typ tła jest ustawiony na Klasyczny .

Następnie możesz przesłać obraz, który będzie tłem wyświetlanym w bloku WPForms.

Chociaż konfiguracja rozmiaru, położenia i innych elementów obrazu tła wymaga pewnej konfiguracji, ta funkcja dostosowywania jest warta wysiłku.

Na przykład w powyższym przykładzie prawdopodobnie chcielibyśmy edytować kolory tekstu, marginesy i wyrównanie oraz inne elementy formularza przed publikacją.

Formularz zamówienia klienta

Nie możemy napisać artykułu zawierającego szablony formularzy i nie wspomnieć o naszych szablonach formularzy zamówień.

Po raz kolejny pominiemy kroki, które już omówiliśmy i przejdziemy od razu do dostosowywania. W naszym formularzu użyjemy naszego najpopularniejszego szablonu formularza zamówienia: Szablonu formularza zamówienia klienta.

Teraz wracamy do ustawień zaawansowanych bloku WPForms. Wracamy także do karty Tło , ale tym razem typem tła jest Gradient .

Dzięki ustawieniom Gradientu możesz mieszać i dopasowywać dowolne pary kolorów, jakie tylko wymyślisz, a które zostaną zastosowane w gradiencie na tle formularza zamówienia.

Efekt końcowy jest oszałamiający, a możliwości dostosowywania są nieograniczone.

To zaledwie zarys wszystkich opcji dostosowywania i stylizacji, jakie masz w WPForms i Elementorze. Dlatego koniecznie zapoznaj się z naszymi dodatkowymi samouczkami i artykułami dotyczącymi Elementora.

Utwórz teraz formularz WordPress

Następnie połącz formularze Elementor z Arkuszami Google

Gratulacje! Jesteś na dobrej drodze do tworzenia niesamowitych formularzy w Elementorze.

Teraz spróbuj połączyć te formularze z Arkuszami Google. Chociaż Elementor może przechowywać wpisy w formularzu w panelu WordPress, są chwile, kiedy możesz chcieć zachować kopię wpisów w formularzu i potencjalnych klientów w Arkuszu Google.

Sprawdź więc nasz poradnik, aby dowiedzieć się, jak to zrobić!

Gotowy do zbudowania formularza? Zacznij już dziś od najłatwiejszej wtyczki do tworzenia formularzy WordPress. WPForms Pro zawiera wiele bezpłatnych szablonów i oferuje 14-dniową gwarancję zwrotu pieniędzy.

Jeśli ten artykuł Ci pomógł, śledź nas na Facebooku i Twitterze, aby uzyskać więcej bezpłatnych samouczków i przewodników WordPress.