Jak stylizować i dostosowywać formularz kontaktowy Elementor

Dzięki Elementorowi tworzenie formularzy kontaktowych jest teraz łatwiejsze niż kiedykolwiek. Wszystko, czego potrzebujesz, to przeciągnąć i upuścić kilka widżetów, dostosować ustawienia zgodnie z wymaganiami i gotowe.

Jednak skuteczne dostosowywanie lub stylizowanie formularza kontaktowego Elementor może znacznie zmienić wygląd formularzy kontaktowych. Prosty i łatwy do zrozumienia formularz kontaktowy zawsze uzyska więcej odpowiedzi niż niejasny i zaśmiecony. Dlatego niestandardowy formularz Elementora jest tak ważny.

Możesz po prostu tworzyć, stylizować i dostosowywać Elementor. Jednak w tym artykule dowiesz się, jak dostosować formularz kontaktowy Elementor za pomocą narzędzia do tworzenia formularzy MetForm.

Dlaczego warto skorzystać z formularza kontaktowego Elementor

Zwiększ współczynnik konwersji
Gdy użytkownik znajdzie sposób, aby pozostać z Tobą w kontakcie i zadać odpowiednie pytania dotyczące oferowanych przez Ciebie produktów lub usług, możliwość konwersji znacznie wzrasta. Zmniejsza także współczynnik odrzuceń. 

Otrzymać odpowiedź: Niestandardowy formularz kontaktowy Elementora może być doskonałym sposobem na skontaktowanie się z użytkownikami Twojej witryny. Jeśli nie możesz się doczekać ulepszenia swoich usług lub wzbogacenia doświadczenia użytkownika, rozważ dodanie formularza opinii do swojej witryny.

Śledź zapytania: Gdy dowolny odwiedzający Twoją witrynę wyśle Ci zapytanie za pośrednictwem niestandardowego formularza kontaktowego WordPress, zostanie ono wysłane albo na podany adres e-mail, albo na listę wpisów w panelu WordPress. Pomaga łatwo śledzić zapytania. 

Filtruj spam: Formularz kontaktowy Elementora uchroni Cię przed spamerami. Jeśli umieścisz swój adres e-mail na swojej stronie internetowej, istnieje ryzyko, że otrzymasz niezliczoną ilość wiadomości spamowych.
W rezultacie możesz nie znaleźć ważnych wiadomości wtedy, gdy ich potrzebujesz. Formularz kontaktowy w Elementorze z funkcją ochrony przed spamem będzie dostarczał wiadomości wyłącznie od prawdziwych ludzi, a nie od botów czy spamerów. 

Wielokrotne użycie: Możesz skorzystać z formularza kontaktowego z różnych powodów. Niezależnie od tego, czy chodzi o otrzymywanie opinii, wniosków o pracę, zapytań sprzedażowych czy próśb o wsparcie, w Twojej witrynie wystarczy formularz kontaktowy. 

Czego potrzebujesz, aby zaprojektować niestandardowy formularz Elementora?

Aby rozpocząć tworzenie formularzy kontaktowych Elementor, potrzebujesz tylko dwóch wtyczek na swojej stronie WordPress:

1. Kreator stron Elementora
2. Kreator formularzy MetForm

W tym przewodniku przeprowadzę Cię przez proces tworzenia formularza kontaktowego Elementor za pomocą narzędzia do tworzenia stron Elementor i MetForm.

MetForm, który jest niestandardową wtyczką do formularza kontaktowego, ma zarówno wersję profesjonalną, jak i bezpłatną. Podczas gdy darmowa wersja ma wszystkie podstawowe funkcje potrzebne do utworzenia formularza kontaktowego w Elementorze, wersja profesjonalna pozwoli Ci poznać niektóre zaawansowane pola i funkcje. Poza tym prawie nie znajdziesz tych zaawansowanych funkcji w żadnym innym bezpłatnym lub profesjonalnym formularzu kontaktowym Elementora, na przykład Formularz kontaktowy Elementor 7, wpfroms, formularze Ninja itp.

Jeśli chodzi o Elementor, możesz używać Elementora Pro lub wersji darmowej. 

 Bez zbędnych ceregieli, przejdźmy dalej:

Zainstaluj wtyczkę niestandardowego formularza kontaktowego MetForm

Jeśli masz zainstalowany Elementor, wszystko, czego potrzebujesz, to zainstalować narzędzie do tworzenia formularzy MetForm na swojej stronie WordPress. Jest to wtyczka do tworzenia formularzy Freemium WordPress, która oferuje podstawowe i zaawansowane funkcje standardowego narzędzia do tworzenia formularzy. Oto proces instalacji MetForm: 

1. Z panelu administracyjnego WordPress przejdź do Wtyczki ➜ Dodaj nowe 
2. Szukaj "MeForm” z pola wtyczek wyszukiwania w prawym górnym rogu.
3. Znajdź MetForm w wynikach wyszukiwania i kliknij „Zainstaluj teraz” 
4. Aktywuj MetForm.

