How to listen to Form Block events and add Custom Code (React version)

Currently there are three events associated with Form Block submission:

  • submit-form event is triggered before form submission.

  • submit-form-success event is triggered after successful form submission.

  • submit-form-failure event is triggered after unsuccessful form submission.

<script>
window.addEventListener('submit-form-form1', (e) => {
  // e.detail is an object with form field names and values
  console.log('form submit', e.detail);
  // form submit { "Full Name": "Softr", "Email": "info@softr.io" }
});

window.addEventListener('submit-form-success-form1', (e) => {
  // e.detail is an object with form field names and values
  console.log('form submit success', e.detail);
  // form submit success { "Full Name": "Softr", "Email": "info@softr.io" }
});

window.addEventListener('submit-form-failure-form1', (e) => {
  console.log('form submit failure', e.detail);
  // form submit failure 'Email field is required.'
});
</script>
2 Likes

Is there a plan for getting this info into docs.softr.io? Or somewhere else?

1 Like

Yes absolutely. Just wanted to share it here before it’s published anywhere else.

1 Like

Does this support form blocks with names that include a hyphen? For example, if the block was called “form-1” in Softr Studio, would that work and if so what should the syntax be?

@jstrauss hyphens should work as expected. Did you notice issues ?