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
Formuláře v ai4shops.com jsou mocné nástroje pro sběr dat:
Každé odeslání formuláře automaticky zachycuje:
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
Klikněte na tlačítko "Vytvořit formulář" nebo "Nový formulář".
Vyplňte základní informace:
| Pole | Popis | Příklad |
|---|---|---|
| Název | Interní referenční název | "Přihlášení k newsletteru" |
| Popis | Volitelné poznámky | "Hlavní newsletter formulář webu" |
Screenshot: Dialog vytvoření formuláře
Soubor: /_static/guides/form-builder/create-form-cs.png
Klikněte na "Vytvořit" pro vygenerování nového formuláře. Budete přesměrováni do editoru 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
| Typ | Ikona | Nejlepší pro |
|---|---|---|
| Text | Aa | Jména, předměty, obecný text |
| @ | E-mailové adresy (s validací) | |
| Číslo | 123 | Množství, věk, částky |
| Datum | Kalendář | Data narození, rezervace |
| Výběr | Dropdown | Předdefinované možnosti |
| Checkbox | Zaškrtávátko | Souhlas, více výběrů |
| Radio | Kroužek | Jeden výběr z možností |
| Textarea | Řádky | Dlouhé zprávy, popisy |
| Telefon | Telefon | Telefonní čísla |
| URL | Odkaz | Webové adresy |
V editoru formuláře klikněte na "Přidat pole" nebo tlačítko +.
Vyberte typ pole z nabídky.
Nakonfigurujte pole:
| Vlastnost | Popis |
|---|---|
| Popisek | Text zobrazený uživatelům |
| Název | Interní identifikátor (bez mezer) |
| Placeholder | Příklad textu uvnitř pole |
| Povinné | Musí být vyplněno pro odeslání |
| Validace | Pravidla (min/max délka, vzor) |
| Nápověda | Dodatečné pokyny |
Screenshot: Panel vlastností pole
Soubor: /_static/guides/form-builder/field-properties-cs.png
Přetáhněte pole pro změnu pořadí. Uživatelé vidí pole shora dolů.
| Validace | Dostupné pro | Popis |
|---|---|---|
| Povinné | Všechna pole | Pole nemůže být prázdné |
| Min délka | Text, Textarea | Minimální počet znaků |
| Max délka | Text, Textarea | Maximální počet znaků |
| Min hodnota | Číslo | Minimální číslo |
| Max hodnota | Číslo | Maximální číslo |
| Vzor | Text, E-mail | Regex pattern |
Vytvořte efektivní formulář pro přihlášení k newsletteru.
Screenshot: Nastavení newsletter formuláře
Soubor: /_static/guides/form-builder/newsletter-form-cs.png
Pojmenujte ho "Přihlášení k newsletteru" nebo podobně.
Konfigurace pole:
emailKonfigurace pole:
firstNameKonfigurace pole:
consentGDPR 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.
Nastavte zprávu zobrazenou po úspěšném odeslání:
Děkujeme za přihlášení! Zkontrolujte svou schránku pro potvrzovací e-mail.
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
Vytvořte nový formulář nebo přidejte k existujícímu checkout formuláři.
Konfigurace pole:
promoCodeVšechna odeslání automaticky zahrnují:
| Datový bod | Co sleduje |
|---|---|
| IP adresa | Poloha uživatele, detekce vícenásobného použití |
| Otisk zařízení | Jedinečný identifikátor zařízení |
| User Agent | Info o prohlížeči/zařízení |
| Časové razítko | Kdy byl kód použit |
ai4shops.com vám pomáhá identifikovat podezřelou aktivitu:
Tip: Exportujte svá odeslání a analyzujte vzory pro identifikaci zneužití. Hledejte shluky odeslání ze stejné IP nebo otisku zařízení.
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
Uživatel vyplní formulář v modálním okně → akce submitForm → Data uložena do Formuláře → Zobrazení v dashboardu
Sestavte formulář s poli, která potřebujete (viz výše).
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 okna | Název pole formuláře |
|---|---|
email | email |
firstName | firstName |
promoCode | promoCode |
Na tlačítko odeslání modálního okna:
submitFormcloseModal potéNyní se odeslání z vašeho modálního okna ukládají do formuláře a jsou viditelná ve vašem dashboardu!
Zobrazujte a analyzujte všechna nasbíraná data.
Screenshot: Tabulka odeslaných dat
Soubor: /_static/guides/form-builder/submissions-table-cs.png
Přejděte na Formuláře → [Název vašeho formuláře].
Zobrazte záložku odeslání pro zobrazení všech nasbíraných dat.
Tabulka zobrazuje:
Klikněte na libovolný řádek pro zobrazení kompletních detailů odeslání včetně:
Exportujte data pro analýzu:
| Formát | Nejlepší pro |
|---|---|
| CSV | Excel, Google Sheets, datová analýza |
| JSON | Vývojáři, API integrace |
Pro export:
| Pole | Popis | Použití |
|---|---|---|
| IP adresa | IP návštěvníka | Geografické přehledy, detekce podvodů |
| User Agent | Info o prohlížeči/OS | Analytika zařízení |
| Otisk zařízení | Jedinečné ID zařízení | Prevence podvodů |
| Referrer | URL předchozí stránky | Analýza zdroje návštěvnosti |
| Časové razítko | Čas odeslání | Vzory časování |
Programově odesílejte data do vašich formulářů.
POST https://ai4shops.com/api/forms/{form-id}/submit
Zahrňte API klíč projektu v hlavičce:
X-API-Key: vas-api-klic-projektu
{
"fields": {
"email": "uzivatel@priklad.cz",
"firstName": "Jan",
"promoCode": "LETO20"
}
}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",
});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;
};API odeslání jsou omezena:
Překročení limitů vrací HTTP 429 Too Many Requests. Implementujte exponenciální backoff ve vašem kódu.
Povolte vašemu webu odesílat formuláře.
Screenshot: Nastavení povolených domén
Soubor: /_static/guides/form-builder/allowed-origins-cs.png
Přejděte na Nastavení → Zabezpečení nebo "Povolené 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
Klikněte na "Uložit" pro aplikování nových domén.
* v produkciBez 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.
Posílejte odeslání na váš vlastní server v reálném čase:
Buďte informováni o nových odesláních:
Zobrazujte/skrývejte pole na základě odpovědí:
| Kód chyby | Význam | Řešení |
|---|---|---|
| 401 | Neplatný API klíč | Zkontrolujte váš API klíč |
| 403 | Doména není povolena | Přidejte doménu do povolených domén |
| 429 | Rate limit | Počkejte a zkuste znovu |
| 400 | Neplatná data | Zkontrolujte názvy a typy polí |