Tworzenie i osadzanie formularzy zapisu

Published: 16 lipca 2026 · Last updated: 21 lipca 2026 · By Marcus Biel

Formularz osadzony jest umieszczany bezpośrednio wewnątrz istniejącej strony w Twojej witrynie. Pozostaje częścią otaczającej treści, zamiast pojawiać się nad nią.

Formularze osadzone dobrze sprawdzają się w artykułach na blogu, na stronach docelowych we własnej witrynie, w sekcjach newslettera, paskach bocznych i stopkach. Miejsce, w którym dodasz kod formularza, decyduje o tym, gdzie formularz się pojawi.

Ten przewodnik obejmuje kroki charakterystyczne dla formularzy osadzonych. Wspólne funkcje edycji wizualnej zostały wyjaśnione w głównym przewodniku po kreatorze formularzy zapisu.

Tworzenie formularza osadzonego

Otwórz „Formularze zapisu”, kliknij „Utwórz formularz” i wybierz „Formularz osadzony”. Wpisz jasną nazwę wewnętrzną i przejdź do kreatora.

Możesz również edytować istniejący formularz, klikając jego nazwę w przeglądzie formularzy zapisu.

Nazwa wewnętrzna nie jest automatycznie wyświetlana odwiedzającym. Nazwij formularz zgodnie z jego lokalizacją lub przeznaczeniem, na przykład „Newsletter na stronie głównej”, „Stopka bloga” lub „Aktualizacje produktu”.

Wybór projektu początkowego

Formularze osadzone oferują pusty formularz, standardowy formularz oraz cztery zaprojektowane szablony:

• Spokojna notatka
• Pasek z kuponem
• Ciemny styl redakcyjny
• Minimalistyczny niebieski

Wybierz projekt, który najlepiej pasuje do miejsca i tonu witryny, w której pojawi się formularz. Każdy projekt początkowy można całkowicie zmienić po jego wybraniu.

Projektowanie formularza osadzonego

Użyj opcji „Układ” i „Treść”, aby rozmieścić elementy formularza. Formularz osadzony może zawierać formularz zapisu wraz z tekstem pomocniczym, obrazami, listami, przyciskami, linkami społecznościowymi, licznikiem subskrybentów, odstępami lub separatorami.

Wąski pasek boczny lub stopka zwykle najlepiej prezentują się w układzie jednokolumnowym. W szerszej sekcji strony układ dwukolumnowy może umieścić krótkie wyjaśnienie lub obraz obok pól.

Wybierz blok formularza zapisu, aby ustawić pola subskrybenta, pola wymagane, etykiety, ukryte tagi, wskaźnik postępu i opcjonalny licznik subskrybentów. Następnie możesz osobno stylizować kontener formularza, pola i przycisk wysyłania.

Otwórz „Ustawienia strony”, aby zmienić tło i ogólne domyślne ustawienia projektu obszaru roboczego formularza osadzonego. Weź pod uwagę wygląd otaczającej witryny. Przezroczyste lub proste tło często wygląda bardziej naturalnie, natomiast kontrastowe tło pomaga wyróżnić ofertę zapisu.

Kompletne instrukcje dotyczące układów, treści, warstw, pól, tagów, typografii i wyglądu znajdziesz w Korzystanie z kreatora formularzy zapisu.

Konfigurowanie procesu zapisu

Użyj ustawień procesu zapisu w nagłówku kreatora, aby sprawdzić, co dzieje się po wysłaniu formularza, który e-mail Double Opt-in jest wysyłany oraz co widzi odwiedzający po potwierdzeniu.

Możesz wybrać istniejący proces, edytować przypisany proces lub utworzyć nowy. Jeśli wybrany proces jest współdzielony z innymi formularzami, pamiętaj, że jego edycja może wpłynąć również na te formularze.

Podgląd i zapisywanie

Kliknij „Podgląd”, aby sprawdzić kompletny formularz przed umieszczeniem go w witrynie. Sprawdź kolejność pól, etykiety, miejsce na błędy, tekst przycisku i ilość treści pomocniczej.

Kliknij „Zapisz zmiany”, aby zapisać bieżącą wersję. Gdy formularz będzie gotowy do osadzenia, wróć do przeglądu formularzy zapisu.

Aktywowanie formularza

Formularz osadzony musi być aktywny, zanim będzie można użyć jego publicznego kodu.

