Docs
Tvorba formulářů pro newsletter a sledování promo kódů

Tvorba formulářů pro newsletter a sledování promo kódů

Vytvořte výkonné formuláře pro sběr e-mailů, sledování promo kódů a získávání kontaktů pomocí nástroje Tvorba formulářů od ai4shops.com

Formuláře jsou páteří sběru dat na vašem webu. S nástrojem Tvorba formulářů od ai4shops.com můžete vytvářet formuláře pro newslettery, kontaktní požadavky, sledování promo kódů a další. Propojte je s modálními okny pro bezproblémový uživatelský zážitek!

Předpoklady: Ujistěte se, že máte vytvořený projekt před zahájením tohoto průvodce.

Video placeholder: Kompletní nastavení newsletter formuláře

Délka: 4-5 minut | Vytvoření newsletter formuláře a propojení s modálním oknem


Co formuláře umí

Formuláře v ai4shops.com jsou mocné nástroje pro sběr dat:

  • Sběr e-mailů - Budujte svůj newsletter seznam
  • Kontaktní požadavky - Přijímejte dotazy zákazníků
  • Sledování promo kódů - Sledujte použití slevových kódů a podvody
  • Získávání kontaktů - Kvalifikujte potenciální zákazníky
  • Sběr zpětné vazby - Získávejte názory zákazníků
  • Odpovědi z průzkumů - Provádějte průzkum trhu

Možnosti sledování

Každé odeslání formuláře automaticky zachycuje:

  • IP adresa - Geografické informace
  • User Agent - Informace o prohlížeči a zařízení
  • Otisk zařízení - Prevence podvodů
  • Časové razítko - Kdy bylo odesláno
  • Referrer - Odkud přišli

Vytvoření nového formuláře

Krok 1: Přejděte na Formuláře

Z dashboardu projektu klikněte na "Formuláře" v postranním panelu.

Screenshot: Stránka seznamu formulářů

Soubor: /_static/guides/form-builder/forms-list-cs.png

Krok 2: Klikněte na "Vytvořit formulář"

Klikněte na tlačítko "Vytvořit formulář" nebo "Nový formulář".

Krok 3: Zadejte údaje formuláře

Vyplňte základní informace:

PolePopisPříklad
NázevInterní referenční název"Přihlášení k newsletteru"
PopisVolitelné poznámky"Hlavní newsletter formulář webu"

Screenshot: Dialog vytvoření formuláře

Soubor: /_static/guides/form-builder/create-form-cs.png

Krok 4: Vytvořte formulář

Klikněte na "Vytvořit" pro vygenerování nového formuláře. Budete přesměrováni do editoru formuláře.


Přidávání polí formuláře

Budujte formulář přidáváním a konfigurací polí.

Screenshot: Nástroj pro tvorbu formulářů s poli

Soubor: /_static/guides/form-builder/form-builder-cs.png

Dostupné typy polí

TypIkonaNejlepší pro
TextAaJména, předměty, obecný text
E-mail@E-mailové adresy (s validací)
Číslo123Množství, věk, částky
DatumKalendářData narození, rezervace
VýběrDropdownPředdefinované možnosti
CheckboxZaškrtávátkoSouhlas, více výběrů
RadioKroužekJeden výběr z možností
TextareaŘádkyDlouhé zprávy, popisy
TelefonTelefonTelefonní čísla
URLOdkazWebové adresy

Přidání polí

Krok 1: Klikněte na "Přidat pole"

V editoru formuláře klikněte na "Přidat pole" nebo tlačítko +.

Krok 2: Vyberte typ pole

Vyberte typ pole z nabídky.

Krok 3: Nastavte vlastnosti pole

Nakonfigurujte pole:

VlastnostPopis
PopisekText zobrazený uživatelům
NázevInterní identifikátor (bez mezer)
PlaceholderPříklad textu uvnitř pole
PovinnéMusí být vyplněno pro odeslání
ValidacePravidla (min/max délka, vzor)
NápovědaDodatečné pokyny

