Skip to main content
Contact Support

Javascript API

Ryan J.
Updated

The Forms for Salesforce JavaScript API is designed for advanced users to be able to define custom JavaScript to execute at key points of the form lifecycle. To define some custom JavaScript for your form, you can either place it just before your embed code on your page or add the code to the 'Custom JavaScript' option in the Form Settings drawer of the Form Editor.

 

Formstack offers a Partner Consulting program where you can team up with third party Certified Formstack experts to bring your custom projects to life. For those who want to customize their Forms but do not have the time or internal resources to get these projects completed.  For more information on pricing and to book your consultation, please click here!

 

Defining a listener in the code

Defining an event listener depends on what type of form you have:

  • If the form is a standard form, all that’s needed is to write a JavaScript function as normal (see example 1).
  • If it is instead a Experience Cloud Form (Previously known as community form), prepend "window." to the function name (see example 2).
//(example 1) Standard form listeners look like this:
function FF_OnBeforeRender(){
//Do something before the form loads
}

//(example 2) If you are using a Experience Cloud form, use this instead:
window.FF_OnBeforeRender = function(){
//Do something before the form loads
}

NOTE:

  • We recommend using "fs" in place of "$" when writing jQuery.
  • Each event listener can only be defined once. If a second one with the same name is created, it will overwrite the original.


Available Event Listeners:

FF_OnBeforeRender()

This will cause the Formstack rendering engine to execute your custom code before rendering the form. The function should either return true if processing should continue or false otherwise.

NOTE - This Listener:

  • Can only be defined within the page of embedded forms, not within the Form Settings area.
  • Is not compatible with Native Cloud or Experience Cloud forms.

Example - Show a ‘please wait’ message to the user:

function FF_OnBeforeRender(){
alert('about to render the form, please wait...');
	return true; //If this is true, load the form
}

 

FF_OnAfterRender()

This will cause the Form rendering engine to execute your custom code after your form has been rendered on the page. This may be useful for displaying instructions to the submitter only after the form is displayed.

Example - Pop up a message reminding the user to ensure their data is correct:

function FF_OnAfterRender(){
    alert('Please ensure you have the correct information before submitting!');
}

 

FF_OnBeforeSave()

This will be executed after the user clicks the “Send” button on their form and before the rendering engine saves the form information. Useful for custom validation not covered by Formstack's built-in functionality. The function should either return true if the data should be submitted or false otherwise.

Example - Compare two dates submitted by the user:

function FF_OnBeforeSave() {
    var startDate = fs('#Account.StartDate').val();
    var endDate = fs('#Account.EndDate').val();
    if((new Date(startDate).getTime() > new Date(endDate).getTime())) {
        alert('Start date must be before end date!');
        return false;
    }
    else
        return true;
}

 

FF_OnAfterSave()

This will be executed after the user’s form information has been saved to the database. This is useful for custom behavior that is triggered after submission.

Example - Prompt the user if they want to be returned to the home page after submission:

function FF_OnAfterSave() { 
    if(confirm('Thank you for your submission! Would you like to return to the home page?')) {
        window.location.replace("http://www.example.com");
    } 
}

 

Need some inspiration?

Here are examples of some ways you can leverage the Formstack JavaScript API for your forms:

  • Pass some values from the form into the post-submission redirect URL
  • If the user comes to the form from site A, show them a site A thank you message, otherwise show them a site B thank you message.
  • Set today's date + 90 days in one of the form's date fields
  • Evaluate my rules on first load of the form
  • Show a thank you message, then redirect after the user clicks OK

Related articles