website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
17min

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.

Document image

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:

Including the Confirmation Message

Document image

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.

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

HTML
|

Using {{form.properites}} in a Layout copied from an Email Notification

HTML
|

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:

HTML
|

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

Including an eCommerce Order Confirmation

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.

HTML
|

How to 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:

HTML
|

Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
Adding a Progress Bar
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Introduction
Refresher- How to set up a redirect to a confirmation Page
Including the Confirmation Message
Form Confirmation Layouts
File Structure
Developing a Layout
Variables
Including an eCommerce Order Confirmation
How to make sure the Confirmation Message is only Displayed Once