Discover the best conditionalvisibility websites created by professional designers. Get inspired and start planning your perfect conditionalvisibility web design today!

Important note: This project is no longer maintained in favor of the upcoming (and more advanced) Form Logic project that I'm working on in Finsweet. Feel free to play around with this app as much as you want, but I recommend you don't use it in serious projects as I won't be offering any support for it!

-------------------------------------

Use this builder tool to create advanced forms in just a few clicks, without writing one single line of code!

MULTI STEPS
- Multiple steps with input validation
- Additional options like alerts, custom interactions, displaying values, sending hidden forms, and much more.

CONDITIONAL LOGIC
- Build workflows that show, hide, enable, disable, require or unrequire inputs depending on your logic.
- Trigger custom animations when your conditions are met.

More features comming soon. Play around with the builder and let me know if you find any bug, have a request, or need help using it.

Advanced Forms Builder

Advanced Webflow Forms - Multi Steps & Conditional Logic

Webflow

The inspiration for this cloneable came from our No-Code Conf 2021 speed build challenge  — a friendly livestream competition where 8 contestants went head-to-head in a bracket-style competition to build something quickly and creatively in Webflow.

To keep the audience informed with the schedule and results throughout the week, we created a fully responsive bracket, powered by the CMS, and updated it in real-time. The speed build challenge inspired us to push the limits of our own CMS and Designer. So, with March madness right around the corner, we expanded our initial 8 contestant bracket to 64!

Reference:
https://webflow.com/nocodeconf/speed-build-challenge
https://webflow.com/nocodeconf

Webflow CMS tournament bracket

Memberstack

MemberStack is a designer-friendly membership platform that works with Webflow. 

------------ 

This site a fun example of using links and multi-step signup forms in MemberStack to create dynamic user onboarding flows. The homepage has a tutorial which shows how the site was built and how you can customize it. I've included tips to explain how it works.  

------------ 

To get started - create a free MemberStack account, and add the URL of your new site during setup.

Custom Onboarding UI

#11 - Personalized Onboarding UI

This template is a collaboration between MemberStack and UI/UX designer Phil Cook. Huge thanks to Phil for repurposing this beautiful template for all of us to use. 

https://webflow.com/Philip

---------

MemberStack is a designer-friendly membership platform that works with Webflow.

Fitness template

#13 - Fitness Template

Update: Now cloneable (!) with a wishlist and complex filters feature (powered by jetboost.io)

Info: I added the jetboost favorites booster feature in the form of a wishlist function. Check the "all rides" section and click the flash icon next to the bikes to turn favorite on / off. In the navbar check the counter and navigate to your personal wishlist! All done with jetboost!

I added Jetboost filters as well! Check it. It's powerful.

Important: Please remove all content and direct references when cloning. Thanks. 

About: Always wanted to build something like this – simply to showcase my online collection of great e-rides. Original set up as a e-commerce I disable the check out (could not switch back to normal collections – kept it for now like that).

freeeride

Clone: freeeride - cms with wishlist feature and more...

Video with Narrative Description - Conditional Setup

Video Narrative Sample

Happy Wednesday!

In this project I created a way to toggled an input field as required or not required depending on its visibility. 

This is super handy if you only want a field to be required if the user needs it. I.e. Maybe you have a form with some conditional fields. Let's say you only want to collect someone's phone number IF they give you permission to contact them. You want the phone number to be required, but only if they give you permission to contact them. 

This allows the form to submit when the required phone number field is hidden, but prevents the submission if it's visible. Super handy!

if you have any questions please leave a comment on the loom video here. https://www.memberstack.com/scripts/32-set-input-to-required-if-visible

Set Field to Required when Visible

Once your member signs up, show them something (such as a coupon code, welcome screen, waiting screen, or anything you want) for a set duration after they have signed up. 

This is saved in JSON, so it cannot be overridden.

Show Element For X Duration

Show Element For X Duration After Signup | MemberScript #27 & #28

Working on some form logic?

Want to make Shaq appear if someone checks a checkbox?

Or, just doing literally anything that requires conditional visibility based on a checkbox?

Well then boy, do I have the resource for you.

Simply copy the script and attributes applied to the checkbox and image, and you're good to go.

Display Element If Checkbox

Display Element If Checkbox Is Checked

Bellevue

The official site of Bellevue Baptist Church in Memphis, TN. Bellevue's website was originally built using WordPress but was migrated to Webflow in September 2021. This site is packed with complex filters, conditional visibility, and is nearly completely driven by dynamic data. It was a beast to build, and there's still plenty more to do. 

Bellevue's mission is to love God, love people, share Jesus, and make disciples. Happy no-coding!

Bellevue Baptist Church

A CMS-based approach to visualizing the different roles you played within a project. This uses a simple toggle field for each type of role, and conditional visibility to show a version of the dot as active or inactive.

Portfolio Dynamic Role Visual

Sadly Webflow does not have this functionality yet but we can use a workaround for this by the power of CSS until it become available natively.

OR operator for Conditional Visibility

A full responsive webflow cms website with a lot of customisation in the collection pages using conditional visibility to differentiate the information displayed per collection.

Copy of Color In Tech

color-in-tech-5912b0ba7a0448235f4b2c921

A combined business and personal site with an interactive toggle that allows users to switch between "work mode" and "play mode".

Max Joles

MaxJoles.com

We used Geo JS to create a custom code that would let you show or hide different sections of the website based on the user's geolocation.

For example, if a user was in the United States, we would show them a section about our US-based services. If a user was in Europe, we would show them a section about our European services.

This might be super-helpful when u need to show/hide specific blocks or elements on the page based on the visitor's location.

Keep in mind, that hidden elements would still be visible in DOM.

_________

Want to work with us or have questions? 
Email 👉 hi@divblockstudio.com

GeoJs

A quick proof of concept for styling images and captions within Rich Text Elements and a bonus proof of concept for toggling those stylings via component visibility properties + CMS field toggles.

Styling RTE Images + Captions & CMS Custom Code Toggles

Styling RTE Images and Captions + CMS Code/Component Toggles

This is one possible method of updating your pricing table to display a member's current plan.

Current Plan UI

Howdy! 

Looking to show your users something different based on the current time of day? Well, this is for you!

Simply enter in the attributes like how they are on these "modal" elements and then paste in the code in the page body, and you're ready to rock!