Formularz kontaktowy 7 to fantastyczna darmowa wtyczka do dodawania formularzy kontaktowych do witryny WordPress. Ale pomimo łatwości obsługi i niezawodności, brakuje mu wielu funkcji po wyjęciu z pudełka.

Niedawno pokazałem, jak można stylizować formularz kontaktowy 7 za pomocą wtyczek. W tym poście pokażę Ci, jak jeszcze bardziej rozszerzyć formularz kontaktowy 7, aby wykonać następujące czynności:

  1. Dodaj logikę warunkową do formularza
  2. Dodawanie dynamicznych wartości do pól formularza
  3. Zapisz zgłoszenia formularza kontaktowego do bazy danych WordPress
  4. Wyślij plik PDF wygenerowany z formularza
  5. Chroń swój formularz przed spamerami
  6. Sprzedawaj proste produkty bez rozwiązania e-commerce

Wszystkie wtyczki wymienione w tym poście są do pobrania za darmo z WordPress.org.

Zaczynajmy.

Tip: jeśli jesteś członkiem WPMU DEV, możesz użyć naszej własnej wtyczki Forminator jako alternatywy dla formularza kontaktowego 7.

1. Formularz Kontaktowy 7 Pól Warunkowych

Formularz kontaktowy 7 pól warunkowych wprowadza logikę warunkową do formularza kontaktowego. Pola formularza mogą być wyświetlane tylko wtedy, gdy użytkownik udzielił konkretnej odpowiedzi.

W tym przykładzie stworzyłem pytanie do formularza kontaktowego firmy, który zbiera przydatne informacje marketingowe, pytając użytkownika, w jaki sposób dowiedział się o firmie.

Istnieje 5 opcji na to pytanie:

  • Word of mouth
  • Wyszukiwarka
  • E-mail
  • Media społecznościowe
  • Inne

Opcje te są dodawane jako przyciski radiowe. Moja grupa przycisków radiowych została nazwana gdzie.

Po wybraniu opcji “Inne”powinno pojawić się pole tekstowe, w którym odwiedzający może dodać inną metodę, którą odkrył. Nazwałem to pole tekstowe gdzie-inne.

Ale to pole powinno być wyświetlane tylko wtedy, gdy wybrana jest inna opcja, więc jest zawinięte w grupę pól warunkowych, która używa skrótu [Grupa inne] [/Grupa]. Moja grupa pól warunkowych nazywa się inne-wejście.

Aby ustawić warunek wyświetlania, przejdź do pól warunkowych i Utwórz regułę.

A conditional rule: If where equals Other then show other-input
Reguła warunkowa: If where equals Other then show other-input

Oto ostateczny kod formularza kontaktowego dla grupy przycisków radiowych i pola tekstowego:

Wczytywanie gist abrightclearweb / ac703b3e51c0ba9273c53f3a19cccccf

Formularz wyświetli teraz tylko opcję dodania dodatkowej odpowiedzi, gdy wybrano opcję Inne.

The field Please say where you heard about us only shows when the Other radio button is selected
Pole ” please say where you heard about us “wyświetla się tylko po wybraniu przycisku opcji” Inne”

Pamiętaj, aby zmienić treść wiadomości pod “Mail”, aby dodać nowe informacje do otrzymanego e-maila.

Wczytywanie gist abrightclearweb / 51c76db454323f4f55e11bcbe8964181

Na [other-input]jakie inne miejsce? [where-other] [/other-input] linia pokaże tylko [gdzie-inne] treść po zakończeniu.

Dobrą praktyką jest również sprawdzenie Wyklucz linie z pustymi znacznikami pocztowymi z opcji wyjścia. Zapobiega to wysyłaniu niekompletnych pól w tekście wiadomości e-mail.

2. HubSpot

Wtyczka HubSpot WordPress zbierze wszystkie zgłoszenia formularza kontaktowego 7 i zorganizuje je w bezpłatny CRM. Dzięki temu możesz zobaczyć wszystkie strony, które przeglądały Twoje kontakty, rozmawiać z nimi na żywo, gdy są w Twojej witrynie i wysyłać do nich e-maile marketingowe, wszystko za darmo.

