Fire User.com events on form submit

Before you start

You need basic knowledge HTML and JavaScript.

How it works

Here, you can see we have two custom attributes: attr_nps_opinion_1 (with the attribute data-force-textarea="true" to force it to render as text area) and attr_nps_rating_1, They will be rendered as HTML inputs with name attributes.

We're using addEventListener() method to send the event when submitting form, our submit selector is a button with .submitForm CSS class.

[:attr_nps_opinion_1 data-force-textarea="true"]
[:attr_nps_rating_1 type="number" max="10" min="0"]

<script>
  document.querySelector('.submitForm').addEventListener('click', function(e) {
    const rating = document.querySelector('input[name="attr_nps_rating_1"]').value;
    const message = document.querySelector('textarea[name="attr_nps_opinion_1"]').value;

    window.parent.postMessage({
      name: 'my_event_name',
      params: {
        nps_rating: rating,
        message: message,
      },
    }, '*');
  });
</script>

Using this code, submit a form like you normally would: filling up attributes set in this form as well as sending an event with two parameters for NPS rating accompanied by opinion message.