Jak utworzyć formularz kontaktowy w WordPress

Jeśli chcesz umożliwić swoim klientom lub osobom odwiedzającym witrynę kontakt z Tobą, musisz mieć formularz kontaktowy na swojej stronie. W poniższym samouczku opiszę, jak go utworzyć w WordPress.

Do czego służy formularz kontaktowy?

Formularz kontaktowy to proste narzędzie do kontaktowania się z użytkownikami witryny. Internauci są znacznie bardziej zadowoleni z korzystania z niego niż z poczty elektronicznej. To dlatego, że oszczędzają czas. Mogą pisać swoją wiadomość bezpośrednio na stronie bez otwierania wiadomości e-mail.

Ale formularz kontaktowy również oszczędza czas. I zapewni Ci wszystkie potrzebne informacje:

• W formularzu ustawiasz pola dla informacji, których potrzebujesz od ludzi. Na przykład numer telefonu. Odwiedzający prawdopodobnie nie zamieściliby tej informacji w e-mailu.
• Możesz ustawić automatyczne odpowiedzi, aby automatycznie dostarczać użytkownikom podstawowych informacji

Ponadto korzystanie z formularza kontaktowego chroni Cię przed spamem. Jeśli opublikujesz tylko aktywny e-mail na stronie, zaczniesz otrzymywać dużo spamu.

Jak dodać formularz kontaktowy w WordPress

WordPress oferuje możliwość utworzenia formularza kontaktowego za pomocą wtyczki. Osobiście polecam skorzystanie z formularza kontaktowego przez Contact Form by WPForms.

Ta wtyczka jest bardzo prosta w użyciu. Korzysta z narzędzia przeciągnij i upuść (drag & drop), więc nawet początkujący może bardzo szybko utworzyć formularz kontaktowy. Podstawowa wersja jest dostępna za darmo.

Jeśli potrzebujesz bardziej zaawansowanych funkcji, możesz go uaktualnić do WPForms Pro. W porównaniu z wersją bezpłatną zawiera także możliwość zapisywania przesłanych formularzy w bazie danych, przesyłania plików, szablonów formularzy i innych praktycznych funkcji.

Wtyczkę instalujesz bezpośrednio z administracji witryny. Pamiętaj, aby aktywować wtyczkę po instalacji. Dokładną procedurę można znaleźć w moim artykule Co to jest wtyczka WordPress? Jak to zainstalować?

Po aktywacji wtyczki zobaczysz nowy wpis WPForms w administracji witryny.

Tworzenie formularzy za pomocą WPForms

Aby utworzyć nowy formularz kontaktowy, przejdź do WPForms > Add new. Zobaczysz następującą stronę:

Najpierw wpisz nazwę formularza kontaktowego. Następnie wybierz szablon, którego chcesz użyć. Podstawowa wersja WPForms oferuje cztery szablony do tworzenia formularzy.

Pusty formularz (blank form) — jeśli wybierzesz pusty formularz, możesz utworzyć własną wersję za pomocą funkcji przeciągnij i upuść (drag & drop).

Prosty formularz (Simple Contact Form) — ten szablon oferuje możliwość korzystania z gotowego formularza. Będziesz jednak mógł dodawać i usuwać poszczególne pola według potrzeb.

Formularz rejestracji do newslettera (Newsletter Signup Form) — w tym szablonie utworzysz formularz do subskrypcji aktualności na swojej stronie (newsletter). Tutaj możesz dodawać i usuwać poszczególne pola zgodnie z własnymi preferencjami.

Formularz sugestii (Suggestion form) — możesz go użyć, aby zapytać odwiedzających o opinie lub sugestie.

Jak stworzyć prosty formularz

Teraz opiszmy, jak utworzyć formularz za pomocą szablonu Simple Contact Form.

Po prawej stronie ekranu znajdziesz wstępnie utworzone pola do dodawania nazwy, adresu e-mail i wiadomości. Umieść wskaźnik myszy nad każdym polem, aby wyświetlić menu do usunięcia i edycji. Możesz także po prostu przeciągnąć i upuścić je w innym miejscu formularza.

Aby dodać nowe pole, przejdź do menu po lewej stronie ekranu. Kliknij lub przeciągnij pole w prawo.

Aby zapisać formularz kontaktowy, kliknij Save. Możesz znaleźć przycisk u góry ekranu.

Ustawienie właściwości formularza

Zobaczysz formularz utworzony na stronie za pomocą przycisku Submit. Aby ustawić nazwę przycisku w języku polskim, wybierz Settings > General.

Ponadto znajdziesz tutaj kilka innych opcji ustawień:

• Form Name — tutaj edytujesz nazwę formularza kontaktowego.
• Form Description — służy do opisu formularza.
• Form CSS Class — to pole służy do dodania własnej klasy do formularza.
• Submit Button Text — edycja tekstu na przycisku wysyłania
• Submit Button Processing Text — wypełnij tekst, który będzie wyświetlany po przesłaniu formularza.
• Submit Button CSS Class — to pole służy do dodania własnej klasy dla przycisku przesyłania
• Enable anti-spam honeypot — zalecam pozostawienie zaznaczonego pola w tym wierszu. Ta funkcja ma na celu ochronę formularza przed wysłaniem jako spam.