HubSpot ułatwia zarządzanie wszystkimi kontaktami i dzielenie ich na listy. Wszystkie ich informacje są przechwytywane w uporządkowanej osi czasu, dzięki czemu można naprawdę zrozumieć ludzi stojących za formularzami.

have your contacts automatically sent to HubSpot's free CRM.

Dzięki wtyczce HubSpot możesz zapisać do 1 000 000 szczegółowych danych kontaktowych i firmowych oraz wysłać do 2 000 automatycznych wiadomości e-mail za darmo.

3. Formularz Kontaktowy 7-Dynamiczne Rozszerzenie Tekstu

Za pomocą formularza kontaktowego 7-dynamiczne rozszerzenie tekstu można dodawać wartości dynamiczne do pól formularza.

Wtyczka jest dostarczana z wbudowaną liczbą skrótów. Dodatkowo możesz napisać dowolny krótki kod i dodać go do formularza. Wszelkie atrybuty shortcode powinny używać pojedynczych cudzysłowów, a nie podwójnych cudzysłowów.

Dynamiczne wartości, które możesz dodać include:

  • Adresy URL
  • Informacje o wpisie np. tytuł, autor
  • Niestandardowe wartości pól
  • Identyfikatory Produktów

Ukryte pola mogą być również dodawane do formularzy. Jest to przydatne, jeśli chcesz użyć tagów w wiadomości e-mail, ale nie pokazywać informacji w formularzu, gdzie można je zmodyfikować.

Czasami dostaję e-maile z prośbą o dodanie linku do konkretnego posta. Oto formularz, który ułatwi użytkownikowi złożenie prośby o link.

Ostateczna forma to:

Wczytywanie gist abrightclearweb / 568f6575c1fddb55befe7b8fe8cfc254

Oto formularz na front-endzie:

Form showing dynamic text fields: site title, post title and URL
Formularz pokazujący dynamiczne pola tekstowe: tytuł strony, tytuł posta i adres URL

W sekcji” Poczta ” formularza znajduje się sugerowany temat i treść wiadomości:

Wczytywanie gist abrightclearweb / c1c93d3f55478d7436938d4ee6f60d48

Pamiętaj, aby dodać formularz kontaktowy 7 shortcode na końcu swojego posta:

Błąd: Brak formularza kontaktowego.

Jeśli chcesz dołączyć formularz kontaktowy po wszystkich postach skorzystaj z do_shortcode() funkcja w pliku szablonu motywu, Zwykle singiel.php:

