Skip to content

Instantly share code, notes, and snippets.

@panoply

panoply/fields.schema

Last active December 11, 2024 16:53
Show Gist options
  • Save panoply/4d05d4b825e7a35f8c28b0a6afb6b4d1 to your computer and use it in GitHub Desktop.
Save panoply/4d05d4b825e7a35f8c28b0a6afb6b4d1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fields.schema
{
"form_fields": [
{
"type": "heading",
"name": "Heading",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading"
},
{
"type": "color",
"id": "fc",
"label": "Font Color",
"default": "#FFFFFF"
},
{
"type": "select",
"id": "ts",
"label": "Headline Style",
"default": "",
"options": [
{
"value": "",
"label": "None"
},
{
"value": "upper",
"label": "Uppercase"
},
{
"value": "italic",
"label": "Italic"
}
]
},
{
"type": "range",
"id": "fs",
"label": "Font Size",
"min": 1,
"max": 50,
"step": 0.5,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "fw",
"label": "Font Weight",
"min": 100,
"max": 900,
"step": 100,
"default": 500
}
]
},
{
"type": "paragraph",
"name": "Paragraph",
"settings": [
{
"type": "header",
"content": "Paragraph",
"info": "Renders a block of text content"
},
{
"type": "richtext",
"id": "content",
"label": "Content",
"info": "The text to render"
},
{
"type": "header",
"content": "Gutter",
"info": "Control gutter spacing"
},
{
"type": "range",
"id": "mt",
"label": "Top",
"info": "The margin to apply from top",
"min": 0,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "mb",
"label": "Bottom",
"info": "The margin to apply from bottom",
"min": 0,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "header",
"content": "Layout",
"info": "Control layout and alignment of the grid system"
},
{
"type": "range",
"id": "xl",
"label": "Desktop Columns",
"info": "The amount of columns in desktop",
"min": 1,
"max": 12,
"step": 1,
"default": 12
},
{
"type": "range",
"id": "md",
"label": "Tablet Columns",
"info": "The amount of columns in tablet",
"min": 1,
"max": 12,
"step": 1,
"default": 12
},
{
"type": "range",
"id": "xs",
"label": "Mobile Columns",
"info": "The amount of columns in mobile",
"min": 1,
"max": 12,
"step": 1,
"default": 12
}
]
},
{
"type": "textarea",
"name": "Textarea",
"settings": [
{
"type": "header",
"content": "Textarea Input",
"info": "Renders a Textarea container"
},
{
"type": "text",
"id": "label",
"label": "Label",
"info": "Defines the label of the textarea"
},
{
"type": "text",
"id": "placeholder",
"label": "Placeholder",
"info": "Describes an expected value for the textarea"
},
{
"type": "checkbox",
"id": "require",
"label": "Require",
"default": true,
"info": "Whether or input is required"
},
{
"type": "checkbox",
"id": "required",
"info": "The form requires this input to be filled",
"label": "Required"
},
{
"type": "header",
"content": "Layout",
"info": "Control layout and alignment of the grid system."
},
{
"type": "range",
"id": "height",
"label": "Height",
"info": "The height of the textarea input",
"min": 1,
"max": 100,
"step": 1,
"default": 25
},
{
"type": "header",
"content": "Gutter",
"info": "Control gutter spacing"
},
{
"type": "range",
"id": "mt",
"label": "Top",
"info": "The margin to apply from top",
"min": 0,
"max": 5,
"step": 1,
"default": 0
},
{
"type": "range",
"id": "mb",
"label": "Bottom",
"info": "The margin to apply from bottom",
"min": 0,
"max": 5,
"step": 1,
"default": 3
}
]
},
{
"type": "text",
"name": "Input",
"settings": [
{
"type": "header",
"content": "Input Field",
"info": "A text input field to render in the form."
},
{
"type": "text",
"id": "placeholder",
"label": "Placeholder",
"info": "Describes an expected value of the input"
},
{
"type": "text",
"id": "name",
"label": "Name",
"info": "Defines the name of the input field"
},
{
"type": "select",
"id": "autocomplete",
"label": "Autocomplete",
"info": "See [Values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values) for reference.",
"default": "off",
"options": [
{
"value": "off",
"label": "Disabled"
},
{
"value": "on",
"label": "Enabled"
},
{
"value": "name",
"label": "Name"
},
{
"value": "given-name",
"label": "First Name"
},
{
"value": "additional-name",
"label": "Middle name"
},
{
"value": "family-name",
"label": "Last Name"
},
{
"value": "nickname",
"label": "Nickname or Handle"
},
{
"value": "organization",
"label": "Company or Oganization name"
},
{
"value": "street-address",
"label": "Street Address"
},
{
"value": "postal-code",
"label": "Postal Code"
}
]
},
{
"type": "checkbox",
"id": "required",
"label": "Required",
"default": false,
"info": "Whether or not the value is required"
},
{
"type": "header",
"content": "Validation",
"info": "Validation control for expected input text value"
},
{
"type": "range",
"id": "minlength",
"label": "Minimum Length",
"info": "The minimum number of characters required",
"min": 1,
"max": 75,
"step": 1,
"default": 1
},
{
"type": "range",
"id": "maxlength",
"label": "Maximum Length",
"info": "The maximum number of characters required",
"min": 1,
"max": 75,
"step": 1,
"default": 50
},
{
"type": "header",
"content": "Gutter",
"info": "Control gutter spacing"
},
{
"type": "range",
"id": "mt",
"label": "Top",
"info": "The margin to apply from top",
"min": 0,
"max": 5,
"step": 1,
"default": 0
},
{
"type": "range",
"id": "mb",
"label": "Bottom",
"info": "The margin to apply from bottom",
"min": 0,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "header",
"content": "Layout",
"info": "Control layout and alignment of the grid system"
},
{
"type": "range",
"id": "xl",
"label": "Desktop Columns",
"info": "The amount of columns in desktop",
"min": 1,
"max": 12,
"step": 1,
"default": 12
},
{
"type": "range",
"id": "md",
"label": "Tablet Columns",
"info": "The amount of columns in tablet",
"min": 1,
"max": 12,
"step": 1,
"default": 12
},
{
"type": "range",
"id": "xs",
"label": "Mobile Columns",
"info": "The amount of columns in mobile",
"min": 1,
"max": 12,
"step": 1,
"default": 12
}
]
},
{
"type": "email",
"name": "Email",
"limit": 1,
"settings": [
{
"type": "header",
"content": "E-mail Address",
"info": "An E-mail address input field to render in the form."
},
{
"type": "text",
"id": "placeholder",
"label": "Placeholder",
"info": "The placeholder (label) value",
"default": "Email Address"
},
{
"type": "text",
"id": "name",
"label": "Name",
"info": "Defines the name of the input field",
"default": "email"
},
{
"type": "checkbox",
"id": "autocomplete",
"label": "Autocomplete",
"default": false,
"info": "Whether or not to allow autocompletion"
},
{
"type": "checkbox",
"id": "required",
"label": "Required",
"default": true,
"info": "Whether or not the value is required"
},
{
"type": "checkbox",
"id": "multiple",
"label": "Multiple",
"default": false,
"info": "Whether to allow multiple emails be defined"
},
{
"type": "header",
"content": "Gutter",
"info": "Control gutter spacing"
},
{
"type": "range",
"id": "mt",
"label": "Top",
"info": "The margin to apply from top",
"min": 0,
"max": 5,
"step": 1,
"default": 0
},
{
"type": "range",
"id": "mb",
"label": "Bottom",
"info": "The margin to apply from bottom",
"min": 0,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "header",
"content": "Layout",
"info": "Control layout and alignment of the grid system"
},
{
"type": "range",
"id": "xl",
"label": "Desktop Columns",
"info": "The amount of columns in desktop",
"min": 1,
"max": 12,
"step": 1,
"default": 12
},
{
"type": "range",
"id": "md",
"label": "Tablet Columns",
"info": "The amount of columns in tablet",
"min": 1,
"max": 12,
"step": 1,
"default": 12
},
{
"type": "range",
"id": "xs",
"label": "Mobile Columns",
"info": "The amount of columns in mobile",
"min": 1,
"max": 12,
"step": 1,
"default": 12
}
]
},
{
"type": "tel",
"name": "Telephone",
"settings": [
{
"type": "header",
"content": "Phone Number Field",
"info": "A telephone number input field to render in the form."
},
{
"type": "text",
"id": "name",
"label": "Name",
"info": "Defines the name of the telephone field",
"default": "telephone"
},
{
"type": "text",
"id": "placeholder",
"label": "Placeholder",
"info": "Describes an expected value of the input"
},
{
"type": "checkbox",
"id": "autocomplete",
"label": "Autocomplete",
"default": false,
"info": "Whether or not to allow autocompletion"
},
{
"type": "checkbox",
"id": "code",
"label": "Country Code",
"default": false,
"info": "Whether or not to provide a country calling code"
},
{
"type": "checkbox",
"id": "require",
"label": "Require",
"default": false,
"info": "Whether or not the value is required"
},
{
"type": "header",
"content": "Gutter",
"info": "Control gutter spacing"
},
{
"type": "range",
"id": "mt",
"label": "Top",
"info": "The margin to apply from top",
"min": 0,
"max": 5,
"step": 1,
"default": 0
},
{
"type": "range",
"id": "mb",
"label": "Bottom",
"info": "The margin to apply from bottom",
"min": 0,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "header",
"content": "Layout",
"info": "Control layout and alignment of the grid system"
},
{
"type": "range",
"id": "xl",
"label": "Desktop Columns",
"info": "The amount of columns in desktop",
"min": 1,
"max": 12,
"step": 1,
"default": 12
},
{
"type": "range",
"id": "md",
"label": "Tablet Columns",
"info": "The amount of columns in tablet",
"min": 1,
"max": 12,
"step": 1,
"default": 12
},
{
"type": "range",
"id": "xs",
"label": "Mobile Columns",
"info": "The amount of columns in mobile",
"min": 1,
"max": 12,
"step": 1,
"default": 12
}
]
},
{
"type": "number",
"name": "Number",
"settings": [
{
"type": "header",
"content": "Number Input",
"info": "Renders a Numeric input field"
},
{
"type": "text",
"id": "name",
"label": "Name",
"info": "Defines the name of the number field"
},
{
"type": "text",
"id": "placeholder",
"label": "Placeholder",
"info": "The placeholder to render"
},
{
"type": "checkbox",
"id": "required",
"info": "The form requires this input to be filled",
"label": "Required"
},
{
"type": "header",
"content": "Gutter",
"info": "Control gutter spacing"
},
{
"type": "range",
"id": "mt",
"label": "Top",
"info": "The margin to apply from top",
"min": 0,
"max": 5,
"step": 1,
"default": 0
},
{
"type": "range",
"id": "mb",
"label": "Bottom",
"info": "The margin to apply from bottom",
"min": 0,
"max": 5,
"step": 1,
"default": 3
}
]
},
{
"type": "switch",
"name": "Switch",
"settings": [
{
"type": "header",
"content": "Switch Input",
"info": "A toggle switch (checkbox) input field"
},
{
"type": "text",
"id": "name",
"label": "Name",
"info": "Defines the name of the switch field"
},
{
"type": "text",
"id": "label",
"label": "Label",
"info": "The label which describes the switch"
},
{
"type": "checkbox",
"id": "consent",
"info": "Whether or not the switch is a consent",
"label": "Consent (GDRP)",
"default": false
},
{
"type": "checkbox",
"id": "default",
"info": "The default state to use",
"label": "on/off",
"default": false
},
{
"type": "header",
"content": "Layout and Sizing",
"info": "Control layout, style and/or alignment of the switch"
},
{
"type": "select",
"id": "row",
"label": "Position",
"default": "jc-between",
"options": [
{
"value": "jc-between",
"label": "Between"
},
{
"value": "jc-start",
"label": "Left"
},
{
"value": "jc-center",
"label": "Center"
},
{
"value": "jc-end",
"label": "Right"
}
]
},
{
"type": "select",
"id": "size",
"label": "Sizing",
"default": "fm-switch",
"options": [
{
"value": "fm-switch-sm",
"label": "Between"
},
{
"value": "fm-switch",
"label": "Medium"
},
{
"value": "fm-switch-lg",
"label": "Large"
}
]
},
{
"type": "header",
"content": "Gutter",
"info": "Control gutter spacing"
},
{
"type": "range",
"id": "mt",
"label": "Top",
"info": "The margin to apply from top",
"min": 0,
"max": 5,
"step": 1,
"default": 0
},
{
"type": "range",
"id": "mb",
"label": "Bottom",
"info": "The margin to apply from bottom",
"min": 0,
"max": 5,
"step": 1,
"default": 3
}
]
},
{
"type": "checkbox",
"name": "Checkbox",
"settings": [
{
"type": "header",
"content": "Checkbox Input",
"info": "Renders a traditional Checkout input field"
},
{
"type": "text",
"id": "label",
"label": "Label",
"info": "The Label to render atop of the input (optional)"
},
{
"type": "checkbox",
"id": "required",
"info": "The form requires this input to be filled",
"label": "Required"
},
{
"type": "checkbox",
"id": "validate",
"info": "Whether or not this input should be validated",
"label": "Validate"
},
{
"type": "header",
"content": "Gutter",
"info": "Control gutter spacing"
},
{
"type": "range",
"id": "mt",
"label": "Top",
"info": "The margin to apply from top",
"min": 0,
"max": 5,
"step": 1,
"default": 0
},
{
"type": "range",
"id": "mb",
"label": "Bottom",
"info": "The margin to apply from bottom",
"min": 0,
"max": 5,
"step": 1,
"default": 3
}
]
},
{
"type": "dropdown",
"name": "Dropdown",
"settings": [
{
"type": "header",
"content": "Option Dropdown",
"info": "A list of options to select from"
},
{
"type": "textarea",
"id": "items",
"label": "items",
"default": "Item 1\nItem 2\nItem 3\netc etc",
"info": "Separate each item to render on newline"
},
{
"type": "text",
"id": "name",
"label": "Name",
"info": "Defines the name of the dropdown."
},
{
"type": "text",
"id": "placeholder",
"label": "Placeholder",
"info": "Defines the placeholder of the dropdown."
},
{
"type": "checkbox",
"id": "required",
"label": "Required",
"default": true,
"info": "Whether or not to require a selection"
},
{
"type": "header",
"content": "Gutter",
"info": "Control gutter spacing"
},
{
"type": "range",
"id": "mt",
"label": "Top",
"info": "The margin to apply from top",
"min": 0,
"max": 5,
"step": 1,
"default": 0
},
{
"type": "range",
"id": "mb",
"label": "Bottom",
"info": "The margin to apply from bottom",
"min": 0,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "header",
"content": "Layout",
"info": "Control layout and alignment of the grid system"
},
{
"type": "range",
"id": "xl",
"label": "Desktop Columns",
"info": "The amount of columns in desktop",
"min": 1,
"max": 12,
"step": 1,
"default": 12
},
{
"type": "range",
"id": "md",
"label": "Tablet Columns",
"info": "The amount of columns in tablet",
"min": 1,
"max": 12,
"step": 1,
"default": 12
},
{
"type": "range",
"id": "xs",
"label": "Mobile Columns",
"info": "The amount of columns in mobile",
"min": 1,
"max": 12,
"step": 1,
"default": 12
}
]
},
{
"type": "hidden",
"name": "Hidden",
"settings": [
{
"type": "header",
"content": "Hidden Field",
"info": "A hidden text field pre-populated with a value"
},
{
"type": "text",
"id": "value",
"label": "Value",
"info": "The value of the hidden input field"
},
{
"type": "text",
"id": "name",
"label": "Name",
"info": "Defines the name of the input field"
}
]
}
]
}
Raw
form-fields.liquid
{% liquid
if block.name contains '['
assign id = block.name | replace: '[', '-' | remove: ']' | handleize
else
assign id = block.name | handleize
endif
%}
{% if type == 'heading' %}
<div class="col-12 tc mt-{{ block.mt }} mb-{{ block.mb }}">
<h1 class="mb-4">
{{ block.title }}
</h1>
<h4 class="my-3 fc-dark-gray italic uncase">
{{ block.subtitle }}
</h4>
<div class="{{ block.fs }} {{ block.ta }}">
{{ block.description }}
</div>
</div>
{% elsif type == 'hidden' %}
<input
type="hidden"
name="{{ block.name }}"
class="d-none"
value="{{ block.value }}"
spx-node="form.fieldInput">
{% elsif type == 'text' %}
<div class="col-{{ block.xs }} col-md-{{ block.md }} col-xl-{{ block.xl }} mt-{{ block.mt }} mb-{{ block.mb }}">
<div class="fm-float">
<input
id="{{ id }}"
type="{{ type }}"
name="{{ block.name }}"
class="fm-input"
autocomplete="{{ block.autocomplete }}"
maxlength="{{ block.maxlength }}"
minlength="{{ block.minlength }}"
placeholder="{{ block.placeholder }}"
required="{{ block.required }}"
spx-node="form.fieldInput"
spx@input="form.onInput">
<label
for="{{ id }}"
class="fm-label upper">
{{ block.placeholder }}
</label>
</div>
</div>
{% elsif type == 'file' %}
<div class="col-{{ block.xs }} col-md-{{ block.md }} col-xl-{{ block.xl }}">
<input
id="{{ id }}"
type="{{ type }}"
name="{{ block.name }}"
class="fm-input"
multiple="{{ block.multiple }}"
required="{{ block.required }}"
spx-node="form.fieldInput"
spx@input="form.onInput">
<label
for="{{ id }}"
class="fm-label upper">
{{ block.placeholder }}
</label>
</div>
{% elsif type == 'email' %}
<div class="col-{{ block.xs }} col-md-{{ block.md }} col-xl-{{ block.xl }} mt-{{ block.mt }} mb-{{ block.mb }}">
<div class="fm-float">
<input
id="{{ id }}"
type="{{ type }}"
name="{{ block.name }}"
class="fm-input"
autocomplete="{{ block.autocomplete }}"
placeholder="{{ block.placeholder }}"
required="{{ block.required }}"
spx-node="form.fieldInput"
spx@input="form.onInput">
<label
for="{{ id }}"
class="fm-label upper">
{{ block.placeholder }}
</label>
</div>
</div>
{% elsif type == 'tel' %}
<div class="col-{{ block.xs }} col-md-{{ block.md }} col-xl-{{ block.xl }} mt-{{ block.mt }} mb-{{ block.mb }}">
<div class="fm-float">
<input
id="{{ id }}"
type="{{ type }}"
name="{{ block.name }}"
class="fm-input"
autocomplete="{{ block.autocomplete }}"
required="{{ block.required }}"
spx-node="form.fieldInput"
spx@input="form.onInput">
<label
for="{{ id }}"
class="fm-label upper">
{{ block.placeholder }}
</label>
</div>
</div>
{% elsif type == 'textarea' %}
<div class="col-12 mt-{{ block.mt }} mb-{{ block.mb }}">
<textarea
id="{{ id }}"
name="{{ block.name }}"
class="fm-input"
placeholder="{{ block.placeholder }}"
required="{{ block.required }}"
spx-node="form.fieldInput"
spx@input="form.onInput"
style="height: {{ block.height }}px;"></textarea>
</div>
{% elsif type == 'dropdown' %}
<div class="col-12 mt-{{ block.mt }} mb-{{ block.mb }}">
<dropdown
class="fm-dropdown"
spx-component="dropdown"
spx-node="form.dropdown">
<button
type="button"
class="upper"
spx-node="dropdown.button"
spx@click="dropdown.toggle">
{{ block.placeholder }}
</button>
<fieldset data-dropdown-target="collapse">
{% assign items = block.items | newline_to_br | split: '<br />' %}
{% for item in items %}
{% liquid
# STRIP + CLEAN
assign value = item | strip_html | strip
assign id = value | handle
%}
<label
for="{{ id }}"
class="upper {% if forloop.last %} bb-0{% endif %}">
{{ value }}
</label>
<input
class="d-none"
type="radio"
name="{{ block.name }}"
id="{{ id }}"
value="{{ value }}"
aria-label="{{ value }}"
spx-node="form.fieldInput"
spx@input="dropdown.select form.onInput"
{% if forloop.first and block.required %}
required
{% endif %}>
{% endfor %}
</fieldset>
</dropdown>
</div>
{% elsif type == 'switch' %}
<div class="col-12 mt-{{ block.mt }} mb-{{ block.mb }}">
<div class="fm-switch">
{% capture name %}
{% if block.consent == true %}
{{ 'forms.field.accept_marketing' | t }}
{% else %}
{{ block.name }}
{% endif %}
{% endcapture %}
<input
type="checkbox"
spx-node="form.fieldInput"
spx@input="form.onInput"
class="fm-checkbox"
id="{{ name }}"
name="{{ name | replace: '[', '-' | remove: ']' }}"
required="{{ block.required }}"
{% if block.checked %}
checked
{% endif %}>
<label
for="{{ name | replace: '[', '-' | remove: ']' }}"
class="fm-label upper fs-sm">
{{ block.label }}
</label>
</div>
</div>
{% elsif type == 'paragraph' %}
{% capture class %}
{{ block.fc }}
{{ block.ff }}
{{ block.fs }}
{{ block.ta }}
{% endcapture %}
<div class="col-{{ block.xs }} col-md-{{ block.md }} col-xl-{{ block.xl }}">
<div class="fs-xs fw-light fc-mute {{ class }} mt-{{ block.mt }} mb-{{ block.mb }}">
{{ block.content }}
</div>
</div>
{% endif %}
Raw
some-section.liquid
{% for block in section.blocks %}
{% render 'form-fields' with block.settings as block, type: block.type %}
{% endfor %}
{% schema %}
{
"blocks": [{ "$ref": "blocks.form_fields" }]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment