đSteps to Adding 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.
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.
Prerequisites
You have set up a Form
Introduction
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.
Refresher- How to set up a redirect to a confirmation Page
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:
Step 1) Including the Confirmation Message
In the Siteglide Admin under CMS > Pages
in the Code tab, add the Form Confirmation with this Liquid tag:
The Layout parameter takes the name of the Layout File you wish to use, without the .liquid
extension.
Step 2) Building Form Confirmation Layouts
File Structure
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
.
Developing a Layout
You can use the Default Layout, or develop your own.
Variables
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:
Step 3) Optional - Including an eCommerce Order Confirmation
You output Details about any eCommerce Order that was made using the Form Submission. You may be familiar doing this already within an email automation.
We've included an `
` statement in the example, because this will only work properly if a `form.properties.`order\_id field is available on the Page. Otherwise it may be that the Form was submitted without the User making an Order.
Step 4) Optional - Make sure the Confirmation Message is only Displayed Once
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:
Last updated