Interactions 2 Modal/Cart Sign-Up Form with Floaty Div-Spheres

This is the first “official” Interactions 2 design I’ve done and am super proud of myself. The concept was to offer a explainer modal prior to signing up so I decided to hide/show 2 different elements using Flexkbox, Fixed Cart, and Pop-Up modal. For fun, I made an SVG of colored waves (set the background to transparent) and applied a higher Z-index then the small Div-Spheres so they look like they’re floating on the waves :ocean:

I’d love to hear your thoughts on how I can improve the UX, add interactions or hear questions on how I did what I did. Webflow’s the best tool since the socket-wrench :v:

Shared Link:

https://preview.webflow.com/preview/personal-portfolio-8c525e?preview=6d717320dfbe3bb6ae8f769f460d8c4a

Live Page:

https://www.davidsheltren.com/

2 Likes

Very well refined form panel :smiley: Nice landing page!

1 Like

Thanks @vincent! A year ago, I didn’t know the difference between Padding and Margin :joy: By the way, just scoped your template on creating a pop-up cookie… thanks for the outlining that process! Other then conducting a simple search for learning about cookies and implementing them in a website, can you recommend any articles/tutorials to expand my knowledge? The simpler the better… :grinning:

Not on the top of my head. I’m like you, I’d Google it. Also it’s worth noting that with GDPR this template is highly outdated. I actually build those template starting with no knowledge of the topic… I search, experiment, and when it works I summarize into a template. It’s as useful to me than to the others. And now that Copy-Paste exists, I advise everyone to do the same.

1 Like