Screenshot: Panel vlastností pole

Soubor: /_static/guides/form-builder/field-properties-cs.png

Krok 4: Změňte pořadí polí

Přetáhněte pole pro změnu pořadí. Uživatelé vidí pole shora dolů.

Možnosti validace polí

ValidaceDostupné proPopis
PovinnéVšechna polePole nemůže být prázdné
Min délkaText, TextareaMinimální počet znaků
Max délkaText, TextareaMaximální počet znaků
Min hodnotaČísloMinimální číslo
Max hodnotaČísloMaximální číslo
VzorText, E-mailRegex pattern

Sběr e-mailů pro newsletter

Vytvořte efektivní formulář pro přihlášení k newsletteru.

Screenshot: Nastavení newsletter formuláře

Soubor: /_static/guides/form-builder/newsletter-form-cs.png

Doporučené nastavení

Krok 1: Vytvořte formulář

Pojmenujte ho "Přihlášení k newsletteru" nebo podobně.

Krok 2: Přidejte pole E-mail

Konfigurace pole:

  • Popisek: "E-mailová adresa"
  • Název: email
  • Typ: E-mail
  • Povinné: Ano
  • Placeholder: "vas@email.cz"

Krok 3: Přidejte pole Jméno (volitelné)

Konfigurace pole:

  • Popisek: "Křestní jméno"
  • Název: firstName
  • Typ: Text
  • Povinné: Ne
  • Placeholder: "Jan"

Krok 4: Přidejte checkbox souhlasu

Konfigurace pole:

  • Popisek: "Souhlasím se zasíláním newsletteru"
  • Název: consent
  • Typ: Checkbox
  • Povinné: Ano

GDPR soulad: Vždy zahrňte checkbox souhlasu pro přihlášení k newsletteru v EU. Ukládejte důkaz o souhlasu s každým odesláním.

Krok 5: Nastavte zprávu o úspěchu

Nastavte zprávu zobrazenou po úspěšném odeslání:

Děkujeme za přihlášení! Zkontrolujte svou schránku pro potvrzovací e-mail.

Osvědčené postupy

  • Udržujte minimum - Formuláře pouze s e-mailem konvertují lépe
  • Přidejte hodnotovou nabídku - "Získejte 10% slevu na první objednávku"
  • Nastavte očekávání - "Týdenní aktualizace, žádný spam"
  • Potvrďte odběr - Pošlete uvítací e-mail

Sledování promo kódů

Sledujte použití slevových kódů a předcházejte podvodům.

Screenshot: Konfigurace pole promo kódu

Soubor: /_static/guides/form-builder/promo-code-cs.png

Nastavení sledování promo kódů

Krok 1: Vytvořte nebo upravte formulář

Vytvořte nový formulář nebo přidejte k existujícímu checkout formuláři.

Krok 2: Přidejte pole Promo kód

Konfigurace pole:

  • Popisek: "Promo kód"
  • Název: promoCode
  • Typ: Text
  • Povinné: Ne
  • Placeholder: "Zadejte kód"

Krok 3: Sledujte metadata

Všechna odeslání automaticky zahrnují:

Datový bodCo sleduje
IP adresaPoloha uživatele, detekce vícenásobného použití
Otisk zařízeníJedinečný identifikátor zařízení
User AgentInfo o prohlížeči/zařízení
Časové razítkoKdy byl kód použit

Prevence podvodů

ai4shops.com vám pomáhá identifikovat podezřelou aktivitu:

  • Vícenásobná odeslání ze stejné IP - Možné sdílení kódu
  • Stejné zařízení, různé e-maily - Gaming účtů
  • Neobvyklé vzory odesílání - Aktivita botů
  • Geografické anomálie - Použití VPN/proxy

