Hi,
I want two use two different Brevo forms via html embed on one Wordpress page.
When I fill in the 2nd form and try to submit, the first form gives an error for required emailaddress.
It’s about the page www.de-vernieuwers.nl
Hi,
I want two use two different Brevo forms via html embed on one Wordpress page.
When I fill in the 2nd form and try to submit, the first form gives an error for required emailaddress.
It’s about the page www.de-vernieuwers.nl
Hi @Sebastiaan ,
Indeed, I tried as well, and it did not work. I am afraid it does not work because the javascript calls the same scripts and checks the same form fields. Let me check this internally
I confirm, unfortunately this is not working for the moment. We are investigating this.
I’m adding @Mohit in the loop, so that he can follow this topic as well.
@Sebastiaan you can consider using the iframe embed option, which should function for multiple forms on the same page. Meanwhile, we’ll make an improvement to support two HTML-based forms on the same page.
Is there already an update about using two forms on one page?
I have it working on my site. I changed the button from:
<input type="submit" class="sib-default-btn" value="Subscribe">
to:
<button style="border: none;color: #ffffff;background-color: #074973" type="submit" class="elementor-button elementor-size-xs" id="signup1">SIGN UP</button>
The key part is putting unique id names in each form. I show my styling here for demo purposes only…it is not required in your form.
Another note – this was created with the WP plugin. I didn’t use the brevo.com form, which may work differently.
Hope this helps!
TJ
I don’t understand how to add the id names. They need to correspond with something in Brevo I presume.
Short answer is that you can use any name as long as each id is unique within each form on the page. I used id=« signup1 » on my first form, and id=« signup2 » on the second. In forms, the id signals that the specific button is tied to the data in that form.
You can Google « HTML id Attribute » for the official specifics. There are a lot of other suggestions and examples that may help you see how to apply this in your use case.
Cheers!
I tried it, but it didn’t work.
This was the new code for form 1:
<button class=« sib-form-block__button sib-form-block__button-with-loader » style=« font-size:16px; text-align:center; font-family:« Comic Sans MS », sans-serif; color:#FFFFFF; background-color:#ca7239; border-radius:2px; border-width:0px; » form=« sib-form » type=« submit » id=« nieuwsbrief »>
And the second was an exact copy of the whole form, but with id « nieuwsbrief-footer ».
Is there any progress for two HTML-based forms?
And I tried it with:
<input class="input " type=« text » id=« EMAIL » name=« EMAIL » autocomplete=« off » placeholder=« Email » data-required=« true » required / id=« nieuwsbrief-main »>
<input type="text" name="email_address_check" value="" class="input--hidden" id="nieuwsbrief-main">
<input type="hidden" name="locale" value="en" id="nieuwsbrief-main">
But their are three INPUT fields in one form. And other forms have even more. And the INPUT field for a form line (like email address) already had an ID.