Contact Form 7? Zaawansowany formularz kontaktowy to już nie problem!

, Czas czytania: 15 min.

Na pewno każdy z nas niejednokrotnie korzystał z takiego formularza, będąc na różnych stronach internetowych. Formularz kontaktowy jest jedną z podstawowych stron, którą posiada praktycznie każdy blog lub witryna internetowa. Jedną z najpopularniejszych i najstarszych wtyczek do tworzenia formularzy kontaktowych w WordPressie jest Contact Form 7 . Mimo swej popularności przysparza on wiele problemów początkującym użytkownikom. Jeśli twój początek z Contact Form 7 był trudny albo nie do końca zrozumiały, przeczytaj poniższy wpis, aby dowiedzieć się więcej o funkcjonalności jednej z najpopularniejszych wtyczek WordPressa.

Spis Treści:

Do czego służy formularz kontaktowy na stronie?

Często czytelnik odwiedzający witrynę internetową chciałby zadać pytanie lub złożyć jakąś propozycję np. reklamową czy współpracy. Jeśli na stronie zabraknie formularza kontaktowego, stracimy potencjalnego klienta. W przeciwnym wypadku, gdy jesteśmy posiadaczami formularza kontaktowego, czytelnik może zadać nam pytanie dotyczące konkretnego problemu lub naszego artykułu, dzięki czemu możemy mieć świetny materiał na kolejny wpis.

Instalacja i konfiguracja wtyczki

Wtyczkę najszybciej można zainstalować z kokpitu naszego bloga, wybierając zakładkę wtyczki – „Dodaj nową”. Wyszukujemy wtyczki Contact Form 7 i klikamy zainstaluj.

Po instalacji wtyczki w menu powinna ukazać się dodatkowa pozycja w menu o nazwie „Formularze”.

Dodawanie formularza:

Zaraz po instalacji dostępny jest jeden formularz przykładów, ale zaczniemy od dodania nowego formularza. W tym celu wybieramy „Dodaj nowy”, następnie ukaże się nam formularz kontaktowy z domyślnymi ustawieniami jak na obrazie poniżej.

Jak zauważyliście pod polem „Wprowadź tytuł” znajduje się lista przycisków, która pozwala nam na dodawanie pól w prostszy sposób.

