Wtyczka formularza kontaktowego do WordPressa: Contact Form 7 (dodawanie formularzy online)

Niezależnie od tego, czy prowadzisz blog osobisty, stronę firmową czy platformę e-commerce, potrzebujesz “formularza kontaktowego”, aby odwiedzający mogli bez problemów wysyłać do ciebie wiadomości (np. z zapytaniami, prośbami o pomoc czy sugestiami).Formularz kontaktowy 7 To jest jedna z najstarszych wtyczek formularzy do WordPressa (z ponad 5 milionami instalacji), darmowa, elastyczna i potężna, która umożliwia szybkie tworzenie różnych formularzy (kontaktowych, rejestracyjnych, opinijnych itp.) i może być używana przez osoby początkujące po krótkiej konfiguracji.

I. Dlaczego potrzebny jest formularz kontaktowy? Czy nie wystarczy podać bezpośrednio adres e-mail lub numer telefonu?

Wysłanie wiadomości e-mail lub numeru telefonu bezpośrednio do odbiorcy może wydawać się proste, ale ma to trzy istotne wady:

• Goście uważają to za kłopotliwe.Aby wysłać wiadomość, należy skopiować adres e-mail i otworzyć klienta poczty, co często sprawia, że ludzie rezygnują w połowie drogi.
• Łatwo stać się ofiarą spamu.Publicznie dostępne adresy e-mail są przechwytywane przez roboty i otrzymujesz wtedy mnóstwo spamu.
• Informacje są niespójne.Odwiedzający mogą przeoczyć kluczowe informacje (np. nieokreślenie potrzeb podczas konsultacji dotyczących produktu) i odpowiedzi mogą być nieskuteczne.

Formularz kontaktowy rozwiązuje te problemy:

• Odwiedzający wypełniają i przesyłają formularz bezpośrednio na stronie internetowej, wykonując to w jednym kroku;
• Adres e-mail jest ukryty w tle, aby uniknąć ataków spamerów.
• Można dostosować pola, które należy wypełnić (np. imię i nazwisko, numer telefonu, rodzaj zapytania), aby zapewnić, że informacje są kompletne.

II. Instalacja wtyczki Contact Form 7 i tworzenie pierwszego formularza.

Krok 1: Zainstaluj i aktywuj wtyczkę.

1. Ustawienia zaawansowane → [Wtyczki] → [Instaluj wtyczkę], wyszukaj “Contact Form 7”.
2. Kliknij „Zainstaluj teraz”, a po zakończeniu kliknij „Aktywuj”.
3. Po aktywacji w lewym menu pojawi się opcja „Kontakt”.

Krok 2: Utwórz standardowy formularz kontaktowy (polecany dla początkujących, dostępny od razu).

Formularz kontaktowy 7 zawiera wbudowany szablon formularza kontaktowego zawierający standardowe pola (imię i nazwisko, adres e-mail, temat, treść wiadomości), z którego mogą korzystać początkujący użytkownicy.

1. Kliknij „Kontakt” po lewej stronie → „Dodaj nowy”, aby przejść do strony edycji formularza.
2. Wtyczka automatycznie generuje nazwę formularza (np. “Formularz kontaktowy nr 1”), którą można zmienić na “Formularz kontaktowy w witrynie internetowej”, aby ułatwić identyfikację.
3. Poniższa sekcja “Formularz” zawiera kod formularza (nie trzeba go rozumieć, wystarczy pozostawić wartości domyślne) i domyślnie zawiera cztery pola:
   • Imię i nazwisko (pole tekstowe);
   • Adres e-mail (z polem do weryfikacji, upewnij się, że format jest poprawny);
   • Temat (pole tekstowe, ułatwiające szybkie zapoznanie się z tematem wiadomości);
   • Komunikat (wielolinijowe pole tekstowe, w którym należy wpisać szczegółowe informacje).

Krok 3: Skonfiguruj opcje “Powiadomienie o odpowiedzi” i “Odbieranie wiadomości e-mail” po wysłaniu formularza.”

