Stylowanie formularzy własnym CSS

Opublikowany formularz ma działać wewnątrz Twojej własnej strony, dlatego Doxtly renderuje go w celowo neutralnym układzie: ciemny tekst na białym tle, zwykłe pola, bez karty, bez ramki i bez koloru marki. Na własnej stronie formularz używa czcionki systemowej, a osadzony na Twojej stronie przejmuje jej czcionkę. Wszystko ponad tę bazę zależy od Ciebie, a decydujesz o tym w polu Własny CSS w edytorze formularza.

Twój CSS obejmuje wszystko, co formularz pokazuje po załadowaniu, nie tylko pola: podziękowanie po wysłaniu, komunikaty błędów oraz menu, kalendarze i okno podpisu otwierane nad formularzem. Zaślepka ładowania, prośba o hasło i komunikat o formularzu, którego nie da się otworzyć, pojawiają się, zanim formularz — a z nim jego CSS — zostanie pobrany, więc zawsze zachowują neutralny wygląd.

Żeby było to wykonalne w praktyce, każda renderowana część ma przewidywalną nazwę klasy. Nie musisz przeglądać kodu strony i zgadywać wygenerowanych selektorów.

Jak działa własny CSS

Wprowadzony CSS jest automatycznie ograniczany do formularza, zanim zostanie wstrzyknięty, więc nigdy nie wypłynie na otaczającą stronę. Reguła zapisana jako:

.doxtly-field--name-email input {
  background: #fffbe6;
}

zostanie wysłana jako:

.doxtly-form-scope .doxtly-field--name-email input {
  background: #fffbe6;
}

Reguły @media, @supports, @keyframes, @font-face i @import są zachowywane, podobnie jak komentarze.

Reguły dla html, body i :root nie są ograniczane. Stylują stronę, na której opublikowano formularz — jego własną stronę i snippet iframe — więc body { background: … } ustawia kolor wokół formularza. W skrypcie osadzającym nie działają, bo strona należy wtedy do Ciebie.

Lista klas

Klasa	Dotyczy
.doxtly-form-scope	Zewnętrzny kontener wszystkiego, co pokazuje formularz. Do niego ograniczany jest Twój CSS.
.doxtly-page	Kolumna, w której stoi formularz: wyśrodkowana, o ograniczonej szerokości na własnej stronie formularza, a po osadzeniu na pełną szerokość Twojego kontenera — wtedy ma też klasę .doxtly-page--embedded.
.doxtly-form	Sam formularz.
.doxtly-element	Każdy renderowany element, dowolnego rodzaju.
.doxtly-element--<typ>	Typ elementu: section, container, dynamic_fieldset, paragraph, header, divider, image, video, field.
.doxtly-field	Kontener każdego pola formularza.
.doxtly-field--<typ>	Typ pola: text, number, email, textarea, checkbox, select, radio, scale, date, time, password, file, signature, computed.
.doxtly-field--name-<ścieżka>	Ścieżka danych pola, dzięki czemu możesz ostylować jedno konkretne pole.
.doxtly-field-info	Tekst pomocniczy wyświetlany nad polem.
.doxtly-section-title / -description	Tytuł i opis sekcji.
.doxtly-fieldset-title	Etykieta powtarzalnej grupy pól.
.doxtly-fieldset-row	Jeden wpis powtarzalnej grupy.
.doxtly-fieldset-empty	Informacja widoczna, gdy powtarzalna grupa nie ma wpisów.
.doxtly-wizard-progress	Wskaźnik postępu formularza wielostronicowego. Dodatkowo --bar lub --steps.
.doxtly-actions	Wiersz z przyciskami formularza.
.doxtly-button	Każdy przycisk formularza.
.doxtly-button--submit	Przycisk wysyłki. Zachowuje też starą klasę .form-submit.
.doxtly-button--next / --prev	Przyciski nawigacji między stronami.
.doxtly-button--add-row / --remove-row	Przyciski dodające i usuwające wpisy powtarzalnej grupy.
.doxtly-alert--error	Komunikat o nieudanej wysyłce. Ma też klasę .doxtly-alert.
.doxtly-loading	Zaślepka widoczna podczas ładowania formularza.
.doxtly-popups	Miejsce, w którym otwierają się menu pól wyboru, kalendarze i okno podpisu, więc reguła taka jak .doxtly-popups .MuiMenuItem-root do nich sięga.