<?PHP echo do_shortcode ("

    ' ); ?>

    4. Formularz Kontaktowy Zgłoszenia

    Zgłoszenia formularza kontaktowego zapisuje wszystkie zgłoszenia formularza kontaktowego 7 do bazy danych i umożliwia eksport ich do pliku CSV, jak również.

    Jest to przydatna wtyczka, ale upewnij się, że masz dobry powód, aby zbierać i przechowywać dane formularza przed jego użyciem. Dotyczy to w szczególności gromadzenia danych osobowych, takich jak nazwiska i adresy e-mail. Upewnij się, że masz solidną politykę ochrony danych i usuń dane, gdy nie są już potrzebne.

    Wtyczka tworzy nowy element menu o nazwie Zgłoszenia pod formularzem kontaktowym 7, gdzie znajdziesz swoje wpisy w formularzu.

    Contact Form 7 Submissions
    Formularz Kontaktowy 7 Zgłoszenia

    Zgłoszenia są dla wszystkich formularzy z najnowszymi na górze. Można je zmienić według daty, ale nie według formy.

    Jeśli użyjesz Ustawienia Mail(2) do utworzenia autorespondera, gdy ktoś wyśle formularz, wpisy te będą również wyświetlane w Twoich zgłoszeniach. Każdy pokazuje poniżej e-mail wysłany do ciebie.

    5. Wyślij PDF do formularza kontaktowego 7

    Jak można się domyślić, Wyślij PDF do formularza kontaktowego 7 wysyła plik PDF po przesłaniu formularza kontaktowego.

    Konfigurujesz go poprzez Kontakt > Wyślij PDF z CF7.

    Najpierw z listy rozwijanej wybierz Formularz, za pomocą którego chcesz wysłać plik PDF.

    Masz teraz sporo opcji:

    • Wyślij plik PDF do nadawcy, odbiorcy lub obu stron.
    • Wyślij plik CSV do nadawcy, odbiorcy lub obu.
    • Nazwij plik PDF. W nazwie można umieścić znaczniki formularza, takie jak [nazwa]. Dobrym pomysłem jest, aby nazwy plików były unikalne.
    • Wybierz, czy pliki zostaną zapisane na serwerze WWW, czy usunięte po wysłaniu. (Pomyśl o ochronie danych!) Zapisane pliki przejdź do / wp-content / uploads / * rok * / * miesiąc * / możesz zmienić folder docelowy.
    • Przekierowanie użytkownika na nową stronę po przesłaniu formularza kontaktowego.
    • Dodaj link do pobrania pliku PDF.
    • Zabezpiecz plik PDF hasłem.
    • Dodaj nagłówek obrazu do pliku PDF.
    • Dodaj tagi, takie jak data, godzina i numer strony do stopki.
    • Spersonalizuj układ PDF, w tym znaczniki formularza. Możesz dołączyć pliki przesłane przez użytkowników, jeśli włączyłeś przesyłanie plików w formularzu.

    Oto przykład.

    Po przesłaniu, ten formularz wysyła potwierdzenie rezerwacji w formacie PDF na warsztaty

    W formularzu kontaktowym wykorzystałem Ukryte dynamiczne pola z formularza kontaktowego 7-dynamiczne rozszerzenie tekstu. Umieściłem też mapę Google.

    Wczytywanie gist abrightclearweb / 1321d155ebac71f201e2d4fadb8e5a44

    W opcji “Wyślij PDF z CF7” oto mój szablon dla pliku PDF:

    Wczytywanie gist abrightclearweb / 4b153fe47c7168f1b4bcdeead4add503

    Aby wysłać plik PDF do osoby dokonującej rezerwacji, musisz mieć włączoną funkcję Mail (2) autoresponder dla formularza. Plik PDF jest dołączony do wiadomości e-mail z potwierdzeniem.

    W przeciwnym razie włącz link do pobrania pliku PDF po przesłaniu formularza.

    A booking confirmation PDF file
    Potwierdzenie rezerwacji plik PDF

    6. Formularz Kontaktowy 7 Honeypot

    Problemy ze spamerami? Następnie formularz kontaktowy 7 Honeypot jest dla ciebie. Odstrasza spamerów bez irytujących użytkowników za pomocą skrzypiących CAPTCHAs lub pytań quizowych.

    Wtyczka tworzy nowy [honeypot] tag.

    The honeypot tag generation dialog recommends renaming the form tag from honeypot and not disabling the accessibility message
    Okno dialogowe generowanie znaczników honeypot zaleca zmianę nazwy znacznika formularza z honeypot i nie wyłączanie komunikatu dostępności

    Po dodaniu znacznika do formularza tworzy niewidoczne pole tekstowe, które ma być puste. Jeśli pole jest wypełnione, wysłanie formularza jest oznaczane jako spam.

    The code for the hidden field created by Contact Form 7 Honeypot
    Kod do ukrytego pola utworzonego przez formularz kontaktowy 7 Honeypot

    Jeśli formularz kontaktowy zostanie sprawdzony lub wyświetlony bez stylu, niewidoczne pole pokazuje ” proszę zostawić to pole puste.”wiadomość.

    Dostępne są funkcje filtrowania, aby dostosować ten Komunikat oraz HTML i CSS honeypot.

    7. Formularz kontaktowy 7-Paypal Add-on

    Czy masz jeden produkt do sprzedaży i nie chcesz kłopotów z konfiguracją pełnowymiarowego sklepu eCommerce? Następnie formularz kontaktowy 7-dodatek PayPal może być dla ciebie.

    Wtyczka integruje się z formularzem, aby wysłać użytkownika do PayPal w celu dokonania płatności.

    Ustaw Ogólne ustawienia PayPal na Kontakt > Ustawienia PayPal. Musisz dodać swój język i walutę, dodać identyfikator konta PayPal i wybrać między piaskownicą lub trybem Live. Przetestuj swoją formę w trybie piaskownicy przed jej uruchomieniem.

    Wybrałem przykład formularza do wstępnego zamówienia ebooka, który zostanie dostarczony w przyszłości.

    Wczytywanie gist abrightclearweb / 57b43382e6cff43b65fb7e5fbf89975f

    Oto jak wygląda formularz zamówienia na stronie front-end:

    Order form linked to PayPal
    Formularz zamówienia ebooka połączonego z PayPal

    Aby włączyć PayPal w formularzu kontaktowym zaznacz pole na PayPal zakładka dla tego formularza. Wprowadź informacje o produkcie, które zostaną przekazane do PayPal.

    Enable PayPal on a form and set item description, price and item ID
    Włącz PayPal na formularzu i ustaw opis przedmiotu, cenę i identyfikator przedmiotu

    Gdy użytkownik przesyła formularz, dzieją się dwie rzeczy:

    1. Do osoby zamawiającej produkt wysyłany jest e-mail.
    2. Osoba jest wysyłana do PayPal, aby zapłacić za przedmiot.

    1. Wysyłanie e-maila

    Treść wysłanego e-maila musi być ostrożna, ponieważ zamówienie nie jest potwierdzone do momentu dokonania płatności. Użytkownik może opuścić ekran płatności lub anulować zamówienie.

    Oto sformułowanie, które wymyśliłem, aby wysłać je do osoby, która zamówiła preordery:

    Dziękujemy za zainteresowanie [productname], [your-name], <[your-email]>.

    Twoje zamówienie nie zostanie potwierdzone, dopóki nie zapłacisz przez PayPal.

    Po potwierdzeniu płatności zamówienie na [productname], ID [productid] kosztujące [price] zostanie wysłane po publikacji 30 września 2017 r.

    Ponownie użyłem dynamicznych ukrytych pól z formularza kontaktowego 7-dynamiczne rozszerzenie tekstu.

    2. Wysyłanie użytkownika do PayPal w celu zapłaty

    Dzieje się to automatycznie po pomyślnym przesłaniu formularza.

    Sekwencja jest:

    1. Klient jest proszony o zalogowanie się, jeśli nie jest już zalogowany.
    2. Klient ocenia swoje zamówienie.
    3. Klient płaci za zamówienie i otrzymuje ekran potwierdzenia płatności oraz e-mail.
    PayPal Checkout - Payment complete
    Paypal Checkout-płatność zakończona

    Na stronie ustawień wtyczka pozwala ustawić adres URL przekierowania w przypadku anulowania, a także jeden do dokonania pomyślnej płatności.

    Wersja Pro formularza kontaktowego 7-Paypal dodatek oferuje więcej funkcji, które przezwyciężyć niektóre z tych ograniczeń:

    • Wysyłaj e – maile po dokonaniu płatności.
    • Sprzedaj do 5 produktów w jednym formularzu.
    • Połącz elementy formularza z polami PayPal.
    • Opłata za wysyłkę i podatek.

    Podsumowując

    Jak już widzieliście, formularz kontaktowy 7 to nie tylko zwykły formularz kontaktowy. Można go ulepszyć, aby zrobić znacznie więcej, od dodawania dynamicznych danych przez rejestrowanie wpisów po przyjmowanie zamówień online.

    Mam nadzieję, że wybrałeś kilka wskazówek w tym poście, aby rozszerzyć własną implementację formularza kontaktowego 7 na swojej stronie.

    Jakie kreatywne zastosowania masz Dla formularza kontaktowego 7? Dajcie znać w komentarzach.

    Tagi:

    You May Also Like

    Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

    W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

    Jak naprawić błąd krytyczny w WordPress (krok po kroku)

    W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

    Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

    W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

    9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

    W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…