You can build forms to submit information using the Form or JSON Schema Form components. Inputs are added to a form manually or Retool can generate them based on the schema of a connected PostgreSQL, MySQL, or MS SQL database. Form submission triggers a query or other specified action using the input values, such as making an API request or creating a new database record.
The Form and JSON Schema Form components work differently to create forms. Learn more about these differences and compare their features to decide which one meets your needs.
The Form component functions as a container—you add input components from the Components library and place them in the form. The Form component gives you complete control over the layout, allowing you to adjust the position or size of inputs however you want. You can also add other components to customize the form's appearance further.
You can set the Form component's initial data property to automatically populate inputs using other data, such as from a selected table row.
Try out the demo below to see the form in action (submissions are disabled), then read Create forms using the Form component to learn how to build this.
JSON Schema Form is based on the react-jsonschema-form library. You define which input fields to include and how they are rendered using JSON and UI schemas. JSON Schema Form displays input fields in a single-column layout only, and you cannot add other components to the form.
JSON Schema Form allows for more programmatic flexibility as you can dynamically change the JSON schema instead of making more manual changes. You can also use the Default Form data property of JSON Schema Form to automatically populate inputs using other data, such as a selected table row.
Try out the demo below to see the form in action (submissions are disabled), then read Create forms using the JSON Schema Form component to learn how to build this.
We recommend using the Form component in most cases. You should consider using JSON Schema Form if:
- You already use JSON schema-based forms. You can reuse your existing schema rather than build new forms from scratch.
- You need more flexibility. You can create programmatic workflows for your forms that would otherwise not be possible or need to be done manually with the Form component (e.g., complex validation needs or granular control of inputs with custom schema).
JSON Schema Form
Drag-and-drop of input components.
Inputs defined using in JSON.
Layout and customization
Full control over layout, supports all components, control properties in the editor.
Single-column layout, cannot use other components, control properties using JSON.
Changes and updates
Manual. Use the editor to update inputs and properties.
Mostly programmatic. Edit JSON to update inputs and properties.
Generate forms from an SQL database schema
Automatically adds inputs to the form and creates a query to insert records.
Automatically generates the JSON and UI schema.
Updated about 1 month ago
Learn more about using Form and JSON Schema Form.