CODEWITHSUNDEEP
ajaxformssubmitsendinblue
Ahrimann Steiner
Ahrimann Steiner

Reputation: 1314

Sendinblue/Brevo : 2 HTML-Forms interfere with each other

I have integrated 2 BREVO Forms (HTML/ajax type) in one of my webpage:

<form id="sib-form" method="POST" action="https://45ff9c8b.sibforms.com/serve/MUXXXX" data-type="subscription">

After having filled the 2 input fields EMAIL and FIRSTNAME of the second Form, then having clicked on its submit-button,

The input-field EMAIL of the first Form displays an error: "must be filled". enter image description here

After having inspected the code in the script contained at the bottom of the provided copy/paste HTML-FORM in Brevo:

<script defer="defer" src="https://sibforms.com/forms/end-form/build/main.js"></script>

The error seems to be caused by the Selection By Id in this js file :

const y = document.querySelector("#sib-form");
y.addEventListener("submit", (e => { e.preventDefault();....

So that the 2 forms can work on the same page, i have changed the js this way, but it didn t solve the issue:

<form class="sibform_snpt" id="sib-form" method="POST" action="https://45ff9c8b.sibforms.com/serve/MUXXXX" data-type="subscription">

const y_forms = document.querySelectorAll('.sibform_snpt');
for (let i = 0; i < y_forms.length; i++) {
     y= form[i];
     y.setAttribute("novalidate", "true"),
     y.addEventListener("submit", (e => { e.preventDefault();

Upvotes: 0

Views: 1009

Answers (1)

Oberdan
Oberdan

Reputation: 1

On Brevo help website I found that you need to use iFrames to display multiple forms on the same page: https://help.brevo.com/hc/en-us/articles/360019846960-Create-a-subscription-form-Troubleshooting-FAQ https://help.brevo.com/hc/en-us/articles/360019846960-Create-a-subscription-form-Troubleshooting-FAQ

Upvotes: 0

Related Questions