How to redirect to form success state newsletter with Brevo?

Design help Webflow integrations
1

Hi everyone,

I am having an issue with Brevo (newsletter tool). Brevo natively offers that when the form is submitted, you can link to another (new) page. I would like to like to link to the success state of my form instead.

From what I have gathered, this should involve some Javascript that intercepts the redirection.

I have checked some other discussions on here, but none of the suggested scripts worked for me.

I have tried the following script:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById('newsletter');
    const successMessage = document.querySelector('.success-message');

    if (form && successMessage) {
      form.addEventListener('submit', function(event) {
        event.preventDefault(); 

        showSuccessMessage();
      });
    }

    function showSuccessMessage() {
      form.style.display = 'none'; // Hide the form
      successMessage.style.display = 'block'; // Show the success message
    }
  });
</script>

Strangely enough it redirects to the success state of my contact form. I have tried renaming & re-IDing the success state of my contact form, and calling the intended success state of my newsletter form. However, then it just shows a blank field after successful submission.

I of course still want the successful submission to be transmitted to Brevo.

Anyone know what I may be doing wrong or came across something similar in the past? I would really appreciate your help.

2

MANAGED TO SOLVE THIS WITH CUSTOM CODE & iFRAME:

Code-embed as child of ‘Form Block’, iFrame

<iframe name="hidden-iframe" style="display: none;"></iframe>```
3

& code before body tag in page settings

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById('solyxa-newsletter');
    const successMessage = document.getElementById('success-message-newsletter');
    const iframe = document.querySelector('iframe[name="hidden-iframe"]');

    if (!form) {
      console.error('Form not found');
      return;
    }
    if (!successMessage) {
      console.error('Success message not found');
      return;
    }
    if (!iframe) {
      console.error('IFrame not found');
      return;
    }

    form.addEventListener('submit', function(event) {
      console.log('Form submitted');
      
      // Listen for load event on the iframe to show the success message
      iframe.addEventListener('load', function() {
        showSuccessMessage();
      });
    });

    function showSuccessMessage() {
      console.log('Showing success message');
      form.style.display = 'none'; // Hide the form
      successMessage.style.display = 'block'; // Show the success message
      console.log('Form display:', form.style.display);
      console.log('Success message display:', successMessage.style.display);
    }
  });
</script>