Lupa nad ramką przeglądarki z częściowo uciętą kartą głosowania.
Ilustracja redakcyjna wygenerowana z pomocą AI. Nie jest zrzutem interfejsu ani wynikiem rzeczywistego badania.

Zacznij od miejsca, w którym pytanie ma sens

Załóżmy, że kończysz wpis o pomysłach na weekend. Pod opisem trzech kierunków umieszczasz pytanie: Dokąd na wspólny wyjazd? Odpowiedzi brzmią: W góry, Nad morze, Do miasta. Czytelnik zna już kontekst, więc nie musi zgadywać, o jaki wyjazd chodzi. W opisie ankiety możesz dopisać termin i budżet, jeśli mają wpływ na wybór.

Nie chowaj głosowania pod stopką i nie przerywaj nim zdania. Zostaw krótkie wprowadzenie, sam formularz i miejsce na wyniki. W wąskiej kolumnie bocznej długie odpowiedzi zajmą kilka wierszy. Jeśli ważne jest porównanie propozycji, pełna szerokość kolumny artykułu zwykle ułatwi czytanie.

Przykładowa ankieta: Dokąd na wspólny wyjazd? Odpowiedzi: W góry, Nad morze, Do miasta.
Przykładowy formularz z ankiety.org. Dane demonstracyjne, bez zbierania głosów.

Utwórz ankietę i pobierz właściwy kod

W kreatorze wpisz pytanie i odpowiedzi. Zdecyduj, czy czytelnik wybiera jedną opcję, czy kilka, oraz kiedy zobaczy wyniki. Dla naszego wyjazdu wystarczy jeden wybór. Po utworzeniu ankiety przejdź do sekcji Podaj dalej i wybierz Strona WWW.

Dopasuj motyw, czcionkę, narożniki i kolor akcentu. Podgląd w tym panelu pokazuje przykładową ankietę i nie zapisuje głosów. Dopiero kod z Twoim identyfikatorem osadza Twoje pytanie. Skopiuj go po ustawieniu wyglądu, bo konfiguracja jest częścią adresu widżetu.

Wklej iframe w edytorze HTML

Poniższy kod osadza demonstrację, więc możesz zobaczyć działanie bez tworzenia ankiety. Przy publikacji własnego pytania użyj kodu z panelu udostępniania. Nie wpisuj tutaj prywatnego linku do zarządzania. Uczestnicy dostają publiczny link albo widżet.

<iframe
  src="https://ankiety.org/embed/demo?theme=light&amp;font=sans&amp;corners=square"
  title="Przykładowa ankieta online"
  width="100%" height="620"
  style="border:0;max-width:640px"
  loading="lazy">
</iframe>
  1. Otwórz edycję strony i dodaj element obsługujący własny kod HTML.
  2. Wklej cały kod iframe. Zwykły akapit może wyświetlić kod jako tekst.
  3. Zapisz stronę i otwórz jej opublikowany adres. Sprawdź pytanie i odpowiedzi.
  4. Zwęź okno lub sprawdź stronę na telefonie. Upewnij się, że widzisz również dół widżetu.

Stała czy automatyczna wysokość?

Iframe w przykładzie ma wysokość 620 pikseli. To punkt wyjścia, a nie obietnica, że każda ankieta się zmieści. Długie pytanie, wiele odpowiedzi i legenda wykresu mogą potrzebować więcej miejsca. Zwiększ height i sprawdź zarówno formularz, jak i wyniki. Szerokość 100% dopasowuje ramkę do kolumny, a max-width ogranicza ją na dużym ekranie.

Jeśli CMS dopuszcza JavaScript, w panelu udostępniania rozwiń Automatyczna wysokość widżetu. Skopiuj cały zestaw: element div i skrypt embed.js. Użyj go zamiast iframe, aby nie wyświetlić dwóch ankiet. Skrypt tworzy osadzenie i dopasowuje jego wysokość do treści. W CMS-ie, który usuwa skrypty, pozostań przy iframe.

Ciemny motyw może pasować do ciemnej strony, a przezroczysty do jasnego tła wydawcy. Ten ostatni ma ciemny tekst, więc na ciemnym zdjęciu będzie nieczytelny. Kolor akcentu i krój pisma wybierz w konfiguratorze. Style Twojej strony nie zmieniają automatycznie wnętrza ramki.

Sprawdź osadzenie w trzech szerokościach

Przetestuj stronę przy 320, 768 i 1280 pikselach szerokości. W każdym widoku otwórz formularz oraz wyniki. To lista kontroli do wykonania na Twojej stronie, nie gwarancja zgodności z każdym CMS.

Poniższy kod uruchamia demonstrację o automatycznej wysokości. Przy własnej ankiecie użyj zestawu wygenerowanego w panelu. Przeglądarka i polityka strony muszą dopuścić skrypt z ankiety.org.

<div data-ankiety="demo"></div>
<script src="https://ankiety.org/embed.js" async></script>
  1. Sprawdź, czy cała treść pytania mieści się w kolumnie.
  2. Zobacz przycisk głosowania bez przewijania wewnętrznej ramki.
  3. Przejdź do wyników i sprawdź dół legendy.
  4. Po zmianie ustawień wygeneruj kod ponownie i sprawdź stronę po zapisie.

Co sprawdzić, gdy ankieta się nie pojawia

Najpierw otwórz adres z atrybutu src w osobnej karcie. Jeśli tam widzisz ankietę, sprawdź zapisany HTML strony. Zniknięcie całego iframe zwykle wskazuje na filtr CMS-a lub brak uprawnień. Kod widoczny jako tekst oznacza najczęściej, że trafił do akapitu zamiast elementu HTML.

Pusta ramka przy zachowanym kodzie wymaga sprawdzenia konsoli przeglądarki. Polityka bezpieczeństwa strony może blokować osadzenia z innej domeny. Przekaż administratorowi konkretny komunikat błędu, zamiast wyłączać zabezpieczenia całego serwisu. Jeśli osadzenia są niedozwolone, dodaj zwykły link do głosowania. Czytelnik nadal będzie mógł odpowiedzieć.

Po publikacji przetestuj oddanie głosu na osobnej ankiecie testowej. Głos wysłany do właściwej ankiety jest prawdziwą odpowiedzią, także gdy oddasz go podczas sprawdzania strony. Na końcu dopisz przy osadzeniu, do kiedy zbierasz odpowiedzi i do czego je wykorzystasz.