By default, Siteglide Forms will reload the page after submission.

If you would like to run some alternative JavaScript on the Front-End instead, you can do so by passing in a callback function to the 4th argument:

<button onClick="s_form_submit_v2(this,'form_12',undefined,success_cb);">
<script>
  function success_cb(redirect) {
    //Do something.
  }
</script>

Here we set the 3rd argument to undefined to "skip" it, but you can use this to set a custom callback function to call when the form submission process encounters an error- see Custom JavaScript Validation for Forms .

Your callback function will receive one parameter redirect which will contain the URL which the Form would normally redirect to. You can choose to use this in your function if you need it. We don't include the data submitted in these arguments, but you can of course use JavaScript to access the data directly from the DOM.

If you wish to run code on the server side after a successful form submission, you have the option of adding Automations instead.

This problem was initially reported here -> https://roadmap.siteglide.com/bugs/p/forms-overwriting-crm-records

If users are sharing a device to access a site, they should log out and log back in when switching user to avoid the CRM record storing data on the wrong user.

However, it may not be obvious to the user that their family member, or colleague is already logged in.

1 - How to show that someone is logged in

Our default form layout for new or updated forms will set both 'email' and 'name' as readonly, pre-populated fields if there's a logged in user.

You can also add your own message on page like this:

{%- if context.exports.is_logged_in.data == true -%}
  <p>Hi {{ session.current_user.name }}! <a href="/logout">(not you?)</a></p>
{%- endif -%}

2 - How to allow updating of existing user name

If you look at the email and name fields in your new default layout, you'll see this:

{% if context.exports.is_logged_in.data -%}
    readonly value="{{ session.current_user.name }}"
{% endif %}

Either remove 'readonly' to allow editing, or remove the entire IF statement if you also don't want it pre-populated.

Pre-Requisites

• Recommend migrating Pages first - optional

Introduction

Forms in Siteglide are more than just HTML.

A Form should be created in the Siteglide Admin, making the following features possible:

• Server-side validation

• Storing Submitted Fields in Cases in the database

• CRM updates

• Secure Zone Access Granting

• User Login

• Automations, including Autoresponder and Workflow Emails

Step 1) Create the Form in the Siteglide Admin

First, re-create your new Form in the Siteglide Admin, selecting the settings in the UI that you need e.g. the URL it will redirect to after a successful submission.

Step 2) Add Fields in the Siteglide Admin

Add all the fields you need:

• If your field should update a User in the CRM, create it in CRM users first, then add it as a CRM custom field to the Form

• If you want to add a group of fields, consider creating a Custom Field Set first and add to the Form

• If you want to use a field for this Form and the Cases it creates only, add a standard custom field

Step 3) Output the Siteglide Form in the Site

The ID of your form should be the number associated with the Form in the Siteglide Admin.

A default Layout will be created automatically for you and updated whenever the Form settings change.

Step 4) Create a Custom Layout - Optional

The new default layout should work fine, but it may not look or function the same way your old one did.

See the reference for tips on creating a Custom Form Layouts:

Step 5) Customise your Autoresponder and Workflow Emails - Optional

Automations will be created automatically for an Autoresponder and Workflow Email, but these can be removed or edited to suit your original site's brand and content.

You can also add new automations to trigger events when your Form submits.

Step 6) Test and Clear Up

Once you're happy your new Form is working, remove your old Form code from the Site to tidy up.

Siteglide offers Spam protection called hCaptcha on forms, which is already fully baked in to the platform for you.

hCaptcha is the world's most widely used independent CAPTCHA service with a focus on performance, privacy and security.

From today, both Siteglide and platformOS teams recommend that you use the integrated hCaptcha option instead of the now deprecated reCAPTCHA offering, to minimise risk of spam attacks and increase control of usage on your sites.

Please remember that Siteglide is usage-based and it's important to use to hCaptcha spam protection to avoid unwanted increases in usage and charges.

A better CAPTCHA

We reviewed a number of other CAPTCHA solutions, but in the end we selected hCaptcha for a number of reasons including: cost, performance, security and user experience.

Cost

As hCaptcha is fully built into our platform, there are no API calls needed for verification which contribute to your site usage, unlike reCAPTCHA which requires one API call per form submission as it is a 3rd party API integration.

Performance

In the battle against malicious bots, hCaptcha takes an entirely different approach, designed with scalability, accuracy, and performance in mind without relying on historic data or the personal information of users.

hCaptcha only needs to be integrated on pages you want to protect, not on every page of your site like reCAPTCHA v3. It can be implemented with just one line of liquid, which outputs only 3 lines of code.

Security

hCaptcha adapts to threats automatically thanks to built in advanced machine learning capabilities. It adapts and learns, constantly providing a better experience and reducing the likelihood of a false positive, penalising users.

In addition, hCaptcha provides heightened protection against spam by re-checking the challenge result at every stage of the form submission process.

User Experience

hCaptcha is totally device and browser agnostic, providing a low friction experience to all end users alike. reCaptcha on the other hand requires the presence of Google cookies and personal information to provide a similar low friction experience, which means it will often penalise legitimate users if they are not logged into a google account.

hCaptcha is also specifically designed to protect user privacy and complies with GDPR, CCPA, LGPD, PIPL, and other mandates.

Using hCaptcha

Head over to your Site Admin today and Edit Form Structure on one of your existing forms to make the switch. Look for the renamed “Spam Protection” tab to select and save the new hCaptcha option.

For those of you using custom Form layouts, once you have edited and applied hCaptcha to your form, checkout the Default layout to copy the latest CAPTCHA liquid tag across to your custom layout and replace the previous version.

