Change log

form

This component outputs data relating to a specific Form.

{% component type: "form", alias: "<form_alias>" %}

Parameters and Options

Parameter
Values
Required
Description
type
form

This is the name of the entity that needs to be used for the component retrieving function.

alias
<alias_name>
The alias name of the module.
layout
<The Form's Layout>

If this parameter is included but the value is blank, no layout will be rendered. Any other value here, or if the parameter is omitted, will render the form's built-in layout.
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.
If using this parameter, the form will not render its layout.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

price
<number>

If the form is collecting payment as type 'Generic', this parameter can be used to pass the price value to the form.
eventId
<ID>

If the form is subscribing a user to an Event and/or is collecting payment as type 'SingleItem' for an Event subscription, this parameter is used to pass the Event ID to the form to assign the required Event and any price values for payment.
<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below form example has 4 system fields and 2 custom fields and represents the typical data structure you will see from this Component.

{
  "Name": "Sample Form",
  "Alias": "sample_form",
  "IsSubscription": false,
  "EnableDefaultJSValidation": false,
  "Fields": [
    {
      "Name": "Email",
      "Alias": "Email",
      "CreatedDateTime": "2021-06-28T18:03:40.45159",
      "UpdateDateTime": "0001-01-01T00:00:00",
      "Type": 7,
      "IsMandatory": true,
      "FieldGroupType": 1,
      "Order": 0,
      "Options": [],
      "Id": "1388",
      "FormId": "1382"
    },
    {
      "Name": "reCAPTCHA v2",
      "Alias": "ReCAPTCHAV2",
      "CreatedDateTime": "2021-06-28T18:03:40.451601",
      "UpdateDateTime": "0001-01-01T00:00:00",
      "Type": 9,
      "IsMandatory": true,
      "FieldGroupType": 2,
      "Order": 5,
      "Options": [],
      "Id": "1393",
      "FormId": "1382"
    },
    {
      "Name": "First Name",
      "Alias": "FirstName",
      "CreatedDateTime": "2021-06-28T18:03:40.451598",
      "UpdateDateTime": "2022-05-11T15:32:06.413082",
      "Type": 7,
      "IsMandatory": true,
      "FieldGroupType": 1,
      "Order": 1,
      "Options": [],
      "Id": "1389",
      "FormId": "1382"
    },
    {
      "Name": "Phone",
      "Alias": "Phone",
      "CreatedDateTime": "2021-06-28T18:03:40.451599",
      "UpdateDateTime": "2022-05-11T15:32:06.413082",
      "Type": 7,
      "IsMandatory": false,
      "FieldGroupType": 1,
      "Order": 3,
      "Options": [],
      "Id": "1391",
      "FormId": "1382"
    },
    {
      "Name": "Last Name",
      "Alias": "LastName",
      "CreatedDateTime": "2021-06-28T18:03:40.451598",
      "UpdateDateTime": "2022-05-11T15:32:06.413082",
      "Type": 7,
      "IsMandatory": true,
      "FieldGroupType": 1,
      "Order": 2,
      "Options": [],
      "Id": "1390",
      "FormId": "1382"
    },
    {
      "Name": "Enquiry",
      "Alias": "Enquiry",
      "CreatedDateTime": "2021-06-28T18:03:40.4516",
      "UpdateDateTime": "2022-05-11T15:32:06.413082",
      "Type": 6,
      "IsMandatory": true,
      "FieldGroupType": 2,
      "Order": 4,
      "Options": [],
      "Id": "1392",
      "FormId": "1382"
    }
  ],
  "PaymentAmount": 0.0,
  "ModuleItemId": 0,
  "FormType": "Generic",
  "ModuleName": "",
  "UniqueId": "f87f0969-e0df-4f6e-991d-114aab418502",
  "Parent": {
    "Value": {
      "Id": 1958,
      "ModuleLayoutName": "Detail",
      "Enabled": true,
      "ReleaseDate": "2018-08-02T23:00:00",
      "ExpiryDate": "2099-11-28T00:00:00",
      "Weighting": 990,
      "Item_Rating": 0,
      "CodeEditor": true,
      "ExternalId": 0,
      "DisableForSiteSearch": false,
      "Author_Name": null,
      "Author_Url": null,
      "Author": 0,
      "SEOTitle": null,
      "CustomProperties": "{\"31e8bc20-c904-481a-b47e-95304c4edcdc\": \"<ul>\\n    <li>26-07-2023 | v6.9.1 | Added 'layout' parameter description</li>\\n    <li>Added new payment 'type' property</li>\\n</ul>\", \"8aa52748-df22-4986-8131-f6a9ab1f048a\": 0, \"a11635f8-fa31-49d5-a0c0-2fb45d52caec\": \"<ul><li><a href=\\\"/demo-cs/contact\\\" rel=\\\"noopener noreferrer\\\" target=\\\"_blank\\\">A demo of the default&nbsp;form output&nbsp;used in this example</a></li></ul>\", \"b0ce44c2-314b-4ab2-b829-6baeb33b6a0e\": true, \"b2b960ff-e003-4b75-b760-9559e127e0b2\": false, \"cb88f1ea-ee57-498c-8781-a47e753b4c0e\": 0, \"e8ef1eaa-93bd-455d-b0ce-0cb5ea9c35a1\": \"2418\"}",
      "LastUpdatedDate": "2023-07-25T20:36:47.853416",
      "Module_Alias": "DocumentationPost",
      "Module_Id": 1870,
      "ParentName": "Liquid Components",
      "ParentUrl": "/component-types",
      "Name": "form",
      "UrlSlug": "form",
      "Url": "/component-types/form",
      "MetaDescription": null,
      "ShowPageForSearchEngine": true,
      "CanonicalLink": null,
      "MetaTitle": null,
      "ParentId": 2127,
      "Url_List": [
        "/component-types/form"
      ],
      "ParentId_List": [
        2127
      ],
      "EnableAMP": false,
      "AMPContent": null,
      "SocialMetaTags": null,
      "OpenGraphPropertiesValue": null,
      "SeoPriority": 0.8,
      "Description": "<p>This component outputs data relating to a specific Form.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n<p>The below form example has 4 system fields and 2 custom fields and represents the typical data structure you will see from this Component.</p>\r\n\r\n{% component type: \"form\", layout: "", alias: \"sample_form\", collectionVariable: \"data\" %}\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"json\" %}\r\n</section>\r\n\r\n<section id=\"secFieldTypeCodes\">\r\n    <h2>Field Type Codes</h2>\r\n    <p>From the data output you can identify the type of field created in the admin via it's <code>Type</code> property.<br>\r\n    The various types are listed below:</p>\r\n    <ul>\r\n        <li>DateTime - <b>1</b></li>\r\n        <li>CheckboxList & MailingLists - <b>2</b></li>\r\n        <li>DropdownList - <b>3</b></li>\r\n        <li>ListboxList - <b>4</b></li>\r\n        <li>RadioList - <b>5</b></li>\r\n        <li>Multiline - <b>6</b></li>\r\n        <li>String - <b>7</b></li>\r\n        <li>Boolean - <b>8</b></li>\r\n        <li>ReCAPTCHAV2 &amp; ReCAPTCHAV3 - <b>9</b></li>\r\n        <li>Upload - <b>10</b></li>\r\n        <li>Password - <b>11</b></li>\r\n        <li>AcceptPayment - <b>12</b></li>\r\n        <li>AcceptEventSubscription - <b>13</b></li>\r\n    </ul>\r\n    <p>System fields <code>Email, FirstName, LastName, Phone, Site, Address, City, State, ZipCode, Country, Status, Secure Zone Expiry Date, Secure Zone Expiry Duration</code> all use type <b>7</b>, and field <code>Notes</code> uses type <b>6</b>.</p>\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>As an alternative, you can instead output the form data directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"formData\" is as follows:</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Looping through the collection to render all the field names:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the third fields name (zero based index):</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n</section>\r\n",
      "TemplateName": "Docs Template",
      "ItemCategories": null,
      "ItemCategoryIdList": null,
      "ItemTags": [
        "Forms"
      ],
      "SiteSearchKeywords": null,
      "ID": 1958,
      "CreatedByMemberId": "0",
      "IsHome": false,
      "Pagination": null,
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "Parent": null,
      "TemplateVirtualPointer": {
        "Pointer": 8491950041332711513,
        "TypeId": 1977186194,
        "InstanceId": 89,
        "DbTypeId": 1977186194,
        "DbInstanceId": 89
      },
      "Params": {}
    },
    "Type": 5
  },
  "ReCaptcha_Sitekey": "6Lf2cGcUAAAAABbL4aDrclASNZx9S3uaI9EvpvlI",
  "Params": {
    "type": "form",
    "layout": "",
    "alias": "sample_form",
    "collectionvariable": "data"
  }
}

