https://operator-stack-web-stg.onrender.com/_nuxt/C4AVSvzb.js

1import{_ as c,a as f}from"./De7ji8Y0.js";import{_ as g}from"./C5Bp6h9P.js";import{_ as b}from"./Baf5cy0I.js";import{_ as x}from"./DLzX97yS.js";import{d as y,c as v,I as m,b as s,w as i,e as t,g as o,a as w}from"./BJ-fXIum.js";const S=`<!-- Renders a contact form with email, name, message -->
2<div data-os-widget="form" data-os-form="contact"></div>`,h=`# JSON
3curl -X POST https://api.operatorstack.dev/v1/f/frm_abc123 \\
4  -H "Content-Type: application/json" \\
5  -d '{"email": "[email protected]", "company": "Acme Inc"}'
6
7# Form-urlencoded
8curl -X POST https://api.operatorstack.dev/v1/f/frm_abc123 \\
9  -d "[email protected]&company=Acme+Inc"`,k=`// Submit to a custom form
10await window.OperatorStack.submitForm('frm_abc123', {
11  email: '[email protected]',
12  company: 'Acme Inc',
13  budget: '$10k-50k'
14})
15
16// Send a contact message
17await window.OperatorStack.sendContactMessage({
18  email: '[email protected]',
19  name: 'Jane Doe',
20  message: 'I have a question about pricing.'
21})`,T=`<form action="https://api.operatorstack.dev/v1/f/frm_abc123" method="POST">
22  <input type="email" name="email" placeholder="Email" required />
23  <input type="text" name="company" placeholder="Company" />
24  <textarea name="feedback" placeholder="Your feedback"></textarea>
25  <input type="hidden" name="_redirect" value="https://yoursite.com/thanks" />
26  <button type="submit">Submit</button>
27</form>`,E=y({__name:"forms",setup(C){const l=[{name:"heading",type:"string",description:"Widget heading text",default:'"Get in touch"'},{name:"description",type:"string",description:"Subtitle below the heading"},{name:"buttonText",type:"string",description:"Submit button label",default:'"Send"'},{name:"successMessage",type:"string",description:"Message shown after submission",default:'"Thanks for reaching out!"'},{name:"fields",type:"string[]",description:'Visible fields: "email", "name?", "message?"'}],u=[{name:"_redirect",type:"string",description:"URL to redirect to after submission (returns 303)"},{name:"_subject",type:"string",description:"Email notification subject line"},{name:"_formName",type:"string",description:"Display name for the form in notifications"}];return(_,e)=>{const a=c,n=g,r=b,d=x,p=f;return w(),v("div",null,[e[12]||(e[12]=m('<div class="mb-10"><p class="text-xs font-mono uppercase tracking-widest text-gray-400 mb-2">Tools</p><h1 class="text-3xl font-bold tracking-tight mb-3">Forms</h1><p class="text-gray-500 text-lg leading-relaxed"> Contact forms and custom forms with schema-on-write. No form builder needed — just submit data and the schema builds itself. </p></div><hr class="border-gray-200 mb-10">',2)),s(a,{id:"overview"},{default:i(()=>[...e[0]||(e[0]=[o("Two types of forms",-1)])]),_:1}),e[13]||(e[13]=m('<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6"><div class="rounded-lg border border-gray-200 p-4"><h3 class="font-semibold text-sm text-gray-900 mb-1">Contact Form</h3><p class="text-[13px] text-gray-500 leading-relaxed"> Pre-built with email, name, and message fields. Renders as a widget on your page. </p></div><div class="rounded-lg border border-gray-200 p-4"><h3 class="font-semibold text-sm text-gray-900 mb-1">Custom Forms</h3><p class="text-[13px] text-gray-500 leading-relaxed"> Accept any JSON payload. Schema auto-infers from submissions. Each form gets a unique key. </p></div></div>',1)),s(a,{id:"contact-form"},{default:i(()=>[...e[1]||(e[1]=[o("Contact form widget",-1)])]),_:1}),e[14]||(e[14]=t("p",{class:"text-sm text-gray-600 leading-relaxed mb-4"}," The built-in contact form renders as a Shadow DOM widget with email, name, and message fields. ",-1)),s(n,{code:S}),s(r,{items:l}),s(a,{id:"custom-forms"},{default:i(()=>[...e[2]||(e[2]=[o("Custom forms",-1)])]),_:1}),e[15]||(e[15]=t("p",{class:"text-sm text-gray-600 leading-relaxed mb-4"}," Custom forms use a schema-on-write approach: you don’t define fields upfront. The schema is inferred from the first submission and extended with each new one. ",-1)),s(a,{id:"form-keys",level:3},{default:i(()=>[...e[3]||(e[3]=[o("Form keys",-1)])]),_:1}),e[16]||(e[16]=t("p",{class:"text-sm text-gray-600 leading-relaxed mb-4"},[o(" Every custom form gets a unique key (e.g., "),t("code",{class:"font-mono text-xs bg-gray-100 px-1.5 py-0.5 rounded"}

27,"frm_abc123"),o("). Use this key for API submissions and SDK calls. ")],-1)),s(a,{id:"public-endpoint"},{default:i(()=>[...e[4]||(e[4]=[o("Public form endpoint",-1)])]),_:1}),e[17]||(e[17]=t("p",{class:"text-sm text-gray-600 leading-relaxed mb-4"}," Submit to any form using its form key. No authentication required. Accepts JSON, form-urlencoded, or multipart data. ",-1)),s(n,{filename:"curl",code:h}),s(a,{id:"reserved-fields",level:3},{default:i(()=>[...e[5]||(e[5]=[o("Reserved fields",-1)])]),_:1}),e[18]||(e[18]=t("p",{class:"text-sm text-gray-600 leading-relaxed mb-4"}," Fields prefixed with an underscore are metadata — they’re processed but not stored in the submission data. ",-1)),s(r,{items:u}),s(a,{id:"sdk"},{default:i(()=>[...e[6]||(e[6]=[o("SDK usage",-1)])]),_:1}),s(n,{filename:"app.js",code:k}),s(a,{id:"html-form"},{default:i(()=>[...e[7]||(e[7]=[o("Plain HTML form",-1)])]),_:1}),e[19]||(e[19]=t("p",{class:"text-sm text-gray-600 leading-relaxed mb-4"},[o(" You can submit to custom forms using a standard HTML form — no JavaScript needed. Add a "),t("code",{class:"font-mono text-xs bg-gray-100 px-1.5 py-0.5 rounded"},"_redirect"),o(" hidden field to redirect after submission. ")],-1)),s(n,{filename:"form.html",code:T}),s(a,{id:"api"},{default:i(()=>[...e[8]||(e[8]=[o("API endpoints",-1)])]),_:1}),s(d,{method:"POST",path:"/v1/f/{form_key}",description:"Submit data to a custom form. Accepts JSON, form-urlencoded, or multipart. No auth required.",auth:"public"}),s(d,{method:"POST",path:"/v1/projects/{projectKey}/contact",description:"Submit a contact form message.",auth:"public"}),s(a,{id:"submissions"},{default:i(()=>[...e[9]||(e[9]=[o("Submission management",-1)])]),_:1}),e[20]||(e[20]=t("p",{class:"text-sm text-gray-600 leading-relaxed mb-4"}," Every submission has a status that helps you triage incoming data: ",-1)),e[21]||(e[21]=t("ul",{class:"text-sm text-gray-600 space-y-1 mb-4 list-disc list-inside"},[t("li",null,[t("strong",null,"New"),o(" — fresh submission, not yet reviewed")]),t("li",null,[t("strong",null,"Read"),o(" — you’ve seen it")]),t("li",null,[t("strong",null,"Archived"),o(" — processed and filed away")])],-1)),e[22]||(e[22]=t("p",{class:"text-sm text-gray-600 leading-relaxed mb-4"}," Filter submissions by status in the dashboard. Status changes are logged to the audit trail. ",-1)),s(a,{id:"export"},{default:i(()=>[...e[10]||(e[10]=[o("CSV export",-1)])]),_:1}),e[23]||(e[23]=t("p",{class:"text-sm text-gray-600 leading-relaxed mb-4"},[o(" Export submissions to CSV from the dashboard. Columns are auto-generated from the form schema with a "),t("code",{class:"font-mono text-xs bg-gray-100 px-1.5 py-0.5 rounded"},"submitted_at"),o(" timestamp. Exports include UTF-8 BOM for Excel compatibility and are capped at 10,000 rows. ")],-1)),s(a,{id:"dashboard"},{default:i(()=>[...e[11]||(e[11]=[o("Dashboard features",-1)])]),_:1}),e[24]||(e[24]=t("ul",{class:"text-sm text-gray-600 space-y-1 mb-4 list-disc list-inside"},[t("li",null,"Auto-generated table columns from submission schema"),t("li",null,"Form configuration panel with heading, description, and button text"),t("li",null,"Submission count and recent activity"),t("li",null,"Status management (new, read, archived) with filtering"),t("li",null,"CSV export of submissions"),t("li",null," Setup tab with copyable code snippets for 4 integration patterns: HTML form, JavaScript SDK, HTTP API, and AI prompt ")],-1)),s(p,{prev:{label:"Waitlist",to:"/docs/waitlist"},next:{label:"Analytics",to:"/docs/analytics"}})])}}});export{E as default};