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

In a Form Layout, Dynamically Select a Secure Zone from an Approved List in Admin

This will show you how and help you decide if using a dynamic single Form or multiple Forms is right for your Use Case.

Prerequisites

  • This Article is written for Secure Zones version 1.2.0. Some of the contents may not apply to earlier versions.

Introduction

Secure Zones are a useful tool for managing which Users will have access to content on a Site. To give a User access to one or more Secure Zones, you can attach Secure Zones to a Form. The default behaviour is that a Form will Sign Up a User to all the Form's Secure Zones. However, it is possible to change this behaviour using a hidden field on the Form Layout. This hidden field's value will by default contain all Secure Zones attached to the Form, but can be modified to contain only a sub-set of those Secure Zones.

Note

The hidden field cannot contain a value of a Secure Zone unless it is also attached to the Form.

Continuing to Apply the Exact List of Secure Zones Attached to the Form

If you wish to add single or multiple Secure Zones to a Form and have all those Secure Zones applied to the User with a single Form submission, this continues to be default behaviour and you don't need to do anything different. You can also remove the hidden field from your Form to keep the default behaviour and avoid any front-end changes: <input id="s_sz_id" value="55665" type="hidden">

An Example Use Case

In this example, let's assume you have the following Secure Zones on your Site:

  • Public UK
  • Public USA
  • Private Employees Only

In this example, we want any Users to be able to complete the "Public Sign Up" Form.

Users filling out this Form will choose their location and we'll automatically change the Secure Zone to match either "Public UK" or "Public USA" depending on their preference. We do not want ordinary Users accessing the "Private Employees Only" Secure Zone, so we want to be able to exclude this from the options and prevent malicious Users from manipulating the Front End code and gaining access.

Step 1) Setting Up the Sign Up Form in Admin to Create an Allowed List

In the configuration for the "Public Sign Up Form" in the Siteglide Admin, we can attach the public Secure Zones to the Form: "Public UK" and "Public USA". By default, the Form will assign Users to both these Secure Zones, but we'll change that later.

Document image

A Note on Security

The important thing at this stage is that we have not added "Private Employees Only" to the Allow List. Thanks to this choice, malicious Users with knowledge of developer tools and JavaScript will not be able to manipulate the Public Form to add them to the "Private Employees Only" Secure Zone. A malicious User from the USA may use Front End code to Sign themselves up to the "Public UK" Secure Zone, just as a malicious User could be untruthful on a Form. But by attaching both Secure Zones to the Form, the Partner or Client is making a clear decision that these "public" Secure Zones are both safe. By safe, we mean nobody will see content they shouldn't if they complete this Form- even if they switch to another zone. It is the responsibility of Partner and Client to make sure that if a User has access to a Form, that Form only has Secure Zones attached that it would be safe for that User to access.

Step 2) Adding User Input

In this example, we'll use a Form Field to provide User Input which will change the active Secure Zone dynamically. This is optional, as you may have other reasons for assigning a particular Secure Zone.

Document image

Step 3) Creating a Custom Form Layout

In order to dynamically assign Users to the correct public Secure Zone, we'll need to create a custom Form layout.

Document image

A quick tip for setting up the Custom Layout quickly is to start by copying and pasting the content of the default Layout.

Step 4) Add the Form to a Page

Document image

Step 5) Adding JavaScript to the Custom Form Layout

In the code from the default Layout that we've copied, we can see the dropdown field that my Users will use to select their location (and thanks to the code we will write now, their Secure Zone).

HTML
|

We can also see the hidden field that we must change the value of in order to change the active Secure Zone: <input id="s_sz_id" value="743,744" type="hidden"> Note- this includes the IDs of the Secure Zones, not their names, so Admin should be referenced so that you know which is which.

The JavaScript will need to select the "#form_field_12_1" element, watch for a change event and then select and change the value of the "#s_sz_id" element.

JS
|
Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
Slider
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Introduction
Note
Continuing to Apply the Exact List of Secure Zones Attached to the Form
An Example Use Case
Step 1) Setting Up the Sign Up Form in Admin to Create an Allowed List
A Note on Security
Step 2) Adding User Input
Step 3) Creating a Custom Form Layout
Step 4) Add the Form to a Page
Step 5) Adding JavaScript to the Custom Form Layout