Jak spersonalizować projekt formularza w Elementorze za pomocą widżetów Happy Form za DARMO!

Opublikowany: 2021-03-04

Chcesz dodać elegancko wyglądający formularz na swojej stronie Elementor i potrzebujesz do tego idealnego rozwiązania? Twój czas poszukiwań wreszcie się skończył!

Twoje ulubione dodatki Happy Elementor niedawno uruchomiły bezpłatne widżety formularzy, które umożliwiają bezproblemowe dodawanie formularzy na różnych stronach lub sekcjach witryny. Jego integracja z 7 popularnymi kreatorami formularzy oznacza, że ​​możesz dodawać formularze z dowolnego z nich i stylizować za pomocą Happy Addons. Wskazuje to tylko na jedną rzecz i tylko na jedną rzecz.

Dzięki widżetom formularzy Happy Addons otrzymasz „Mnóstwo stylów i zakresów dostosowywania”.

W tym samouczku pokazaliśmy, jak korzystać z widżetów formularzy Happy Addons na stronie internetowej zaprojektowanej przez Elementora. Dowiesz się również, jak dostosować ich projekt tak, jak chcesz.

Ale zanim to nastąpi, zrozummy, dlaczego widżety formularzy są niezbędne dla Twojej witryny.

Widżety formularzy Happy Addons w skrócie

Happy Addons to jeden z najlepszych dodatków do Elementora, który pomógł ponad 100 000 użytkownikom WordPressa w zbudowaniu ich witryny. Zawiera mnóstwo niezbędnych funkcji i widżetów do dostosowywania postów, stron, produktów WooCommerce, formularzy i nie tylko.

Jak mogłeś już wiedzieć, Elementor oferuje domyślny widżet formularzy do wyświetlania formularzy na stronie internetowej. Nie ma jednak wystarczającej liczby funkcji, aby dostosować formularz za pomocą rozbudowanego projektu i stylu.

Tutaj wkracza Happy Addons. Widżety formularzy Happy Addons umożliwiają integrację formularzy z 7 najpopularniejszych kreatorów formularzy na WordPress. Każdy z widżetów ma różne układy, dzięki którym Twoje formularze będą bardziej przyjazne dla użytkownika i dobrze zaprojektowane.

7 wtyczek formularzy obsługiwanych przez Happy Addons Form Widget to:

  1. Formularz kontaktowy 7
  2. Formy ninja
  3. weForms
  4. Formy kaldery
  5. WPForms
  6. Formy grawitacyjne
  7. Formy płynne

Jak korzystać z widżetów formularzy Happy Addons w witrynie Elementor?

Korzystając z widżetu formularza Happy Addons, możesz łatwo dostosować i wyświetlić formularz na swojej stronie Elementor w ciągu kilku minut.

Aby to zrobić, potrzebujesz przynajmniej trzech wtyczek. Oni są -

  • Elementor (bezpłatny)
  • Wesołe dodatki do Elementora (bezpłatne)
  • Formularze WP (bezpłatne)

Tutaj używamy jednej z popularnych wtyczek formularzy WPForms.

Skonfigurujmy formularz kontaktowy.

Najpierw zainstaluj i aktywuj niezbędne wtyczki, o których wspomnieliśmy na powyższej liście.

Krok 1: Utwórz przykładowy formularz

Po zainstalowaniu wtyczki WPForms musisz stworzyć swój pierwszy formularz.

Aby to zrobić, przejdź do WPForms–> Dodaj nowy

Add new form

Na następnej stronie otrzymasz możliwość stworzenia swojego formularza.

Create form

Następnie możesz edytować swój formularz zgodnie ze swoimi wymaganiami i dodać wiele pól. Tutaj dodajemy trzy pola Nazwa, E-mail i Wiadomość.

Po zakończeniu edycji formularza należy kliknąć przycisk Zapisz .

Create a sample form

Następnie musisz utworzyć stronę, aby skonfigurować swój formularz. Możesz również ustawić formularz na swojej stronie kontaktowej.

Krok 2: Utwórz stronę do integracji formularza

Najpierw kliknij Strony–>Dodaj nowe .

Add new page Elementor

Na następnym ekranie zobaczysz opcję dodania tytułu strony.

Add your page title

Krok 3: Dodaj WPForms

Do zaprojektowania strony kontaktowej wykorzystaliśmy gotowy projekt strony kontaktowej WPForm. Skopiowaliśmy projekt za pomocą funkcji „ Kopiowanie na żywo ” Happy Addons Pro.

