Using Forms Introduction

Prerequisites

To follow this tutorial, you must understand the following topics:

• Liquid
• Pages

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.
  

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 'color' would look like this:

app/forms/car_form.liquid

---
name: car_form
resource: car
fields:
  properties:
    color: {}
---

{% form %}
  <input name="{{ form.fields.properties.color.name }}" />
  <button>Save</button>
{% endform %}

As mentioned, the file is split into two sections. In the configuration part, you define the that you use to include the form in a page, the that tells the platform which table the form saves to, and , which lists the fields this form is allowed to change.
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

{% include_form "modules/minimal_form/car_form" %}

Now head to the page and check the form with text input followed by a submit button.

Related Topics

• Form Configuration
• Form Rendering
• Form Server Side Processing
• Flash Messages
• Default Payload
• Validation