Tip: Exportujte svá odeslání a analyzujte vzory pro identifikaci zneužití. Hledejte shluky odeslání ze stejné IP nebo otisku zařízení.


Propojení formulářů s modálními okny

Formuláře se stávají mocnými, když jsou propojeny s modálními okny!

Screenshot: Diagram propojení formuláře a modálního okna

Soubor: /_static/guides/form-builder/form-modal-connection-cs.png

Tok propojení

Uživatel vyplní formulář v modálním okně → akce submitForm → Data uložena do Formuláře → Zobrazení v dashboardu

Jak propojit

Krok 1: Vytvořte formulář

Sestavte formulář s poli, která potřebujete (viz výše).

Krok 2: Vytvořte modální okno

Navrhněte modální okno se vstupními prvky odpovídajícími polím formuláře.

Důležité: Vlastnosti name vstupů modálního okna musí odpovídat vlastnostem name polí formuláře:

Název vstupu modálního oknaNázev pole formuláře
emailemail
firstNamefirstName
promoCodepromoCode

Krok 3: Propojte v nastavení modálního okna

  1. Otevřete modální okno
  2. Jděte na Nastavení → Datové propojení
  3. Vyberte formulář z dropdown menu
  4. Klikněte na "Propojit"

Krok 4: Přidejte akci tlačítka Odeslat

Na tlačítko odeslání modálního okna:

  1. Přidejte akci submitForm
  2. Volitelně přidejte akci closeModal poté

Nyní se odeslání z vašeho modálního okna ukládají do formuláře a jsou viditelná ve vašem dashboardu!


Odeslání formulářů a analytika

Zobrazujte a analyzujte všechna nasbíraná data.

Screenshot: Tabulka odeslaných dat

Soubor: /_static/guides/form-builder/submissions-table-cs.png

Zobrazení odeslaných dat

Krok 1: Otevřete formulář

Přejděte na Formuláře → [Název vašeho formuláře].

Krok 2: Klikněte na "Odeslání"

Zobrazte záložku odeslání pro zobrazení všech nasbíraných dat.

Krok 3: Procházejte data

Tabulka zobrazuje:

  • Všechny odeslané hodnoty polí
  • Časové razítko odeslání
  • IP adresu
  • Info o zařízení/prohlížeči

Krok 4: Zobrazení detailů

Klikněte na libovolný řádek pro zobrazení kompletních detailů odeslání včetně:

  • Kompletních dat formuláře
  • Sledovacích metadat
  • Otisku zařízení
  • User agent řetězce

Možnosti exportu

Exportujte data pro analýzu:

FormátNejlepší pro
CSVExcel, Google Sheets, datová analýza
JSONVývojáři, API integrace

Pro export:

  1. Jděte na záložku Odeslání
  2. Klikněte na "Exportovat"
  3. Zvolte formát (CSV/JSON)
  4. Stáhněte soubor

Detaily sledovacích dat

PolePopisPoužití
IP adresaIP návštěvníkaGeografické přehledy, detekce podvodů
User AgentInfo o prohlížeči/OSAnalytika zařízení
Otisk zařízeníJedinečné ID zařízeníPrevence podvodů
ReferrerURL předchozí stránkyAnalýza zdroje návštěvnosti
Časové razítkoČas odesláníVzory časování

API integrace

Programově odesílejte data do vašich formulářů.

Endpoint pro odeslání formuláře

POST https://ai4shops.com/api/forms/{form-id}/submit

Autentizace

Zahrňte API klíč projektu v hlavičce:

X-API-Key: vas-api-klic-projektu

Tělo požadavku

{
  "fields": {
    "email": "uzivatel@priklad.cz",
    "firstName": "Jan",
    "promoCode": "LETO20"
  }
}

Příklad: Fetch API

