Budujesz formularze w wyspecjalizowanym narzędziu do formularzy. Teraz musisz umieścić formularz na swojej stronie. Nie możesz skopiować i wkleić kodu, jeśli Twoja strona działa na innej platformie. Osadzasz go. Osadzony formularz pojawia się na Twojej stronie, ale znajduje się gdzie indziej.
Ten artykuł opisuje, jak osadzać formularze, jak działają iframe, bezpieczeństwo między domenami i typowe problemy z osadzonymi formularzami.
Czym jest osadzony formularz?
Osadzony formularz to formularz, który znajduje się na jednym serwerze, ale pojawia się na innej stronie. Formularz jest hostowany pod adresem wemasy.pl, a na Twojej stronie wyświetla się przez iframe, np. <iframe src="https://wemasy.com/form/abc123"></iframe>.
Iframe tworzy okno do innej strony. Ta strona zawiera formularz. Dla użytkownika wygląda to tak, jakby formularz był na Twojej stronie. Technicznie to osobna strona wewnątrz kontenera.
Jak działają iframe
Iframe to ramka wbudowana. Wczytuje zupełnie osobną stronę wewnątrz Twojej strony. Ta osobna strona ma własny HTML, CSS i JavaScript. Jest odizolowana (sandbox), czyli nie ma dostępu do Twojej strony i odwrotnie.
Iframe zapewniają izolację bezpieczeństwa: narzędzie do formularzy nie ma dostępu do danych Twojej strony, Twoja strona nie ma dostępu do danych formularza, a jeśli formularz się zawiesi, nie zawiesi Twojej strony. Iframe mają jednak wady, w tym ograniczoną bezpośrednią komunikację między stroną a formularzem, możliwy wpływ na SEO (Google może nie zaindeksować treści formularza), wolniejsze wczytywanie i brak obsługi ciasteczek między domenami.
Osadzanie formularza przez iframe
Większość kreatorów formularzy daje kod do osadzenia, np. <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Skopiuj i wklej ten kod w HTML swojej strony, żeby wyświetlić formularz w kontenerze. Częsty problem to stała wysokość, która powoduje kłopoty z przewijaniem. Jeśli formularz jest dłuższy niż ustawiona wysokość, formularz przewija się wewnątrz iframe (złe wrażenia). Musisz znać dokładną wysokość formularza, ale formularze rosną i maleją zależnie od logiki warunkowej, więc wysokość nie jest stała. Rozwiązaniem są iframe z automatyczną zmianą rozmiaru, używające postMessage do komunikacji między iframe a stroną nadrzędną. Gdy formularz zmienia rozmiar, mówi stronie nadrzędnej, żeby zmieniła rozmiar iframe. JavaScript strony nadrzędnej nasłuchuje wiadomości z iframe za pomocą window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. Formularz wewnątrz iframe wysyła wiadomość ze swoją wysokością za pomocą parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, więc iframe automatycznie rozszerza się do zawartości formularza.
Bezpieczeństwo między domenami
Iframe są odizolowane ze względów bezpieczeństwa. Formularz nie ma dostępu do danych Twojej strony. Twoja strona nie ma dostępu do danych formularza. To dobrze.
Uważaj na atrybut sandbox w <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. Atrybut sandbox ogranicza, co może robić iframe. Allow-same-origin pozwala iframe na dostęp do ciasteczek i pamięci sesji, allow-scripts pozwala uruchamiać JavaScript, a allow-forms pozwala wysyłać formularz. Włączaj tylko te uprawnienia sandbox, których naprawdę potrzebujesz, bo ustawienie domyślne (wszystkie uprawnienia zablokowane) jest najbezpieczniejsze, ale psuje większość formularzy.
Wysyłanie osadzonych formularzy
Gdy użytkownik wysyła formularz wewnątrz iframe, wysyłanie odbywa się wewnątrz iframe, a formularz przekazuje dane na serwer kreatora formularzy (nie na Twój serwer). Twój serwer nigdy nie widzi danych formularza, bo narzędzie do formularzy je przechowuje, a Ty pobierasz je później przez API lub powiadomienie e-mail. Jeśli potrzebujesz większej kontroli, musisz przechwycić wysłanie. Wymaga to, żeby narzędzie do formularzy wysłało postMessage do strony nadrzędnej za pomocą window.parent.postMessage({ type: 'submit', data: formData }, origin);, a wtedy strona nadrzędna może coś zrobić z danymi (wysłać je na Twój serwer, pokazać własną stronę z podziękowaniem itd.).
Osadzone formularze na telefonach
Na telefonach iframe mogą sprawiać kłopoty. Formularz jest mniejszy i trudniej z nim pracować. Iframe może nie zmieniać rozmiaru poprawnie, jeśli nie obsługuje automatycznej zmiany rozmiaru.
Lepsze podejście na telefonie to link do formularza na całej stronie zamiast osadzania iframe. Wykryj rozmiar okna i pokaż przycisk z linkiem na telefonie, a osadzaj na komputerze za pomocą if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Otwórz formularz</a>'; } else { // embed the iframe }.
Wpływ osadzonych formularzy na wydajność
Iframe dodają narzut. Każdy iframe to osobne żądanie HTTP. Wczytuje własny HTML, CSS i JavaScript. To spowalnia Twoją stronę.
Wczytuj iframe leniwie, czyli dopiero gdy użytkownik przewinie blisko niego, używając <iframe data-src="https://..." style="display: none"></iframe> oraz window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. Iframe wczytuje się tylko wtedy, gdy użytkownik zaraz go zobaczy.
Kiedy używać osadzonych formularzy, a kiedy alternatyw
Używaj osadzonych formularzy, gdy nie możesz dostosować swojej strony (na przykład w zamkniętym, hostowanym kreatorze stron) albo chcesz oddzielić narzędzie do formularzy od strony.
Używaj formularzy natywnych, gdy kontrolujesz swoją stronę i zależy Ci na wydajności. Formularz zbudowany na Twoim własnym stosie technologicznym wczytuje się szybciej i lepiej się integruje.
Używaj formularzy hostowanych (samodzielnych), gdy zależy Ci na prostocie. Formularz na domenie kreatora jest najłatwiejszy w ustawieniu, ale wygląda mniej profesjonalnie.
Jak WEMASY obsługuje osadzone formularze
Formularze WEMASY można osadzać na zewnętrznych stronach przez iframe z obsługą automatycznej zmiany rozmiaru. Formularze są zoptymalizowane pod wszystkie rozmiary urządzeń. Zgłoszenia możesz odbierać w panelu WEMASY, e-mailem lub przez webhooki.
Zobacz opcje osadzania w swoim pakiecie WEMASY.