Streaming live at 10am (PST)

Pop Up Interactions

Hi all,

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.


any suggestions would be much appreciated and the link is below:

https://preview.webflow.com/preview/retraclandingpage?utm_medium=preview_link&utm_source=dashboard&utm_content=retraclandingpage&preview=f65aeb6886e282365ba26ca7b8af062a&mode=preview

Thank you.

Margarida

Hey Margarida.

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.

Hope it helps.
Grüße

Alright, i got a proper sultion here for you.

You have 2 seperate popup wrap divs with -unfurtunately- different content, but at the same time, the identically trigger interaction class.

This is for your newsletter popup:

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.

Hey @Marius1989,

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.

https://preview.webflow.com/preview/retraclandingpage?utm_medium=preview_link&utm_source=designer&utm_content=retraclandingpage&preview=f65aeb6886e282365ba26ca7b8af062a&mode=preview

Thank you again so much.

Margarida

Hey Margarida.

You forgot to adjust the interaction class, like shown on the 2nd image.
Please add them accordingly and see if it works.

PS: If it was not working in your case, please save the project after all the steps and I will have another look into it.

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).
Screenshot 2021-02-17 at 17.05.50

Screenshot 2021-02-17 at 16.51.40

You do not want to change anything in the interactions, but only adding the combo class to:

  • header button
  • newsletter button

Ok, I was missing that! All is done, it’s awesome :smiley:

Vielen danke @Marius1989 for your time and patience!!

Margarida

1 Like