Skip to content

PinionAI FormBuilder App

PinionAI FormBuilder is a no code enterprise app for designing, testing, and deploying schema-driven web forms for PinionAI forms. This application allows you to create complex form structures manually or via AI, configure advanced submission logic, and preview the results in a sandboxed environment. Once ready, merely copy and paste the json schema into a PinionAI Studio form configruation field.

🚀 Overview

PinionAI FormBuilder uses Schema-First Design. Every form you build is represented as a portable JSON object. This makes your forms easy to implement in PinionAI Studio, manage versions, and ultimately integrate forms into AI-based workflows.

Core Features

  • AI-Powered Generation: Use natural language prompts to generate entire form schemas in seconds.
  • Isolated Rendering: Forms are rendered in a secure iframe sandbox to ensure style isolation and security.
  • Dynamic Prefilling: Test how your forms handle external data using the built-in Data Editor.
  • Enterprise Submission Engine: Support for POST/PUT requests, OAuth2 authentication, and custom success workflows.
  • Rich Field Library: Includes specialized fields for Currency, Credit Cards, Hidden Metadata, and Embedded Iframes.

🛠 Application Modes

The application is divided into three primary modes, accessible via the top navigation bar:

1. Builder Mode

This is your workspace. Here you define the structure, logic, and aesthetic of your form.

  • Add Elements: Select from a wide variety of field types in the left sidebar.
  • AI Assistant: Describe the form you need (e.g., "A registration form for a tech conference with dietary requirements") and let Gemini build it for you.
  • Branding: Customize colors, logos, and button text to match your brand identity.
  • Submission Settings: Configure where the data goes when a user clicks submit.

2. Data Mode

The Data Editor allows you to provide a JSON object that "prefills" the form fields.

  • Mapping: If a key in your JSON matches the name of a form field, that field will be automatically populated.
  • Use Case: Perfect for testing "Edit Profile" forms or injecting session-based metadata (like User IDs) into hidden fields.

3. Renderer Mode

A live, interactive preview of your form.

  • Validation: Test required fields and regex patterns.
  • Submission Simulation: See exactly what the JSON payload looks like upon submission.
  • Debug View: Toggle the Submission Debugging feature to inspect API responses and client payloads directly on the success screen.

📋 Field Type Reference

Type Description
Text/TextArea Standard alphanumeric input fields, Numbers
Selection Select, Multi-Select, Radio, and Checkboxes.
Specialty Currency, Date, and Email.
Financial Validated fields for Card Number, Expiry, and CVV.
Display Text Non-input fields for instructions, headers, or legal disclaimers.
Iframe Embed external web content directly inside your form.
Hidden Fields that are submitted with the form but invisible to the end user. Great for tracking IDs or source tags.
Signature Signature field for users to sign, produces png image.

FormBuilder

⚙️ Submission & Debugging

API Integration

Configure the Submission API in the Builder sidebar:

  • Endpoint URL: The destination for your form data.
  • Method: Choose between POST or PUT.
  • OAuth2: Enable Client Credentials flow if your API requires a secure token.

Debugging Tools

In the Builder sidebar, you will find the Submission Debugging button.

  • Enabled: When the form is submitted in the Renderer, a dark console will appear on the success screen showing the exact JSON payload sent and the raw response from your server.
  • Disabled: When deployed, the user only sees your custom success message, hiding all technical metadata.

💾 Saving and Loading

  • Export: Download your current Form Schema or Prefill Data as a .json file. Take the content of this file and paste it into your form configuration field in PinionAI Studio.
  • Import: Upload an existing JSON schema to resume editing or testing.
  • View JSON: Use the "View JSON" button in the header to quickly inspect or copy the raw schema to your clipboard without leaving the app. You can paste the json into your form configuration field in PinionAI Studio.

💡 Pro Tips

  1. Name Your Fields: Always give your fields meaningful name attributes (e.g., user_email instead of field_2) to ensure your backend receives clean data.
  2. Regex Validation: Use the "Field Validation" section in the Builder to add complex rules like password strength or specific account number formats.
  3. Hidden Metadata: Use Hidden Fields combined with Data Mode to pass system-level information (like a session_id) through the form without bothering the user.