Javascript API

The Formstack 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 in your page or add the code to the 'Custom Javascript' option in the Form Settings drawer of the Form Editor.

The following endpoints are defined:

 

FF_OnBeforeRender

Defining this function in your page 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 that this endpoint can only be defined within the page of embedded forms, not within the Form Settings area.)

This function is not compatible with Native Cloud or Community forms.

Example - Show a ‘please wait’ message to the user:
function FF_OnBeforeRender(){ alert(‘about to render the form, please wait...’); return true; }

FF_OnAfterRender

Defining this function in your page 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!’); return true;
}

FF_OnBeforeSave

This function will be executed after the user clicks the Send button on their form and before the rendering engine saves the form information. This is 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 startDt = $(‘#dvFastForms Account.StartDate’ ).val (); var endDt = $(‘#dvFastForms Account.EndDate’ ).val(); if( (new Date(startDt).getTime() > new Date(endDt).getTime())) { alert(‘Start date must be before end date!’); return false;
                 fs('#dvFastForms #btnsubmit').removeAttr('disabled');‚Äč } else { return true; } }

FF_OnAfterSave

This function will be executed after the user’s form information has been saved to the database. This is useful for custom behaviour 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.homepage.com" ); } }
 

Javascript in Communities

Things are almost exactly the same when employing Javascript in a SFDC Communities form, but with a couple minor changes.

window.FF_OnBeforeSave = function() {
var startDt = fs(‘Account.StartDate’ ).val ();
var endDt = fs(‘Account.EndDate’ ).val();
if( (new Date(startDt).getTime() > new Date(endDt).getTime())) {
alert(‘Start date must be before end date!’); return false;
} else { return true; }
}

To define an Endpoint, prepend "window." to the end point, as below:
    **NOTE** We recommend using "fs" in place of "$" when writing jQuery. Either should work, but in order to avoid conflicting jQuery, we recommend using "fs"

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
  • Auto-submit the form as soon as it's hit
  • Show a thank you message, then redirect after the user clicks OK

Was this article helpful?

295a6682296ed601774749fedcc7750c@formstack.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete