FormBlock

Form Block

Template ID	Required
oggeh-form	No

A set of templates for displaying the content of a single form block.

Example:

<!-- Form header template -->
<template id="oggeh-form-header">
  <div class="form-group col-md-12">
    <div class="field-label">
      {{ label }}
    </div>
    <div class="field-input">
      <{{ subtype }}>{{ value }}</{{ subtype }}>
    </div>
    <small>{{ description }}</small>
  </div>
</template>
<!-- Form paragraph template -->
<template id="oggeh-form-paragraph">
  <div class="form-group col-md-12">
    <div class="field-label">
      {{ label }}
    </div>
    <div class="field-input">
      <{{ subtype }}>{{ value }}</{{ subtype }}>
    </div>
    <small>{{ description }}</small>
  </div>
</template>
<!-- Form horizontal line template -->
<template id="oggeh-form-hr">
  <div class="form-group col-md-12">
    <hr>
    <small>{{ description }}</small>
  </div>
</template>
<!-- Form text input template -->
<template id="oggeh-form-text">
  <div class="form-group col-md-12">
    <div class="field-label">
      {{ label }}<span>{{ required }}</span>
    </div>
    <div class="field-input">
      <input type="{{ subtype }}" name="{{ name }}" placeholder="{{ placeholder }}" {{ required }}>
    </div>
    <small>{{ description }}</small>
  </div>
</template>
<!-- Form textarea template -->
<template id="oggeh-form-textarea">
  <div class="form-group col-md-12">
    <div class="field-label">
      {{ label }}<span>{{ required }}</span>
    </div>
    <div class="field-input">
      <textarea name="{{ name }}" placeholder="{{ placeholder }}" {{ required }}>{{ value }}</textarea>
    </div>
    <small>{{ description }}</small>
  </div>
</template>
<!-- Form select template -->
<template id="oggeh-form-select">
  <div class="form-group col-md-12">
    <div class="field-label">
      {{ label }}<span>{{ required }}</span>
    </div>
    <div class="field-input">
      <select name="{{ name }}" placeholder="{{ placeholder }}" {{ required }}>
        {{ options }}
      </select>
    </div>
    <small>{{ description }}</small>
  </div>
</template>
<!-- Form select option template -->
<template id="oggeh-form-select-option">
  <option value="{{ value }}">{{ label }}</option>
</template>
<!-- Form checkbox input template -->
<template id="oggeh-form-checkbox">
  <div class="form-group col-md-12">
    <div class="field-input">
      <input type="checkbox" id="{{ name }}" name="{{ name }}" {{ required }}>
      <label for="{{ name }}">{{ label }}</label>
    </div>
    <small>{{ description }}</small>
  </div>
</template>
<!-- Form checkbox group input template -->
<template id="oggeh-form-checkbox-group">
  <div class="form-group col-md-12">
    <div class="field-label">
      {{ label }}<span>{{ required }}</span>
    </div>
    <div class="field-input">
      {{ options }}
    </div>
    <small>{{ description }}</small>
  </div>
</template>
<!-- Form checkbox group option input template -->
<template id="oggeh-form-checkbox-group-option">
  <div class="checkbox-option">
    <input type="checkbox" name="{{ name }}" id="{{ name }}-{{ value }}" value="{{ value }}" {{ required }}>
    <label for="{{ name }}-{{ value }}">{{ label }}</label>
  </div>
</template>
<!-- Form radio input template -->
<template id="oggeh-form-radio-group">
  <div class="form-group col-md-12">
    <div class="field-label">
      {{ label }}<span>{{ required }}</span>
    </div>
    <div class="field-input">
      {{ options }}
    </div>
    <small>{{ description }}</small>
  </div>
</template>
<!-- Form radio input option template -->
<template id="oggeh-form-radio-group-option">
  <div class="radio-option">
    <input type="radio" name="{{ name }}" id="{{ name }}-{{value }}" value="{{value }}" {{ required }}>
    <label for="{{ name }}-{{value }}">{{ label }}</label>
  </div>
