Integracja z WordPress – wtyczka Contact Form 7

Na stronach www opartych na platformie CMS WordPress można w prosty sposób zintegrować formularz Contact Form 7 z systemem SALESmanago. Dzięki temu, każdy kto wypełni formularz zostanie od razu dodany na konto w SALESmango jako monitorowany kontakt z odpowiednim tagiem.

1. Instalacja wtyczki CF7

Należy zaczać od instalacji pluginu Contact From 7. Po zalogowaniu się do panelu administracyjnego przechodzimy do zakładki Wtyczki → Dodaj nową oraz wyszukujemy wtyczkę Contact Form 7, a następnie wybieramy Zainstaluj teraz.

2pl_dodaj_nowa

1pl_sklep_wtyczek

Po zainstalowaniu wtyczki należy ją włączyć: Powinniśmy zostać przekierowani do miejsca Wtyczki → Zainstalowane wtyczki

2. Instalacja wtyczki integrującej CF7-SM

Kolejnym krokiem jest instalacja wtyczki SALESmanago w platformie WordPress, w tym celu należy wejść do panelu administratora, do zakładki Wtyczki → Dodaj nową. Następnie należy wybrać opcję Wyślij wtyczkę na serwer.

3pl_zainstaluj_teraz

Następnie wskazujemy miejsce na dysku, w którym zapisaliśmy plugin do integracji CF7.

Wtyczka do pobrania → POBIERZ

Po wskazaniu miejsca pliku wybieramy Zainstaluj teraz.

4pl_proces_instalacji

Jeśli wszystko przebiegło pomyślnie, możemy włączyć wtyczkę:

Po poprawnej Instalacji wtyczkę będzie można znaleźć w Ustawieniach WordPress, pod nazwą Integracja CF7 – SM.

Jeżeli jednak w podanej lokalizacji nie pokazała się taka pozycja, należy sprawdzić, czy na liście zainstalowanych wtyczek (Wtyczki → Zainstalowane wtyczki) integracja CF7 jest aktywna. Wówczas należy ją aktywować.

4_location

W kolejnych krokach przejdziemy do konfiguracji wtyczki oraz omówienia możliwości przesyłania informacji za pomocą formularzy.

3. Konfiguracja wtyczki CF7-SM

Konfiguracja integracji odbywa się w Ustawienia → Integracja CF7–SM.

Pola [1] ID Klienta, [3] APISecret, [4] Endpoint znajdziesz w SALESmanago, w zakładce Ustawienia → Integracja.

[2] API Key  to ciąg minimum 10 losowych znaków, który każdy użytkownik powinien samodzielnie wymyślić. Jest to pole obowiązkowe.

Jeśli w formularzu nie ma checkboxa sm-optin, zaznaczamy checkbox. Spowoduje to domyślne oznaczanie kontaktów zapisanych przez formularz statusem opt-in. Nazwy detali dla pól sm-options dotyczą radio buttonów oraz checkboxów i służą do określenia nazwy detalu pod jaką mają być zapisywane informacje pochodzące z elementu formularza sm-options.

Aby utworzyć formularz, który będzie przesyłał informacje do SALESmanago, należy uzupełnić dane: Nazwa, Owner, Tagi i Tagi do usunięcia oraz potwierdzić wybierając DODAJ, po czym zapisać całość ustawień wybierając Zapisz zmiany.

Nazwa → oznaczać będzie nazwę tego formularza

Owner → należy wpisać adres mail konta użytkownika do którego mają być przypisywanie kontakty w SALESmanago (wybrane konto musi istnieć)

Tagi → wpisz tagi, jakie mają zostać przesłane wraz z kontaktem

Tagi do usunięcia → wpisz tagi, jakie chcemy usunąć wraz z przesłaniem kontaktu jeśli ten już istnieje w systemie.

WSKAZÓWKA: Żeby wprowadzić więcej niż jeden tag, wpisz je kolejno po przecinku, ale bez spacji.

4. Dodawanie do pól formularza właściwości sm-properties

Integracja formularza polega na podmianie identyfikatorów pól, na te rozpoznawane przez wtyczkę SALESmanago. Służą one do opisania nazwy detalu, pod jaką chcemy zapisywać informacje zebrane z formularza kontaktowego. Innymi słowy, detale wprowadzone do pól we wtyczce odpowiadają szczegółom na kartach kontaktów w SALESmanago.

Na przykład ID your-name zamieniamy na sm-name: [text* sm-name] – tym sposobem wtyczka rozpozna dane pole jako nazwę kontaktu i przekaże informację do systemu. By zintegrować resztę pól należy postępować analogicznie, a następnie zapisać zmodyfikowany formularz.

8pl_sm_properties

Nazwa kontaktu → sm-name

Email → sm-email

Firma → sm-company

Telefon → sm-phone

Ulica → sm-address

Kod pocztowy → sm-postcode

Miasto → sm-city

Państwo → sm-country

FAX → sm-fax

