We want to add in the onSubmit() event handler into the embed code for the forms outlined in the documentation here - onSubmit() | Feathery Docs
The goal is for this event to be visible in Google Tag Manager when a user completes the form, so that we can take some of the form field data and add it into the GA4 conversion event.
Here is am example of the code for a form.
<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script> <div id='container'></div> <script> (() => { Feathery.init('xxxxxxxxxxxxxxxxxxx') const loginEnabled = false; Feathery.renderAt('container', { formId: "xxxxxxxx" }, loginEnabled); })(); </script>
I’ve attempted to modify this script to include the onSubmit() functionality so I can capture the form field data, but I’m not too familiar with writing these kinds of scripts.
(() => {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js';
script.onload = () => {
// Create a container div for the form
const container = document.createElement('div');
container.id = 'container';
document.body.appendChild(container);
// Initialize Feathery
Feathery.init('XXXXXXXXXXXXXXXXXXX');
const loginEnabled = false;
// Define the onSubmit function
const onSubmit = (context) => {
console.log('Submitted fields:', context.submitFields);
if (context.lastStep) {
console.log("User finished form!");
}
};
// Render the form with onSubmit callback
Feathery.renderAt('container', {
formId: "XXXXXXX",
onSubmit: onSubmit
}, loginEnabled);
};
document.head.appendChild(script);
})();
Can anyone help me adjust this to get the functionality I’ve described above?