Na powyższym zdjęciu widzimy wszystkie dostępne opcje generatora formularza. Pierwsza z nich jak sama nazwa wskazuje, oznacza pole wymagane. Aby użytkownik mógł wysłać formularz, musi zaznaczyć opcje w checkbox’ie. Następnie dodajemy nazwę pola, domyślną wartość (jeśli chcemy uzyskać efekt placeholder, czyli tekst, który zniknie, gdy użytkownik zacznie wpisywać coś w oknie. Atrybut id przydaje się najczęściej w sytuacjach, gdy działamy coś ze skryptami JavaScript. Często, jeśli tworzymy stronę, wpisujemy atrybut klasy. Czyli jeśli większość szablonów stoi na Bootstrapie przeważnie wpisuje się tutaj control-form.

Następnie generowany jest shortcode:

Konfiguracja e-maila:

W zakładce „E-mail” znajdują się podstawowe ustawienia, ponieważ dodaliśmy nowe pole tekstowe, więc trzeba je dodać także w wysyłanej wiadomości e-mail z formularza kontaktowego.

Dodatkowe pola nagłówka w sekcji Mail i Mail(2) służą do dodawania nagłówków DW lub UDW. W tym polu możesz wpisać dowolne linie nagłówka oraz dowolne znaczniki poczty.

Źródło: https://contactform7.com/adding-cc-bcc-and-other-mail-headers/

Składnia tagu pocztowego:

Znacznik pocztowy zawiera tylko jedno słowo. W większości przypadków słowo to odpowiada nazwie tagu formularza i jest zastąpione wprowadzeniem formularza za jego pośrednictwem.

Źródło: https://contactform7.com/tag-syntax/

Komunikaty:

Krótko mówiąc, w zakładce komunikaty, można zmieniać którąkolwiek z wiadomości do wyświetlania użytkownikowi. Np. wystąpiły błędy walidacji, czy wypełnij wymagane pole itp.

Ustawienia dodatkowe:

Ostatnia zakładka to zakłada z ustawieniami dodatkowymi, w której można dołączyć dodatkowe ustawienia do każdego formularza kontaktowego, dodając fragmenty kodu w określonym formacie.

Zapisywanie przesyłanych wiadomości za pomocą Flamingo. Contact Form 7 nie przechowuje przesyłanych wiadomości, dlatego możemy utracić ważne wiadomości na zawsze. Zainstaluj wtyczkę Flamingo, która zapisuje wszystkie wiadomości za pośrednictwem formularzy kontaktowych do baz danych. Wtyczka Flamingo jest stworzona przez tego samego autora co Contact Form 7.

Następnie zapisujemy i pojawia nam się zapisany przez nas formularz. W moim przykładzie został on nazwany „testowy”, na środku znajduje się shortcode do naszego formularza.

Dodawanie formularza na stronie

Skopiowany shortcode umieszczamy albo w widgecie, albo na nowej podstronie. Na potrzebę artykułu stworzyliśmy stronę „kontakt”, w której umieszczamy zawartość naszego schowka. Następnie aktualizujemy stronę i przechodzimy do wyglądu strony, aby zobaczyć nasz formularz.

Filtrowanie spamu za pomocą Akismet

Akismet jest to potężna usługa antyspamowa dostarczana przez Automattic, która zapewnia ochronę naszych formularzy.

Trzy opcje wdrażania Akismet w formularzu kontaktowym 7

  • Dodawanie opcji do pola, w którym przesyłający wpisuje swoją nazwę: Przykład: [text* your-name akismet:author]
  • Dodawanie opcji do pola, w którym przesyłający wpisuje swój email: Przykład: [email* your-email akismet:author_email]
  • Dodawanie opcji do pola, w którym przesyłający wpisuje adres URL swoich witryn internetowych: Przykład: [text your-url akismet:author_url]  

Aby wdrożyć Akismet, używamy jednej z powyższych opcji w formularzu. Użycie większej liczby opcji zapewnia uzyskanie dokładniejszych wyników.

Tam, gdzie Akismet jest wdrażany, Formularz kontaktowy 7 wysyła dane do Akismet, gdy użytkownik przesyła formularz. Dane składają się ze wszystkich danych wejściowych użytkownika (nie tylko pól z akismet:*opcją) i zmiennych ze środowisk. Akismet zweryfikuje dane, aby udzielić odpowiedzi „spam” lub „ham”.

Jeśli odpowiedzią jest „spam”, Formularz kontaktowy 7 zawiesi wiadomość e-mail i wyświetli komunikat „Wystąpił błąd podczas próby wysłania wiadomości”, otoczony pomarańczową ramką.

Niestandardowy układ pól przycisków opcji i pół wyboru

W ustawieniach domyślnych Contact Form 7 renderuje pola wyboru i przyciski opcji jako pola wbudowane. Możesz to dostosować za pomocą niektórych opcji tagów formularzy i prostego CSS.

  • Odwracanie kolejności etykiet pola wyboru – domyślnie pole wyboru renderowane jest przed etykietą:

[checkbox checkbox-106 “Opcja 1” “Opcja 2” “Opcja 3”]

  • Renderowanie pól wyboru jako bloków zamiast oryginalnego wbudowanego

    Aby nie renderować pola wyboru jako pole blokowe należy dodać następujący wiersz do arkusza stylów CSS:

    span.wpcf7-list-item { display: block; }

  • Renderowanie pól wyboru jako tabeli

    Aby renderować pola wyboru jako tabelę, dodaj następujące reguły stylu CSS do arkusza stylów motywu:

    span.wpcf7-list-item { display: table-row; }

span.wpcf7-list-item * { display: table-cell; }

Najważniejsze funkcje formularza kontaktowego Contact Form 7

Oto lista najczęściej wykorzystywanych funkcji:

  • Twórz i zarządzaj wieloma formularzami kontaktowymi
  • Łatwo dostosuj pola formularzy
  • Użyj prostych znaczników, aby zmienić treść wiadomości
  • Wstaw formularze na dowolne strony lub posty za pomocą Shortcode
  • Wtyczka obsługuje filtrowanie spamu Akismet, przesyłanie w oparciu o Ajax i CAPTCHA
  • Wiele rozszerzeń innych firm, aby dodać dodatkowe funkcje

A co najważniejsze nic to nie kosztuje!

Podsumowanie

To właśnie dlatego Contact Form 7 jest jedną z ulubionych wtyczek WordPressa. Formularz kontaktowy jest istotną częścią każdej strony. Oczywiście w przyszłości możesz dodać nowe funkcje do swoich formularzy kontaktowych, korzystając z wielu rozszerzeń Contact Form 7.

TAGI:

Zostaw komentarz do artykułu: Contact Form 7? Zaawansowany formularz kontaktowy to już nie problem!

1 Komentarz

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Bartek Candyweb

Programuje, śpiewa i gra - istny człowiek orkiestra:)

Ostatnie artykuły

Zainteresowała Cię oferta?

Kompleksowa oferta

Kliknij po bezpłatną wycenę

Wyceń projekt