Komunikaty wyświetlane zamiast formularza

Zanim formularz się otworzy i po jego wysłaniu jego miejsce zajmuje komunikat. Każdy komunikat ma te same klasy, a modyfikator określa sytuację.

Klasa	Dotyczy
.doxtly-status	Każdego komunikatu.
.doxtly-status--<rodzaj>	Sytuacji: success, awaiting-signing, signing-failed, signing-fallback, not-found, load-error, missing-params, password.
.doxtly-status-icon	Ikony nad tytułem.
.doxtly-status-title	Tytułu.
.doxtly-status-message	Tekstu pod tytułem, w tym Twojego komunikatu po wysłaniu.
.doxtly-status-note	Numeru zgłoszenia pokazywanego, gdy dokumenty są przygotowywane do podpisu.
.doxtly-password	Pola hasła i przycisku formularza chronionego hasłem.

Klasy z nazwą pola

doxtly-field--name- powstaje ze ścieżki danych pola. Kropki zamieniane są na myślniki, a znaki spoza zakresu A-Z a-z 0-9 _ - są usuwane, więc pole zapisywane pod work.email stylujesz selektorem .doxtly-field--name-work-email.

Twoje własne klasy są na końcu

To, co wpiszesz we właściwości Klasa CSS elementu w edytorze, zostanie dodane po klasach generowanych, więc Twoja klasa wygrywa przy równej specyficzności:

<div class="doxtly-element doxtly-element--field doxtly-field doxtly-field--text
            doxtly-field--name-full_name moja-wlasna-klasa">

Przykłady

Zwęź kolumnę formularza, zmień krój pisma i kolor strony:

body {
  background: #f4f4f5;
}

.doxtly-page {
  max-width: 640px;
  font-family: Inter, system-ui, sans-serif;
}

Zamień sekcje w karty:

.doxtly-element--section {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 24px;
}

Ostyluj jedno konkretne pole:

.doxtly-field--name-message textarea {
  background: #fffbe6;
  min-height: 160px;
}

Wyróżnij etykiety pól wymaganych:

.doxtly-field label .MuiFormLabel-asterisk {
  color: #dc2626;
  font-weight: 700;
}

Zmień wygląd przycisku wysyłki i rozciągnij go na telefonach:

.doxtly-button--submit {
  background: #111827;
  border-radius: 0;
  padding: 12px 32px;
  text-transform: none;
}

@media (max-width: 600px) {
  .doxtly-actions {
    display: block;
  }

  .doxtly-button--submit {
    width: 100%;
  }
}

Ukryj tekst pomocniczy przy jednym polu:

.doxtly-field--name-internal_ref .doxtly-field-info {
  display: none;
}

Dopasuj podziękowanie po wysłaniu do swojej marki:

.doxtly-status--success .doxtly-status-icon {
  color: #7c3aed;
}

.doxtly-status--success .doxtly-status-title {
  font-size: 2rem;
}

Osadzanie

Te same klasy i ten sam własny CSS obowiązują, gdy formularz jest osadzony na Twojej stronie przez snippet iframe, skrypt osadzający lub wtyczkę WordPress, więc formularz ostylowany raz wygląda tak samo wszędzie tam, gdzie go opublikujesz.

Inaczej jest z formularzami umieszczonymi w dokumencie interaktywnym: wyświetlane są na stronie Doxtly, obok dokumentów, i mają tam wygląd Doxtly.