{{ formSubmissionData }} object

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 %}

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

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

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’).
• OpenAPI (Admin)
  CRM Cases API
  Create, Retrieve, Update and Delete CRM Cases via the public API endpoint using "where" filtering.
• 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.
• OpenAPI (Admin)
  Forms API
  Retrieve Forms via the public API endpoint using "where" filtering.
• 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

• Basic contact form demo

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.