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:

• Liquid Markup
• Form Configuration Options

Defining the form implementation

The examples on this article uses the Form example from the previous tutorial:

<p>{{ form.fields.properties.greeting.value }}</p>

{% form html-class: "w-50" %}
  <div class="form-group">
    <label for="form_email">
      Email
    </label>

    <input
      class="form-control"
      name="{{ form.fields.properties.email.name }}"
      value="{{ form.fields.properties.email.value }}"
      id="form_email"
      type="email"
     >

     <p>{{ form.errors["properties.email"] }}</p>
  </div>

  <button class="btn btn-primary">Save</button>
{% endform %}

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:

{% include_form "modules/full_form/full_form_example", id: params.id %}

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:

  Copy

  ---
  name: blog_post_delete
  resource: modules/dashboard_blog/blog_post
  resource_owner: anyone
  fields:
  redirect_to: dashboard/blog
  ---
  {% form method: "delete" %}
    <button class="btn btn-link">Delete</button>
  {% endform %}

• hidden inputs
  the form tag generates multiple inputs.
  

  Copy

  <input name="utf8" type="hidden" value="✓">
  <input type="hidden" name="authenticity_token" value="Dl+Oaignq4h7fe577kMJBURm0FaFYRr5qrBx2OngXm28SOqaTGR8vdkReHOevfzNBN9HKebr/z46sHyEjPm9NA==">
  <input type="hidden" name="form_id" value="4099">
  <input type="hidden" name="page_id" value="5492">
  <input type="hidden" name="slug" value="full-form-example">
  <input type="hidden" name="slug2">
  <input type="hidden" name="slug3">
  <input type="hidden" name="resource_id" value="new">
  <input type="hidden" name="parent_resource_id" value="example_record">
  <input type="hidden" name="parent_resource_class" value="CustomModelType">

  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 authorization header is not set; otherwise, it can be skipped

Form Builder Object

The object is only accessible within the form configuration file because this configuration defines its state. Below is a table of properties: