Two forms on one Wordpress page

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.

3 Likes

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

1 Like

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.