update

backend/app/cta_forms_routes.py

@@ -0,0 +1,507 @@
+"""
+Embeddable CTA forms: create in Settings, embed on WordPress, submissions → Leads.
+"""
+
+from __future__ import annotations
+
+import json
+import re
+import uuid
+from datetime import datetime
+from typing import Any, Dict, List, Optional
+
+from fastapi import APIRouter, Depends, HTTPException, Request
+from fastapi.responses import JSONResponse, PlainTextResponse, Response
+from sqlalchemy.orm import Session
+
+from .database import CrmLead, CtaForm, db_commit_with_retry, get_db
+from .models import CtaFormCreateRequest, CtaFormPatchRequest, CtaFormSubmitRequest
+from .tenant_deps import TenantContext, get_tenant_context
+
+router = APIRouter(tags=["cta-forms"])
+
+CTA_LEAD_SOURCE = "cta_form"
+CTA_LEAD_ID_PREFIX = "cta-"
+
+DEFAULT_FIELDS: List[dict] = [
+    {"key": "name", "label": "Name", "type": "text", "required": True, "map_to": "name"},
+    {"key": "email", "label": "Email", "type": "email", "required": True, "map_to": "email"},
+    {
+        "key": "company_name",
+        "label": "Company Name",
+        "type": "text",
+        "required": False,
+        "map_to": "company_name",
+    },
+]
+
+_CORS_HEADERS = {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type",
+}
+
+
+def _safe_str(val: Any) -> str:
+    if val is None:
+        return ""
+    return str(val).strip()
+
+
+def _slug_key(label: str, existing: set[str]) -> str:
+    base = re.sub(r"[^a-z0-9]+", "_", label.lower()).strip("_") or "field"
+    key = base
+    n = 2
+    while key in existing:
+        key = f"{base}_{n}"
+        n += 1
+    existing.add(key)
+    return key
+
+
+def _normalize_fields(raw: List[Any]) -> List[dict]:
+    out: List[dict] = []
+    seen: set[str] = set()
+    for item in raw or []:
+        if isinstance(item, dict):
+            label = _safe_str(item.get("label")) or "Field"
+            key = _safe_str(item.get("key")) or _slug_key(label, seen)
+            if key in seen:
+                key = _slug_key(key, seen)
+            else:
+                seen.add(key)
+            ftype = _safe_str(item.get("type")) or "text"
+            if ftype not in ("text", "email", "tel", "textarea"):
+                ftype = "text"
+            map_to = _safe_str(item.get("map_to")) or "custom"
+            if map_to not in ("name", "email", "company_name", "title", "phone", "message", "custom"):
+                map_to = "custom"
+            out.append(
+                {
+                    "key": key[:64],
+                    "label": label[:120],
+                    "type": ftype,
+                    "required": bool(item.get("required")),
+                    "map_to": map_to,
+                }
+            )
+    return out or list(DEFAULT_FIELDS)
+
+
+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
+    return {
+        "id": row.id,
+        "public_id": pid,
+        "name": row.name or "",
+        "fields": row.fields if isinstance(row.fields, list) else [],
+        "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 ""
+        ),
+    }
+
+
+def _public_origin(request: Request) -> str:
+    fwd = request.headers.get("x-forwarded-proto")
+    proto = (fwd.split(",")[0].strip() if fwd else request.url.scheme or "https").lower()
+    host = request.headers.get("x-forwarded-host") or request.headers.get("host") or request.url.netloc
+    host = host.split(",")[0].strip() if host else ""
+    if not host:
+        return str(request.base_url).rstrip("/")
+    base = f"{proto}://{host}"
+    if base.startswith("http://") and ".hf.space" in base:
+        base = "https://" + base[7:]
+    return base.rstrip("/")
+
+
+def _split_name(full: str) -> tuple[str, str]:
+    parts = _safe_str(full).split(None, 1)
+    if not parts:
+        return "", ""
+    if len(parts) == 1:
+        return parts[0], ""
+    return parts[0], parts[1]
+
+
+def _submission_to_lead_fields(
+    form: CtaForm,
+    payload: Dict[str, str],
+) -> dict:
+    fields_def = form.fields if isinstance(form.fields, list) else []
+    mapped: Dict[str, str] = {}
+    custom_lines: List[str] = []
+
+    for fd in fields_def:
+        if not isinstance(fd, dict):
+            continue
+        key = _safe_str(fd.get("key"))
+        label = _safe_str(fd.get("label")) or key
+        val = _safe_str(payload.get(key))
+        map_to = _safe_str(fd.get("map_to")) or "custom"
+        if map_to == "custom":
+            if val:
+                custom_lines.append(f"{label}: {val}")
+        else:
+            if val:
+                mapped[map_to] = val
+
+    first_name, last_name = "", ""
+    if mapped.get("name"):
+        first_name, last_name = _split_name(mapped["name"])
+
+    email = mapped.get("email", "")
+    company = mapped.get("company_name", "")
+    title = mapped.get("title", "")
+    phone = mapped.get("phone", "")
+    message = mapped.get("message", "")
+
+    body_lines = [f"Form: {form.name or 'CTA Form'}", "---"]
+    for fd in fields_def:
+        if not isinstance(fd, dict):
+            continue
+        key = _safe_str(fd.get("key"))
+        label = _safe_str(fd.get("label")) or key
+        val = _safe_str(payload.get(key))
+        if val:
+            body_lines.append(f"{label}: {val}")
+
+    body = "\n".join(body_lines).strip()
+    if message and message not in body:
+        body = f"{body}\n\nMessage:\n{message}".strip()
+
+    return {
+        "first_name": first_name,
+        "last_name": last_name,
+        "email": email,
+        "company_name": company,
+        "title": title,
+        "phone": phone,
+        "last_reply_subject": f"CTA: {form.name or 'Form submission'}",
+        "last_reply_body": body,
+        "custom_lines": custom_lines,
+    }
+
+
+def _create_lead_from_submission(
+    db: Session,
+    form: CtaForm,
+    payload: Dict[str, str],
+    *,
+    page_url: str = "",
+    when: Optional[datetime] = None,
+) -> CrmLead:
+    when = when or datetime.utcnow()
+    parsed = _submission_to_lead_fields(form, payload)
+    if not parsed["email"]:
+        raise HTTPException(status_code=400, detail="Email is required")
+
+    submission_id = uuid.uuid4().hex[:16]
+    lead_key = f"{CTA_LEAD_ID_PREFIX}{form.public_id}-{submission_id}"
+
+    raw: Dict[str, Any] = {
+        "source": CTA_LEAD_SOURCE,
+        "form_id": form.id,
+        "form_public_id": form.public_id,
+        "form_name": form.name,
+        "submission": payload,
+        "page_url": page_url or None,
+        "messages": [
+            {
+                "direction": "inbound",
+                "channel": "cta_form",
+                "subject": parsed["last_reply_subject"],
+                "body": parsed["last_reply_body"],
+                "at": when.replace(microsecond=0).isoformat() + "Z",
+            }
+        ],
+    }
+
+    row = CrmLead(
+        tenant_id=form.tenant_id,
+        smartlead_lead_id=lead_key,
+        campaign_id=form.public_id,
+        campaign_name=form.name or "CTA Form",
+        email=parsed["email"],
+        first_name=parsed["first_name"],
+        last_name=parsed["last_name"],
+        company_name=parsed["company_name"],
+        title=parsed["title"],
+        last_reply_subject=parsed["last_reply_subject"],
+        last_reply_body=parsed["last_reply_body"],
+        last_reply_at=when,
+        crm_status="new_lead",
+        raw_webhook=raw,
+    )
+    db.add(row)
+    db.flush()
+    return row
+
+
+def _get_active_form(db: Session, public_id: str) -> CtaForm:
+    row = (
+        db.query(CtaForm)
+        .filter(CtaForm.public_id == public_id, CtaForm.is_active == 1)
+        .first()
+    )
+    if not row:
+        raise HTTPException(status_code=404, detail="Form not found")
+    return row
+
+
+def _validate_submission(form: CtaForm, body: CtaFormSubmitRequest) -> Dict[str, str]:
+    fields_def = form.fields if isinstance(form.fields, list) else []
+    out: Dict[str, str] = {}
+    for fd in fields_def:
+        if not isinstance(fd, dict):
+            continue
+        key = _safe_str(fd.get("key"))
+        if not key:
+            continue
+        val = _safe_str(body.fields.get(key))
+        if fd.get("required") and not val:
+            label = _safe_str(fd.get("label")) or key
+            raise HTTPException(status_code=400, detail=f"{label} is required")
+        if val:
+            out[key] = val
+    return out
+
+
+# ---- Authenticated management ----
+
+
+@router.get("/api/cta-forms")
+def list_cta_forms(request: Request, tc: TenantContext = Depends(get_tenant_context)):
+    rows = (
+        tc.db.query(CtaForm)
+        .filter(CtaForm.tenant_id == tc.tenant_id)
+        .order_by(CtaForm.updated_at.desc(), CtaForm.id.desc())
+        .all()
+    )
+    return {"forms": [_form_to_dict(r, request=request) for r in rows]}
+
+
+@router.post("/api/cta-forms")
+def create_cta_form(
+    body: CtaFormCreateRequest,
+    request: Request,
+    tc: TenantContext = Depends(get_tenant_context),
+):
+    fields = _normalize_fields([f.model_dump() for f in body.fields] if body.fields else DEFAULT_FIELDS)
+    row = CtaForm(
+        tenant_id=tc.tenant_id,
+        user_id=tc.user_id,
+        public_id=uuid.uuid4().hex,
+        name=body.name.strip(),
+        fields=fields,
+        is_active=1,
+    )
+    tc.db.add(row)
+    db_commit_with_retry(tc.db)
+    tc.db.refresh(row)
+    return _form_to_dict(row, request=request)
+
+
+@router.get("/api/cta-forms/{form_id}")
+def get_cta_form(form_id: int, request: Request, tc: TenantContext = Depends(get_tenant_context)):
+    row = (
+        tc.db.query(CtaForm)
+        .filter(CtaForm.tenant_id == tc.tenant_id, CtaForm.id == form_id)
+        .first()
+    )
+    if not row:
+        raise HTTPException(status_code=404, detail="Form not found")
+    return _form_to_dict(row, request=request)
+
+
+@router.patch("/api/cta-forms/{form_id}")
+def patch_cta_form(
+    form_id: int,
+    body: CtaFormPatchRequest,
+    request: Request,
+    tc: TenantContext = Depends(get_tenant_context),
+):
+    row = (
+        tc.db.query(CtaForm)
+        .filter(CtaForm.tenant_id == tc.tenant_id, CtaForm.id == form_id)
+        .first()
+    )
+    if not row:
+        raise HTTPException(status_code=404, detail="Form not found")
+    if body.name is not None:
+        row.name = body.name.strip()
+    if body.fields is not None:
+        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
+    row.updated_at = datetime.utcnow()
+    db_commit_with_retry(tc.db)
+    tc.db.refresh(row)
+    return _form_to_dict(row, request=request)
+
+
+@router.delete("/api/cta-forms/{form_id}")
+def delete_cta_form(form_id: int, tc: TenantContext = Depends(get_tenant_context)):
+    row = (
+        tc.db.query(CtaForm)
+        .filter(CtaForm.tenant_id == tc.tenant_id, CtaForm.id == form_id)
+        .first()
+    )
+    if not row:
+        raise HTTPException(status_code=404, detail="Form not found")
+    tc.db.delete(row)
+    db_commit_with_retry(tc.db)
+    return {"ok": True}
+
+
+# ---- Public embed + submit ----
+
+
+@router.get("/api/public/cta-forms/{public_id}")
+def public_cta_form(public_id: str, request: Request, db: Session = Depends(get_db)):
+    row = _get_active_form(db, public_id)
+    return JSONResponse(
+        content={
+            "public_id": row.public_id,
+            "name": row.name or "",
+            "fields": row.fields if isinstance(row.fields, list) else [],
+        },
+        headers=_CORS_HEADERS,
+    )
+
+
+@router.options("/api/public/cta-forms/{public_id}/submit")
+async def public_cta_submit_options():
+    return Response(headers=_CORS_HEADERS)
+
+
+@router.post("/api/public/cta-forms/{public_id}/submit")
+def public_cta_submit(
+    public_id: str,
+    body: CtaFormSubmitRequest,
+    db: Session = Depends(get_db),
+):
+    form = _get_active_form(db, public_id)
+    payload = _validate_submission(form, body)
+    lead = _create_lead_from_submission(
+        db,
+        form,
+        payload,
+        page_url=_safe_str(body.page_url),
+    )
+    db_commit_with_retry(db)
+    return JSONResponse(
+        content={"ok": True, "lead_id": lead.id, "message": "Thank you — we will be in touch soon."},
+        headers=_CORS_HEADERS,
+    )
+
+
+@router.get("/api/embed/cta/{public_id}.js")
+def embed_cta_script(public_id: str, request: Request, db: Session = Depends(get_db)):
+    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;
+    mount = document.createElement('div');
+    mount.id = 'ezofis-cta-' + FORM_ID;
+    if (s && s.parentNode) s.parentNode.insertBefore(mount, s);
+    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}}';
+  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';
+  root.appendChild(err);
+  var form = document.createElement('form');
+  root.appendChild(form);
+  FIELDS.forEach(function(f) {{
+    var wrap = document.createElement('div');
+    var lab = document.createElement('label');
+    lab.textContent = f.label + (f.required ? ' *' : '');
+    wrap.appendChild(lab);
+    var inp;
+    if (f.type === 'textarea') {{
+      inp = document.createElement('textarea');
+    }} else {{
+      inp = document.createElement('input');
+      inp.type = f.type || 'text';
+    }}
+    inp.name = f.key;
+    inp.required = !!f.required;
+    wrap.appendChild(inp);
+    form.appendChild(wrap);
+  }});
+  var btn = document.createElement('button');
+  btn.type = 'submit';
+  btn.textContent = 'Submit';
+  form.appendChild(btn);
+  form.addEventListener('submit', function(e) {{
+    e.preventDefault();
+    err.style.display = 'none';
+    btn.disabled = true;
+    var data = {{ fields: {{}}, page_url: window.location.href }};
+    FIELDS.forEach(function(f) {{
+      var el = form.querySelector('[name="' + f.key + '"]');
+      if (el) data.fields[f.key] = el.value || '';
+    }});
+    fetch(API + '/api/public/cta-forms/' + FORM_ID + '/submit', {{
+      method: 'POST',
+      headers: {{ 'Content-Type': 'application/json' }},
+      body: JSON.stringify(data)
+    }}).then(function(r) {{
+      return r.json().then(function(j) {{ return {{ ok: r.ok, j: j }}; }});
+    }}).then(function(res) {{
+      if (res.ok) {{
+        form.innerHTML = '<div class="ok">' + (res.j.message || 'Thank you!') + '</div>';
+      }} else {{
+        err.textContent = (res.j && res.j.detail) ? (typeof res.j.detail === 'string' ? res.j.detail : 'Submission failed') : 'Submission failed';
+        err.style.display = 'block';
+        btn.disabled = false;
+      }}
+    }}).catch(function() {{
+      err.textContent = 'Network error. Please try again.';
+      err.style.display = 'block';
+      btn.disabled = false;
+    }});
+  }});
+}})();
+"""
+    return PlainTextResponse(js, media_type="application/javascript", headers=_CORS_HEADERS)
+
+
+def lead_is_cta_form(row: CrmLead) -> bool:
+    raw = row.raw_webhook if isinstance(row.raw_webhook, dict) else {}
+    if raw.get("source") == CTA_LEAD_SOURCE:
+        return True
+    sid = _safe_str(row.smartlead_lead_id)
+    return sid.startswith(CTA_LEAD_ID_PREFIX)

backend/app/database.py

@@ -367,6 +367,22 @@ class UnipileHostedAuthState(Base):
     created_at = Column(DateTime, default=datetime.utcnow)
 
 
+class CtaForm(Base):
+    """Embeddable lead-capture form (WordPress / external sites → Leads)."""
+
+    __tablename__ = "cta_forms"
+
+    id = Column(Integer, primary_key=True, index=True)
+    tenant_id = Column(Integer, ForeignKey("tenants.id"), nullable=False, index=True)
+    user_id = Column(Integer, ForeignKey("users.id"), nullable=True, index=True)
+    public_id = Column(String, unique=True, index=True, nullable=False)
+    name = Column(String, nullable=False, default="")
+    fields = Column(JSON, nullable=False, default=list)
+    is_active = Column(Integer, default=1)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+
 def run_migrations(connection_engine):
     """Add tenant_id to legacy SQLite tables and attach rows to the default tenant."""
     from sqlalchemy import inspect, text
@@ -383,6 +399,7 @@ def run_migrations(connection_engine):
         "unipile_accounts",
         "linkedin_campaigns",
         "unipile_hosted_auth_states",
+        "cta_forms",
     )
 
     with connection_engine.begin() as conn:

backend/app/main.py

@@ -82,6 +82,7 @@ from .auth_routes import router as auth_router
 from .tenant_deps import TenantContext, get_tenant_context
 from .tenant_routes import router as tenant_router
 from .outreach_routes import router as outreach_router
+from .cta_forms_routes import router as cta_forms_router, lead_is_cta_form
 from .outreach_routes import (
     _format_wait_step_label,
     parse_tracking_label,
@@ -137,6 +138,7 @@ app.add_middleware(
 app.include_router(auth_router)
 app.include_router(tenant_router)
 app.include_router(outreach_router)
+app.include_router(cta_forms_router)
 
 # Create uploads directory
 UPLOAD_DIR = Path("/data/uploads")
@@ -931,6 +933,7 @@ def _crm_lead_to_dict(row: CrmLead) -> dict:
             if isinstance(row.raw_webhook, dict)
             else None
         )
+        or ("cta_form" if lead_is_cta_form(row) else None)
         or ("emailout_campaign" if lead_is_outreach_campaign(row) else "smartlead"),
     }
 

backend/app/models.py

@@ -285,3 +285,30 @@ class LinkedinCampaignPatchRequest(BaseModel):
     """Update LinkedIn campaign automation settings."""
 
     followup_interval_hours: Optional[int] = Field(None, ge=1, le=720)
+
+
+class CtaFormFieldDef(BaseModel):
+    key: str = Field(..., min_length=1, max_length=64)
+    label: str = Field(..., min_length=1, max_length=120)
+    type: str = Field(default="text", pattern="^(text|email|tel|textarea)$")
+    required: bool = False
+    map_to: str = Field(
+        default="custom",
+        pattern="^(name|email|company_name|title|phone|message|custom)$",
+    )
+
+
+class CtaFormCreateRequest(BaseModel):
+    name: str = Field(..., min_length=1, max_length=200)
+    fields: List[CtaFormFieldDef] = Field(default_factory=list)
+
+
+class CtaFormPatchRequest(BaseModel):
+    name: Optional[str] = Field(None, min_length=1, max_length=200)
+    fields: Optional[List[CtaFormFieldDef]] = None
+    is_active: Optional[bool] = None
+
+
+class CtaFormSubmitRequest(BaseModel):
+    fields: Dict[str, str] = Field(default_factory=dict)
+    page_url: Optional[str] = Field(None, max_length=2000)

frontend/src/App.jsx

@@ -9,26 +9,35 @@ import Leads from "./pages/Leads";
 import Deals from "./pages/Deals";
 import SalesDashboard from "./pages/SalesDashboard";
 import Settings from "./pages/Settings";
+import CtaFormEmbed from "./pages/CtaFormEmbed";
 import "./index.css";
 
 export default function App() {
   return (
     <BrowserRouter>
-      <AuthProvider>
-        <RequireAuth>
-          <GeneratorWorkflowProvider>
-            <Routes>
-              <Route path="/" element={<EmailSequenceGenerator />} />
-              <Route path="/contacts" element={<Contacts />} />
-              <Route path="/leads" element={<Leads />} />
-              <Route path="/deals" element={<Deals />} />
-              <Route path="/dashboard" element={<SalesDashboard />} />
-              <Route path="/settings" element={<Settings />} />
-              <Route path="/history" element={<Navigate to="/leads" replace />} />
-            </Routes>
-          </GeneratorWorkflowProvider>
-        </RequireAuth>
-      </AuthProvider>
+      <Routes>
+        <Route path="/embed/cta/:publicId" element={<CtaFormEmbed />} />
+        <Route
+          path="/*"
+          element={
+            <AuthProvider>
+              <RequireAuth>
+                <GeneratorWorkflowProvider>
+                  <Routes>
+                    <Route path="/" element={<EmailSequenceGenerator />} />
+                    <Route path="/contacts" element={<Contacts />} />
+                    <Route path="/leads" element={<Leads />} />
+                    <Route path="/deals" element={<Deals />} />
+                    <Route path="/dashboard" element={<SalesDashboard />} />
+                    <Route path="/settings" element={<Settings />} />
+                    <Route path="/history" element={<Navigate to="/leads" replace />} />
+                  </Routes>
+                </GeneratorWorkflowProvider>
+              </RequireAuth>
+            </AuthProvider>
+          }
+        />
+      </Routes>
     </BrowserRouter>
   );
 }

frontend/src/components/settings/CtaFormsSettings.jsx

@@ -0,0 +1,505 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+    ArrowLeft,
+    ClipboardCopy,
+    FileInput,
+    Loader2,
+    Plus,
+    Trash2,
+    GripVertical,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import AppShell from '@/components/layout/AppShell';
+import { apiFetch } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+const FIELD_PRESETS = [
+    { key: 'name', label: 'Name', type: 'text', required: true, map_to: 'name' },
+    { key: 'email', label: 'Email', type: 'email', required: true, map_to: 'email' },
+    {
+        key: 'company_name',
+        label: 'Company Name',
+        type: 'text',
+        required: false,
+        map_to: 'company_name',
+    },
+    { key: 'title', label: 'Job Title', type: 'text', required: false, map_to: 'title' },
+    { key: 'phone', label: 'Phone', type: 'tel', required: false, map_to: 'phone' },
+    { key: 'message', label: 'Message', type: 'textarea', required: false, map_to: 'message' },
+];
+
+const MAP_OPTIONS = [
+    { value: 'name', label: 'Full name' },
+    { value: 'email', label: 'Email' },
+    { value: 'company_name', label: 'Company' },
+    { value: 'title', label: 'Job title' },
+    { value: 'phone', label: 'Phone' },
+    { value: 'message', label: 'Message' },
+    { value: 'custom', label: 'Custom (in submission only)' },
+];
+
+function emptyDraft() {
+    return {
+        name: 'New contact form',
+        fields: FIELD_PRESETS.slice(0, 3).map((f) => ({ ...f })),
+    };
+}
+
+function CopyBlock({ label, code }) {
+    return (
+        <div className="space-y-2">
+            <div className="flex items-center justify-between gap-2">
+                <p className="text-xs font-medium text-slate-600">{label}</p>
+                <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    disabled={!code}
+                    onClick={() => code && navigator.clipboard.writeText(code)}
+                >
+                    <ClipboardCopy className="h-3 w-3" />
+                    Copy
+                </Button>
+            </div>
+            <Textarea readOnly value={code || ''} rows={3} className="text-xs font-mono h-auto min-h-[4.5rem]" />
+        </div>
+    );
+}
+
+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 [creating, setCreating] = useState(false);
+    const [error, setError] = useState('');
+
+    const selected = useMemo(
+        () => forms.find((f) => f.id === selectedId) || null,
+        [forms, selectedId]
+    );
+
+    const loadForms = useCallback(async () => {
+        setLoading(true);
+        setError('');
+        try {
+            const r = await apiFetch('/api/cta-forms');
+            const data = r.ok ? await r.json() : { forms: [] };
+            if (!r.ok) throw new Error(data.detail || 'Could not load forms');
+            const list = data.forms || [];
+            setForms(list);
+            setSelectedId((prev) => {
+                if (prev && list.some((f) => f.id === prev)) return prev;
+                return list.length ? list[0].id : null;
+            });
+        } catch (e) {
+            setError(e.message || 'Load failed');
+            setForms([]);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        loadForms();
+    }, [loadForms]);
+
+    useEffect(() => {
+        if (!selected) return;
+        setDraft({
+            name: selected.name,
+            fields: (selected.fields || []).map((f) => ({ ...f })),
+        });
+    }, [selected?.id]);
+
+    const selectForm = (f) => {
+        setSelectedId(f.id);
+        setDraft({
+            name: f.name,
+            fields: (f.fields || []).map((x) => ({ ...x })),
+        });
+    };
+
+    const createForm = async () => {
+        setCreating(true);
+        setError('');
+        try {
+            const res = await apiFetch('/api/cta-forms', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    name: 'New contact form',
+                    fields: FIELD_PRESETS.slice(0, 3),
+                }),
+            });
+            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 || [] });
+        } catch (e) {
+            setError(e.message || 'Create failed');
+        } finally {
+            setCreating(false);
+        }
+    };
+
+    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;
+        try {
+            const res = await apiFetch(`/api/cta-forms/${selectedId}`, { method: 'DELETE' });
+            if (!res.ok) {
+                const data = await res.json().catch(() => ({}));
+                throw new Error(data.detail || 'Delete failed');
+            }
+            setSelectedId(null);
+            setDraft(emptyDraft());
+            await loadForms();
+        } catch (e) {
+            setError(e.message || 'Delete failed');
+        }
+    };
+
+    const addPreset = (preset) => {
+        setDraft((d) => {
+            const keys = new Set(d.fields.map((f) => f.key));
+            let key = preset.key;
+            let n = 2;
+            while (keys.has(key)) {
+                key = `${preset.key}_${n}`;
+                n += 1;
+            }
+            return {
+                ...d,
+                fields: [...d.fields, { ...preset, key }],
+            };
+        });
+    };
+
+    const updateField = (idx, patch) => {
+        setDraft((d) => ({
+            ...d,
+            fields: d.fields.map((f, i) => (i === idx ? { ...f, ...patch } : f)),
+        }));
+    };
+
+    const removeField = (idx) => {
+        setDraft((d) => ({
+            ...d,
+            fields: d.fields.filter((_, i) => i !== idx),
+        }));
+    };
+
+    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="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 />
+                        Back to settings
+                    </Button>
+                    <Button type="button" onClick={createForm} disabled={creating} className="gap-2">
+                        {creating ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                            <Plus className="h-4 w-4" />
+                        )}
+                        New form
+                    </Button>
+                </div>
+
+                {error ? (
+                    <p className="mb-4 text-sm text-red-600 rounded-lg border border-red-200 bg-red-50 px-3 py-2">
+                        {error}
+                    </p>
+                ) : null}
+
+                {loading ? (
+                    <div className="flex justify-center py-20 text-slate-400">
+                        <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">
+                            <p className="px-2 py-1 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                                Your forms
+                            </p>
+                            {forms.length === 0 ? (
+                                <p className="px-2 py-4 text-sm text-slate-500">
+                                    No forms yet. Create one to get embed codes.
+                                </p>
+                            ) : (
+                                <ul className="space-y-1">
+                                    {forms.map((f) => (
+                                        <li key={f.id}>
+                                            <button
+                                                type="button"
+                                                onClick={() => selectForm(f)}
+                                                className={cn(
+                                                    'w-full rounded-lg px-3 py-2 text-left text-sm transition-colors',
+                                                    selectedId === f.id
+                                                        ? 'bg-violet-100 text-violet-800 font-medium'
+                                                        : 'text-slate-700 hover:bg-slate-50'
+                                                )}
+                                            >
+                                                {f.name || 'Untitled'}
+                                            </button>
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                        </aside>
+
+                        <div className="space-y-6">
+                            {!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.
+                                </div>
+                            ) : (
+                                <>
+                                    <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm space-y-4">
+                                        <div className="flex flex-wrap items-end gap-3 justify-between">
+                                            <div className="flex-1 min-w-[12rem]">
+                                                <label className="text-xs font-medium text-slate-600">
+                                                    Form name
+                                                </label>
+                                                <Input
+                                                    value={draft.name}
+                                                    onChange={(e) =>
+                                                        setDraft((d) => ({
+                                                            ...d,
+                                                            name: e.target.value,
+                                                        }))
+                                                    }
+                                                    className="mt-1"
+                                                />
+                                            </div>
+                                            <div className="flex gap-2">
+                                                <Button
+                                                    type="button"
+                                                    variant="outline"
+                                                    size="sm"
+                                                    className="text-red-600"
+                                                    onClick={deleteForm}
+                                                >
+                                                    <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>
+
+                                        <div>
+                                            <p className="text-xs font-medium text-slate-600 mb-2">
+                                                Add field
+                                            </p>
+                                            <div className="flex flex-wrap gap-2">
+                                                {FIELD_PRESETS.map((p) => (
+                                                    <Button
+                                                        key={p.key}
+                                                        type="button"
+                                                        variant="outline"
+                                                        size="sm"
+                                                        onClick={() => addPreset(p)}
+                                                    >
+                                                        + {p.label}
+                                                    </Button>
+                                                ))}
+                                            </div>
+                                        </div>
+
+                                        <div className="space-y-3">
+                                            <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
+                                                Fields
+                                            </p>
+                                            {draft.fields.length === 0 ? (
+                                                <p className="text-sm text-slate-500">
+                                                    Add at least Name and Email.
+                                                </p>
+                                            ) : (
+                                                draft.fields.map((f, idx) => (
+                                                    <div
+                                                        key={`${f.key}-${idx}`}
+                                                        className="flex flex-wrap gap-2 items-end rounded-xl border border-slate-100 bg-slate-50/80 p-3"
+                                                    >
+                                                        <GripVertical className="h-4 w-4 text-slate-300 mb-2.5 shrink-0" />
+                                                        <div className="flex-1 min-w-[8rem]">
+                                                            <label className="text-[10px] text-slate-500">
+                                                                Label
+                                                            </label>
+                                                            <Input
+                                                                value={f.label}
+                                                                onChange={(e) =>
+                                                                    updateField(idx, {
+                                                                        label: e.target.value,
+                                                                    })
+                                                                }
+                                                                className="h-9 text-sm"
+                                                            />
+                                                        </div>
+                                                        <div className="w-28">
+                                                            <label className="text-[10px] text-slate-500">
+                                                                Type
+                                                            </label>
+                                                            <Select
+                                                                value={f.type}
+                                                                onValueChange={(v) =>
+                                                                    updateField(idx, { type: v })
+                                                                }
+                                                            >
+                                                                <SelectTrigger className="h-9 text-sm">
+                                                                    <SelectValue />
+                                                                </SelectTrigger>
+                                                                <SelectContent>
+                                                                    <SelectItem value="text">
+                                                                        Text
+                                                                    </SelectItem>
+                                                                    <SelectItem value="email">
+                                                                        Email
+                                                                    </SelectItem>
+                                                                    <SelectItem value="tel">
+                                                                        Phone
+                                                                    </SelectItem>
+                                                                    <SelectItem value="textarea">
+                                                                        Long text
+                                                                    </SelectItem>
+                                                                </SelectContent>
+                                                            </Select>
+                                                        </div>
+                                                        <div className="w-36">
+                                                            <label className="text-[10px] text-slate-500">
+                                                                Maps to lead
+                                                            </label>
+                                                            <Select
+                                                                value={f.map_to}
+                                                                onValueChange={(v) =>
+                                                                    updateField(idx, { map_to: v })
+                                                                }
+                                                            >
+                                                                <SelectTrigger className="h-9 text-sm">
+                                                                    <SelectValue />
+                                                                </SelectTrigger>
+                                                                <SelectContent>
+                                                                    {MAP_OPTIONS.map((o) => (
+                                                                        <SelectItem
+                                                                            key={o.value}
+                                                                            value={o.value}
+                                                                        >
+                                                                            {o.label}
+                                                                        </SelectItem>
+                                                                    ))}
+                                                                </SelectContent>
+                                                            </Select>
+                                                        </div>
+                                                        <label className="flex items-center gap-1.5 text-xs text-slate-600 pb-2">
+                                                            <input
+                                                                type="checkbox"
+                                                                checked={!!f.required}
+                                                                onChange={(e) =>
+                                                                    updateField(idx, {
+                                                                        required: e.target.checked,
+                                                                    })
+                                                                }
+                                                            />
+                                                            Required
+                                                        </label>
+                                                        <Button
+                                                            type="button"
+                                                            variant="ghost"
+                                                            size="icon"
+                                                            className="h-9 w-9 text-red-500"
+                                                            onClick={() => removeField(idx)}
+                                                        >
+                                                            <Trash2 className="h-4 w-4" />
+                                                        </Button>
+                                                    </div>
+                                                ))
+                                            )}
+                                        </div>
+                                    </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" />
+                                            Embed on WordPress
+                                        </div>
+                                        <p className="text-sm text-slate-600">
+                                            Paste either code into a WordPress HTML block, page builder, or
+                                            theme widget. Submissions go straight to{' '}
+                                            <strong>Leads</strong> in this workspace.
+                                        </p>
+                                        <CopyBlock
+                                            label="Iframe embed (recommended)"
+                                            code={selected.embed_iframe}
+                                        />
+                                        <CopyBlock label="Script embed" code={selected.embed_script} />
+                                        {selected.public_id ? (
+                                            <p className="text-xs text-slate-500">
+                                                Preview:{' '}
+                                                <a
+                                                    href={`/embed/cta/${selected.public_id}`}
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    className="text-violet-600 underline"
+                                                >
+                                                    Open form preview
+                                                </a>
+                                            </p>
+                                        ) : null}
+                                    </section>
+                                </>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </AppShell>
+    );
+}

frontend/src/pages/CtaFormEmbed.jsx

@@ -0,0 +1,140 @@
+import React, { useCallback, 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.
+ * Route: /embed/cta/:publicId
+ */
+export default function CtaFormEmbed() {
+    const publicId = window.location.pathname.split('/').filter(Boolean).pop() || '';
+    const [phase, setPhase] = useState('loading');
+    const [form, setForm] = useState(null);
+    const [error, setError] = useState('');
+    const [values, setValues] = useState({});
+    const [submitting, setSubmitting] = useState(false);
+    const [done, setDone] = useState(false);
+    const [doneMsg, setDoneMsg] = useState('');
+
+    useEffect(() => {
+        if (!publicId) {
+            setError('Invalid form link');
+            setPhase('error');
+            return;
+        }
+        fetch(`/api/public/cta-forms/${encodeURIComponent(publicId)}`)
+            .then((r) => r.json().then((j) => ({ ok: r.ok, j })))
+            .then(({ ok, j }) => {
+                if (!ok) throw new Error(j.detail || 'Form not found');
+                setForm(j);
+                const init = {};
+                (j.fields || []).forEach((f) => {
+                    init[f.key] = '';
+                });
+                setValues(init);
+                setPhase('ready');
+            })
+            .catch((e) => {
+                setError(e.message || 'Could not load form');
+                setPhase('error');
+            });
+    }, [publicId]);
+
+    const onChange = (key, val) => {
+        setValues((prev) => ({ ...prev, [key]: val }));
+    };
+
+    const onSubmit = async (e) => {
+        e.preventDefault();
+        setSubmitting(true);
+        setError('');
+        try {
+            const res = await fetch(`/api/public/cta-forms/${encodeURIComponent(publicId)}/submit`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    fields: values,
+                    page_url: window.location.href,
+                }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                throw new Error(
+                    typeof data.detail === 'string' ? data.detail : 'Submission failed'
+                );
+            }
+            setDone(true);
+            setDoneMsg(data.message || 'Thank you — we will be in touch soon.');
+        } catch (err) {
+            setError(err.message || 'Submission failed');
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    if (phase === 'loading') {
+        return (
+            <div className="flex min-h-[100dvh] items-center justify-center bg-slate-50">
+                <Loader2 className="h-8 w-8 animate-spin text-violet-600" />
+            </div>
+        );
+    }
+
+    if (phase === 'error') {
+        return (
+            <div className="flex min-h-[100dvh] items-center justify-center bg-slate-50 p-6">
+                <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>
+
+                {done ? (
+                    <p className="text-sm text-green-700 text-center py-6">{doneMsg}</p>
+                ) : (
+                    <form onSubmit={onSubmit} className="space-y-3">
+                        {(form.fields || []).map((f) => (
+                            <div key={f.key}>
+                                <label className="block text-xs font-medium text-slate-600 mb-1">
+                                    {f.label}
+                                    {f.required ? ' *' : ''}
+                                </label>
+                                {f.type === 'textarea' ? (
+                                    <textarea
+                                        className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
+                                        rows={4}
+                                        required={!!f.required}
+                                        value={values[f.key] || ''}
+                                        onChange={(e) => onChange(f.key, e.target.value)}
+                                    />
+                                ) : (
+                                    <input
+                                        type={f.type || 'text'}
+                                        className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
+                                        required={!!f.required}
+                                        value={values[f.key] || ''}
+                                        onChange={(e) => onChange(f.key, e.target.value)}
+                                    />
+                                )}
+                            </div>
+                        ))}
+                        {error ? <p className="text-xs text-red-600">{error}</p> : null}
+                        <button
+                            type="submit"
+                            disabled={submitting}
+                            className="w-full rounded-lg bg-violet-600 py-2.5 text-sm font-semibold text-white hover:bg-violet-700 disabled:opacity-60"
+                        >
+                            {submitting ? 'Sending…' : 'Submit'}
+                        </button>
+                    </form>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/src/pages/Leads.jsx

@@ -175,6 +175,9 @@ export default function Leads() {
         lead?.source === 'emailout_campaign' ||
         (lead?.smartlead_lead_id || '').startsWith('emailout-');
 
+    const isCtaFormLead = (lead) =>
+        lead?.source === 'cta_form' || (lead?.smartlead_lead_id || '').startsWith('cta-');
+
     const loadThread = async (lead) => {
         setThreadLoading(true);
         setThreadData(null);
@@ -387,7 +390,7 @@ export default function Leads() {
     return (
         <AppShell
             title="Leads"
-            subtitle="Replies from EMAILOUT and Smartlead campaigns appear here. UniPile webhooks are configured on Settings."
+            subtitle="Replies from campaigns, CTA website forms, and Smartlead appear here."
         >
             <MainTableWorkspace
                 primaryAction={{ label: 'New lead', to: '/' }}
@@ -432,8 +435,8 @@ export default function Leads() {
                     ) : leads.length === 0 ? (
                         <div className="text-center py-16 text-slate-500 space-y-3">
                             <p>
-                                No leads yet. When a prospect replies to an EMAILOUT campaign (via UniPile) or a
-                                Smartlead campaign, they will show up here automatically.
+                                No leads yet. When a prospect replies to a campaign, submits a CTA form on
+                                your website, or replies in Smartlead, they will show up here.
                             </p>
                             <Button size="sm" variant="secondary" onClick={() => seedDemoLeads()} disabled={seedBusy}>
                                 Load demo rows (preview UI)
@@ -740,23 +743,27 @@ export default function Leads() {
 
                         <div className="mt-8 pt-6 border-t border-slate-100">
                             <div className="flex items-center justify-between mb-2">
-                                <h4 className="font-semibold text-slate-800">Their reply</h4>
-                                <Button
-                                    variant="outline"
-                                    size="sm"
-                                    className="gap-1"
-                                    onClick={() => loadThread(selected)}
-                                    disabled={threadLoading}
-                                >
-                                    {threadLoading ? (
-                                        <Loader2 className="h-4 w-4 animate-spin" />
-                                    ) : (
-                                        <ExternalLink className="h-4 w-4" />
-                                    )}
-                                    {isOutreachLead(selected)
-                                        ? 'Full conversation'
-                                        : 'Full thread (Smartlead)'}
-                                </Button>
+                                <h4 className="font-semibold text-slate-800">
+                                    {isCtaFormLead(selected) ? 'Form submission' : 'Their reply'}
+                                </h4>
+                                {!isCtaFormLead(selected) ? (
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        className="gap-1"
+                                        onClick={() => loadThread(selected)}
+                                        disabled={threadLoading}
+                                    >
+                                        {threadLoading ? (
+                                            <Loader2 className="h-4 w-4 animate-spin" />
+                                        ) : (
+                                            <ExternalLink className="h-4 w-4" />
+                                        )}
+                                        {isOutreachLead(selected)
+                                            ? 'Full conversation'
+                                            : 'Full thread (Smartlead)'}
+                                    </Button>
+                                ) : null}
                             </div>
                             {selected.last_reply_subject && (
                                 <p className="text-xs text-slate-500 mb-1">

frontend/src/pages/Settings.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
     ArrowLeft,
     ClipboardCopy,
+    FileInput,
     Loader2,
     ShieldAlert,
     Link2,
@@ -12,6 +13,7 @@ import {
 } from 'lucide-react';
 import AppShell from '@/components/layout/AppShell';
 import EmailGeneratorTab from '@/components/campaigns/EmailGeneratorTab';
+import CtaFormsSettings from '@/components/settings/CtaFormsSettings';
 import LinkedInConnectSettings from '@/components/settings/LinkedInConnectSettings';
 import ConnectMailboxSettings from '@/components/settings/ConnectMailboxSettings';
 import { Button } from '@/components/ui/button';
@@ -27,7 +29,7 @@ import { apiFetch } from '@/lib/api';
 import { cn } from '@/lib/utils';
 
 export default function Settings() {
-    /** 'main' | 'email_generator' — full-page generator inside Settings */
+    /** 'main' | 'email_generator' | 'cta_forms' */
     const [settingsPanel, setSettingsPanel] = useState('main');
     const [me, setMe] = useState(null);
     const [meLoading, setMeLoading] = useState(true);
@@ -209,6 +211,10 @@ export default function Settings() {
         );
     }
 
+    if (settingsPanel === 'cta_forms') {
+        return <CtaFormsSettings onBack={() => setSettingsPanel('main')} />;
+    }
+
     if (settingsPanel === 'email_generator') {
         return (
             <AppShell
@@ -238,8 +244,8 @@ export default function Settings() {
             title="Settings"
             subtitle={
                 isAdmin
-                    ? 'Invitations, members, LinkedIn, mailbox, Smartlead webhook, and email generator.'
-                    : 'LinkedIn, mailbox, Smartlead webhook, and email generator. Invites and member management require admin.'
+                    ? 'Invitations, members, LinkedIn, mailbox, CTA forms, Smartlead webhook, and email generator.'
+                    : 'LinkedIn, mailbox, CTA forms, Smartlead webhook, and email generator. Invites and member management require admin.'
             }
         >
             <div className="space-y-8 max-w-3xl">
@@ -456,6 +462,20 @@ export default function Settings() {
                     </Button>
                 </section>
 
+                <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+                    <div className="flex items-center gap-2 text-slate-800 font-semibold mb-2">
+                        <FileInput className="h-5 w-5 text-violet-600" />
+                        CTA Forms
+                    </div>
+                    <p className="text-sm text-slate-600 mb-4">
+                        Create embeddable lead forms for your WordPress site. Name fields like Name, Email,
+                        and Company — then copy the iframe or script embed code. Submissions appear in Leads.
+                    </p>
+                    <Button type="button" variant="outline" onClick={() => setSettingsPanel('cta_forms')}>
+                        Manage CTA forms
+                    </Button>
+                </section>
+
                 <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
                     <div className="flex items-center gap-2 text-slate-800 font-semibold mb-4">
                         <Link2 className="h-5 w-5 text-violet-600" />