Form Confirmation Pages
After a User submits a Form and you redirect them to a Confirmation Page, you can now insert a dynamic message using fields from the Form.
- You have set up a Form
After a User submits a Form, you can redirect them to a Confirmation Page.
Including a Form Confirmation message on the Page they land on allows you to develop a customisable message which can:
- Give Users peace of mind that they submitted the correct information, and allow them to contact you (via a new submission) if they have made any mistakes.
- Include a nested Order Confirmation Layout (previously only available in Emails), which can give full details of any eCommerce Products ordered in the Form submission
- Give a personal touch by including details like the User's name in the message.
Step 1) Create a Page in the Siteglide Admin under CMS > Pages - this will serve as your Confirmation Page. Step 2) Edit your Form in the Siteglide Admin under CMS > Forms
Step 3) Fill in the ``Redirect To`` field with the URL of your Confirmation Page:
In the Siteglide Admin under CMS > Pages in the Page Builder tab, add the Confirmation Message using the following Liquid: {%- include 'form_confirmation', layout: 'default' -%}
The Layout parameter takes the name of the Layout File you wish to use, without the .liquid extension.
We store Form Confirmation Layouts at the following Path: layouts/form_confirmation/ Each Layout should be a single Liquid file with a name of your choice followed by .liquid.
You can use the Default Layout, or develop your own.
When setting up this feature, we wanted to make sure you could easily keep Layouts consistent between the on-Page and Email success messages.
In an email notification you have access to the "form" variable, containing details of the fields that were submitted in the Form. In the Form Confirmation Layout, we've given you access to this {{form.properties}} variable in the same format, as well as the usual this variable you may be more familiar with in other Layouts. You can either copy and paste your Layout from an email notification over to the Form Confirmation Layout and continue to use {{form.properties}} , or use the {{this}} object as you may be used to in other Layouts. Note- you will not currently be able to use the {{this}} variable inside an Email Notification. If you want to keep the same Layout, stick to the {{form}} variable!
Using {{this}}
Using {{form.properites}} in a Layout copied from an Email Notification
Outputting Fields Dynamically You can choose to re-use the same confirmation message for multiple Forms. Here is an example which will list the submitted fields (whatever they may be!) in an HTML table. Be aware, depending on the Form, it may always need some adjustments to cover more unusual field types e.g. Checkboxes:
If you're interested to read more about using Liquid to loop over the properties of an object, as we've done in this example, see more in this advanced tutorial: Advanced- Arrays and Key Maps- Tutorial
As in an Email Notification, you output Details about any eCommerce Order that was made with the Form Submission. We've included an {% if %} statement in the example, because this will only work properly if aform.properties.order_id field is available on the Page, otherwise it may be that the Form was submitted without the User making an Order.
The Form Confirmation feature will continue to show details of the most recent Form Submission. If the feature is added to a Page that will have visitors who have not just submitted a Form, this may no longer be relevant. To prevent confusion, you can choose to clear the Form data from their session so that once the message has been read, it won't display again. We store two values "form_id" and "form_fc" within {{context.session}}, which are then used to check whether the Form Confirmation Layout should be inlcuded. If we wipe these values the first time "Form Confirmation" is included then the Layout won't be included again, this code should be added to your Form Confirmation Layout: