Introduction
The after-form-submit event is a crucial component of Wisepops' JS callbacks feature. This event fires immediately after a signup block form is submitted, allowing you to execute custom actions or modify behavior based on the form submission.
Event Basics
Triggering the Event
The event is automatically triggered when a user submits a form within a Wisepops signup block.
Basic Usage
Here's a simple example of how to listen for the after-form-submit event:
wisepops('listen', 'after-form-submit', function(event) {
// Your custom code here
});Preventing Default Action
You can prevent the default action after form submission by calling preventDefault() on the event:
wisepops('listen', 'after-form-submit', function(event) {
event.preventDefault();
// Your custom code here
}); Preventing this event will only cancel the post-submission action (e.g., proceeding to the next step, loading a new page, scrolling to an anchor, or closing the popup). The form data will still be collected. To prevent the entire form submission, use the before-form-submit event instead.
Accessing Form Data
The event.target represents the form element, allowing easy access to form fields and their values:
wisepops('listen', 'after-form-submit', function(event) {
var emailValue = event.target.elements['email'].value;
console.log('Submitted email:', emailValue);
});
Use Case: Tracking Leads with Facebook Pixel
Here's a step-by-step guide to track leads collected by Wisepops in your Facebook Advertising analytics:
Prerequisites
Ensure the Facebook pixel is already installed on your website where Wisepops will collect leads. Follow Facebook's official guide for pixel installation.
Implementation Steps
Open your popup in the Wisepops campaign builder.
In the left menu, select JS callbacks.
Create a new callback linked to the After form submit event.
Copy and paste the following code snippet:
if (event.target.elements['email']) {
fbq('track', 'lead');
}Save your campaign.
Explanation
This code checks if the email field is present in the submitted form data. If it is, it triggers the Facebook Pixel to track a 'lead' event. This approach ensures that:
The lead is tracked only once on Facebook, even in multi-step campaigns.
The tracking occurs when the step containing the email is completed.
Best Practices
Error Handling: Always include error handling in your callbacks to prevent potential issues from breaking your popup's functionality.
wisepops('listen', 'after-form-submit', function(event) {
try {
// Your custom code here
} catch (error) {
console.error('Error in after-form-submit callback:', error);
}
});Performance: Keep your callbacks lightweight to ensure they don't negatively impact the user experience.
Testing: Thoroughly test your callbacks across different browsers and scenarios to ensure consistent behavior.
Data Privacy: Be mindful of data privacy regulations when handling user data in your callbacks.
Conclusion
The after-form-submit event provides a powerful way to extend the functionality of your Wisepops forms. By leveraging this event, you can integrate with third-party services, perform custom validations, or enhance user experiences based on form submissions.