</template>
<!-- Form date input template -->
<template id="oggeh-form-date">
  <div class="form-group col-md-12">
    <div class="field-label">
      {{ label }}<span>{{ required }}</span>
    </div>
    <div class="field-input">
      <input type="date" name="{{ name }}" placeholder="{{ placeholder }}" {{ required }}>
    </div>
    <small>{{ description }}</small>
  </div>
</template>
<!-- Form file input template -->
<template id="oggeh-form-file">
  <div class="form-group col-md-12">
    <div class="field-label">
      {{ label }}<span>{{ required }}</span>
    </div>
    <div class="field-input">
      <input type="file" name="{{ name }}" placeholder="{{ placeholder }}" {{ required }}>
    </div>
    <small>{{ description }}</small>
  </div>
</template>
<!-- Main form container template -->
<template id="oggeh-form">
  <div class="grid-item col-lg-{{ size_x }}">
    <div class="content">
      <h3>{{ title }}</h3>
      <div class="form">
        <form data-oggeh-form-post>
          <div class="row">
            <slot></slot>
          </div>
          <div class="form-button">
            <button type="submit">Submit</button>
          </div>
        </form>
        <div data-oggeh-form-success class="alert alert-success alert-dismissible hidden" role="alert">
            <p>Thank you. We will get back to you at the earliest.</p>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>   
        </div>
        <div data-oggeh-form-error class="alert alert-danger alert-dismissible hidden" role="alert">
            <p>Unexpected error! Please try again later...</p>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
      </div>
    </div>
  </div>
</template>

Note: to understand how forms are being handled, see Handling Forms,

Example API Response Object

{
    "type": "form",
    "col": 7,
    "row": 4,
    "size_x": 6,
    "size_y": 4,
    "title": "Test Form Block",
    "form": [
        {
            "label": "Header",
            "type": "header",
            "subtype": "h3"
        },
        {
            "label": "Summary",
            "type": "paragraph",
            "subtype": "p"
        },
        {
            "type": "hr",
            "description": "Helper text"
        },
        {
            "label": "Text Field",
            "name": "text-1742931886202",
            "placeholder": "Enter text",
            "required": "true",
            "type": "text",
            "subtype": "text",
            "description": "Helper text"
        },
        {
            "label": "Text Area",
            "name": "textarea-1742931895615",
            "placeholder": "Enter text",
            "type": "textarea",
            "description": "Helper text"
        },
        {
            "label": "Select",
            "name": "select-1742931903400",
            "placeholder": "Select option",
            "type": "select",
            "options": [
                {
                    "value": "option-1",
                    "label": "Option 1"
                },
                {
                    "value": "option-2",
                    "label": "Option 2"
                }
            ],
            "description": "Helper text"
        },
        {
            "label": "Radio",
            "name": "radio-group-1742931918310",
            "type": "radio-group",
            "options": [
                {
                    "value": "option-1",
                    "label": "Option 1"
                },
                {
                    "value": "option-2",
                    "label": "Option 2"
                }
            ],
            "description": "Helper text"
        },
        {
            "label": "Toggle",
            "name": "checkbox-1742931931544",
            "toggle": "true",
            "type": "checkbox",
            "description": "Helper text"
        },
        {
            "label": "Checkbox",
            "name": "checkbox-group-1742931945344",
            "type": "checkbox-group",
            "options": [
                {
                    "value": "option-1",
                    "label": "Option 1"
                },
                {
                    "value": "option-2",
                    "label": "Option 2"
                }
            ],
            "description": "Helper text"
        },
        {
            "label": "Date",
            "name": "date-1742931955217",
            "type": "date",
            "description": "Helper text"
        },
        {
            "label": "File",
            "name": "file-1742931961471",
            "type": "file"
        }
    ],
    "token": "de2dc3b00d4145e366e780c76f22de82"
}