const submitForm = async (formData) => {
  const response = await fetch(
    "https://ai4shops.com/api/forms/vase-form-id/submit",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-API-Key": "vas-api-klic-projektu",
      },
      body: JSON.stringify({
        fields: formData,
      }),
    },
  );
 
  if (!response.ok) {
    throw new Error("Odeslání selhalo");
  }
 
  return response.json();
};
 
// Použití
submitForm({
  email: "zakaznik@priklad.cz",
  firstName: "Jana",
});

Příklad: Axios

import axios from "axios";
 
const api = axios.create({
  baseURL: "https://ai4shops.com/api",
  headers: {
    "X-API-Key": "vas-api-klic-projektu",
  },
});
 
const submitForm = async (formId, data) => {
  const response = await api.post(`/forms/${formId}/submit`, {
    fields: data,
  });
  return response.data;
};

Rate Limiting

API odeslání jsou omezena:

  • 100 požadavků za hodinu na IP adresu
  • 1000 požadavků za hodinu na API klíč

Překročení limitů vrací HTTP 429 Too Many Requests. Implementujte exponenciální backoff ve vašem kódu.


Konfigurace CORS

Povolte vašemu webu odesílat formuláře.

Screenshot: Nastavení povolených domén

Soubor: /_static/guides/form-builder/allowed-origins-cs.png

Nastavení povolených domén

Krok 1: Jděte na Nastavení projektu

Přejděte na Nastavení → Zabezpečení nebo "Povolené domény".

Krok 2: Přidejte vaše domény

Zadejte každou doménu, která bude odesílat do vašich formulářů:

https://vasweb.cz
https://www.vasweb.cz
https://staging.vasweb.cz

Krok 3: Uložte změny

Klikněte na "Uložit" pro aplikování nových domén.

Bezpečnostní úvahy

  • Přidávejte pouze důvěryhodné domény - Kdokoliv na povolených doménách může odesílat
  • Zahrňte všechny varianty - www a bez www, http a https
  • Odstraňte nepoužívané domény - Vyčistěte staré staging/dev domény
  • Nikdy nepoužívejte zástupné znaky - Nepovolujte * v produkci

Bez správných domén budou odeslání formuláře z vašeho webu blokována CORS politikou. Zkontrolujte konzoli prohlížeče pro CORS chyby.


Pokročilé funkce

Webhooky (Připravujeme)

Posílejte odeslání na váš vlastní server v reálném čase:

  • Okamžitá upozornění
  • CRM integrace
  • Vlastní zpracování

E-mailová upozornění

Buďte informováni o nových odesláních:

  1. Jděte na Nastavení formuláře
  2. Aktivujte "E-mailová upozornění"
  3. Zadejte e-mail(y) příjemce
  4. Zvolte frekvenci upozornění

Podmíněná logika (Pro)

Zobrazujte/skrývejte pole na základě odpovědí:

  • "Pokud Země = CZ, zobraz pole Kraj"
  • "Pokud Newsletter = Ano, zobraz možnosti Frekvence"

Řešení problémů

Odeslání se neukládají

  1. Zkontrolujte, že formulář je Aktivní
  2. Ověřte, že Povolené domény zahrnují vaši doménu
  3. Zkontrolujte konzoli prohlížeče pro chyby
  4. Ujistěte se, že povinná pole jsou vyplněna

API chyby

Kód chybyVýznamŘešení
401Neplatný API klíčZkontrolujte váš API klíč
403Doména není povolenaPřidejte doménu do povolených domén
429Rate limitPočkejte a zkuste znovu
400Neplatná dataZkontrolujte názvy a typy polí

Problémy s propojením modálního okna

  1. Ověřte, že názvy polí přesně odpovídají
  2. Zkontrolujte, že modální okno je propojeno se správným formulářem
  3. Ujistěte se, že akce submitForm je na tlačítku

Co dál?

Designer modálních oken

Vytvořte krásná vyskakovací okna propojená s vašimi formuláři

View

AI Chatbot

Přidejte inteligentní chat vedle vašich formulářů

View