Just like in every web application, HTML forms are essential in Insites. Because using plain HTML forms can get difficult to maintain with complex data structures, Insites has multiple tools that make working with forms much more manageable.
Prerequisites
To follow this tutorial, you must understand the following topics:
Basic concept
Form configuration is defined as Liquid files and is located within the folder.
If you develop your code as a module, the directory should be placed inside your module's or directory.
If your code is not a module, is placed directly inside the directory.
Each file is divided into two sections: configuration and implementation.
- Configuration section
This section is placed at the top of the file and marked with three dashes at the start and end of the section. It is a definition written in YAML that tells the platform to create/update the form endpoint with the given name and settings. These settings determine where to store and how to validate the data. Head to the Form Configuration Options section for a full list of configuration options.
- Implementation section
This section is the part that accepts HTML, Liquid Markup, and all the other functionalities made possible with Insites. This section is used to construct the form displayed to users. You can create the form in HTML, but using the tag handles many tasks behind the scenes and makes it easier to write clean code. Learn more about it in the Rendering Forms tutorial.
Important
Forms can be easily created and inserted in to your web application using the Instance Admin via the no code form builder. Please visit the following resources for more details:
Minimal form example
Every form configuration is strictly connected with the resource that can be a static class predefined by Insites or a dynamic record. A basic example of a form that enables users to create an object in a Table named 'Car' and accepts one property called 'colour' would look like this:
app/forms/car_form.liquid
As mentioned, the file is split into two sections. In the configuration part, you define the that is later used to include the form in the view, the that tells the platform which Table is connected with that form, and the that allows database item to be altered using this form endpoint.
In the implementation part, the form tag generates the HTML together with all inputs and properties required for successful form submission. The name of the text input, included in the form body, is provided by the form variable.
To display the form within a page, use the include_form tag that accepts the name of the form that you want to display:
app/views/pages/car.liquid
Now head to the page and check the form with text input followed by a submit button.
Important
Forms that are generated using the Form Builder are visible within the Instance Admin interface. Conversely, Forms created locally (such as through an IDE) are unable to utilise the features and functionalities offered by the Form Builder.
Please refer to our documentation on the Form Builder for more information on building Forms using the Instance Admin.
Related Topics