Oprócz standardowych pól, które można znaleźć na karcie kontaktów, wtyczka została ulepszona o dodatkowe pola detali, które można nazwać według własnych upodobań w panelu integracji.

Do dyspozycji mamy pięć detali sm-properties, którymi możemy przechwytywać dowolne zmienne, które zostaną następnie zapisane w szczególe kontaktu pod nazwą podaną w panelu (w typ przypadku sm1,sm2 itd.).

Detale kontaktu → sm-properties1, sm-properties2 sm-properties3, sm-properties4, sm-properties5

Checkbox ze zgodą  sm-optin | sposób użycia → [ checkbox sm-optin ”Opt-in” ]

Radio buttony i checkboxy → sm-options1, sm-options2, sm-options3, sm-options4, sm-options5

Obsługa dodatkowych pól – przykłady

Po wprowadzeniu do kodu formularza powstaną specjalne pola.

– Textarea tworzy pole, w którym kontakt może wpisać odpowiedź na pytanie itp. np. [textarea sm-properties2

textarea
– Select tworzy rozwijaną listę z opcjami do wyboru, np. [select sm-properties1 ”Kraków” ”Gdańsk” ”Wrocław” ”Warszawa” ]

selectsm

– Radio button tworzy pole, w ktorym kontakt może zaznaczać opcje, np. [radio sm-radio ”Tak, byłbym zainteresowany” ”Nie, dziękuje” ]

6pl_zajecia_grupowe

5. Tworzenie i ustawienia formularza

Aby utworzyć formularz przejdź do zakładki Formularze → Dodaj nowy
W polu Wprowadź tytuł wpisz nazwę formularza (nazwa ta musi się pokrywać z nazwą z ustawień integracji CF7-SM).

Następnie utwórz formularz:

9pl_dodaj_nowy_form

Jeżeli masz już formularz, przejdź do Formularze i kliknij wybrany formularz. Otworzy się okno edycji.

4pl_lista_formularzy

11pl_shortcode

Po zapisaniu formularza otrzymasz kod skrótowy formularza, który należy umieścić na wybranej stronie lub wpisie. Wtedy tam pojawi się formularz.

WSKAZÓWKA: Kody skrótowe formularzy można zawsze sprawdzić w zakładce Formularze.

Kod gotowego formularza może wyglądać np. tak:

10pl_skrypt_forma

W kolejnym przykładowym formularzu użyte zostały zwykłe pola tekstowe, checkbox, radio button, oraz selector. Znaki zawarte w kwadratowych nawiasach, np. [text sm-properties placeholder „First Detail”] odnoszą się do pól detali. W ich treści możemy odnaleźć słowo „text*” na samym początku, co w tym przypadku oznacza, że jest to identyfikator pola, dzięki któremu możemy przypisaną wartość umieścić np. w emailu zwrotnym. Ostanie dwa słowa – „placeholder” i „First Detail” odpowiadają tekstowi wyświetlanemu w środku tego pola.

<label> Your Name (required) [text* sm-name] </label> <label> Your Email (required)  [email* sm-email] </label> <label> Subject  [text sm-properties1] </label> <label> Your Message  [textarea sm-properties2] </label> <label> Opt-in [checkbox sm-optin "opt-in"]</label> [radio sm-radio default:1 "Radio Option 1" "Radio Option 2" "Radio Option 3"] [select sm-properties3 "Option 1" "Option 2" "Option 3"] [select sm-country "Poland" "USA" "China"] [text sm-properties4 placeholder "Fourth Detail"] [text sm-properties5 placeholder "Fifth Detail"] [submit "Send"]

Formularz o tym kodzie wyświetli się następująco:

donut

Na koniec należy skonfigurować zakładkę e-mail formularza.

6pl_ustawienia_formularza

W tym oknie możesz ustawić jaka wiadomość email zostanie wysłana po wypełnieniu formularza. W polu Odbiorca możesz wpisać [sm-email] jeśli chcesz, żeby po wypełnieniu formularza została wysłana wiadomość do kontaktu. Jeśli chcesz, żeby wiadomość była wysyłana na twój adres, wpisz w to pole własny adres email.

Również w treści wiadomości można skorzystać z pól użytych w formularzu. Przykładowo w temacie wiadomości zostanie zaciągnięta wartość sm-properties2 (w tym przypadku nazwa dla tego detalu jest miasto – czyli temat wiadomości to np. „Wiadomość z formularza CF7 – Kraków”)

WSKAZÓWKA: Dodanie znaku*przy ’email’ powoduje że pole to musi zostać wypełnione, aby formularz mógł zostać przesłany. Opcja placeholder umożliwia wypełnienie pola wartością domyślną np.[email* sm-email placeholder ”Email*” ].

Gotowy formularz będzie się wyświetlał następująco:12pl_example_form

Kiedy formularz zostanie wypełniony, pojawi się w SALESmanago takie okno:

13pl_example_form_zrobione

aby otrzymywać
newsletter

Śledź nas