I posted before and due to the same situation (webflow project done by freelancer external to our company) I have to sort out some bugs and having trouble with it.
We have 2 forms on our landing page:
A - Hero Section - Email Input only with additional pop for data protection confirmation.
B - CTA Contact Us - Pop Up form with standard contact details tb filled.
When pressing x - close on the A pop up (image 1) the data protection pop up confirmation of the first one appears (image 2). It should only close the pop A and get back to the landing page screen. I understand this might be at an interaction at some level but just can’t seem to sort it out.
The problem here is, that the nav bar button triggers both popups.
It is not the case that closing one, the other appears.
I had a quick look at it and found, popup-wrap class are triggered with a click on both buttons.
The contact form, which is triggered from the nav bar button, is wrapped inside that popup-wrap class, which would be okay if it was the only use case. But it is not. It is also used with the email opt-in confirmation popup (which is not nested inside).
So I see a conflict here due to design decision and not linking proper interactions to it.
So what to do?
The popup wrap should trigger as a stand-alone div with no nested divs inside.
With this approach, you simply can trigger this div independendly from each popup.
In addition, you have to trigger your needed popup which is linked to a button interaction.
That would be the proper way.
Yes, there is the opportunity to fix it with some adjustment in the interaction section only.
Maybe someone will dig into that, i guess it is just a thing of 10-20 clicks.
Just add the comboclass “newsletter” to this div.
It makes nothing, but specifying the trigger class, which is what you need.
The same task you gonna do with the contact form popup.
You can see the div also at the very bottom of your tree on the left side.
Just add the class “contactform” (or whatever you want) to it.
Now, click the trigger button of the newsletter modal and go to interactions.
Here, you want to add your combo class “popup wrap newsletter”, which says currently only “popup wrap”:
Do the same for the contact form modal.
And that’s it.
Now you have 2 seperate triggers for 2 seperate popups. And not as before, 1 trigger for 2 popups which gets triggered both due to only 1 interaction class.
Thank you so much for taking the time looking into this!
I have done accordingly but it seems that the interaction changes on both even though now they have different classes. When I do the second step on one of the popup wraps it always affects the other.
I’m sending the link below in case you can advise further.
Just to confirm the interaction class iss added at the close (images below) where there is the interaction right? And on each of the pop ups? I have done that it’s just everytime I change on one (ex: adding popwrap + contactform) it changes on both popup wraps - the newsletter one and the contact form).