Understanding Form Completion in 3B Forms v4+

In 3B Forms v4, a form's journey doesn't end when the user submits it. Instead, upon successful completion, various actions can occur, including displaying a finish blurb or redirecting the user to another page. Additionally, 3B Forms v4 provides a robust event system that issues two essential events when a form is successfully completed. In this article, we'll explore what happens when a form is completed and how these events play a crucial role in notifying the parent page or components.

Finish Actions: Displaying a Finish Blurb or Redirecting

When a user successfully completes a form, two common actions can be triggered:

1. Finish Blurb: You have the option to define a custom "finish blurb" in the form builder. This is a message or confirmation that can be displayed to the user immediately upon form submission. It serves as an acknowledgment of successful completion and can be customized to suit your needs.
2. Page Redirection: Alternatively, you can configure the form to redirect the user to another page after submission. This is useful when you want to guide users to a specific destination, such as a thank-you page or a confirmation page.

These finish actions can be set up in the form builder based on your requirements, enhancing the user experience and providing clear feedback after form completion.

Form Completion Events

Regardless of whether you choose to display a finish blurb or redirect the user, 3B Forms v4 always issues two events upon successful form completion. These events serve as valuable tools for communicating with the parent page or components, depending on whether the form is embedded as an iframe or as a web component.

Event 1: window.dispatchEvent

window.dispatchEvent(new CustomEvent('3bforms', {
    detail: {
        formResponse
    }
}));

This event is dispatched to the parent page and can be listened to using JavaScript event listeners. It includes the following details:

• formResponse: This object contains valuable information about the form completion, including the status, debug information, and the IDs of the created or updated records. It provides a comprehensive summary of the form submission.

Event 2: window.parent.postMessage

window.parent.postMessage(
    {
        event_id: '3bforms',
        data: {
            formResponse
        }
    }, 
    "*" 
);

This event is specifically designed for iframe implementations. It sends a message to the parent window, again including the formResponse object. The "*" as the second parameter means that the message is sent to any parent window, allowing for cross-origin communication.

Utilizing Form Completion Events

These events are powerful tools that allow the parent page or components to react to form completions in real-time. You can use the information contained within the formResponse object to perform various actions, such as updating user interfaces, triggering further processes, or providing custom feedback to users.

By taking advantage of these events, you can create dynamic and responsive interactions that enhance the overall user experience when working with 3B Forms v4.