Utwórz i dostosuj formularz kontaktowy Elementor od podstaw

Teraz, gdy masz już wszystko, czego potrzebujesz do tworzenia niestandardowych formularzy kontaktowych WordPress w Elementorze, przejdźmy dalej i utwórz formularz kontaktowy od zera.

Krok 1

Utwórz stronę formularza kontaktowego Elementora, przechodząc do Strony ➜ Dodaj nowe. Nadaj formularzowi odpowiedni tytuł, a następnie kliknij „Edytuj za pomocą Elementora”. 

Krok 2

W polu wyszukiwania widżetu Elementor wyszukaj MetForm. Przeciągnij i upuść go na obszarze zawartości Elementora. 

Krok 3

Po lewej stronie kliknij „Edytuj formularz”. 

Jeśli tworzysz formularz po raz pierwszy lub chcesz stworzyć zupełnie nowy formularz, kliknij „Nowy„. 

Jeśli zapisałeś wcześniej utworzone „od”, możesz je edytować, klikając „Wybierz Formularz„. 

Krok 4

Aby rozpocząć tworzenie formularza od zera, wystarczy kliknąć na pusty szablon formularza kontaktowego. Jeśli zdecydujesz się skorzystać z gotowej biblioteki szablonów formularzy kontaktowych oferowanej przez MetForm, możesz wybrać dowolny formularz z listy szablonów formularzy.

Ponieważ zaczniemy od zera, przejdźmy do pustego szablonu formularza kontaktowego.

Krok 5

Teraz zobaczysz wyskakujące okno z obszarem zawartości Elementora i obszarem widżetów.

Obszar widżetów Elementora składa się ze wszystkich widżetów MetForm i Elementor. 

Aby rozpocząć tworzenie formularza, dodaj nowe sekcje z obszaru treści Elementora zgodnie z wymaganiami formularza, który zamierzasz utworzyć.

Krok 6

Przeciągnij i upuść widżety, których potrzebujesz, aby nadać formularzowi kształt. 

Jak stylizować i dostosowywać elementy formularza kontaktowego Elementor

Teraz, gdy przeciągnąłeś i upuściłeś wszystkie potrzebne widżety na formularzu elementora, możesz je edytować według własnego uznania. 

Aby dostosować dowolne pola formularza lub przyciski, po prostu kliknij przycisk lub pole w obszarze zawartości Elementora. 

Możesz dokonać zmian w zawartości i stylu pól formularza. Oprócz tego możesz także przejrzeć kartę Zaawansowane, aby dodać więcej funkcji. Gdy wszystko będzie gotowe, opublikuj stronę formularza kontaktowego. 

Dostosowywanie całego formularza kontaktowego w Elementorze

Jeśli Twoim celem jest dostosowanie całego tworzonego formularza, zapoznaj się z ustawieniami formularza dostępnymi w MetForm. 

Pod Ustawienia główne, istnieją opcje dostosowania następujących podstawowych ustawień formularza: 

1. Tytuł formularza
2. Wiadomość o sukcesie 
3. Wymagane logowanie (Tak/Nie)
4. Przechwytuj dane przeglądarki użytkownika (tak/nie)
5. Ukryj formularz po przesłaniu (tak/nie)
6. Przechowuj wpisy formularzy w bazie danych (tak/nie)
7. Tytuł wpisu
8. Limit wszystkich wpisów (ustaw liczbę)
9. Licz wyświetlenia (tak/nie)
10. Zatrzymaj przewijanie w pionie (włącz/wyłącz)
11. Przekieruj do (gdzie użytkownicy zostaną przekierowani po przesłaniu formularza)

Wyślij wiadomość e-mail z potwierdzeniem do użytkowników wraz z kopią zgłoszenia

Jeśli chcesz wysłać wiadomość potwierdzającą do osób, które wypełnią niestandardowy formularz kontaktowy WordPress, przejdź do formularza MetForm Ustawienia ➜ Potwierdzenie Patka. Przełącznik "Wiadomość e-mail z potwierdzeniem do użytkownika” na Tak, a następnie wypełnij następujące pola: 

1. Temat emaila
2. E-mail z
3. Odpowiedź e-mail do
4. Dziękuję wiadomość

Jak powiadomić administratora o przesłaniu nowego formularza? 

Po przesłaniu nowego formularza kontaktowego zazwyczaj zostaje on zapisany w bazie danych wpisów MetForm (jeśli włączono tę opcję w ustawieniach ogólnych). 

Jeśli jednak chcesz otrzymywać powiadomienia o nowych zgłoszeniach, możesz to również dostosować w menu Zakładka Powiadomienia w Ustawieniach formularza MetForm. Karta powiadomień zawiera następujące pola: 

1. Powiadomienie e-mail do administratora (przełącz NA)
2. Temat emaila
3. Wyślij email do
4. E-mail z
5. Odpowiedź e-mail do
6. Uwaga administratora

Jakich pól formularza należy użyć w formularzu kontaktowym Elementora?

