update

backend/app/cta_forms_routes.py

@@ -88,31 +88,74 @@ def _normalize_fields(raw: List[Any]) -> List[dict]:
     return out or list(DEFAULT_FIELDS)
 
 
+def _normalize_embed_width(raw: Any) -> str:
+    s = _safe_str(raw) or "100%"
+    if len(s) > 32:
+        s = s[:32]
+    return s or "100%"
+
+
+def _normalize_embed_height(raw: Any) -> str:
+    s = _safe_str(raw) or "480"
+    if s.isdigit():
+        return s
+    if s.endswith("px") or s.endswith("%"):
+        return s[:32]
+    return "480"
+
+
+def _build_embed_codes(
+    *,
+    origin: str,
+    public_id: str,
+    name: str,
+    embed_width: str,
+    embed_height: str,
+) -> dict:
+    title = (name or "Form").replace('"', """)
+    w = _normalize_embed_width(embed_width)
+    h = _normalize_embed_height(embed_height)
+    return {
+        "embed_iframe": (
+            f'<iframe src="{origin}/embed/cta/{public_id}" title="{title}" '
+            f'width="{w}" height="{h}" style="border:none;border-radius:12px;" loading="lazy"></iframe>'
+            if origin
+            else ""
+        ),
+        "embed_script": (
+            f'<div id="ezofis-cta-{public_id}"></div>\n'
+            f'<script src="{origin}/api/embed/cta/{public_id}.js" async></script>'
+            if origin
+            else ""
+        ),
+    }
+
+
 def _form_to_dict(row: CtaForm, *, request: Optional[Request] = None) -> dict:
     origin = ""
     if request is not None:
         origin = _public_origin(request)
     pid = row.public_id
+    embed_w = _normalize_embed_width(getattr(row, "embed_width", None))
+    embed_h = _normalize_embed_height(getattr(row, "embed_height", None))
+    codes = _build_embed_codes(
+        origin=origin,
+        public_id=pid,
+        name=row.name or "",
+        embed_width=embed_w,
+        embed_height=embed_h,
+    )
     return {
         "id": row.id,
         "public_id": pid,
         "name": row.name or "",
         "fields": row.fields if isinstance(row.fields, list) else [],
+        "embed_width": embed_w,
+        "embed_height": embed_h,
         "is_active": bool(row.is_active),
         "created_at": row.created_at.isoformat() if row.created_at else None,
         "updated_at": row.updated_at.isoformat() if row.updated_at else None,
-        "embed_iframe": (
-            f'<iframe src="{origin}/embed/cta/{pid}" title="{row.name or "Form"}" '
-            f'width="100%" height="480" style="border:none;border-radius:12px;" loading="lazy"></iframe>'
-            if origin
-            else ""
-        ),
-        "embed_script": (
-            f'<div id="ezofis-cta-{pid}"></div>\n'
-            f'<script src="{origin}/api/embed/cta/{pid}.js" async></script>'
-            if origin
-            else ""
-        ),
+        **codes,
     }
 
 
@@ -308,6 +351,8 @@ def create_cta_form(
         public_id=uuid.uuid4().hex,
         name=body.name.strip(),
         fields=fields,
+        embed_width=_normalize_embed_width(body.embed_width),
+        embed_height=_normalize_embed_height(body.embed_height),
         is_active=1,
     )
     tc.db.add(row)
@@ -348,6 +393,10 @@ def patch_cta_form(
         row.fields = _normalize_fields([f.model_dump() for f in body.fields])
     if body.is_active is not None:
         row.is_active = 1 if body.is_active else 0
+    if body.embed_width is not None:
+        row.embed_width = _normalize_embed_width(body.embed_width)
+    if body.embed_height is not None:
+        row.embed_height = _normalize_embed_height(body.embed_height)
     row.updated_at = datetime.utcnow()
     db_commit_with_retry(tc.db)
     tc.db.refresh(row)
@@ -415,12 +464,10 @@ def embed_cta_script(public_id: str, request: Request, db: Session = Depends(get
     form = _get_active_form(db, public_id)
     origin = _public_origin(request)
     fields_json = json.dumps(form.fields if isinstance(form.fields, list) else [])
-    form_name = json.dumps(form.name or "Contact us")
     js = f"""(function() {{
   var FORM_ID = {json.dumps(public_id)};
   var API = {json.dumps(origin)};
   var FIELDS = {fields_json};
-  var TITLE = {form_name};
   var mount = document.getElementById('ezofis-cta-' + FORM_ID);
   if (!mount) {{
     var s = document.currentScript;
@@ -430,14 +477,11 @@ def embed_cta_script(public_id: str, request: Request, db: Session = Depends(get
     else document.body.appendChild(mount);
   }}
   var css = document.createElement('style');
-  css.textContent = '.ezofis-cta{{font-family:system-ui,-apple-system,sans-serif;max-width:480px;margin:0 auto;padding:20px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-sizing:border-box}}.ezofis-cta *{{box-sizing:border-box}}.ezofis-cta h3{{margin:0 0 16px;font-size:1.125rem;color:#1e293b}}.ezofis-cta label{{display:block;font-size:0.8125rem;font-weight:500;color:#475569;margin-bottom:4px}}.ezofis-cta input,.ezofis-cta textarea{{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:0.9375rem;margin-bottom:12px}}.ezofis-cta textarea{{min-height:96px;resize:vertical}}.ezofis-cta button{{width:100%;padding:12px;background:#7c3aed;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:0.9375rem;cursor:pointer}}.ezofis-cta button:disabled{{opacity:0.6;cursor:not-allowed}}.ezofis-cta .ok{{color:#15803d;font-size:0.875rem;text-align:center;padding:12px}}.ezofis-cta .err{{color:#b91c1c;font-size:0.8125rem;margin-bottom:8px}}';
+  css.textContent = '.ezofis-cta{{font-family:system-ui,-apple-system,sans-serif;max-width:100%;margin:0 auto;padding:16px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-sizing:border-box}}.ezofis-cta *{{box-sizing:border-box}}.ezofis-cta label{{display:block;font-size:0.8125rem;font-weight:500;color:#475569;margin-bottom:4px}}.ezofis-cta input,.ezofis-cta textarea{{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:0.9375rem;margin-bottom:12px}}.ezofis-cta textarea{{min-height:96px;resize:vertical}}.ezofis-cta button{{width:100%;padding:12px;background:#7c3aed;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:0.9375rem;cursor:pointer}}.ezofis-cta button:disabled{{opacity:0.6;cursor:not-allowed}}.ezofis-cta .ok{{color:#15803d;font-size:0.875rem;text-align:center;padding:12px}}.ezofis-cta .err{{color:#b91c1c;font-size:0.8125rem;margin-bottom:8px}}';
   document.head.appendChild(css);
   var root = document.createElement('div');
   root.className = 'ezofis-cta';
   mount.appendChild(root);
-  var h = document.createElement('h3');
-  h.textContent = TITLE;
-  root.appendChild(h);
   var err = document.createElement('div');
   err.className = 'err';
   err.style.display = 'none';

backend/app/database.py

@@ -378,6 +378,8 @@ class CtaForm(Base):
     public_id = Column(String, unique=True, index=True, nullable=False)
     name = Column(String, nullable=False, default="")
     fields = Column(JSON, nullable=False, default=list)
+    embed_width = Column(String, default="100%")
+    embed_height = Column(String, default="480")
     is_active = Column(Integer, default=1)
     created_at = Column(DateTime, default=datetime.utcnow)
     updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
@@ -593,6 +595,14 @@ def run_migrations(connection_engine):
             if "bounced_at" not in rcols:
                 conn.execute(text("ALTER TABLE outreach_send_receipts ADD COLUMN bounced_at DATETIME"))
 
+        insp = inspect(connection_engine)
+        if insp.has_table("cta_forms"):
+            ccols = [c["name"] for c in insp.get_columns("cta_forms")]
+            if "embed_width" not in ccols:
+                conn.execute(text("ALTER TABLE cta_forms ADD COLUMN embed_width TEXT DEFAULT '100%'"))
+            if "embed_height" not in ccols:
+                conn.execute(text("ALTER TABLE cta_forms ADD COLUMN embed_height TEXT DEFAULT '480'"))
+
 
 # Create tables then migrate legacy SQLite schemas
 Base.metadata.create_all(bind=engine)

backend/app/models.py

@@ -301,12 +301,16 @@ class CtaFormFieldDef(BaseModel):
 class CtaFormCreateRequest(BaseModel):
     name: str = Field(..., min_length=1, max_length=200)
     fields: List[CtaFormFieldDef] = Field(default_factory=list)
+    embed_width: Optional[str] = Field(default="100%", max_length=32)
+    embed_height: Optional[str] = Field(default="480", max_length=32)
 
 
 class CtaFormPatchRequest(BaseModel):
     name: Optional[str] = Field(None, min_length=1, max_length=200)
     fields: Optional[List[CtaFormFieldDef]] = None
     is_active: Optional[bool] = None
+    embed_width: Optional[str] = Field(None, max_length=32)
+    embed_height: Optional[str] = Field(None, max_length=32)
 
 
 class CtaFormSubmitRequest(BaseModel):

frontend/src/components/settings/CtaFormPreview.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+/**
+ * Static preview of embed form fields (matches public embed styling).
+ */
+export default function CtaFormPreview({ fields, className }) {
+    const list = fields || [];
+
+    return (
+        <div className={cn('rounded-xl border border-slate-200 bg-white p-4', className)}>
+            {list.length === 0 ? (
+                <p className="text-sm text-slate-400 text-center py-6">Add fields to preview</p>
+            ) : (
+                <div className="space-y-3">
+                    {list.map((f, idx) => (
+                        <div key={`${f.key}-${idx}`}>
+                            <label className="block text-xs font-medium text-slate-600 mb-1">
+                                {f.label}
+                                {f.required ? ' *' : ''}
+                            </label>
+                            {f.type === 'textarea' ? (
+                                <textarea
+                                    readOnly
+                                    tabIndex={-1}
+                                    rows={3}
+                                    placeholder=""
+                                    className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm bg-white pointer-events-none"
+                                />
+                            ) : (
+                                <input
+                                    readOnly
+                                    tabIndex={-1}
+                                    type={f.type || 'text'}
+                                    placeholder=""
+                                    className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm bg-white pointer-events-none"
+                                />
+                            )}
+                        </div>
+                    ))}
+                    <button
+                        type="button"
+                        tabIndex={-1}
+                        className="w-full rounded-lg bg-violet-600 py-2.5 text-sm font-semibold text-white pointer-events-none"
+                    >
+                        Submit
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}

frontend/src/components/settings/CtaFormsSettings.jsx

@@ -1,7 +1,8 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
     ArrowLeft,
     ClipboardCopy,
+    ExternalLink,
     FileInput,
     Loader2,
     Plus,
@@ -19,7 +20,9 @@ import {
     SelectValue,
 } from '@/components/ui/select';
 import AppShell from '@/components/layout/AppShell';
+import CtaFormPreview from '@/components/settings/CtaFormPreview';
 import { apiFetch } from '@/lib/api';
+import { buildCtaEmbedCodes } from '@/lib/ctaFormEmbed';
 import { cn } from '@/lib/utils';
 
 const FIELD_PRESETS = [
@@ -47,10 +50,23 @@ const MAP_OPTIONS = [
     { value: 'custom', label: 'Custom (in submission only)' },
 ];
 
+const AUTOSAVE_MS = 600;
+
 function emptyDraft() {
     return {
         name: 'New contact form',
         fields: FIELD_PRESETS.slice(0, 3).map((f) => ({ ...f })),
+        embed_width: '100%',
+        embed_height: '480',
+    };
+}
+
+function draftFromForm(form) {
+    return {
+        name: form.name,
+        fields: (form.fields || []).map((f) => ({ ...f })),
+        embed_width: form.embed_width || '100%',
+        embed_height: form.embed_height || '480',
     };
 }
 
@@ -71,25 +87,65 @@ function CopyBlock({ label, code }) {
                     Copy
                 </Button>
             </div>
-            <Textarea readOnly value={code || ''} rows={3} className="text-xs font-mono h-auto min-h-[4.5rem]" />
+            <Textarea
+                readOnly
+                value={code || ''}
+                rows={3}
+                className="text-xs font-mono h-auto min-h-[4.5rem]"
+            />
         </div>
     );
 }
 
+function SaveIndicator({ state }) {
+    if (state === 'saving') {
+        return (
+            <span className="inline-flex items-center gap-1.5 text-xs text-slate-500">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                Saving…
+            </span>
+        );
+    }
+    if (state === 'saved') {
+        return <span className="text-xs text-green-600">Saved</span>;
+    }
+    if (state === 'error') {
+        return <span className="text-xs text-red-600">Could not save</span>;
+    }
+    return null;
+}
+
 export default function CtaFormsSettings({ onBack }) {
     const [forms, setForms] = useState([]);
     const [loading, setLoading] = useState(true);
     const [selectedId, setSelectedId] = useState(null);
     const [draft, setDraft] = useState(emptyDraft());
-    const [saving, setSaving] = useState(false);
+    const [saveState, setSaveState] = useState('idle');
     const [creating, setCreating] = useState(false);
     const [error, setError] = useState('');
 
+    const skipAutosaveRef = useRef(true);
+    const saveTimerRef = useRef(null);
+
     const selected = useMemo(
         () => forms.find((f) => f.id === selectedId) || null,
         [forms, selectedId]
     );
 
+    const embedCodes = useMemo(() => {
+        if (!selected?.public_id) {
+            return { embed_iframe: '', embed_script: '' };
+        }
+        return buildCtaEmbedCodes({
+            publicId: selected.public_id,
+            name: draft.name,
+            embedWidth: draft.embed_width,
+            embedHeight: draft.embed_height,
+        });
+    }, [selected?.public_id, draft.name, draft.embed_width, draft.embed_height]);
+
+    const previewUrl = selected?.public_id ? `/embed/cta/${selected.public_id}` : '';
+
     const loadForms = useCallback(async () => {
         setLoading(true);
         setError('');
@@ -117,18 +173,55 @@ export default function CtaFormsSettings({ onBack }) {
 
     useEffect(() => {
         if (!selected) return;
-        setDraft({
-            name: selected.name,
-            fields: (selected.fields || []).map((f) => ({ ...f })),
-        });
+        skipAutosaveRef.current = true;
+        setDraft(draftFromForm(selected));
+        setSaveState('idle');
     }, [selected?.id]);
 
+    useEffect(() => {
+        if (!selectedId || !selected) return;
+        if (skipAutosaveRef.current) {
+            skipAutosaveRef.current = false;
+            return;
+        }
+        const name = draft.name?.trim();
+        if (!name) return;
+
+        if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = setTimeout(async () => {
+            setSaveState('saving');
+            try {
+                const res = await apiFetch(`/api/cta-forms/${selectedId}`, {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        name,
+                        fields: draft.fields,
+                        embed_width: draft.embed_width,
+                        embed_height: draft.embed_height,
+                    }),
+                });
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.detail || 'Save failed');
+                setForms((prev) => prev.map((f) => (f.id === data.id ? data : f)));
+                setSaveState('saved');
+                window.setTimeout(() => setSaveState('idle'), 2000);
+            } catch (e) {
+                setError(e.message || 'Save failed');
+                setSaveState('error');
+            }
+        }, AUTOSAVE_MS);
+
+        return () => {
+            if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+        };
+    }, [draft, selectedId, selected]);
+
     const selectForm = (f) => {
         setSelectedId(f.id);
-        setDraft({
-            name: f.name,
-            fields: (f.fields || []).map((x) => ({ ...x })),
-        });
+        skipAutosaveRef.current = true;
+        setDraft(draftFromForm(f));
+        setSaveState('idle');
     };
 
     const createForm = async () => {
@@ -141,13 +234,16 @@ export default function CtaFormsSettings({ onBack }) {
                 body: JSON.stringify({
                     name: 'New contact form',
                     fields: FIELD_PRESETS.slice(0, 3),
+                    embed_width: '100%',
+                    embed_height: '480',
                 }),
             });
             const data = await res.json();
             if (!res.ok) throw new Error(data.detail || 'Create failed');
             await loadForms();
             setSelectedId(data.id);
-            setDraft({ name: data.name, fields: data.fields || [] });
+            skipAutosaveRef.current = true;
+            setDraft(draftFromForm(data));
         } catch (e) {
             setError(e.message || 'Create failed');
         } finally {
@@ -155,29 +251,6 @@ export default function CtaFormsSettings({ onBack }) {
         }
     };
 
-    const saveForm = async () => {
-        if (!selectedId) return;
-        setSaving(true);
-        setError('');
-        try {
-            const res = await apiFetch(`/api/cta-forms/${selectedId}`, {
-                method: 'PATCH',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    name: draft.name.trim(),
-                    fields: draft.fields,
-                }),
-            });
-            const data = await res.json();
-            if (!res.ok) throw new Error(data.detail || 'Save failed');
-            setForms((prev) => prev.map((f) => (f.id === data.id ? data : f)));
-        } catch (e) {
-            setError(e.message || 'Save failed');
-        } finally {
-            setSaving(false);
-        }
-    };
-
     const deleteForm = async () => {
         if (!selectedId) return;
         if (!window.confirm('Delete this form? Embed codes will stop working.')) return;
@@ -225,12 +298,19 @@ export default function CtaFormsSettings({ onBack }) {
         }));
     };
 
+    const previewFrameHeight = useMemo(() => {
+        const h = String(draft.embed_height || '480');
+        if (h.endsWith('px')) return h;
+        if (/^\d+$/.test(h)) return `${h}px`;
+        return '480px';
+    }, [draft.embed_height]);
+
     return (
         <AppShell
             title="CTA Forms"
             subtitle="Build embeddable lead forms for your website. Submissions appear in Leads."
         >
-            <div className="w-full max-w-5xl">
+            <div className="w-full max-w-7xl">
                 <div className="mb-6 flex flex-wrap items-center gap-3">
                     <Button type="button" variant="outline" className="gap-2" onClick={onBack}>
                         <ArrowLeft className="h-4 w-4" aria-hidden />
@@ -257,8 +337,8 @@ export default function CtaFormsSettings({ onBack }) {
                         <Loader2 className="h-10 w-10 animate-spin" />
                     </div>
                 ) : (
-                    <div className="grid gap-6 lg:grid-cols-[220px_minmax(0,1fr)]">
-                        <aside className="rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
+                    <div className="grid gap-6 lg:grid-cols-[220px_minmax(0,1fr)] xl:grid-cols-[220px_minmax(0,1fr)_300px]">
+                        <aside className="rounded-2xl border border-slate-200 bg-white p-3 shadow-sm h-fit">
                             <p className="px-2 py-1 text-xs font-semibold uppercase tracking-wide text-slate-500">
                                 Your forms
                             </p>
@@ -288,7 +368,7 @@ export default function CtaFormsSettings({ onBack }) {
                             )}
                         </aside>
 
-                        <div className="space-y-6">
+                        <div className="space-y-6 min-w-0">
                             {!selected ? (
                                 <div className="rounded-2xl border border-dashed border-slate-200 bg-white p-10 text-center text-slate-500">
                                     Create a form to configure fields and copy embed codes for WordPress.
@@ -301,6 +381,9 @@ export default function CtaFormsSettings({ onBack }) {
                                                 <label className="text-xs font-medium text-slate-600">
                                                     Form name
                                                 </label>
+                                                <p className="text-[10px] text-slate-400 mt-0.5">
+                                                    Internal label only — not shown on the embed
+                                                </p>
                                                 <Input
                                                     value={draft.name}
                                                     onChange={(e) =>
@@ -312,7 +395,8 @@ export default function CtaFormsSettings({ onBack }) {
                                                     className="mt-1"
                                                 />
                                             </div>
-                                            <div className="flex gap-2">
+                                            <div className="flex items-center gap-3 pb-1">
+                                                <SaveIndicator state={saveState} />
                                                 <Button
                                                     type="button"
                                                     variant="outline"
@@ -322,17 +406,6 @@ export default function CtaFormsSettings({ onBack }) {
                                                 >
                                                     <Trash2 className="h-4 w-4" />
                                                 </Button>
-                                                <Button
-                                                    type="button"
-                                                    onClick={saveForm}
-                                                    disabled={saving}
-                                                >
-                                                    {saving ? (
-                                                        <Loader2 className="h-4 w-4 animate-spin" />
-                                                    ) : (
-                                                        'Save form'
-                                                    )}
-                                                </Button>
                                             </div>
                                         </div>
 
@@ -465,6 +538,14 @@ export default function CtaFormsSettings({ onBack }) {
                                         </div>
                                     </section>
 
+                                    <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm space-y-4 xl:hidden">
+                                        <PreviewPanel
+                                            draft={draft}
+                                            previewUrl={previewUrl}
+                                            previewFrameHeight={previewFrameHeight}
+                                        />
+                                    </section>
+
                                     <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm space-y-4">
                                         <div className="flex items-center gap-2 text-slate-800 font-semibold">
                                             <FileInput className="h-5 w-5 text-violet-600" />
@@ -475,21 +556,58 @@ export default function CtaFormsSettings({ onBack }) {
                                             theme widget. Submissions go straight to{' '}
                                             <strong>Leads</strong> in this workspace.
                                         </p>
+
+                                        <div className="grid gap-3 sm:grid-cols-2">
+                                            <div>
+                                                <label className="text-xs font-medium text-slate-600">
+                                                    Embed width
+                                                </label>
+                                                <Input
+                                                    value={draft.embed_width}
+                                                    onChange={(e) =>
+                                                        setDraft((d) => ({
+                                                            ...d,
+                                                            embed_width: e.target.value,
+                                                        }))
+                                                    }
+                                                    placeholder="100% or 480px"
+                                                    className="mt-1 h-9 text-sm"
+                                                />
+                                            </div>
+                                            <div>
+                                                <label className="text-xs font-medium text-slate-600">
+                                                    Embed height
+                                                </label>
+                                                <Input
+                                                    value={draft.embed_height}
+                                                    onChange={(e) =>
+                                                        setDraft((d) => ({
+                                                            ...d,
+                                                            embed_height: e.target.value,
+                                                        }))
+                                                    }
+                                                    placeholder="480 or 600px"
+                                                    className="mt-1 h-9 text-sm"
+                                                />
+                                            </div>
+                                        </div>
+
                                         <CopyBlock
                                             label="Iframe embed (recommended)"
-                                            code={selected.embed_iframe}
+                                            code={embedCodes.embed_iframe}
                                         />
-                                        <CopyBlock label="Script embed" code={selected.embed_script} />
-                                        {selected.public_id ? (
+                                        <CopyBlock label="Script embed" code={embedCodes.embed_script} />
+                                        {previewUrl ? (
                                             <p className="text-xs text-slate-500">
-                                                Preview:{' '}
+                                                Full-page preview:{' '}
                                                 <a
-                                                    href={`/embed/cta/${selected.public_id}`}
+                                                    href={previewUrl}
                                                     target="_blank"
                                                     rel="noreferrer"
-                                                    className="text-violet-600 underline"
+                                                    className="inline-flex items-center gap-1 text-violet-600 underline"
                                                 >
-                                                    Open form preview
+                                                    Open in new tab
+                                                    <ExternalLink className="h-3 w-3" />
                                                 </a>
                                             </p>
                                         ) : null}
@@ -497,9 +615,57 @@ export default function CtaFormsSettings({ onBack }) {
                                 </>
                             )}
                         </div>
+
+                        {selected ? (
+                            <aside className="hidden xl:block">
+                                <div className="sticky top-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
+                                    <PreviewPanel
+                                        draft={draft}
+                                        previewUrl={previewUrl}
+                                        previewFrameHeight={previewFrameHeight}
+                                    />
+                                </div>
+                            </aside>
+                        ) : null}
                     </div>
                 )}
             </div>
         </AppShell>
     );
 }
+
+function PreviewPanel({ draft, previewUrl, previewFrameHeight }) {
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center justify-between gap-2">
+                <p className="text-sm font-semibold text-slate-800">Live preview</p>
+                {previewUrl ? (
+                    <a
+                        href={previewUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-1 text-xs text-violet-600 hover:underline"
+                    >
+                        Open tab
+                        <ExternalLink className="h-3 w-3" />
+                    </a>
+                ) : null}
+            </div>
+            <div
+                className="mx-auto overflow-hidden rounded-xl border border-slate-200 bg-slate-50"
+                style={{
+                    width: draft.embed_width || '100%',
+                    maxWidth: '100%',
+                    height: previewFrameHeight,
+                }}
+            >
+                <div className="h-full overflow-y-auto p-1">
+                    <CtaFormPreview fields={draft.fields} className="border-0 shadow-none" />
+                </div>
+            </div>
+            <p className="text-[10px] text-slate-400 text-center">
+                Updates as you edit · matches embed appearance
+            </p>
+        </div>
+    );
+}

frontend/src/lib/ctaFormEmbed.js

@@ -0,0 +1,23 @@
+/**
+ * Client-side embed snippets (updates instantly while editing).
+ */
+export function buildCtaEmbedCodes({
+    publicId,
+    name,
+    embedWidth = '100%',
+    embedHeight = '480',
+    origin,
+}) {
+    if (!publicId) {
+        return { embed_iframe: '', embed_script: '' };
+    }
+    const base =
+        origin || (typeof window !== 'undefined' ? window.location.origin : '');
+    const title = (name || 'Form').replace(/"/g, '"');
+    const w = embedWidth || '100%';
+    const h = embedHeight || '480';
+    return {
+        embed_iframe: `<iframe src="${base}/embed/cta/${publicId}" title="${title}" width="${w}" height="${h}" style="border:none;border-radius:12px;" loading="lazy"></iframe>`,
+        embed_script: `<div id="ezofis-cta-${publicId}"></div>\n<script src="${base}/api/embed/cta/${publicId}.js" async></script>`,
+    };
+}

frontend/src/pages/CtaFormEmbed.jsx

@@ -1,7 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Loader2 } from 'lucide-react';
-import { apiFetch } from '@/lib/api';
-import { APP_NAME } from '@/lib/branding';
 
 /**
  * Public embed page (iframe). No sign-in required.
@@ -75,7 +73,7 @@ export default function CtaFormEmbed() {
 
     if (phase === 'loading') {
         return (
-            <div className="flex min-h-[100dvh] items-center justify-center bg-slate-50">
+            <div className="flex min-h-[12rem] items-center justify-center bg-transparent p-4">
                 <Loader2 className="h-8 w-8 animate-spin text-violet-600" />
             </div>
         );
@@ -83,18 +81,15 @@ export default function CtaFormEmbed() {
 
     if (phase === 'error') {
         return (
-            <div className="flex min-h-[100dvh] items-center justify-center bg-slate-50 p-6">
+            <div className="flex min-h-[12rem] items-center justify-center bg-transparent p-4">
                 <p className="text-sm text-red-600">{error}</p>
             </div>
         );
     }
 
     return (
-        <div className="min-h-[100dvh] bg-slate-50 p-4 sm:p-6 flex items-start justify-center">
-            <div className="w-full max-w-md rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-                <h1 className="text-lg font-semibold text-slate-800 mb-1">{form.name}</h1>
-                <p className="text-xs text-slate-400 mb-5">{APP_NAME}</p>
-
+        <div className="bg-transparent p-4">
+            <div className="w-full rounded-xl border border-slate-200 bg-white p-4">
                 {done ? (
                     <p className="text-sm text-green-700 text-center py-6">{doneMsg}</p>
                 ) : (