SA5 Forms API

For advanced forms manipulations

Our devs favor TypeScript, and class-centric encapsulated design. The examples here are written as such. If you are using vanilla JavaScript, adjust the code syntax to your needs.

Controlling Form State

Setup the SA5 form object, to point to a named form;

let form: any; 
const formElem: HTMLElement | null = document.querySelector<HTMLElement>("[wfu-form='your-form-name']"); 
if(formElem)
   form = new sa5.Sa5Form(formElem); 

Set the form mode;

this.form.setMode(0); // 0 = Active | 1 = Success | 2 = Error

Typescript Definition

For devs using Typescript, you can declare SA5 Forms simply with;

declare namespace sa5 {

    enum WebflowFormMode {
        Active,
        Success,
        Error,
    }

    class Sa5Form {

        constructor(element: HTMLElement);

        setMode(mode: WebflowFormMode): void; 

    }

}

If you're using vanilla JavaScript, you do not need a declaration and can work with;

window.sa5.Sa5Form