@formsnip/embed 1.1.0 → 1.1.2

package/README.md

@@ -60,16 +60,8 @@ function App() {
 | `onError` | `(error: string) => void` | No | - | Callback fired when an error occurs |
 | `className` | `string` | No | `''` | Additional CSS class names for the form container |
 | `prefill` | `Record<string, string>` | No | - | Prefill values keyed by each field's prefill parameter |
-| `pushDataLayerOnSuccess` | `boolean` | No | `false` | Push to `window.dataLayer` only after the server accepts the submission |
-| `dataLayerEventName` | `string` | No | `formsnip_submission_success` | GTM `event` name for the dataLayer push |
 
-### Google Tag Manager (React)
-
-Forms use `fetch`, so GTM's default **Form Submission** trigger usually won't fire. Enable
-`pushDataLayerOnSuccess` and add a GTM **Custom Event** trigger matching `dataLayerEventName`. The push includes
-`formsnipFormId` and `formsnipFormName` (no field values). It runs **only** on successful API responses — not when HTML5 validation blocks submit, required file upload is missing, or the API returns an error.
-
-You can also call `pushFormSnipSubmissionDataLayer()` yourself from `onSuccess` for full control.
+After a **successful** server submission, the component pushes `{ event: 'formsnip_submission_success', formsnipFormId, formsnipFormName? }` to `dataLayer` (for GTM Custom Event triggers). No field values are included.
 
 ## Features
 

package/dist/FormSnip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormSnip.d.ts","sourceRoot":"","sources":["../src/FormSnip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAQ,aAAa,EAAiC,MAAM,SAAS,CAAC;AA+B7E,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAme5C,CAAC"}
+{"version":3,"file":"FormSnip.d.ts","sourceRoot":"","sources":["../src/FormSnip.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAQ,aAAa,EAAiC,MAAM,SAAS,CAAC;AA0C7E,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4nB5C,CAAC"}

package/dist/index.d.ts

@@ -2,21 +2,25 @@ import React from 'react';
 
 interface FormField {
     id: string;
-    type: 'text' | 'email' | 'textarea' | 'number' | 'date' | 'checkbox' | 'radio' | 'file' | 'phone' | 'hidden' | 'select' | 'datetime';
+    type: 'text' | 'email' | 'textarea' | 'number' | 'date' | 'checkbox' | 'radio' | 'file' | 'phone' | 'hidden' | 'select' | 'datetime' | 'time' | 'website' | 'choice' | 'heading' | 'paragraph' | 'divider';
     label: string;
     placeholder?: string;
+    content?: string;
     required: boolean;
     position: number;
     isActive: boolean;
     width?: 'full' | 'half';
     options?: string[];
     value?: string;
-    /** Optional query parameter name used to prefill this field from the URL */
-    urlPrefillParam?: string;
+    hideLabel?: boolean;
 }
 interface FormValidation {
     errorMessages?: Record<string, string>;
     confirmationText?: string;
+    redirectUrl?: string;
+}
+interface FormSpamProtection {
+    acceptingSubmissions?: boolean;
 }
 interface Form {
     _id: string;
@@ -29,6 +33,7 @@ interface Form {
             backgroundColor?: string;
             color?: string;
             borderColor?: string;
+            placeholderColor?: string;
             borderRadius?: number;
             paddingX?: number;
             paddingY?: number;
@@ -47,6 +52,8 @@ interface Form {
         };
     };
     validation?: FormValidation;
+    spamProtection?: FormSpamProtection;
+    submitToken?: string;
 }
 interface FormSnipProps {
     formId: string;
@@ -54,16 +61,11 @@ interface FormSnipProps {
     onSuccess?: (data: any) => void;
     onError?: (error: string) => void;
     className?: string;
-    /** Optional prefill values keyed by URL prefill parameter (e.g. ?tjeneste=...) */
-    prefill?: Record<string, string>;
     /**
-     * When true, pushes to `window.dataLayer` only after the server accepts the submission
-     * (not on HTML5 validation failure or API errors). For GTM, use a Custom Event trigger
-     * matching `dataLayerEventName`.
+     * Initial values keyed like the URL query (defaults to each field’s `id`).
+     * Example: field id `email` → `prefill={{ email: 'a@b.com' }}` or `?email=a@b.com`.
      */
-    pushDataLayerOnSuccess?: boolean;
-    /** GTM `event` name for the dataLayer push (default: `formsnip_submission_success`). */
-    dataLayerEventName?: string;
+    prefill?: Record<string, string>;
 }
 interface SubmissionResponse {
     success: boolean;
@@ -87,7 +89,7 @@ interface FileUploadProps {
 }
 declare const FileUpload: React.FC<FileUploadProps>;
 
-declare const ALLOWED_FILE_EXTENSIONS = ".jpg,.jpeg,.png,.gif,.webp,.svg,.pdf,.mp4,.mpeg,.mov,.avi,.webm,.mkv,.mp3,.wav,.ogg,.aac,.flac";
+declare const ALLOWED_FILE_EXTENSIONS = ".jpg,.jpeg,.png,.gif,.webp,.pdf,.mp4,.mpeg,.mov,.avi,.webm,.mkv,.mp3,.wav,.ogg,.aac,.flac";
 declare const MAX_TOTAL_FILE_SIZE: number;
 interface UploadResult {
     success: boolean;
@@ -102,21 +104,20 @@ interface UploadMultipleResult {
 /**
  * Upload a file to R2 via presigned URL
  */
-declare function uploadFile(file: File, formId: string, baseUrl: string): Promise<UploadResult>;
+declare function uploadFile(file: File, formId: string, baseUrl: string, submitToken: string): Promise<UploadResult>;
 /**
  * Upload multiple files to R2
  */
-declare function uploadFiles(files: File[], formId: string, baseUrl: string): Promise<UploadMultipleResult>;
+declare function uploadFiles(files: File[], formId: string, baseUrl: string, submitToken: string): Promise<UploadMultipleResult>;
 
 /**
- * Push a GTM-friendly event to window.dataLayer after a successful submission.
- * Safe no-op in SSR or if dataLayer throws.
+ * Push a GTM-friendly event to the global dataLayer after a successful submission.
+ * Uses `globalThis` so it works in typical browser bundles. Safe no-op if push throws.
  */
 declare function pushFormSnipSubmissionDataLayer(options: {
-    eventName?: string;
     formId: string;
     formName?: string;
 }): void;
 
 export { ALLOWED_FILE_EXTENSIONS, FileUpload, FormSnip, MAX_TOTAL_FILE_SIZE, pushFormSnipSubmissionDataLayer, uploadFile, uploadFiles };
-export type { Form, FormField, FormSnipProps, FormValidation, SubmissionResponse, UploadMultipleResult, UploadResult };
+export type { Form, FormField, FormSnipProps, FormSpamProtection, FormValidation, SubmissionResponse, UploadMultipleResult, UploadResult };

package/dist/index.esm.js

@@ -1,12 +1,21 @@
 import React, { useRef, useState, useEffect } from 'react';
 
-const ALLOWED_FILE_EXTENSIONS = '.jpg,.jpeg,.png,.gif,.webp,.svg,.pdf,.mp4,.mpeg,.mov,.avi,.webm,.mkv,.mp3,.wav,.ogg,.aac,.flac';
+const HONEYPOT_FIELD = '_fs_hp';
+const SUBMIT_TOKEN_FIELD = '_fs_token';
+
+const ALLOWED_FILE_EXTENSIONS = '.jpg,.jpeg,.png,.gif,.webp,.pdf,.mp4,.mpeg,.mov,.avi,.webm,.mkv,.mp3,.wav,.ogg,.aac,.flac';
 const MAX_TOTAL_FILE_SIZE = 15 * 1024 * 1024; // 15MB
 /**
  * Upload a file to R2 via presigned URL
  */
-async function uploadFile(file, formId, baseUrl) {
+async function uploadFile(file, formId, baseUrl, submitToken) {
     try {
+        if (!submitToken) {
+            return {
+                success: false,
+                error: 'Form session expired. Please reload and try again.',
+            };
+        }
         // Step 1: Get presigned upload URL
         const signResponse = await fetch(`${baseUrl}/uploads/sign`, {
             method: 'POST',
@@ -19,6 +28,7 @@ async function uploadFile(file, formId, baseUrl) {
                 contentType: file.type,
                 size: file.size,
                 formId,
+                [SUBMIT_TOKEN_FIELD]: submitToken,
             }),
         });
         if (!signResponse.ok) {
@@ -64,7 +74,7 @@ async function uploadFile(file, formId, baseUrl) {
 /**
  * Upload multiple files to R2
  */
-async function uploadFiles(files, formId, baseUrl) {
+async function uploadFiles(files, formId, baseUrl, submitToken) {
     // Check total size
     const totalSize = files.reduce((sum, file) => sum + file.size, 0);
     if (totalSize > MAX_TOTAL_FILE_SIZE) {
@@ -73,7 +83,7 @@ async function uploadFiles(files, formId, baseUrl) {
             errors: [`Total file size exceeds 15MB limit per submission`],
         };
     }
-    const results = await Promise.allSettled(files.map((file) => uploadFile(file, formId, baseUrl)));
+    const results = await Promise.allSettled(files.map((file) => uploadFile(file, formId, baseUrl, submitToken)));
     const fileKeys = [];
     const errors = [];
     results.forEach((result, index) => {
@@ -261,6 +271,7 @@ function injectBaseStyles() {
         '.fs-space-x-2>*+*{margin-left:0.5rem}',
         '.fs-outline-none{outline:none}',
         '.fs-hover-opacity:hover{opacity:0.9}',
+        '.formsnip-embed-ph::placeholder{color:var(--fs-placeholder-color,#9ca3af);opacity:1}',
     ].join('');
     const style = document.createElement('style');
     style.id = 'formsnip-base-styles';
@@ -296,6 +307,9 @@ function applyStyles(styles, customStyles) {
     if (customStyles.fontSize !== undefined) {
         result.fontSize = `${customStyles.fontSize}px`;
     }
+    if (customStyles.placeholderColor) {
+        result['--fs-placeholder-color'] = customStyles.placeholderColor;
+    }
     // Note: fullWidth is handled separately in the component, not here
     // to ensure proper display property handling
     return result;
@@ -312,17 +326,18 @@ const CLASSES = {
 };
 
 /**
- * Push a GTM-friendly event to window.dataLayer after a successful submission.
- * Safe no-op in SSR or if dataLayer throws.
+ * Push a GTM-friendly event to the global dataLayer after a successful submission.
+ * Uses `globalThis` so it works in typical browser bundles. Safe no-op if push throws.
  */
 function pushFormSnipSubmissionDataLayer(options) {
-    if (typeof window === 'undefined')
-        return;
     try {
-        const w = window;
-        w.dataLayer = w.dataLayer || [];
-        w.dataLayer.push({
-            event: options.eventName ?? 'formsnip_submission_success',
+        if (typeof globalThis === 'undefined')
+            return;
+        const g = globalThis;
+        const layer = Array.isArray(g.dataLayer) ? g.dataLayer : [];
+        g.dataLayer = layer;
+        layer.push({
+            event: 'formsnip_submission_success',
             formsnipFormId: options.formId,
             ...(options.formName ? { formsnipFormName: options.formName } : {}),
         });
@@ -332,6 +347,86 @@ function pushFormSnipSubmissionDataLayer(options) {
     }
 }
 
+const PHONE_COUNTRIES = [
+    { iso: 'AU', name: 'Australia', dial: '+61' },
+    { iso: 'AT', name: 'Austria', dial: '+43' },
+    { iso: 'BE', name: 'Belgium', dial: '+32' },
+    { iso: 'BR', name: 'Brazil', dial: '+55' },
+    { iso: 'CA', name: 'Canada', dial: '+1' },
+    { iso: 'CN', name: 'China', dial: '+86' },
+    { iso: 'DK', name: 'Denmark', dial: '+45' },
+    { iso: 'FI', name: 'Finland', dial: '+358' },
+    { iso: 'FR', name: 'France', dial: '+33' },
+    { iso: 'DE', name: 'Germany', dial: '+49' },
+    { iso: 'GR', name: 'Greece', dial: '+30' },
+    { iso: 'HK', name: 'Hong Kong', dial: '+852' },
+    { iso: 'IS', name: 'Iceland', dial: '+354' },
+    { iso: 'IN', name: 'India', dial: '+91' },
+    { iso: 'IE', name: 'Ireland', dial: '+353' },
+    { iso: 'IT', name: 'Italy', dial: '+39' },
+    { iso: 'JP', name: 'Japan', dial: '+81' },
+    { iso: 'LU', name: 'Luxembourg', dial: '+352' },
+    { iso: 'MX', name: 'Mexico', dial: '+52' },
+    { iso: 'NL', name: 'Netherlands', dial: '+31' },
+    { iso: 'NZ', name: 'New Zealand', dial: '+64' },
+    { iso: 'NO', name: 'Norway', dial: '+47' },
+    { iso: 'PL', name: 'Poland', dial: '+48' },
+    { iso: 'PT', name: 'Portugal', dial: '+351' },
+    { iso: 'SG', name: 'Singapore', dial: '+65' },
+    { iso: 'ZA', name: 'South Africa', dial: '+27' },
+    { iso: 'KR', name: 'South Korea', dial: '+82' },
+    { iso: 'ES', name: 'Spain', dial: '+34' },
+    { iso: 'SE', name: 'Sweden', dial: '+46' },
+    { iso: 'CH', name: 'Switzerland', dial: '+41' },
+    { iso: 'AE', name: 'United Arab Emirates', dial: '+971' },
+    { iso: 'GB', name: 'United Kingdom', dial: '+44' },
+    { iso: 'US', name: 'United States', dial: '+1' },
+];
+const PREFERRED_ISO_FOR_DIAL = {
+    '+1': 'US',
+    '+44': 'GB',
+};
+function defaultPhoneIso() {
+    try {
+        const region = new Intl.Locale(navigator.language).region;
+        if (region && PHONE_COUNTRIES.some((country) => country.iso === region)) {
+            return region;
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    return 'DK';
+}
+function phoneCountryByIso(iso) {
+    return PHONE_COUNTRIES.find((country) => country.iso === iso) ?? PHONE_COUNTRIES.find((country) => country.iso === 'DK');
+}
+function formatPhoneValue(dial, national) {
+    const digits = national.replace(/[^\d\s()-]/g, '').trim();
+    if (!digits)
+        return '';
+    return `${dial} ${digits}`;
+}
+function parsePhoneValue(value, fallbackIso = 'DK') {
+    const trimmed = value.trim();
+    if (!trimmed.startsWith('+')) {
+        return { iso: fallbackIso, national: trimmed };
+    }
+    const match = trimmed.match(/^(\+\d{1,4})(?:\s+(.*))?$/);
+    if (!match) {
+        return { iso: fallbackIso, national: trimmed };
+    }
+    const dial = match[1];
+    const national = (match[2] ?? '').trim();
+    const matches = PHONE_COUNTRIES.filter((country) => country.dial === dial);
+    if (matches.length === 0) {
+        return { iso: fallbackIso, national: trimmed.replace(/^\+\d{1,4}\s*/, '') };
+    }
+    const preferred = PREFERRED_ISO_FOR_DIAL[dial];
+    const country = matches.find((item) => item.iso === preferred) ?? matches[0];
+    return { iso: country.iso, national };
+}
+
 /** Build rows from flat fields (full = own row, half = paired in row) */
 function buildRowsFromFields(fields) {
     const rows = [];
@@ -356,7 +451,7 @@ function buildRowsFromFields(fields) {
     return rows;
 }
 const DEFAULT_BASE_URL = 'https://api.formsnip.com';
-const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, className = '', prefill, pushDataLayerOnSuccess = false, dataLayerEventName, }) => {
+const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, className = '', prefill, }) => {
     const [form, setForm] = useState(null);
     const [formData, setFormData] = useState({});
     const [selectedFiles, setSelectedFiles] = useState({});
@@ -367,6 +462,8 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
     const [submitError, setSubmitError] = useState(null);
     const [submitSuccess, setSubmitSuccess] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitToken, setSubmitToken] = useState('');
+    const [honeypot, setHoneypot] = useState('');
     useEffect(() => {
         // Inject base styles on mount (same as embed script)
         injectBaseStyles();
@@ -381,6 +478,7 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                     // Form data includes embedStyles from the database
                     // These styles are set in the EmbedForm page and stored in the Form model
                     setForm(json.data);
+                    setSubmitToken(json.data.submitToken || '');
                     // Parse URL query once for prefill support
                     let urlParams = null;
                     if (typeof window !== 'undefined') {
@@ -393,22 +491,27 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                             return acc;
                         }
                         let initialValue = '';
-                        const prefillKey = field.urlPrefillParam;
+                        const prefillKey = field.id;
                         const canPrefillType = field.type === 'text' ||
                             field.type === 'email' ||
                             field.type === 'textarea' ||
                             field.type === 'number' ||
                             field.type === 'date' ||
                             field.type === 'datetime' ||
+                            field.type === 'time' ||
                             field.type === 'phone' ||
+                            field.type === 'website' ||
+                            field.type === 'choice' ||
                             field.type === 'hidden' ||
                             field.type === 'select';
                         // 1) Prefill prop (takes precedence over URL)
                         if (prefill && prefillKey && prefillKey.trim() !== '' && prefillKey in prefill) {
                             const v = prefill[prefillKey];
                             if (typeof v === 'string' && canPrefillType) {
-                                if (field.type === 'select' && Array.isArray(field.options) && !field.options.includes(v)) {
-                                    // Ignore invalid option values for selects
+                                const options = field.options || [];
+                                const optionField = field.type === 'select' || field.type === 'choice';
+                                if (optionField && options.length > 0 && !options.includes(v)) {
+                                    // Ignore invalid option values
                                 }
                                 else {
                                     initialValue = v;
@@ -420,8 +523,10 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                             const v = urlParams.get(prefillKey);
                             if (v !== null && v !== '') {
                                 if (canPrefillType) {
-                                    if (field.type === 'select' && Array.isArray(field.options) && !field.options.includes(v)) {
-                                        // Ignore invalid option values for selects
+                                    const options = field.options || [];
+                                    const optionField = field.type === 'select' || field.type === 'choice';
+                                    if (optionField && options.length > 0 && !options.includes(v)) {
+                                        // Ignore invalid option values
                                     }
                                     else {
                                         initialValue = v;
@@ -429,16 +534,6 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                                 }
                             }
                         }
-                        // Debugging: log resolved prefill for hidden fields
-                        if (typeof window !== 'undefined' && field.type === 'hidden') {
-                            // eslint-disable-next-line no-console
-                            console.debug('FormSnip hidden prefill', {
-                                fieldId: field.id,
-                                prefillKey,
-                                resolvedValue: initialValue,
-                                hasDefault: !!field.value,
-                            });
-                        }
                         // Hidden fields can also have a static default value from the schema
                         if (initialValue === '' && field.type === 'hidden' && field.value) {
                             initialValue = field.value;
@@ -484,7 +579,7 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
             delete newErrors[fieldId];
             return newErrors;
         });
-        const result = await uploadFiles(files, formId, baseUrl);
+        const result = await uploadFiles(files, formId, baseUrl, submitToken);
         setUploadingFiles((prev) => ({ ...prev, [fieldId]: false }));
         if (result.success && result.fileKeys && result.fileKeys.length > 0) {
             const existingFileKeys = Array.isArray(formData[fieldId])
@@ -508,6 +603,16 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
         setSubmitSuccess(false);
         setIsSubmitting(true);
         try {
+            const pageUrl = new URL(window.location.href);
+            const payload = {
+                ...formData,
+                [SUBMIT_TOKEN_FIELD]: submitToken,
+                [HONEYPOT_FIELD]: honeypot,
+                _fs_page: pageUrl.href,
+                _fs_utm_source: pageUrl.searchParams.get('utm_source') || undefined,
+                _fs_utm_medium: pageUrl.searchParams.get('utm_medium') || undefined,
+                _fs_utm_campaign: pageUrl.searchParams.get('utm_campaign') || undefined,
+            };
             const response = await fetch(`${baseUrl}/submissions/create-submission/${formId}`, {
                 method: 'POST',
                 headers: {
@@ -515,21 +620,23 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                     'X-Requested-With': 'XMLHttpRequest',
                 },
                 credentials: 'include',
-                body: JSON.stringify(formData),
+                body: JSON.stringify(payload),
             });
             const json = await response.json();
             if (response.ok && (json.success === undefined || json.success === true)) {
                 setSubmitSuccess(true);
-                if (pushDataLayerOnSuccess) {
-                    pushFormSnipSubmissionDataLayer({
-                        eventName: dataLayerEventName,
-                        formId,
-                        formName: form?.name,
-                    });
-                }
+                pushFormSnipSubmissionDataLayer({
+                    formId,
+                    formName: form?.name,
+                });
                 if (onSuccess) {
                     onSuccess(json.data);
                 }
+                const redirectUrl = form?.validation?.redirectUrl?.trim();
+                if (redirectUrl && /^https?:\/\//i.test(redirectUrl)) {
+                    window.location.assign(redirectUrl);
+                    return;
+                }
                 // Reset form
                 const emptyData = Object.keys(formData).reduce((acc, key) => {
                     const field = form?.fields.find((f) => f.id === key);
@@ -539,6 +646,15 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                 setFormData(emptyData);
                 setSelectedFiles({});
                 setUploadErrors({});
+                setHoneypot('');
+                try {
+                    const refresh = await fetch(`${baseUrl}/forms/get-form/${formId}`);
+                    const refreshJson = await refresh.json();
+                    if (refreshJson?.data?.submitToken) {
+                        setSubmitToken(refreshJson.data.submitToken);
+                    }
+                }
+                catch (_) { }
             }
             else {
                 const errorMsg = json.message || 'Submission failed';
@@ -563,6 +679,7 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
         // Use embedStyles from database (set in EmbedForm page)
         const fieldStyles = form?.embedStyles?.field || {};
         const isRequired = field.required === true;
+        const inputStyle = applyStyles({}, fieldStyles);
         const commonProps = {
             id: `field-${field.id}`,
             name: field.id,
@@ -570,8 +687,8 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
             onChange: (e) => handleInputChange(field.id, e.target.value),
             placeholder: field.placeholder || '',
             required: isRequired,
-            style: applyStyles({}, fieldStyles),
-            className: field.type === 'textarea' ? CLASSES.textarea : CLASSES.input,
+            style: inputStyle,
+            className: `${field.type === 'textarea' ? CLASSES.textarea : CLASSES.input} formsnip-embed-ph`,
         };
         const labelStyle = {};
         if (fieldStyles.labelFontSize) {
@@ -580,18 +697,54 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
         if (field.type === 'hidden') {
             return (React.createElement("input", { type: "hidden", id: `field-${field.id}`, name: field.id, value: formData[field.id] || field.value || '' }));
         }
+        if (field.type === 'heading') {
+            return React.createElement("h2", { style: { margin: 0, fontSize: '1.5rem', fontWeight: 600 } }, field.label);
+        }
+        if (field.type === 'paragraph') {
+            return React.createElement("p", { style: { margin: 0, whiteSpace: 'pre-wrap', color: '#4b5563' } }, field.content || '');
+        }
+        if (field.type === 'divider') {
+            return React.createElement("hr", { style: { border: 0, borderTop: '1px solid #e5e7eb', margin: '0.25rem 0' } });
+        }
+        if (field.type === 'choice') {
+            const options = field.options && field.options.length > 0 ? field.options : ['Yes', 'No'];
+            return (React.createElement("div", { className: "fs-relative" },
+                !field.hideLabel && (React.createElement("label", { className: "fs-mb-2 fs-flex fs-w-full fs-items-center fs-justify-between fs-gap-2 fs-text-sm fs-text-gray-700", style: { fontWeight: 500, ...labelStyle } },
+                    React.createElement("span", { className: "fs-min-w-0 fs-flex-1" }, field.label),
+                    isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0", style: { lineHeight: 1 } }, "*"))),
+                options.map((option) => (React.createElement("label", { key: option, className: "fs-flex fs-items-center", style: { marginTop: '0.4rem' } },
+                    React.createElement("input", { type: "radio", name: field.id, value: option, checked: formData[field.id] === option, onChange: (event) => handleInputChange(field.id, event.target.value), required: isRequired }),
+                    React.createElement("span", { style: { marginLeft: '0.5rem' } }, option))))));
+        }
+        if (field.type === 'phone') {
+            const parsed = parsePhoneValue(formData[field.id] || '', defaultPhoneIso());
+            const country = phoneCountryByIso(parsed.iso);
+            return (React.createElement(React.Fragment, null,
+                !field.hideLabel && (React.createElement("label", { htmlFor: `field-${field.id}`, className: "fs-mb-2 fs-flex fs-w-full fs-items-center fs-justify-between fs-gap-2 fs-text-sm fs-text-gray-700", style: { fontWeight: 500, ...labelStyle } },
+                    React.createElement("span", { className: "fs-min-w-0 fs-flex-1" }, field.label),
+                    isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0", style: { lineHeight: 1 } }, "*"))),
+                React.createElement("div", { style: { display: 'flex', gap: '0.5rem' } },
+                    React.createElement("select", { "aria-label": "Country code", value: country.iso, onChange: (event) => {
+                            const next = phoneCountryByIso(event.target.value);
+                            handleInputChange(field.id, formatPhoneValue(next.dial, parsed.national));
+                        }, className: CLASSES.input, style: { ...inputStyle, width: '8.5rem', flex: '0 0 auto' } }, PHONE_COUNTRIES.map((item) => (React.createElement("option", { key: item.iso, value: item.iso },
+                        item.dial,
+                        " ",
+                        item.name)))),
+                    React.createElement("input", { id: `field-${field.id}`, name: field.id, type: "tel", value: parsed.national, onChange: (event) => handleInputChange(field.id, formatPhoneValue(country.dial, event.target.value)), placeholder: field.placeholder || '12 34 56 78', required: isRequired, style: { ...inputStyle, flex: 1 }, className: `${CLASSES.input} formsnip-embed-ph` }))));
+        }
         // For checkbox and radio, return without extra wrapper
         if (field.type === 'checkbox') {
-            return (React.createElement("label", { className: "fs-flex fs-items-center" },
+            return (React.createElement("label", { className: "fs-flex fs-w-full fs-items-center fs-gap-2" },
                 React.createElement("input", { type: "checkbox", id: `field-${field.id}`, name: field.id, checked: String(formData[field.id]) === 'true' || formData[field.id] === 'on', onChange: (e) => handleInputChange(field.id, e.target.checked ? 'true' : 'false'), required: isRequired }),
-                React.createElement("span", { style: { marginLeft: '0.5rem' } }, field.label || field.placeholder || 'Check this box'),
-                isRequired && React.createElement("span", { className: "fs-text-red-500", style: { marginLeft: '0.25rem' } }, "*")));
+                !field.hideLabel && (React.createElement("span", { className: "fs-min-w-0 fs-flex-1", style: { marginLeft: '0.5rem' } }, field.label || field.placeholder || 'Check this box')),
+                isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0 fs-ml-auto", style: { lineHeight: 1 } }, "*")));
         }
         if (field.type === 'radio') {
             return (React.createElement("div", { className: "fs-relative" },
-                React.createElement("label", { className: "fs-text-sm fs-text-gray-700 fs-mb-2", style: { fontWeight: 500 } },
-                    field.label,
-                    isRequired && React.createElement("span", { className: "fs-text-red-500", style: { marginLeft: '0.25rem' } }, "*")),
+                !field.hideLabel && (React.createElement("label", { className: "fs-mb-2 fs-flex fs-w-full fs-items-center fs-justify-between fs-gap-2 fs-text-sm fs-text-gray-700", style: { fontWeight: 500 } },
+                    React.createElement("span", { className: "fs-min-w-0 fs-flex-1" }, field.label),
+                    isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0", style: { lineHeight: 1 } }, "*"))),
                 React.createElement("label", { className: "fs-flex fs-items-center" },
                     React.createElement("input", { type: "radio", id: `field-${field.id}-yes`, name: field.id, value: "yes", checked: formData[field.id] === 'yes', onChange: (e) => handleInputChange(field.id, e.target.value), required: isRequired }),
                     React.createElement("span", { style: { marginLeft: '0.5rem' } }, " Yes")),
@@ -606,19 +759,19 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                     ? [formData[field.id]]
                     : [];
             return (React.createElement(React.Fragment, null,
-                React.createElement("label", { htmlFor: `field-${field.id}`, className: "fs-text-sm fs-text-gray-700 fs-mb-2", style: { fontWeight: 500 } },
-                    field.label,
-                    isRequired && React.createElement("span", { className: "fs-text-red-500", style: { marginLeft: '0.25rem' } }, "*")),
+                !field.hideLabel && (React.createElement("label", { htmlFor: `field-${field.id}`, className: "fs-mb-2 fs-flex fs-w-full fs-items-center fs-justify-between fs-gap-2 fs-text-sm fs-text-gray-700", style: { fontWeight: 500 } },
+                    React.createElement("span", { className: "fs-min-w-0 fs-flex-1" }, field.label),
+                    isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0", style: { lineHeight: 1 } }, "*"))),
                 React.createElement(FileUpload, { id: field.id, required: isRequired, disabled: uploadingFiles[field.id], multiple: true, onFilesChange: (files) => handleFilesChange(field.id, files), uploadedFiles: uploadedFileKeys, uploading: uploadingFiles[field.id], error: uploadErrors[field.id] })));
         }
         // For other fields, use minimal wrapper structure
         return (React.createElement(React.Fragment, null,
-            React.createElement("label", { htmlFor: `field-${field.id}`, className: "fs-text-sm fs-text-gray-700 fs-mb-2", style: { fontWeight: 500, ...labelStyle } },
-                field.label,
-                isRequired && React.createElement("span", { className: "fs-text-red-500", style: { marginLeft: '0.25rem' } }, "*")),
-            React.createElement("div", { className: CLASSES.inner }, field.type === 'select' ? (React.createElement("select", { id: `field-${field.id}`, name: field.id, value: formData[field.id] || '', onChange: (e) => handleInputChange(field.id, e.target.value), required: isRequired, style: applyStyles({}, fieldStyles), className: CLASSES.input },
+            !field.hideLabel && (React.createElement("label", { htmlFor: `field-${field.id}`, className: "fs-mb-2 fs-flex fs-w-full fs-items-center fs-justify-between fs-gap-2 fs-text-sm fs-text-gray-700", style: { fontWeight: 500, ...labelStyle } },
+                React.createElement("span", { className: "fs-min-w-0 fs-flex-1" }, field.label),
+                isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0", style: { lineHeight: 1 } }, "*"))),
+            React.createElement("div", { className: CLASSES.inner }, field.type === 'select' ? (React.createElement("select", { id: `field-${field.id}`, name: field.id, value: formData[field.id] || '', onChange: (e) => handleInputChange(field.id, e.target.value), required: isRequired, style: inputStyle, className: `${CLASSES.input} formsnip-embed-ph` },
                 React.createElement("option", { value: "" }, field.placeholder || 'Select an option'),
-                field.options?.map((option, index) => (React.createElement("option", { key: index, value: option }, option))))) : field.type === 'textarea' ? (React.createElement("textarea", { ...commonProps, rows: 4 })) : field.type === 'phone' ? (React.createElement("input", { type: "tel", ...commonProps })) : field.type === 'datetime' ? (React.createElement("input", { type: "datetime-local", ...commonProps })) : (React.createElement("input", { type: field.type || 'text', ...commonProps })))));
+                field.options?.map((option, index) => (React.createElement("option", { key: index, value: option }, option))))) : field.type === 'textarea' ? (React.createElement("textarea", { ...commonProps, rows: 4 })) : field.type === 'phone' ? (React.createElement("input", { type: "tel", ...commonProps })) : field.type === 'website' ? (React.createElement("input", { type: "url", ...commonProps })) : field.type === 'time' ? (React.createElement("input", { type: "time", ...commonProps })) : field.type === 'datetime' ? (React.createElement("input", { type: "datetime-local", ...commonProps })) : (React.createElement("input", { type: field.type || 'text', ...commonProps })))));
     };
     if (loading) {
         const content = (React.createElement("div", { className: "fs-text-center", style: { padding: '2rem 0' } },
@@ -647,6 +800,14 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                 marginBottom: '1rem',
             } }, form.validation?.confirmationText || 'Thank you! Your submission has been received.')),
         React.createElement("form", { id: "formsnip-form", onSubmit: handleSubmit, className: CLASSES.form },
+            React.createElement("input", { type: "text", name: HONEYPOT_FIELD, value: honeypot, onChange: (e) => setHoneypot(e.target.value), tabIndex: -1, autoComplete: "off", "aria-hidden": "true", style: {
+                    position: 'absolute',
+                    left: '-9999px',
+                    height: 0,
+                    width: 0,
+                    opacity: 0,
+                    overflow: 'hidden',
+                } }),
             form.fields.filter((f) => f.isActive !== false && f.type === 'hidden').map((field) => (React.createElement(React.Fragment, { key: field.id }, renderField(field)))),
             buildRowsFromFields(form.fields.filter((f) => f.isActive !== false && f.type !== 'hidden')).map((row, rowIdx) => row.length === 1 ? (React.createElement("div", { key: row[0].id, style: { display: 'flex', flexDirection: 'column' } }, renderField(row[0]))) : (React.createElement("div", { key: `row-${rowIdx}`, style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.25rem' } }, row.map((field) => (React.createElement("div", { key: field.id, style: { display: 'flex', flexDirection: 'column' } }, renderField(field))))))),
             React.createElement("button", { type: "submit", disabled: isSubmitting, className: CLASSES.button, style: {