Twórz i osadzaj formularze zapisu

Opublikowano: 16 lipca 2026 · Ostatnia aktualizacja: 12 września 2026 · Autor: Marcus Biel

Formularz osadzony umieszczasz bezpośrednio na istniejącej stronie swojej witryny. Jest częścią jej treści, a nie elementem wyświetlanym 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. Formularz pojawi się w miejscu, w którym dodasz jego kod.

Ten przewodnik opisuje kroki dotyczące wyłącznie formularzy osadzonych. Wspólne funkcje edycji wizualnej znajdziesz w głównym przewodniku po kreatorze formularzy zapisu.

Utwórz formularz osadzony

Otwórz „Signup Forms”, kliknij „Create Form” i wybierz „Embedded Form”. Wpisz zrozumiałą nazwę wewnętrzną i przejdź do kreatora.

Możesz też edytować istniejący formularz — wystarczy kliknąć jego nazwę na liście 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 „Nowości produktowe”.

Wybierz projekt początkowy

W przypadku formularzy osadzonych możesz wybrać pusty formularz, formularz standardowy lub jeden z czterech gotowych szablonów:

• Calm note
• Coupon strip
• Dark editorial
• Minimal blue

Wybierz projekt, który najlepiej pasuje do dostępnego miejsca i charakteru witryny, w której pojawi się formularz. Po wybraniu możesz całkowicie zmienić każdy projekt początkowy.

Zaprojektuj formularz osadzony

Użyj opcji „Layout” i „Content”, aby rozmieścić elementy formularza. Formularz osadzony może zawierać formularz zapisu oraz dodatkowy tekst, obrazy, listy, przyciski, linki do mediów społecznościowych, licznik subskrybentów, bloki odstępu lub separatory.

W wąskim pasku bocznym lub stopce najczytelniejszy jest zwykle układ jednokolumnowy. W szerszej sekcji strony układ dwukolumnowy pozwala umieścić krótkie wyjaśnienie lub obraz obok pól.

Zaznacz blok formularza zapisu, aby wybrać pola subskrybenta, pola wymagane, etykiety, ukryte tagi, wskaźnik postępu i opcjonalny licznik subskrybentów. Następnie możesz osobno dostosować wygląd kontenera formularza, pól i przycisku wysyłania.

Otwórz „Page settings”, aby zmienić tło i ogólne domyślne ustawienia wyglądu obszaru roboczego formularza osadzonego. Weź pod uwagę wygląd otaczającej go witryny. Przezroczyste lub proste tło często lepiej się w nią wtapia, a kontrastowe pomaga wyróżnić ofertę zapisu.

Pełne instrukcje dotyczące układów, treści, warstw, pól, tagów, typografii i wyglądu znajdziesz w przewodniku po obsłudze kreatora formularzy zapisu.

Przypisz proces zapisu

Skorzystaj z ustawień procesu zapisu w nagłówku kreatora, aby sprawdzić, co dzieje się po wysłaniu formularza, która wiadomość e-mail z prośbą o potwierdzenie zapisu (double opt-in) jest wysyłana i co widzi odwiedzający po potwierdzeniu.

Możesz wybrać istniejący proces, edytować przypisany proces lub utworzyć nowy. Jeśli wybrany proces jest używany także w innych formularzach, pamiętaj, że jego edycja może wpłynąć również na te formularze.

Sprawdź podgląd i zapisz formularz

Kliknij „Preview”, aby sprawdzić cały formularz przed umieszczeniem go w witrynie. Sprawdź kolejność pól, etykiety, miejsce na komunikaty o błędach, tekst przycisku i ilość dodatkowej treści.

Kliknij „Save changes”, aby zapisać bieżącą wersję. Gdy zechcesz osadzić formularz, wróć do listy formularzy zapisu.

Aktywuj formularz

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ń pod ikoną trzech kropek na liście formularzy zapisu i wybierz „Activate”. Przy aktywnym formularzu dostępna jest opcja „Show Code Snippet”.

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

Skopiuj kod JavaScript

Kliknij „Show Code Snippet” 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 cały kod, nie zmieniając adresu skryptu ani identyfikatora formularza.

Wariant JavaScript ładuje aktualną zapisaną wersję formularza za pośrednictwem mechanizmu obsługi formularzy Maildroppa. Gdy później edytujesz i zapiszesz ten sam formularz w Maildroppa, istniejący fragment kodu nadal będzie odwoływać się do jego identyfikatora. Nie musisz tworzyć nowego formularza tylko po to, by zmienić tekst lub wygląd.

Dodaj formularz do witryny

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

Dokładne kroki zależą od systemu, na którym działa witryna. W kreatorze stron lub systemie zarządzania treścią użyj bloku obsługującego własny kod HTML lub skrypty. W witrynie tworzonej indywidualnie dodaj skrypt do odpowiedniego szablonu lub kodu 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ł cały skrypt Maildroppa. Może być konieczne użycie przeznaczonej na własny kod sekcji systemu lub zwrócenie się o pomoc do osoby zarządzającej witryną.

Nie wklejaj tego samego fragmentu kodu formularza osadzonego kilka razy na jednej stronie, chyba że celowo chcesz umieścić ten sam formularz w kilku miejscach i sprawdzisz działanie takiego układu.

Skorzystaj z karty HTML

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

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

W przypadku standardowego formularza zarządzanego przez Maildroppa fragment JavaScript wymaga mniej kodu do integracji i ładuje aktualną publiczną konfigurację formularza na podstawie jego identyfikatora.

Przetestuj formularz osadzony

Opublikuj stronę zawierającą kod lub otwórz jej podgląd. Następnie przetestuj formularz z perspektywy odwiedzającego:

1. Sprawdź, czy formularz pojawia się we właściwym miejscu.
2. Wyświetl stronę na szerokim i wąskim ekranie.
3. Wypełnij wszystkie wymagane pola.
4. Wyślij formularz i sprawdź reakcję na wysłanie.
5. Otwórz wiadomość e-mail z prośbą o potwierdzenie zapisu (double opt-in).
6. Potwierdź adres i sprawdź reakcję na potwierdzenie.
7. Sprawdź, czy subskrybent i wszystkie ukryte tagi pojawiają się prawidłowo w Maildroppa.

Jeśli formularz jest szerszy niż jego kontener w witrynie, dostosuj w kreatorze szerokość formularza, układ kolumn, odstępy wewnętrzne lub ustawienia układania elementów jeden pod drugim na urządzeniach mobilnych. Unikaj naprawiania problemów z układem przez zmiany w wygenerowanym kodzie Maildroppa.

Zaktualizuj formularz osadzony

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

Jeśli formularz ma zostać tymczasowo usunięty, dezaktywuj go na liście formularzy zapisu. Jeśli nie jest już potrzebny, usuń też fragment kodu z witryny, aby strona nie zawierała nieużywanego kodu.