Jak obsługiwać zgłoszenia formularzy Webflow bez własnego backendu

Formularz kontaktowy w Webflow wygląda świetnie od razu po wdrożeniu, ale Webflow wysyła ci tylko powiadomienie e-mail z danymi zgłoszenia - nie zapisuje wpisów w bazie danych, nie łączy się z CRM-em ani nie wyzwala żadnej własnej logiki. Jeśli potrzebujesz czegoś więcej niż podstawowego powiadomienia e-mail, musisz przekierować zgłoszenia z formularza Webflow przez zewnętrzną usługę. Dobra wiadomość jest taka, że możesz to zrobić bez napisania ani jednej linii kodu backendowego.

Co Webflow daje ci domyślnie

Wbudowany handler formularzy Webflow robi trzy rzeczy: wysyła powiadomienie e-mail do właściciela strony, wyświetla komunikat o sukcesie i zapisuje zgłoszenia w panelu Webflow (na płatnych planach). To wystarczy przy prostych formularzach kontaktowych na małych stronach, ale szybko okazuje się niewystarczające, gdy potrzebujesz któregoś z poniższych:

• Automatycznych odpowiedzi do osoby, która wypełniła formularz
• Przekazywania zgłoszeń do konkretnej skrzynki zespołu lub CRM-u
• Logiki warunkowej (np. kierowania leadów według zainteresowania produktem)
• Filtrowania spamu wykraczającego poza podstawowy honeypot Webflow
• Wiarygodnego rejestru dostarczenia z sygnaturami czasowymi i mechanizmem ponownych prób

Żadna z tych funkcji nie jest dostępna natywnie. Potrzebujesz zewnętrznej warstwy, a są trzy realistyczne sposoby, żeby ją dodać.

Natywne integracje - Zapier i Make

Webflow ma bezpośrednią integrację z Zapier i Make (dawniej Integromat). Gdy pojawi się nowe zgłoszenie formularza, wyzwalacz uruchamia się i możesz połączyć dowolne akcje: dodać wiersz do Google Sheets, utworzyć kontakt w HubSpot, wysłać wiadomość na Slack i tak dalej.

To ścieżka bez kodu, po którą designerzy sięgają jako pierwsi. Konfiguracja wygląda tak:

1. W Webflow przejdź do Ustawienia projektu > Integracje i połącz swoje konto Zapier.
2. W Zapier utwórz nowy Zap z wyzwalaczem Webflow - New Form Submission .
3. Wybierz konkretny formularz po nazwie.
4. Dodaj krok z akcją (Gmail, Slack, Airtable itp.).
5. Przetestuj na rzeczywistym zgłoszeniu i włącz Zap.

Make jest tańszy przy złożonych przepływach pracy, ale obie platformy wprowadzają zależność zewnętrzną: jeśli Zapier lub Make padnie albo twoje konto przekroczy limit, zgłoszenia po cichu przepadają lub kolejkują się bez powiadomienia.

Korzystanie z webhooka Webflow

Webhook Webflow to bardziej bezpośrednia droga. Webflow wysyła żądanie HTTP POST na wskazany przez ciebie adres URL za każdym razem, gdy formularz zostanie przesłany. Kontrolujesz endpoint odbierający, więc możesz zrobić z payloadem wszystko, co chcesz.

Żeby go skonfigurować:

1. Przejdź do Ustawienia projektu > Integracje > Webhooks w Webflow.
2. Kliknij Dodaj webhook i wybierz wyzwalacz Form Submission .
3. Wklej adres URL endpointu twojej usługi odbierającej.
4. Zapisz i przetestuj na rzeczywistym zgłoszeniu.

Payload wysyłany przez Webflow to obiekt JSON zawierający wszystkie wartości pól, nazwę formularza i metadane strony. Typowy payload wygląda tak:

{
  "name": "Contact Form",
  "site": "my-webflow-site",
  "data": {
    "Name": "Jane Smith",
    "Email": "[email protected]",
    "Message": "Hi, I'd like a quote."
  },
  "submittedAt": "2024-11-15T10:22:00Z"
}

Haczyk jest taki, że potrzebujesz czegoś, co odbierze ten webhook. Możliwości to m.in. mały Cloudflare Worker , przepływ pracy w Pipedream albo dedykowany backend formularzy. Pisanie własnego odbiornika to dokładnie ten problem z "własnym backendem", którego ten artykuł ma pomóc ci uniknąć. Właśnie tu usługi typu formularz-do-e-mail stają się najczystszym rozwiązaniem.

Zamień endpoint formularza na zewnętrzną usługę

