Rendering a Form on a Page
Last updated on June 26, 2024.
This document guides you on rendering a form on a page.
Prerequisites
To understand the concepts discussed in this document, you must first understand how to use the Liquid template language and form configuration options on Insites. Please visit the following links for more details:
Defining the form implementation
The examples on this article uses the Form example from the previous tutorial:
Rendering the form as HTML
To generate and display form configuration HTML code, use the include_form tag on any page, partial, or layout.
The first argument is the name of the form configuration you want to display; the second is the 'key: value' list of variables accessible in the form.
Example:
Form Tag
Using the form tag is the easiest way to generate an HTML form. It uses the context provided by the form configuration to define required attributes and inputs.
-
action
is defined based on resource context. It is translated to the correct API endpoint.
-
method
is defined based on the parameter passed to the include_form tag.
When nothing or is passed, the method will be set to . Otherwise, it is set to . The method needs to be explicitly defined.
Examples:
-
hidden inputs
the form tag generates multiple inputs.
Make sure to add necessary information if you manually create your HTML form or use third-party tools like curl to construct your request. Required request parameters are:
- or
tells Insites which form to use when processing a request
identifies the form object type (usually the name of your Table)
is required when the authorisation header is not set; otherwise, it can be skipped
Form Builder Object
Important
You can use the Instance Admin to construct forms quickly with a reduced risk of errors. For more details, please visit the Form Builder documentation.
The object is only accessible within the form configuration file because this configuration defines its state. Below is a table of properties:
| Property |
Description |
|
URL of form configuration API endpoint; usually passed as a form action |
|
list of validation errors raised on failed form submission. |
|
List of fields that can be altered in the form defined in the form configuration object.
Every field has the following properties:
- : is what you pass as a name in the form input field to access the property
- : is the value assigned to the form object property; this might be different than the value stored in the database when validation is raised
- : validation rules and errors
- : field property options
|
| name of form configuration |
| form configuration resource name (usually your Table name) |
| form configuration resource owner |
| an object containing data rendered within the form tag |
