Change log

{{ formSubmissionData }} object

This liquid object will output the submission details of a Form.

You can use this on the default form submission page (/_form-submission-results/) or any custom redirect page you have setup for the confirmation page of your form.

The output can also be used within the forms auto-response email Body, From Name, and Subject fields, as well as the Workflow Notification email Body/template, From Name, and Subject fields (and Invoice email body/template if applicable).

{{ this.formSubmissionData }}

Liquid Output

An example of the data structure for a successfully submitted form is below.

{
  "submissionid": 123,
  "form_name": "DEMO Contact Form",
  "form_alias": "demo_contact_form",
  "fields": {
    "system": {
      "firstname": {
        "id": "FirstName",
        "name": "First Name",
        "value": "Alex"
      },
      "lastname": {
        "id": "LastName",
        "name": "Last Name",
        "value": "Smith"
      },
      "email": {
        "id": "Email",
        "name": "Email",
        "value": "asmith@example.com"
      },
      "phone": {
        "id": "Phone",
        "name": "Phone",
        "value": "11222333444"
      }
    },
    "custom": {
      "enquiry": {
        "id": "Enquiry",
        "name": "Enquiry",
        "value": "Hi. This is a test message."
      }
    },
    "all": [
      {
        "id": "FirstName",
        "name": "First Name",
        "value": "Alex"
      },
      {
        "id": "LastName",
        "name": "Last Name",
        "value": "Smith"
      },
      {
        "id": "Email",
        "name": "Email",
        "value": "asmith@example.com"
      },
      {
        "id": "Phone",
        "name": "Phone",
        "value": "11222333444"
      },
      {
        "id": "Enquiry",
        "name": "Enquiry",
        "value": "Hi. This is a test message."
      }
    ]
  },
  "error": 0,
  "errormessages": [],
  "crmcontactlink": "https://docs.treepl.co/admin/contacts/17",
  "crmformsubmissionlink": "https://docs.treepl.co/admin/form-submissions/150",
  "crmEventBookingLink": "https://docs.treepl.co/admin/event-bookings/3",
  "formtype": "Generic"
}

* crmEventBookingLink only included with an Event booking form submission.

An example of the data structure for a failed form submission, showing error code and error messages, is below.

{
  "error": 1,
  "errormessages": [
    "Field 'First Name' is required.",
    "Field 'Email' is required.",
    "Field 'Enquiry' is required."
  ]
}

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 example of rendering a piece of this data onto your confirmation page or within the forms autoresponder or workflow emails, you could use the following Liquid:

{{ this.formSubmissionData.fields.system.firstname.value }}

This would output the value Joe to the page/email based on the above example data.

Extending on this example, we can use this data in a conditional Liquid statement to either display an error message (if submission failes), or a custom formatted summary of the submitted data:

{% if this.formSubmissionData.error == 0 %} <!-- we check if an error has occurred and if not render the below success message -->
    <h2>Thank you!</h2>
    <p>Your request has successfully sent. We will get back to you soon.</p>
    <p>Summary:</p>
    <dl>
    {% for f in this.formSubmissionData.fields.all -%} <!-- here we loop through all the form fields and output the key/value pairs for each fields "name" and "value" -->
        <dd>{{f.name}}:</dd>
        <dt>{{f.value}}</dt>
    {% endfor -%}
    </dl>
{% else -%} <!-- if an error has occurred we instead render the below error message -->
    <h2>Error!</h2>
    <p>Sorry, the form submission was not sent due to an error. Please try again.<br>
    <br><strong>Error Code {{this.formSubmissionData.error}}:</strong><br> <!-- renders the error code -->
    {% for err in this.formSubmissionData.errormessages %} <!-- here we loop through all error values and output them -->
        - {{err}}<br>
    {% endfor %}
{% endif %}

Viewing Data while Developing

It is often desirable to see all the data that is available to you on a page while developing your applications and there are two common techniques for doing this.

1. Rendering JSON to the Page

You can quickly and easily render the full JSON output directly to the page you are working on in order to view all the data and its structure in an easy to read format.
Simply wrap your desired Liquid object in <pre> tags like so; <pre>{{this.formSubmissionData}}</pre>

A JSON representation of the available data will be rendered to the page similar to the output examples above.

This of course is a temporary technique as you would not want to leave the JSON data visible on the page.

2. Rendering JSON to the Console

Perhaps a cleaner and more persistent way of viewing this data while in development, is to log the JSON output to your browser's console (in the browser's Developer Tools).

To do this, add some javascript code to your template file (just before the closing </body> tag) like this:

<script>
    console.log({{this.formSubmissionData}});
</script>

What this will do is output the JSON data into a structured data tree in your browser's Developer Tools console.

You can actually use this method to log any Liquid data to the console, such as a custom collection, for example:

<script>
    console.log({{myCustomCollection | strip_html}});
</script>

You might notice the Liquid filter | strip_html added here. This is optional, however, in some cases the JSON data will contain HTML code and this can break the Javascript, causing a scripting error.
So, keep in mind that, when using this filter, any fields containing HTML code in your JSON will not actually show the HTML in the console, however, the data is still there and accessible via Liquid when rendering to the page.

Remember to remove this code for production as it could pose a data security risk and it is best practice not to leave console logs in your scripts.



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.
  • Liquid Components
    form

    This component outputs data relating to a specific Form. {% component type: "form", alias: "<form_alias>"...
  • 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.
  • 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. {{ this.order }}...
  • 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.