Customize the webform confirmation page

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

The logic

In this How To article we'll take a look at how to customize the confirmation page of a web form . Using Liquid we're going to arrange the output to suit our style or needs. For this, we'll implement Liquid in the Web Forms Confirmation Page unde System Pages.

Implementation

Login to your site's admin console, navigate to Site Manager > System Pages and open Web Form Confirmation Page and modify the {module_webformresults} module to:

{module_webformresults collection="formresults" template=""}

What we've done above with the web form results module is giving the collection a name (formresults), so we can call that name out via Liquid, and assigning a template, in our case we suppressed the output of the template leaving the path to the template blank.

Next, we can choose how the message will look like after the form is submitted by using the fields available:

<p>Thanks for contacting us {{formresults.results.firstName}}. We'll get back to you over {{formresults.results.email}} as quickly as possible. </p>

Note: To see all the Liquid tags you can use on the Web Form Confirmation Page you can add {{this | json}} on the system page and see what it renders.

Conclusion

Before the introduction of Liquid, this type of setup would have been possible with a post-render javascript implementation.

Using Liquid, you're acutally filtering and formatting the system page's content on the server, before the content is displayed to the site visitor so the output is cleaner, faster and more secure.