Różne typy formularzy wymagają różnych pól formularza. Jeśli tworzysz prosty formularz kontaktowy w Elementorze, wystarczy Ci kilka prostych widżetów, takich jak SMS, e-mail, telefon, captcha i widżety przycisku przesyłania. 

Z drugiej strony, jeśli szukasz formularzy, takich jak formularz wstępu, formularz wydarzenia, formularz rezerwacji itp., być może będziesz musiał użyć różnych pól formularza i odpowiednio je dostosować. 

Aby ułatwić Ci wybór odpowiednich pól formularza, MetForm oferuje dziesiątki szablonów umożliwiających tworzenie różnorodnych typów formularzy, takich jak formularz rejestracyjny, Formularz ankiety WordPress, formularz rezerwacji itp. Sprawdź szablony formularzy demonstracyjnych tutaj. Na tej liście znajdziesz także darmowe szablony formularzy kontaktowych Elementora, umożliwiające budowanie formularzy kontaktowych w kilka sekund.

Jak osadzić niestandardowe formularze kontaktowe Elementora na dowolnej stronie? 

Jeśli nie chcesz tworzyć strony dla swojego formularza kontaktowego Elementor, a raczej osadzić formularz na dowolnej stronie, MetForm również Ci to umożliwia. 

MetForm tworzy indywidualne skróty dla wszystkich tworzonych przez Ciebie formularzy. Poza tym w MetForm będziesz mieć także niestandardowe skróty do formularzy kontaktowych. Aby znaleźć krótki kod konkretnego utworzonego formularza kontaktowego, przejdź do Panelu administracyjnego WordPress ➜ MetForm ➜ Formularze.

Znajdziesz tam skróty w dowolnej formie. Po prostu skopiuj krótki kod, a następnie wklej go na stronie, na której chcesz osadzić niestandardowy formularz kontaktowy WordPress. Bingo! 

Integracje, których możesz użyć w formularzu kontaktowym Elementor

Jeśli korzystasz z MetForm, możesz zintegrować REST API, aby wysyłać dane do API strony trzeciej. Poza tym możesz zintegrować formularz z Mailchimp, Google Sheet, MailPoet, Aweber, ConvertKit, GetResponse, ActiveCampaign, Zapier i Slack.

Ustaw, czy użytkownicy muszą się rejestrować/logować, aby wypełnić formularz

Zazwyczaj każdy może wypełnić utworzony przez Ciebie formularz, chyba że zdecydujesz, że jego wypełnienie będzie dozwolone tylko dla zarejestrowanych lub zalogowanych użytkowników. 

Jeśli więc chcesz, aby formularz wypełniali tylko zalogowani użytkownicy, włącz system logowania. 

Z drugiej strony możesz także pozwolić użytkownikom na rejestrację, a następnie wypełnienie formularza. 

Aby umożliwić użytkownikowi logowanie i rejestrację należy przejść do Ustawień formularza i następnie kliknąć zakładkę Uwierzytelnianie. Otrzymasz opcję włączenia i wyłączenia logowania użytkownika i rejestracji w formularzu Elementor.

Jak dodać metody płatności do formularza zbudowanego za pomocą Elementora? 

Jeśli używasz MetForm do utworzenia formularza kontaktowego Elementor, przejdź do Ustawienia formularzy a następnie kliknij Zapłata patka. 

Tutaj znajdziesz metody płatności takie jak PayPal I Naszywka których możesz używać do zbierania płatności od swoich klientów. Musisz je skonfigurować ręcznie, a następnie przełączyć metodę płatności NA dla formularzy, za pomocą których chcesz otrzymywać płatności. 

Jak zintegrować systemy CRM z formularzami kontaktowymi Elementora?

Możesz zintegrować swój formularz kontaktowy Elementor z Kontakt z Hubspotem, Formularze Hubspotu, Kontakt z Zoho, I Pomocnik. 

Wszystko, co musisz zrobić, to zintegrować wybrane systemy CRM, włączając i konfigurując je z poziomu CRM patka.

Jak przekonwertować przesłane formularze kontaktowe na pocztę

Jest to jedna z najlepszych funkcji MetForm. MetForm umożliwia konwersję przesłanych formularzy na pojedyncze posty. Wystarczy przejść do Ustawień formularza i kliknąć zakładkę „Opublikuj”. Włącz formularz do opublikowania i dokonaj niezbędnych ustawień. To takie proste.

Ostatnie słowa

Znasz już dziesiątki sposobów tworzenia formularza Elementora lub formularza niestandardowego Elementora. Wszystko, czego potrzebujesz, to narzędzie do tworzenia stron Elementor i narzędzie do tworzenia formularzy MetForm. Więc nie czekaj już. Zacznij tworzyć własne formularze kontaktowe Elementor i dostosuj je do woli. I co nie mniej ważne, możesz także utworzyć pełną stronę kontaktową za pomocą MetForm. 

Jeśli masz jakiekolwiek wątpliwości lub masz jakieś pytania, daj nam znać za pośrednictwem pola komentarza.