Co budujemy

W pelni funkcjonalny blok formularza kontaktowego, ktory mozesz umiescic na dowolnej stronie Cmssy. Zawiera:

• Pola imie, email i wiadomosc z walidacja
• Konfigurowalny email odbiorcy i temat przez schemat bloku
• Stany sukcesu/bledu z animacjami
• Responsywny design z Tailwind CSS
• Integracja z systemem formularzy Cmssy

Wymagania

• Node.js 18+ zainstalowany
• @cmssy/cli zainstalowany globalnie: npm install -g @cmssy/cli
• Workspace Cmssy z tokenem API

Krok 1: Inicjalizacja bloku

Stworz katalog i pliki bloku:

mkdir -p blocks/contact-form/src
cd blocks/contact-form

Stworz package.json:

{
  "name": "@my-project/blocks.contact-form",
  "version": "1.0.0",
  "description": "Blok formularza kontaktowego z walidacja"
}

Krok 2: Zdefiniuj schemat

Stworz config.ts - definiuje pola edytowalne przez adminow w edytorze stron:

import { defineBlock } from "@cmssy/cli/config";

export default defineBlock({
  name: "Contact Form",
  description: "Formularz kontaktowy z polami imie, email, wiadomosc",
  category: "marketing",
  schema: {
    heading: {
      type: "singleLine",
      label: "Naglowek",
      defaultValue: "Skontaktuj sie",
    },
    description: {
      type: "multiLine",
      label: "Opis",
      defaultValue: "Masz pytanie? Wyslij nam wiadomosc.",
    },
    submitButtonText: {
      type: "singleLine",
      label: "Tekst przycisku",
      defaultValue: "Wyslij wiadomosc",
    },
    successMessage: {
      type: "singleLine",
      label: "Wiadomosc sukcesu",
      defaultValue: "Dziekujemy! Odezwiemy sie wkrotce.",
    },
    showPhone: {
      type: "boolean",
      label: "Pokaz pole telefonu",
      defaultValue: false,
    },
  },
});

Krok 3: Zbuduj komponent

Stworz src/ContactForm.tsx - pelny kod komponentu React z walidacja formularza, stanami ladowania i responsywnym designem. Uzyj context.isEditor do blokowania wysylki w trybie edytora.

Krok 4: Dodaj punkt wejscia i style

Stworz src/index.tsx eksportujacy komponent i importujacy CSS. Stworz src/index.css importujacy Tailwind z ../../../styles/main.css.

Krok 5: Zbuduj i opublikuj

cmssy build
cmssy publish

Krok 6: Uzyj na stronie

W edytorze stron Cmssy kliknij + aby dodac blok, znajdz Contact Form i przeciagnij na strone. Skonfiguruj naglowek, opis i tekst przycisku w panelu bocznym.

Kluczowe wzorce

Bezpieczenstwo edytora

Zawsze sprawdzaj context.isEditor przed wykonywaniem zapytan API.

Schemat = UI admina

Schemat w config.ts automatycznie generuje interfejs edycji.

Nastepne kroki

• Dodaj pola warunkowe do schematu
• Polacz z blokami kolekcji dla dynamicznej tresci
• Przeczytaj Przewodnik tworzenia blokow