Frontend Events

The frontend form component fires several Javascript custom events (CustomEvent) on the window object during its lifecycle. You can listen to these events to run custom Javascript logic, hook into third-party analytics, or conditionally intercept workflows like form redirections.

---

Listening to Events

To listen to an event, use standard Javascript event listeners on the window object:

window.addEventListener('_mpr_submit_success', function(event) {
  console.log('Event triggered', event.detail);
});

---

Available Events

_mpr_form_value_changed

Triggered whenever a value inside the form changes.

• Cancelable: false

• Payload (event.detail): The current Formik state object. You can access the raw form values using event.detail.values.

---

_mpr_form_submit

Triggered right as the user hits the submit button, but before the request is sent to the application backend. Useful for validation tracking or signaling the intent to submit.

• Cancelable: false

• Payload (event.detail): The raw form values object.

---

_mpr_submit_success

Triggered after a successful form submission when the server returns a successful response. This event is highly customizable and can be intercepted.

• Cancelable: true

• Description: If your event listener invokes event.preventDefault(), the default auto-redirect behaviour will be skipped (though the visual success message will still appear). This allows you to perform conditional redirects.

• Payload (event.detail): An object containing the submission scope and server response details.

  {
    "formSlug": "your-form-slug",
    "formId": 12345,
    "submission": {
      "customer": { "email": "...", "firstName": "...", "timezone": "..." },
      "items": [
        { "product": { "id": 1, "title": "..." }, "serialNumbers": ["XYZ"] }
      ]
    },
    "response": {
      "success": true,
      "redirect": "https://example.com/custom-redirect",
      "downloads": [],
      "registeredBefore": false
    }
  }

Example: Conditional redirect on form success

window.addEventListener('_mpr_submit_success', function(e) {
  // Prevent the default redirection if one is configured
  e.preventDefault(); 
  
  var data = e.detail;
  var items = data.submission && data.submission.items;
  var purchaseLocation = items && items[0] ? items[0]['Where did you purchase?'] : '';
  
  // Conditionally redirect based on the form input value
  if (purchaseLocation && purchaseLocation.toLowerCase().includes('amazon')) {
    window.location.href = '/pages/amazon-warranty';
  } else {
    // Fall back to original redirect or home
    window.location.href = data.response.redirect || '/';
  }
});

---

_mpr_product

Triggered when the form dynamically fetches a product's details directly from the frontend (for example, when looking up a product via URL parameter ?productId= or filling a product using a verified serial number).

• Cancelable: false

• Payload (event.detail): The product details returned from the application backend.

---

_mpr_registrations_listed

Triggered upon successfully fetching the list of a customer's previously registered items. Note that this occurs on pages displaying registration entries rather than the registration form itself.

• Cancelable: false

• Payload (event.detail): An array containing the user's past registration entries matching the active display configuration.