Jeśli formularz jest nieaktywny, otwórz jego menu działań z trzema kropkami w przeglądzie formularzy zapisu i wybierz „Aktywuj”. Aktywny formularz wyświetla opcję „Pokaż fragment kodu”.

Dezaktywuj formularz, gdy nie powinien być już dostępny w witrynie. Dezaktywacja wyłącza formularz bez usuwania jego projektu ani wcześniejszych danych raportów.

Kopiowanie kodu JavaScript

Kliknij „Pokaż fragment kodu” i otwórz kartę „JavaScript”. Maildroppa udostępnia krótki skrypt zawierający unikalny identyfikator formularza.

Kod ma następującą strukturę:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Skopiuj kompletny kod bez zmieniania adresu skryptu ani identyfikatora formularza.

Opcja JavaScript ładuje bieżący zapisany formularz za pośrednictwem środowiska uruchomieniowego formularzy Maildroppa. Gdy później edytujesz i zapiszesz ten sam formularz w Maildroppa, istniejący fragment kodu nadal odwołuje się do tego identyfikatora formularza. Nie musisz tworzyć nowego formularza tylko po to, aby zmienić jego tekst lub projekt.

Dodawanie formularza do witryny

Wklej skrypt w miejscu strony, w którym ma pojawić się formularz osadzony.

Dokładne kroki zależą od systemu używanego w witrynie. W kreatorze stron lub systemie zarządzania treścią użyj bloku, który akceptuje własny kod HTML lub skrypt. W niestandardowej witrynie dodaj skrypt do odpowiedniego szablonu lub znaczników strony.

Niektóre edytory witryn usuwają znaczniki skryptów ze względów bezpieczeństwa. Jeśli formularz nie pojawi się po opublikowaniu strony, najpierw sprawdź, czy edytor zachował kompletny skrypt Maildroppa. Może być konieczne użycie dedykowanego obszaru systemu przeznaczonego na własny kod lub skontaktowanie się z osobą zarządzającą witryną.

Nie wklejaj tego samego fragmentu formularza osadzonego kilka razy na jednej stronie, chyba że celowo chcesz umieścić ten sam formularz w kilku miejscach i przetestowałeś takie rozwiązanie.

Korzystanie z karty HTML

Karta „HTML” zawiera wygenerowany kod formularza. Ta opcja jest przeznaczona do niestandardowych implementacji, w których chcesz pracować bezpośrednio z renderowanym kodem HTML.

Jeśli wybierzesz tę metodę, skopiuj kompletny kod. Ponieważ na niestandardową integrację HTML mogą wpływać style i sposób implementacji witryny, dokładnie przetestuj jej pola, walidację, wysyłanie i proces potwierdzenia.

W przypadku standardowego formularza zarządzanego przez Maildroppa fragment JavaScript jest krótszą metodą integracji i ładuje bieżącą publiczną konfigurację formularza na podstawie jego identyfikatora.

Testowanie formularza osadzonego

Opublikuj lub wyświetl podgląd strony witryny zawierającej kod. Następnie przetestuj formularz tak, jak zrobiłby to odwiedzający:

1. Sprawdź, czy formularz pojawia się we właściwym miejscu.
2. Wyświetl stronę na szerokim i wąskim ekranie.
3. Wypełnij każde wymagane pole.
4. Wyślij formularz i sprawdź odpowiedź.
5. Otwórz e-mail Double Opt-in.
6. Potwierdź adres i sprawdź końcową odpowiedź.
7. Sprawdź, czy subskrybent i wszystkie ukryte tagi pojawiają się prawidłowo w Maildroppa.

Jeśli formularz jest szerszy niż kontener witryny, dostosuj jego szerokość, układ kolumn, odstępy lub ustawienia układu mobilnego w kreatorze. Nie naprawiaj problemów z układem poprzez zmienianie wygenerowanego kodu Maildroppa.

Aktualizowanie formularza osadzonego

Otwórz ten sam formularz w Maildroppa, wprowadź zmiany, wyświetl ich podgląd i kliknij „Zapisz zmiany”. Fragment JavaScript w witrynie nadal będzie używać tego samego identyfikatora formularza i załaduje zapisaną publiczną konfigurację.

Jeśli formularz ma zostać tymczasowo usunięty, dezaktywuj go w przeglądzie formularzy zapisu. Jeśli nie jest już potrzebny, usuń również fragment kodu z witryny, aby strona nie zawierała nieużywanego kodu.