If you'd like to implement a Custom form submission listener using a Run JS card to handle custom field submissions and manage the post-submission behavior via Composer, you can follow the instructions below. The form submission listener will enable the desired action, such as a page reload or redirect after the custom field form is submitted.
-
Identify the Form Submission Event: The first step is to identify the event that indicates the completion of the custom field form submission. In this case, the event to listen for is the "formSend" event.
-
Create the Form Submission Listener: Using the Run JS card in Composer, you can add a JavaScript code snippet to listen for the "formSend" event. Once the event is detected, the listener will trigger the desired action.
window.addEventListener( "message", (event) => { try { // need this for postMessages that do not have JSON content in the event.data field const eventDataObject = JSON.parse(event.data); if (typeof eventDataObject === 'object') { if(eventDataObject.event === 'formSend') { console.warn('FORM SENT'); // refresh or redirect here } } } catch (e) {} }, false ); -
Customize the Action: Customize the action performed after the form submission as per the desired behavior. For example, use
location.reload()to trigger a page reload orwindow.location.href = 'https://www.website.com/'to redirect the user to the homepage of your website. -
Placement of Run JS Card: To ensure the form submission listener is active only when needed, place the Run JS card only after the respective Custom form action card in Composer. This way, the listener is enabled when the customer is shown the form, avoiding interference with other flows that may use the same event.
-
Test and Review: Test the implementation thoroughly to verify that the form submission listener works as intended. Review the behavior after submitting the custom field form to ensure the user is redirected or the page is reloaded according to the desired action.