On Forms you can set the default redirect in the Form Builder view in Siteglide.

However, if you wish to make this redirect dynamic, you can instead include a hidden field on the Form and set the redirect value there.

Step 1) Add an s_redirect input field to the form

<input 
  id="s_redirect" 
  value="/home" 
  type="hidden"
/>

This example will redirect the user to /home no matter what the redirect says in Siteglide Admin. You can alter this value with JavaScript should you wish to have a dynamic redirect.

Step 2) Add JavaScript Logic to Adjust the value of the field based on some event

```liquid Office 1Office 2

</div>

<div data-gb-custom-block data-tag="tab" data-title='JavaScript'>

```javascript
const select = document.querySelector('#choose_office');
const redirect = document.querySelector('#s_redirect');
select.addEventListener('change', function(e) {
  const t = e.currentTarget;
  const v = t.value;
  if(v === '1') {
     redirect.value = '/confirm-office-1';
  } else if(v === '2') {
     redirect.value = '/confirm-office-2';
  }
});

Custom Field Sets are a great time-saving feature, as they allow you to create a reusable group of fields that can be added to any:

• Form (for saving against Case and User in the CRM)

• eCommerce Product

In order to use Custom Field Sets, set them up in the Siteglide Admin: first you define the fields you would like to include in the set and second, you attach the Custom Field Set to a Siteglide Feature (from the list above).

Custom Field Sets will automatically include a hidden field Parent ID, which links them to the feature.

Default Form Layouts should be automatically updated with any Custom Field Set fields which have been added to the form in the Admin UI. However, custom Form Layouts will need further syntax.

Prerequisites

Before reading this Article you should have already:

• Created a Custom Field Set

• Created a Form

• Added your Custom Field Set to the Form

Introduction

This Article shows you the extra syntax needed to include Custom Field Sets in a custom Form Layout. Updating the Form in Admin will automatically add the Custom Field Sets to your default.liquid Layout, so these will not need any maintenance.

The easiest way to make sure your Custom Form Layout is displaying Custom Field Sets correctly may be to copy the code straight from your default.liquid Layout.

Step 1) Identifying your Custom Field Set ID and Field ID

Each Custom Field set has an unique ID. You can find this ID by viewing the Custom Field Set in the Admin, and reading the last number in the URL.

Each field within that Custom Field Set also has it's own ID. You can work this out by the position of the fields in the List when you inspect your Custom Field Set in Admin.

In the example below- I have a Custom Field Set with an ID of 1 (displayed in the last slug of the URL)- and two fields:

• Pizza Topping appears first in the List- so has an ID of 1

• Gelato appears second in the List, so has an ID of 2

Step 2) Add code for each Custom Field Set Field to the Layout

The key HTML attribute will be located on different elements depending on the field type.

Check the Reference to see the syntax for each type:

If the type does not fit any of the types here, you can use text.

When it comes to adding the data-cfsHTML attribute, the first number should be the CFS ID and the second number the CFS Field ID. Finally, the type should be specified and preceded by the string "input_".

E.g. data-cfs="5-1-input_text"

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:

{% include 'form_confirmation', layout: 'default' %}

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

<h1>Thanks for getting in touch!</h1>
<p>Nice to meet you {{this.name}}!</p>
<p>We'll get back to your query as soon as possible.</p>

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

<h1>Thanks for getting in touch!</h1> 
<p>Nice to meet you {{form.properties.name}}!</p> 
<p>We'll get back to your query as soon as possible.</p> 

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:

<p>In the meantime, please double check the information you provided us below:</p>
<div class="responsive-table-container">
  <table>
    <tbody>
      {% for field in this %}
        {% comment %}Use the following unless condition to List fields you'd like to leave out of the message.{% endcomment %}
        {% unless field[0] == "properties" or field[0] == "user_id" or field[1] == blank %}
          <tr>
            <th style="border: solid 1px black">{{field[0]}}</th>
            <td style="border: solid 1px black">{{field[1]}}</td>
          </tr>
        {% endunless %} 
      {% endfor %}
    </tbody>
  </table>
</div>

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.

{% if form.properties.order_id %} 
  {% include "ecommerce/order_details", layout "siteglide_example" %} 
{% else %}
  <p>Looks like you've not ordered anything with us this time. We hope to see you again soon!</p>
{% endif %}

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:

{% session form_id = null %}
{% session form_fc = null %}

When a Form submits, it can take a moment to make the requests it needs. Here's how you can use CSS to show submission progress.

Introduction

When a submits, it can take a moment to make the requests it needs. This is especially true with eCommerce Forms which need to make multiple requests for security reasons.

This Article will explain how you can use CSS to show submission progress and let the User know your Form is still submitting without errors.

