Do Ecomail możesz przesyłać dane również z własnych formularzy.
Dane można przesyłać z własnego formularza internetowego do webhooka, można wykorzystać połączenie po API lub wykorzystać platformy firm trzecich.
W tym artykule omówimy te możliwości.
💡 Jeśli nie masz lub nie chcesz korzysztać z własnego formularza, możesz stworzyć formularze bezpośrednio w Ecomail.
Konfiguracja i połączenie własnego formularza z Ecomailem
Spis treści:
1. Połączenie formularza własnego przy użyciu metody HTML/POST
Możesz wykorzystać tę opcje, jeśli na swej stronie internetowej masz formularz HTML, z którego chcesz przesyłać dane do Ecomail.
Wykonaj następujące kroki:
Wejdź w zakładkę Kontakty → (wybierz listę, na której mają być zapisywane kontakty) → Formularze.
W dolnej części sekcji znajduje się adres URL, który jest inny dla każdej listy kontaktów. Jest to adres, na który można wysłać dane z formularza:
Zaznaczony adres URL na obrazku trzeba umieścić w formularzu HTML, w parametrze "action".
Przykładowo:
<form method="post" action="tutaj wkleisz adres URL z listy kontaktów">…treść formularza…
</form>
a. Ustawienie pól podstawowych
Aby dane z formularza były wysyłane poprawnie, nazwy pól muszą być zgodne z nazwami merge tagów w Ecomail.
Pełną listę podstawowych merge tagów w aplikacji znajdziesz tutaj.
W formularzu, w którym zbierasz adres e-mail i imię, nazwy pól muszą być "email" i "name".
Na przykład w ten sposób:
<input type="email" name="email">
<input type="text" name="name">
b. Ustawienie pól własnych
Do aplikacji możesz również wysyłać własne dane z formularza, tj. na przykład dodatkowe informacje o kontaktach. Również w wypadku pól własnych należy użyć dokładnej nazwy stworzonego merge tagu. Własne merge tagi możesz stworzyć w sekcji Kontakty -> wybierz listę kontaktów -> Merge tagi.
W HTML formularzu w parametrze "name" nazwę merge tagu należy wprowadzić jako custom_fields[notatka]
W formularzu, w tagu input będzie to wyglądać następująco:
<input type="text" name="custom_fields[notatka]">
c. Ustawienie grupy preferencji
Jeśli chcesz również wysyłać informacje o grupie preferencji do kontaktu, musisz znać:
id listy
id grupy preferencji
opcję wyboru
W poniższych przykładach 14 = id listy, grp_543c68ff85248 = id grupy preferencji. Zastąp swoimi id! Poniżej znajdują się opcje wyboru, które odpowiadają opcjom preferencji danej grupy w aplikacji.
Typ Lista rozwijana (select):
<select name="groups[14][grp_543c68ff85248][]" required="required">
<option value="" hidden="">
Wybierz, proszę
</option>
<option value="Sport">
Sport
</option>
<option value="Jídlo">
Jedzenie
</option>
<option value="Cestování">
Podróże
</option>
</select>
Typ Pole wyboru (checkbox):
<div class="checkbox">
<label>
<input type="checkbox" name="groups[14][grp_689f2463b07f1][]" value="Grafika" /> Grafika
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="groups[14][grp_689f2463b07f1][]" value="Programowanie" /> Programowanie
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="groups[14][grp_689f2463b07f1][]" value="Marketing" /> Marketing
</label>
</div>
Typ Przycisk opcji (radio):
<input name="groups[14][grp_689f28586a995][]" id="radio-tenis" type="radio" value="Tenis">
<label for="radio-tenis">Tenis</label>
</div>
<div>
<input name="groups[14][grp_689f28586a995][]" id="radio-fotbal" type="radio" value="Piłka nożna">
<label for="radio-fotbal">Piłka nożna</label>
</div>
<div>
<input name="groups[14][grp_689f28586a995][]" id="radio-squash" type="radio" value="Squash">
<label for="radio-squash">Squash</label>
</div>
<div>
<input name="groups[14][grp_689f28586a995][]" id="radio-hokej" type="radio" value="Hokej">
<label for="radio-hokej">Hokej</label>
</div>
</div>
d. Aktualizacja istniejącego kontaktu
Jeśli chcesz zaktualizować istniejący kontakt, należy dodać do formularza dodatkowy <input>.
W ramach tagu input będzie wyglądał następująco:
<input type="hidden" name="updateExisting" value=1 />
e. Własne źródło dla kontaktów zapisanych przez własny formularz
Informację o własnym źródle kontaktu, która wyświetla się w szczegółach kontaktu, można dodać na końcu URL w parametrze "action", za pomocą następującego query:
?source=wlasnezrodlo
Więc przykładowo w ten sposób:
https://nazwakonta.ecomailapp.pl/public/subscribe/IDlisty/hash?source=wlasnezrodlo
W Ecomail, w szczegółach danego kontaktu ta informacja będzie wyglądała w ten sposób:
f. Edycja komunikatów własnego formularza i przekierowanie na inną stronę
Jeśli chcesz przekierować nowy kontakt po rejestracji na inną stronę (np. powitalny landing page), przejdź do listy kontaktów, w której zapisany jest Twój formularz.
Wybierz Ustawienia listy, a następnie w sekcji „Double opt‑in" → „Przekierowanie po zapisie za pomocą formularza":
Kontakty po wysłaniu formularza zostaną automatycznie przekierowane na wybraną stronę.
Jeśli chcesz edytować komunikaty formularza, przejdź do sekcji Formularze → na dole kliknij „Stare formularze":
Kliknij „Link do strony logowania":
Po otwarciu możesz edytować komunikaty w formularzu:
💡 TIP: Masz własny formularz na platformie Webflow? Możesz go połączyć z aplikacją Ecomail za pomocą opisanej powyżej metody HTML/POST.
Wystarczy wstawić unikalny adres URL z listy kontaktów do parametru „action". 👆
Ponieważ jest to zewnętrzna platforma, której środowiska i możliwości nie znamy szczegółowo, w przypadku dalszych pytań dotyczących konfiguracji formularza prosimy o kontakt bezpośrednio z pomocą techniczną Webflow.
2. Połączenie przez API
Jeśli chcesz bardziej dostosować własny formularz, a dane zbierasz również do swojego systemu (np. przy zbieraniu zapytań ze strony internetowej), możesz w pełni skonfigurować integrację przez API.
Konfigurację API należy przeprowadzić na Twojej stronie – zalecamy konsultację z Twoimi technikami.
Do podłączenia formularzy można wykorzystać nasze endpointy z dokumentacji. Integracja przez API umożliwia ponadto uruchamianie automatyzacji oraz tworzenie kampanii.
Do Ecomaila można również przesyłać dane o aktywności Twoich klientów. Zajrzyj do podsumowania integracji, gdzie znajdziesz wszystkie dostępne możliwości integracji.
3. Połączenie własnego formularza za pośrednictwem plaftorm firm trzecich
By połączyć własny formularz z Ecomail, można również wykorzystać te platformy:
Możesz też wykorzystać inne plaftormy, które mogą wysyłać dane na adres URL (jak w pierwszym kroku), lub możesz użyć punktów końcowych z dokumentacji API.
4. Często zadawane pytania (FAQ)
Podczas pracy z formularzem otrzymuję błąd CORS, co mogę zrobić?
Błąd występuje, ponieważ w nagłówku Twej strony internetowej jest ustawiona polityka CORS (Cross Origin Resource Sharing).
Podczas wysyłania danych z formularza na Twej stronie internetowej, dane wysyłane są na inny (nasz) adres (domenę), co zabezpieczenie Twej strony może ocenić jako potencjalnie niebezpieczne zachowanie.
Jak umożliwić wysyłanie danych do innej domeny można znaleźć na oficjalnych stronach pomocy. Następnym rozwiązaniem jest połączenie formularza po API.
Jak zabezpieczony jest formularz?
W webhooku z listy kontaktów ustawione jest automatyczne sprawdzanie adresów e-mail (reCaptcha). Ta kontrola jest ustawiana automatycznie przez przeglądarkę i nie można jej wyłączyć. Jeśli nie chcesz korzystać z tej kontroli, zalecamy połączyć formularz po API.
Jednak w przypadku API musisz zapewnić ochronę formularza na własną rękę.
Czy jest możliwy double opt-in (podwójna zgoda) w wypadku formularza własnego?
Jeśli masz włączoną opcję Double opt-in dla listy, do której zapisują się kontakty z formularza, kontakty te nadal będą otrzymywać wiadomość e-mail z potwierdzeniem.
❓
Masz pytania? Napisz do nas na [email protected].