Field Type Codes

From the data output you can identify the type of field created in the admin via it's Type property.
The various types are listed below:

  • DateTime - 1
  • CheckboxList & MailingLists - 2
  • DropdownList - 3
  • ListboxList - 4
  • RadioList - 5
  • Multiline - 6
  • String - 7
  • Boolean - 8
  • ReCAPTCHAV2 & ReCAPTCHAV3 - 9
  • Upload - 10
  • Password - 11
  • AcceptPayment - 12
  • AcceptEventSubscription - 13

System fields Email, FirstName, LastName, Phone, Site, Address, City, State, ZipCode, Country, Status, Secure Zone Expiry Date, Secure Zone Expiry Duration all use type 7, and field Notes uses type 6.

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

As an alternative, you can instead output the form data directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "formData" is as follows:

{% component type: "form", alias: "sample_form", collectionVariable: "formData" %}

Looping through the collection to render all the field names:

{% for f in formData.fields %}
    {{f['Name']}}<br>
{% endfor %}

Accessing a specific item within the collection. In this case the third fields name (zero based index):

{{formData.fields[2]['Name']}}

Related Articles

  • Site Settings & Management
    System Pages
    System Pages, under 'Settings', is where you’ll find all those pages required by certain system...
  • Reports
    Custom Reports
    Custom reports can be used to bring CRM data together, as a spreadsheet, based on your requirements.
  • CRM
    Form Submissions
    Form Submissions store the captured data from any form submission made on your website (from a form created under ‘Content’ > ‘Forms’).
  • Email Notifications
    System Emails
    System emails are emails that are sent when a particular action is carried out on the website and/or via the admin.
  • Liquid Objects & Usage
    {{ formSubmissionData }} object
    This liquid object will output the submission details of a Form.
  • CRM
    Advanced CRM Groups
    Advanced CRM Groups allow you to extend the data fields within multiple areas of the CRM, either globally or on a per-record basis.
  • Liquid Objects & Usage
    {{ workflow }} object
    This liquid object will output the Workflow details of a submitted Form. You can use...
  • Content Modules
    Forms
    Forms are an essential part of collecting user information on your website.
    Treepl CMS makes managing forms easy and powerful
  • Liquid Objects & Usage
    {{ order }} object
    This liquid object will output the order details of a submitted payment. ...
  • Content Modules
    Secure Zones
    Secure Zones provide a way of creating restricted content on your website that only registered Secure Zone Members are able to access after successfully logging in.
  • eCommerce
    Payment Form Javascript
    Options for controlling and further customising payment form submissions are available via javascript events.
  • Extras
    ReCaptcha Styling
    Treepl CMS supports Google reCAPTCHA v2 and v3 implementations. Below are some additional options you...

External Resources

Please let us know if you have any other contributions or know of any helpful resources you'd like to see added here.

Questions?

We are always happy to help with any questions you may have.
Visit the Treepl Forum for community support and to search previously asked questions or send us a message at support@treepl.co and we will consult you as soon as possible.