Po ustawieniu właściwości na karcie General nie trzeba edytować niczego poza tekstem przycisku Submit i tekstem wyświetlanym po przesłaniu formularza.

Ustawienia powiadomień e-mail

W obszarze Settings > Notifications znajdziesz dodatkowe opcje ustawień. Są to ustawienia powiadomień e-mail. Zazwyczaj są one wysyłane na adres e-mail webmastera. Edytuj temat wiadomości e-mail, aby śledzić i mieć przegląd otrzymanych wiadomości. Możesz także edytować inne pola, jeśli chcesz.

• Notifications– tutaj możesz włączyć lub wyłączyć wysyłanie formularzy na swój adres e-mail. Zalecam pozostawienie tej funkcji włączonej. Poszczególne wypełnione formularze nie są nigdzie zapisywane. Tylko twoje powiadomienie e-mail służy do poinformowania cię.
• Send To Email Address— wpisz adres e-mail, na który należy wysłać formularz.
• Email Subject— możesz także ustawić temat wiadomości e-mail.
• From Name — nazwa nadawcy wiadomości e-mail. Tutaj znajdziesz domyślną nazwę swojej witryny.
• From Email— adres e-mail nadawcy.
• Reply-To— adres e-mail do odpowiedzi.
• Message— treść wiadomości e-mail. Jeśli opuścisz ustawienie {all_fields}, wiadomość e-mail będzie zawierać wszystkie pola formularza.

Ustawienie potwierdzenia przesłania formularza

Potwierdzenie formularza jest tym, co odwiedzający widzi po przesłaniu formularza. Możesz podziękować za skontaktowanie się lub przekierowanie użytkownika na wybraną stronę witryny. Aby to zrobić, przejdź do Settings > Confirmations.

Najpierw wybierz rodzaj potwierdzenia. Istnieją trzy opcje do wyboru w polu Confirmation Type:

• Message– wyświetla tekst, który wpisujesz w poniższym oknie.
• Show page– tutaj ustawisz przekierowanie po przesłaniu formularza.
• Go To URL– wprowadź adres URL strony, na którą użytkownik powinien zostać przekierowany po przesłaniu formularza.

Edycja, usuwanie i duplikowanie formularza

Wszystkie utworzone formularze zostaną wyświetlone na liście formularzy po kliknięciu WPForms na stronie administracyjnej. Najedź kursorem na nazwę formularza, aby wyświetlić menu dostępnych funkcji. Możesz edytować, przeglądać, usuwać lub duplikować formularz.

Ostatnią funkcją jest liczba wyświetleń. Ta funkcja jest dostępna tylko w wersji Pro. Pozwoli to zapisać wypełnione formularze bezpośrednio do administracji witryny.

Dodanie formularza kontaktowego do strony WordPress

Po ustawieniu właściwości formularza w WPForms musisz osadzić go na stronie. Najpierw otwórz istniejącą stronę, którą chcesz edytować lub utwórz nową.

Użyj krótkiego kodu, aby dodać formularz kontaktowy. Możesz to znaleźć:

1. na stronie edycji formularza pod przyciskiem Embedw prawym górnym rogu,
2. na liście wszystkich formularzy w kolumnie shortcode.

Utwórz nowy blok na stronie, na której chcesz osadzić formularz kontaktowy. Osadzasz w nim krótki kod (shortcode). Pamiętaj, aby zapisać wszystkie zmiany na stronie

Oto jak będzie wyglądać strona po osadzeniu krótkiego kodu.

Jak dodać formularz kontaktowy do paska bocznego

W WordPress formularz kontaktowy można również dodać do paska bocznego, nagłówka strony lub stopki. W administracji przejdź do Wygląd> Widżety. Przewiń listę widżetów, aby znaleźć WPForms.

Dodaj formularz w taki sam sposób, jak inne dostępne widżety, przeciągając i upuszczając w żądanej lokalizacji.

Wpisz tytuł i wybierz formularz, którego chcesz użyć. Nie zapomnij zapisać zmian. Możesz także edytować osadzony formularz za pomocą podglądu na żywo.

WPForms Premium vs WPForms Lite

Na przykład płatna wersja WPForms Premium może wykonać następujące czynności w porównaniu z wersją bezpłatną (lite):

• Możliwość tworzenia nieograniczonej liczby formularzy.
• Więcej szablonów formularzy.
• Umiejętność korzystania z logiki warunkowej do kontrolowania widoczności pól formularza.
• Możliwość tworzenia wielostronicowych formularzy.
• Możliwość tworzenia formularzy rejestracyjnych użytkownika.
• Zaawansowana ochrona przed spamem.
• Możliwość przesyłania i pobierania plików za pośrednictwem formularza.
• Zaawansowane typy pól, takie jak pola daty i godziny.
• Możliwość zapisywania, przeglądania i zarządzania odpowiedziami formularzy bezpośrednio w administracji WordPress.
• Integracja z usługami stron trzecich, takimi jak: PayPal, Stripe, Mailchimp, AWeber, GetResponse, Constant Contact, Drip, Zapier…