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.

You can simply create, style, and customize Elementor from. However, in this article, you’ll learn how to customize an Elementor contact form with the MetForm form builder.

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?

You just require two plugins on your WordPress website to start designing Elementor contact forms:

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 which is a custom contact form plugin has both a pro and free version. While the free version has all the basic features that you need to create a custom WordPress Elementor contact form, the pro version will let you explore some advanced fields and features. Besides, you will hardly find these advanced features in any other free or pro Elementor contact form for example Elementor Contact Form 7, wpfroms, Ninja Forms, etc.

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

To start creating a form from scratch, just click on the blank contact form template. If you choose to use the premade Elementor contact form template library offered by MetForm, you can choose any form from the list of form templates.

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

Now that you’ve dragged and dropped all the widgets you need on your Elementor form, you can edit them to your heart’s content. 

To customize any Elementor form fields or buttons, just 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. Elementor Form Success Message 
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? 

When a new contact form is submitted, it usually gets saved in the MetForm form entries database (if enabled from the general settings). 

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?

Different types of forms require different form fields. If you are making a simple contact form in Elementor, just a few simple widgets such as text, email, phone, captcha, and submit button are enough for you. 

On the other hand, if you’re looking for making forms like admission form, event form, booking form, etc. you might need to use different Elementor form fields and customize them accordingly. 

To make the process of choosing the right form fields easier for you, MetForm offers dozens of templates to make a wide variety of Elementor custom form types such as registration form, 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.

How to Embed the Elementor Custom Contact Forms to Any WordPress Page? 

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 creates individual shortcodes for all the Elementor forms you create. Besides, you will also have custom contact form shortcodes in MetForm. To find the shortcode of a specific contact form that you’ve created, go to WordPress Admin Dashboard ➜ MetForm ➜ Forms.

There you will find Elementor form shortcodes of any form. Just copy the shortcode and then paste that on the page where you want to embed the WordPress custom contact form. 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. 

To enable the user login and registration, go to the Form Settings and then click on the Auth tab. You’ll get the option to both enable and disable the user login and registration for your Elementor form.

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?

You can integrate your Elementor contact form with 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.