Samo przesłanie formularza nie wystarczy — należy też ustawić, co ma się wyświetlić po jego wysłaniu przez odwiedzającego oraz na jaki adres e-mail ma zostać wysłana wiadomość.

1. Ustaw adres, na który mają być wysyłane wiadomości e-mail (to kluczowe! upewnij się, że faktycznie je otrzymasz).

• Przejdź do sekcji “Poczta” na stronie edycji formularza;
• Znajdź pole “Odbiorca” i wpisz swój główny adres e-mail (np. contact@你的域名.com）；
• Pozostałe opcje pozostają domyślne (“Nadawca”, “Temat” itd. zostaną automatycznie wypełnione w formularzu).

2. Ustaw powiadomienie “Wiadomość” (powiadamiające odwiedzających o konieczności przesłania wyników).

• Przejdź do obszaru “Wiadomości”, aby dostosować tekst powiadomienia:
  • “Wiadomość o pomyślnym wysłaniu”: na przykład “Dziękujemy za wiadomość. Odpowiemy tak szybko, jak to możliwe!”;
  • “Komunikat o błędzie weryfikacji”: na przykład “Sprawdź, czy wprowadzone informacje są poprawne (np. format adresu e-mail)”.

Krok 4: Zapisz formularz i uzyskaj “krótki kod”.”

1. Kliknij „Zapisz” w prawym górnym rogu strony, aby zakończyć tworzenie formularza.
2. Po zapisaniu na górze strony wyświetli się “kod skrócony” (np. <). [contact-form-7 id="123" title="网站联系表单"]Następnie skopiuj ten kod (będzie ci potrzebny później).

III. Dodaj formularz do strony “Kontakt z nami”.

Po utworzeniu formularza należy umieścić go na stronie “Kontakt” w witrynie (lub na innej wymaganej stronie), aby odwiedzający mogli go zobaczyć.

1. Wejdź na [stronę] → [Dodaj nowy] (lub edytuj istniejącą stronę “Kontakt z nami”);
2. W edytorze umieść kursor w miejscu, w którym ma się wyświetlić formularz;
3. Wklej krótki kod, który skopiowałeś wcześniej (np. ). [contact-form-7 id="123" title="网站联系表单"]）；
4. Kliknij „Opublikuj” lub „Aktualizuj”, a formularz pojawi się na stronie, którą odwiedzasz.

IV. Formularze niestandardowe: dodawanie / usuwanie pól (dostosowywanie według potrzeb)

Jeśli standardowy formularz nie spełnia wymagań (na przykład konieczne jest dodanie pól “Numer telefonu” i “Nazwa firmy”), można go dostosować:

Przykład: dodanie pola “Telefon” do formularza.

1. Wejdź do sekcji „Kontakt”, znajdź formularz, który utworzyłeś, a następnie kliknij „Edytuj”.
2. W obszarze edycji “Formularza”, poniżej pola “Adres e-mail”, kliknij „Wstaw tag” → „Tekst” na pasku narzędziowym;
3. W wyskakującym okienku:
   • “W polu ”Nazwa“ należy wpisać ”tel” (identyfikator wewnętrzny, małe litery w języku angielskim);
   • “Wypełnij ”Etykietę“ informacją ”Telefon” (tekst wyświetlany odwiedzającym);
   • Zaznacz “wymagane pola” (upewnij się, że odwiedzający muszą je wypełnić);
   • Po kliknięciu na „Wstaw tag” automatycznie wygenerowany zostanie wiersz kodu (np. <). [text* tel placeholder "请输入您的电话"]）；
4. Kliknij “Zapisz”, a po aktualizacji strony w formularzu pojawi się dodatkowe pole „Telefon”.

Typy pól często używanych (do wyboru według potrzeb)

• Pola tekstoweNadaje się do wypełniania krótkich treści, takich jak imię i nazwisko, numer telefonu, nazwa firmy itp.
• Pola do wpisywania adresu e-mail: Służy wyłącznie do wypełniania adresu e-mail, a format jest automatycznie sprawdzany;
• Obszar tekstowyNadaje się do wypełniania długich treści (np. komentarzy, opisów wymagań);
• Menu rozwijanePozwala to odwiedzającym wybrać opcję (np. “Typ zapytania: konsultacja produktu / problem z gwarancją / oferta współpracy”);
• Pole wyboruMożna zaznaczyć wiele opcji (np. “usługi, które Cię zainteresują: tworzenie stron internetowych / optymalizacja SEO / projektowanie marek”).

5. Najczęściej zadawane pytania przez początkujących.

1. Nie otrzymałeś wiadomości e-mail po wysłaniu formularza?To najczęściej występujący problem, a rozwiązanie jest następujące:
   • Sprawdź, czy adres e-mail “Odbiorcy” w ustawieniach “Poczty” jest poprawny (nie wpisałeś go źle!);
   • Sprawdź folder “Spam” w swojej skrzynce e-mail (wiadomości z formularzy mogą zostać niesłusznie uznane za spam);
   • Jeśli nadal nie otrzymujesz wiadomości, zainstaluj wtyczkę “WP Mail SMTP”, która naprawia funkcję wysyłania wiadomości e-mail w WordPressie. Osoby początkujące mogą skonfigurować ją za pomocą kreatora wtyczek.
2. Jak zmodyfikować styl formularza (np. czcionkę, kolor, szerokość)?Sam formularz kontaktowy 7 nie obsługuje wizualnego dostosowywania stylu — wymaga to prostego kodu CSS:
   • Metoda 1: W ustawieniach motywu znajdź “Niestandardowy CSS” (zwykle w „Wygląd” → „Dostosuj” → „Dodatkowy CSS”); Metoda 2: Na przykład: ustaw szerokość pola wprowadzania na 80% i dodaj kod:
   .wpcf7 input, .wpcf7 textarea { width: 80%; padding: 10px; margin-bottom: 15px; }
3. Jeśli nie znasz CSS, możesz wyszukać “kod stylu Contact Form 7” i skopiować gotowe modyfikacje.
4. Czy po wysłaniu formularza dane zostaną automatycznie zapisane w tle?Darmowa wersja nie jest obsługiwana, a wysłane wiadomości są przesyłane wyłącznie e-mailem. Aby zapisać dane w tle (aby uniknąć utraty wiadomości e-mail), można zainstalować wtyczkę “Flamingo” (oprogramowanie powiązane z Contact Form 7, służące do zapisywania danych formularza).
5. Jak zapobiec temu, by roboty wysyłały spam?Włącz funkcję “antyspamową”:
   • Edytuj formularz i dodaj jeden wiersz kodu w obszarze “Formularz”. [recaptcha](Kod weryfikacyjny Google);
   • Wejdź do sekcji „Kontakt” → „Integracja” i postępuj zgodnie z instrukcją, aby połączyć się z Google reCAPTCHA (wymagana jest rejestracja bezpłatnego klucza API; wystarczy postępować zgodnie z instrukcją).

Podsumowując: formularz kontaktowy to “ostatni kilometr na drodze do konwersji”.”

Dla odwiedzających formularz kontaktowy jest “najszybszym sposobem na wyrażenie swoich potrzeb”, a dla właścicieli witryn internetowych jest “ważnym kanałem pozyskiwania potencjalnych klientów”.

Formularz kontaktowy 7 wymaga ręcznego wpisywania krótkiego kodu i modyfikowania pól, ale jest darmowy, elastyczny i stabilny. Po opanowaniu podstawowych operacji może spełnić wszelkie wymagania dotyczące formularzy, od prostych do złożonych. Pamiętaj, że formularze nie powinny być zbyt skomplikowane (im więcej pól, tym większe prawdopodobieństwo, że odwiedzający zrezygnują), a także należy ograniczyć informacje do niezbędnych (imię i nazwisko, dane kontaktowe, zapytanie), aby ułatwić komunikację.