Instrukcja instalacji
Formularz wyceny na Webflow
Formularz wyceny na Webflow wstawiasz elementem „Embed” w Designerze. Webflow dobrze znosi obcy kod, ale ma dwie własności, o których trzeba wiedzieć: własny kod działa tylko na opublikowanej stronie i tylko na płatnym planie witryny. Reszta to kod z panelu Offerandum, domena i test.
Formularz wyceny na Webflow: krok po kroku
- W panelu Offerandum otwórz „Start”, znajdź opublikowany formularz i kliknij „Kopiuj kod” w sekcji „Kod do wklejenia na stronę”.
- W Designerze otwórz podstronę, w panelu „Add” znajdź element Embed (w grupie zaawansowanych elementów) i przeciągnij go w miejsce formularza.
- Kliknij element, w edytorze kodu wklej obie linijki z panelu i zapisz.
- Nadaj elementowi szerokość kolumny treści (na przykład 100% w kontenerze) i opublikuj witrynę. W Designerze element pokazuje tylko szary placeholder.
Skrypt w nagłówku całej witryny
Możesz zostawić skrypt w elemencie Embed albo dodać go raz dla całej witryny: Project settings → Custom code → „Head code”, a w elemencie zostawić sam element offerandum-form . Ten wariant pozwala statystykom formularza zapamiętać, na którą stronę Twojej witryny klient wszedł najpierw. Po zmianie w ustawieniach też trzeba opublikować witrynę.
Na co uważać w Webflow
- Plan witryny. Webflow publikuje własny kod tylko na płatnym planie witryny (Site plan). Na darmowym planie Embed nie zadziała po publikacji. Do czasu podłączenia planu dodaj w menu przycisk do gotowego adresu formularza.
- Limit znaków w Embed. Element Embed przyjmuje do 10 000 znaków; dwie linijki kodu formularza to ułamek tego limitu, więc nic nie trzeba skracać.
- Szablony kolekcji. Element Embed na szablonie kolekcji wstawi formularz na każdą stronę kolekcji; przez „Add field” możesz podstawić identyfikator formularza z pola CMS, gdy każda podstrona ma mieć inny.
- Localization i domeny. Każda domena, pod którą publikujesz witrynę (własna, webflow.io, wersje językowe na osobnych domenach), musi być na liście dozwolonych stron w panelu Offerandum.
Adres strony w panelu Offerandum
Pod kodem do wklejenia w panelu jest lista „Strony, na których działa formularz”. Dodaj domenę produkcyjną i adres w domenie webflow.io, jeśli na nim testujesz. Wspólne kroki dla wszystkich systemów opisuje instrukcja instalacji .
Sprawdzenie i próbne zapytanie
Po publikacji otwórz stronę na komputerze i telefonie, przejdź formularz do podsumowania. Próbne zgłoszenie wyślij przez link testowy z panelu albo dodaj do elementu atrybut test-token z tokenem z tego linku; usuń go po testach. Klient dostaje ofertę PDF , Ty zapytanie z parametrami. Stawki zmieniasz w panelu cennika , warunki opisuje cennik .
Warto wiedzieć
Najczęstsze pytania
W Designerze nie widzę formularza, tylko szary prostokąt. Czy coś jest nie tak?
Nie. Webflow nie uruchamia własnego kodu w Designerze, tylko na opublikowanej stronie. Opublikuj witrynę i sprawdź adres publiczny.
Czy formularz działa na darmowym planie Webflow?
Własny kod publikuje się w Webflow na płatnym planie witryny. Na darmowym planie udostępnij klientom gotowy link do formularza albo podłącz plan przed uruchomieniem.
Czy formularz mogę wstawić w kolekcji CMS, na każdej podstronie produktu?
Tak. Element Embed na szablonie kolekcji wyświetla ten sam formularz na każdej stronie z tej kolekcji. Jeśli chcesz inny formularz per produkt, wstaw pole kolekcji z jego identyfikatorem do atrybutu form-id.
Czy interakcje Webflow albo Lottie kolidują z formularzem?
Nie. Formularz działa w osobnej, odizolowanej ramce i nie dotyka skryptów Twojej strony. Jedyne, co ustawiasz, to szerokość elementu Embed.
// prezentacja online
Chcesz taki formularz u siebie?
Pokażę Ci na żywo, jak działa od strony firmy: panel, zapytania i oferta PDF. Napisz, co wyceniasz, a dostaniesz mailem link do wyboru terminu.
- Bezpłatnie i bez zobowiązań
- Termin wybierasz sam w kalendarzu
- Spotkanie online w Google Meet
Prezentację prowadzę osobiście: zobaczysz, jak taki formularz pracowałby w Twojej firmie.
Damian Krychowski, twórca Offerandum