If you’re looking to create a new form in your Siteglide site, hCaptcha will automatically be selected in the Spam Protection tab for you so that you will be fully protected by default.

This article gives some examples for different ways to validate Siteglide forms on the Front End using JavaScript.

Introduction

When a User submits a , we'll check:

• That the User has filled in the fields correctly

• That additional processes like reCaptcha, payment and Secure Zone sign up were successful

For most errors, we'll provide a single error message which can be displayed. For validation errors, we'll provide both the error message and additional messages for each missing field.

Marking a Field as Required

Fields must be marked as "required" in the Admin, and in the HTML of your Form Layout, in order for them to trigger the validation process.

For most fields, we will validate only whether or not a field has been submitted- but for emails we take the extra step of checking whether or not the format of the email is valid.

You can either use Siteglide's default validation message, or write your own custom JavaScript. We'll also provide examples of how you can customise the error messages each provide to your users.

Default

For most error messages, the default behaviour will be to display an alert.

You can also use the following line of HTML in your form Form Layout file to output the default JS validation error message at the end of your Form- but by default this will only display for validation type error: <div class="form-error"></div>

A class of .input-error gets added to fields if they fail to validate, which you can select with Custom CSS if you wish to show the User that they should be amended.

-->

Passing your Custom Function in as an Argument

You can write your own custom validation by changing:

<button onClick="s_form_submit_v2(this,'form_12');"> to be: <button onClick="s_form_submit_v2(this,'form_12',error);">

where error is the name of your function. e.g.

Formatting your error message

As in the example above, a custom error function will always be passed the main error as its argument. In the past, some of the integrations we worked with passed errors in different formats, which made writing error functions tricky. We've improved this by adding a newfunction: s_error_formatter(error); to sanitize the error message and return the message itself as a String.

This means if you include this helper function, you'll always know to expect the message in a String format.

Example Function

Custom Error Messages for Fields

The example below demonstrates the following:

• Displays all kinds of main error messages on the Page

• Does not use alert messages

• Allows you to change the field validation message on a field by field basis in the HTML

***Step 1) Add HTML before closing tag ***<div id="errorSummary" class="alert alert-danger d-none"></div>

Step 2) Add custom error messages to fields in HTML In our custom code for this example, let's invent a data-attribute data-custom-msg to store custom error messages against the field we want to display them for:

*** Step 3) Add CSS*** The CSS plays a visual role here, but also a functional one- as the boxes displaying the errors should be hidden when the Form is submitting and the Siteglide class can be used to select for this.

***Step 4) Add JavaScript ***The first part of the function:

1. Formats the main error message

2. Selects the Form elements it needs

3. Deletes old error messages

Next the function loops over the fields with input errors and displays validation messages- after adjusting for any custom messages you've added.

Finally, the function uses a "switch" statement to change the main error message, should you wish (useful for translations) before displaying at the bottom of Page.

See the comments in the code for more explanatory details.

Related Articles

When a User uploads a File as part of a Form, you can automatically show previews of the images it uploads.

Introduction

When a User uploads a File as part of a Form, you can automatically show previews of the images it uploads.

We've aimed for maximum flexibility- you create the preview element with any HTML structure you like. Set the correct HTML attributes and we'll use your element to display an image preview as soon as one is available.

Syntax

In these examples, we have a Form with a single upload field. In these examples the field's ID in the database is form_field_11_1.

The upload field already consists of the following:

• A label element (optional)

• A type="file" input which is used by the User to select their file

• A hidden input which uploads the CDN URL of the file to the database once it has been added to S3 successfully.

If you wish to add a File Preview, you'll need to add a further element. This can be any element you like, but you'll need to add a data attribute: data-file-preview="form_field_11_1_file" ...where form_field_11_1_file is the ID of your type="file" element.

Images

If the File is an image, we'll either:

• If the element with the attribute is an <img> tag, set the src attribute to display the preview image

• If the element with the attribute is not an <img> tag we'll change the CSS to apply the preview image as a background image.

We'll also give you some feedback on what kind of file type the Image is by setting the data-preview-file-type attribute on the preview element. In itself, this has no functionality, but it allows you to set up custom CSS rules depending on the file type.

You can set the CSS of your element in advance so that the image displays in a manner of your choosing. See recommended CSS below.

Standard Images

Here's an example img preview element:

<img data-file-preview="form_field_11_1_file" height="100" width="100">

Full code for this input:

Background Images

Here's an example <div> element designed to use background-image to display the preview:

<div data-file-preview="form_field_11_1_file"></div>

Full code for this input:

Other File Types

With a file input, you can't be certain that an image will be uploaded. We'll check this for you by inspecting the MIME type of the file. We won't attempt to display an image preview if the MIME type is not an image.

We will however, still set the data-preview-file-type attribute to the value of the file's file type. You will then be able to use custom CSS to display different Icons for different common file types if you choose.

For example:

CSS

Recommended CSS

When using this feature, we'd recommend you set up your CSS before you start.

Remember, an empty element will have a height of 0, even if it has a background set in CSS, so we'd recommend you set a height to any elements which will display the preview image as a background image.

For example:

Useful Selectors

As we use data-attributes extensively in this feature, you may also find it helpful to target these attributes.

For example, the following selector will target all of your File Preview elements: [data-file-preview] { }

The following will target all of your File Preview elements which have a File uploaded to them: [data-file-preview][data-preview-file-type] { }

The following will target all of your File Preview elements which have an image uploaded to them: [data-file-preview][data-preview-file-type|=image] { }

The following will target all of your File Preview elements which have a File which is not an image uploaded to them: [data-file-preview][data-preview-file-type]:not([data-preview-file-type|=image]) { }