You may also be interested to read about how you can use a custom validation function to change the way the Form behaves when validation errors are found:

Step 1) Inspect The CSS Class

Firstly, follow the steps in your browser to open up the inspect tool.

When you submit a Form, the HTML Form element has two class names added to it:

• form_submitting

• form_x_submitting where x represents the ID of the Form in Admin

These classes should be removed if the Form is interrupted by a valid error, e.g. validation errors, so targeting one of these classes should tell you that the Form is busy submitting and the User should wait for completion.

Step 2) Optional - Add a CSS rule to Restyle the Form Itself During Submission

In this example, we'll use CSS to select all Forms that are busy submitting globally. You may choose to select particular Forms differently.

Step 3) Optional - Add a CSS rule to Restyle a Form Child Element During Submission E.g. Adding a Spinner

In this example, a spinner icon has been added to the Form Layout.

The CSS demonstrates how Front-End CSS is used to achieve a different effect:

Introduction

When a is submitted on Siteglide, it may have a wide range of tasks to complete e.g. signing a User into a Secure Zone or making a Payment. Sometimes Users may have an improved experience if they know the submission is still making progress and has not frozen.

That's why we've added data-attributes to the Form which will let you know each time a process is complete. You can use these to optimise your User Experience. They won't tell you how much time the submission will take to complete- but they will give the User a sense of continuation and progress.

Step 1) Inspect The Attributes

The following data-attributes will be added to the <form> element after the submission button is clicked.

• data-s-form-progress - This data attribute will let you know the most recent step that was completed by the Form Submission.

• data-s-form-progress-max - This data attribute will let you know the maximum number of submission steps. At the time of writing, it is fixed at 8, but this may change in future releases. Some steps will be counted in this number even if the Form completes them instantly e.g. the Secure Zone step will be skipped if the Form is not a Secure Zone Form.

You can use CSS which selects these data-attributes to change the User Experience of the Form.

Step 2) Add HTML for a Progress Bar

Step 3) Add CSS rules to change the width of the progress bar on each step

The following example displays a progress bar which increments with each submission step that is completed. It uses CSS transitions to create a smooth movement between each discrete step:

Currently a form needs a value of "s_name" to submit properly. Lets take a look at how we can include two separate fields into "s_name".

Introduction

When a you'll notice two standard field that are always required; Name and Email. These two fields must have a value when a user submits the Form or it will fail (as the required fields haven't been given). If two separate fields are required for both first name and last name there is a way of getting round this!

Step 1) Create Separate Name Fields in the Form in the Siteglide Admin

Firstly we'll need to create/ locate the form we need to add custom fields to. Head over to your site's admin, from here click "CMS" and find "Forms" within there. From here you can choose to create or edit a Form (as seen in red highlights):

Firstly we must create two separate form fields for First name and Last name, to do this click "Add Fields" and name them accordingly:

These must be set to 'required' as they're being inserted into the name field (which will prevent the Form from submitting without a value).

Step 2) Copy the Default Form Layout to Create a Custom Layout

We will be building upon the "default" Form layout as it automatically creates all the correct fields the Form needs to submit. Go to code editor:

layouts/forms/form_1/default.liquid (replace form_1 with the ID of your form).

Copy the code inside this file. Create a new file in Code Editor and paste the content inside:

layouts/forms/form_1/first_and_last_name.liquid

Now we'll need to create a custom layout. Right click the Form we're working on and select "Create File".

Copy the code from the default layout into here (we'll be using this as a starting point).

Step 3) Hide the System Field for the User's Full Name

You'll notice that the full name field has a type of "text", this will need to be replaced with "hidden" (this field is just for the database- users don't need to see it!).

Remove the label element as it will still display otherwise. Here's what it should look like:

Step 4) Add Unique HTML IDs

Next we must add unique ids to our custom fields, we will use these to combine the two fields later on.

Update each field to include id="lastName" and id="firstName" after the name value. These aren't normally required but will be used to refer to our fields in the following Java Script. Here's what the custom fields should look like:

Step 5) Change the Form Submit Behaviour to Run a New Data Normalisation Function First

Next, we must look at the submit button. Normally it uses the onClick attribute to fire Siteglide's form submit function- but we want it to wait until we've handled the name fields.

So we switch it to run my handle_names(this) function instead, we'll also need to remove 'form_2' as this submits the form. The submit button should look like now:

Step 6) Define the handleNames() function in JavaScript

Lastly we must combine both the fields by adding some Java Script below all of our form fields. This will run the user clicks the "Submit" button, it combines the firstName and lastName fields before submitting the form!

That's everything!

Your form will store the first name and last name within the appropriate fields, but it will also store full name in the required system field.