Zamiast w ogóle używać handlera formularzy Webflow, możesz wskazać atrybut action swojego formularza na zewnętrzną usługę obsługi formularzy. Usługa odbiera żądanie POST, waliduje je, filtruje spam i wysyła ci wyniki e-mailem. Żadnego backendu po twojej stronie.

Przepływ pracy w Webflow wygląda tak:

1. W Webflow Designer zaznacz element formularza.
2. W panelu Ustawienia formularza ustaw pole Akcja na adres URL endpointu twojej usługi (np. https://sendform.net/!your-form-id ).
3. Ustaw Metodę na POST .
4. Upewnij się, że każde pole input ma atrybut name - Webflow ustawia je domyślnie.
5. Opublikuj stronę i przetestuj zgłoszenie.

To podejście całkowicie pomija handler formularzy Webflow. Zgłoszenie trafia bezpośrednio z przeglądarki odwiedzającego do usługi formularzy. Ty otrzymujesz e-mail, usługa zajmuje się ponownymi próbami i filtrowaniem spamu, a Webflow pełni jedynie rolę warstwy UI.

Ten sam wzorzec działa na każdej statycznej lub no-code stronie. Jeśli hostujesz również na GitHub Pages lub Cloudflare Pages, artykuł o bezpłatnym hostowaniu strony statycznej z działającymi formularzami kontaktowymi omawia dokładnie to samo podejście.

Sendform a alternatywy

Kilka usług obsługi formularzy działa z Webflow. Oto jak wypadają główne opcje pod względem rzeczy, które naprawdę mają znaczenie przy konfiguracji formularza kontaktowego:

Sendform wyróżnia się z kilku konkretnych powodów, których nie da się zmieścić w tabeli:

• Konfiguracja bez żadnych przeszkód: Otrzymujesz adres URL endpointu formularza bez konieczności wcześniejszego zakładania konta. Wklejasz go w pole Akcja w Webflow i gotowe.
• Brak przechowywania zgłoszeń domyślnie: Sendform wysyła dane e-mailem i nie przechowuje ich na swoich serwerach, co jest właściwym domyślnym ustawieniem pod kątem zgodności z RODO. Konkurenci, tacy jak Formspree, zapisują wszystkie zgłoszenia w swoim panelu, co oznacza, że dane twoich użytkowników żyją na serwerze zewnętrznym przez czas nieokreślony.
• Przyjazny dla deweloperów, ale dostępny bez kodu: W przeciwieństwie do Zapier, nie ma żadnego przepływu pracy do utrzymania. W przeciwieństwie do Netlify Forms, nie jest powiązany z konkretnym dostawcą hostingu - działa z Webflow, GitHub Pages lub dowolnym innym hostem.
• Uczciwy darmowy plan: Żadnych ukrytych barier w stylu "przejdź na płatny plan, żeby odblokować przekierowania", którymi inne usługi zachęcają do upgrade'u.

Które podejście wybrać?

Właściwa odpowiedź zależy od tego, czego faktycznie potrzebujesz po przesłaniu formularza:

• Tylko powiadomienia e-mail: Użyj Sendform. Wklej adres URL endpointu w pole Akcja w Webflow - gotowe w dwie minuty.
• E-mail + synchronizacja z CRM-em lub arkuszem kalkulacyjnym: Użyj Sendform do dostarczania e-maili i opcjonalnie dodaj krok w Zapier wyzwalany przez przychodzący e-mail, albo skorzystaj z wyjścia webhookowego Sendform, jeśli jest dostępne na twoim planie.
• Złożona wieloetapowa automatyzacja: Webhook Webflow do Make lub Zapier ma tu sens, ale zaplanuj budżet na płatny plan.
• Już hostujesz na Netlify: Netlify Forms sprawdza się przy prostych przypadkach, ale limit 100 zgłoszeń miesięcznie skończy się szybko na każdej aktywnej stronie.

W przypadku zdecydowanej większości formularzy kontaktowych w Webflow - pole imię, e-mail i wiadomość, które ma niezawodnie trafiać do twojej skrzynki - Sendform to najszybsza i najczystsza droga. Żadnego backendu, żadnych miesięcznych limitów zadań do pilnowania i żadnych danych zgłoszeń siedzących w panelu zewnętrznym, o którym zapomniałeś.

Obsługuj formularz kontaktowy Webflow bez pisania backendu

Sendform daje ci gotowy endpoint formularza, który możesz wkleić bezpośrednio w pole Akcja w Webflow - zgłoszenia z twojego formularza trafiają do skrzynki natychmiast, z filtrowaniem spamu i ustawieniami domyślnymi zgodnymi z RODO.

Wypróbuj Sendform za darmo →