Wstępny projekt jest używany w dwóch rzędach do projektowania strony kontaktowej.

W lewej sekcji dodamy widżety WPForm. W prawej sekcji wstawiliśmy już obraz i dodaliśmy kolor tła sekcji.

Add widgets in the row

Teraz znajdź widżet WPForms na pasku wyszukiwania i wybierz widżet z menu po lewej stronie. Następnie przeciągnij i upuść go na wybranym obszarze.

Add WPForm widgets

Następnie wybieramy nazwę formularza z rozwijanego menu, które utworzyliśmy wcześniej.

SElect the created form

Krok 4: Stylizuj formularz za pomocą szczęśliwych dodatków

Teraz możesz łatwo przeprojektować formularz kontaktowy, jeśli chcesz.

Tutaj pokazujemy.

Zaprojektuj nagłówek

Najpierw dodajemy Happy Gradient Heading z lewego menu paska bocznego​.

Add Happy Gradient Heading

Następnie możesz dostosować szczęśliwy nagłówek gradientowy w swoim własnym stylu. Możesz wybrać Presety–>Projekt , a także edytować Tytuł .

Edit Heading

Po zaprojektowaniu nagłówka zmienimy styl formularza.

Zaprojektuj formę

Aby przeprojektować formularz, musisz przejść do Style . Tutaj otrzymasz opcję stylizacji formularza, taką jak Pola formularza, Etykieta pól formularza i Przycisk Prześlij .

Style the form

Pola formularza : W ustawieniach pola formularza zmienisz odstępy między polami, dopełnienie, promień obramowania, typografię. Kolor tekstu pola, kolor zastępczy pola, typ obramowania i inne.

Etykieta pól : Etykieta pól umożliwia również edycję marginesów, dopełnienia, typografii etykiety, typografii etykiety podrzędnej, typografii opisu i kolorów.

Przycisk przesyłania : W razie potrzeby dostosujesz również przycisk przesyłania, zmieniając pełną szerokość przycisku, szerokość przycisku, margines, dopełnienie, typografię, obramowanie, kolor, promień obramowania, cień ramki, kolor tekstu i kolor tła przycisku.

Dostosujmy nieco formularz.

Customize the form

Ostateczny podgląd

Oto ostateczny podgląd naszej strony kontaktowej.

Final preview

Możesz również zobaczyć ten przydatny samouczek wideo.

Zapoznaj się z pełną dokumentacją WPForm.

Widgety formularzy: czym są i dlaczego ich potrzebujesz?

Jaki jest cel posiadania formularza na stronie internetowej?

Why Form Widget Is So Important

Formularz służy do różnych celów na stronie internetowej. Możesz otrzymywać wiadomości za pomocą formularza i komunikować się z użytkownikami. Pomaga również budować zaufanie klientów. W związku z tym może zwiększyć wiarygodność witryny i umożliwić lepszą komunikację z użytkownikami witryny. Więc co robią widżety formularzy?

Widżety formularzy umożliwiają łatwe wyświetlanie formularzy w witrynie Elementor.

Oto kilka kluczowych wniosków, które wyraźnie pokazują, jak ważne jest posiadanie formularza na stronie internetowej –

  • Zmniejsz ilość spamu
  • Otrzymuj wiadomości, kiedy ci pasuje
  • Śledź zapytania
  • Generuj więcej leadów
  • Stwórz swoją listę e-mail marketingową
  • Zaoferuj obsługę klienta
  • Otrzymuj wiadomości wysłane przez użytkowników

Widżety formularzy Happy Addons mogą pomóc Ci wykonać je wszystkie w intuicyjnym procesie integracji widżetów formularzy. Dowiedzmy się więcej o widżecie formularzy Happy Addons.

Wniosek

W tym blogu omówiliśmy wszystko, co musisz wiedzieć o widżetach formularzy Happy Addons. Pokazaliśmy również, jak ustawić formularz za pomocą widżetu Happy Addons WPForm. Możesz zrobić to samo dla pozostałych 6 wtyczek formularzy, w ten sam sposób.

W tej samej notatce, oto jak utworzyć formularz kontaktowy Elementor.

Kompletny przewodnik po tworzeniu formularza kontaktowego Elementor

Jeśli nadal masz pytania dotyczące dodawania i dostosowywania formularzy w witrynie Elementor, możesz je skomentować. Udostępnij post na swoich kanałach społecznościowych i pomóż znajomym w nauce.