Alongside using form container attributes to configure the Formcentric client, you can also configure the client with the global window.formcentric object. This method offers advanced customisation options. Configuration via the window.formcentric object is especially useful for advanced use cases. These include integration into single-page applications or the implementation of user-defined authentication.
window.formcentric = {
// Initialisation function. Can be accessed manually and initialises all form containers found.
initFormcentric: function(debugMode) { /* ... */ },
// Formcentric app configuration
formapp: {
// Template definitions
templates: { /* ... */ },
// Start function
start: function() { /* ... */ },
// Form instances (by form ID)
instances: {
'YOUR FORM ID': {
// Settings for this specific form instance
// Initialisation element (is filled out automatically)
initElement: HTMLElement,
// User-defined headers for the initial request
initialRequestHeaders: {
'Custom-Header': 'Value'
},
// End form (if the element is still in the DOM)
unmount: function() { /* ... */ },
// Stop and clean up the form
stop: function() { /* ... */ }
}
}
}
}
You can configure user-defined headers for the initial request:
<script>
// Initialise Formcentric object
window.formcentric = window.formcentric || {};
window.formcentric.formapp = window.formcentric.formapp || {};
window.formcentric.formapp.instances = window.formcentric.formapp.instances || {};
// Configuration for a specific form
window.formcentric.formapp.instances['YOUR FORM ID'] = {
initialRequestHeaders: {
'Custom-Header': 'User-defined value'
}
};
</script>
You can also control the initialisation manually:
<script>
// Add form container
const formContainer = document.createElement('div');
formContainer.setAttribute('data-fc-id', 'YOUR FORM ID');
formContainer.setAttribute('data-fc-src-url', 'https://form.formcentric.com')
document.getElementById('form-placeholder').appendChild(formContainer);
// Initialise Formcentric manually
window.formcentric.initFormcentric();
</script>
<script>
// Stop form and release all resources
function stopForm() {
window.formcentric.formapp.instances['YOUR FORM ID'].stop()
}
// Event listener for a button
document.querySelector('.button--stop').addEventListener('click', stopForm)
</script>
