Custom Conditional Form Builder in CloudCannon

I’ve built a conditional form builder inside :cloudcannon:, allowing editors to create dynamic forms with inputs that show/hide based on other selections—all without needing to code. You can check it out here: https://fuscia-cookie.cloudvent.net/.

The implementation uses :11ty: and Alpine.js, extending CloudCannon’s Venture template (which itself uses :11ty: and vanilla :javascript:). Editors can create and manage forms entirely through :cloudcannon:’s UI, selecting from a set of input options, while the underlying logic handles conditional visibility.

I chose Alpine.js because it allows the use of <template>, meaning hidden inputs aren’t in the DOM until triggered. This prevents validation issues, like a required field blocking submission when it’s not visible because it wasn’t the path someone went down.

Key Benefits:

  • Fully managed in :cloudcannon: – Editors can build forms visually, with no need for coding.
  • More complex logic without breaking validation – Hidden fields don’t exist until needed.
  • Submits directly to :cloudcannon:’s inbox – No external tools or integrations required.

While this is still a basic implementation and might not suit highly complex logic needs, it offers a low-cost, no-code solution for clients who want more dynamic forms without relying on third-party form builders.

For any developers interested in building something similar, you can see the code in this :github: Repo and heres a peak at how it looks in :cloudcannon::

Would love to hear feedback! Has anyone else tackled custom form logic in :cloudcannon:?

13 Likes

Super cool!

2 Likes

So cool, so many clients asking about forms! @Gio have you played around with forms from Venture at all?!

2 Likes

I ported Venture’s form builder. Here is a list of changes I made for my template (SiteStitcher)

  • Changed it to use Netlify Forms
    • This was just because I was already familiar with Netlify Forms. I still need to properly explore how cloud cannon does forms
  • Style changes based on theme selected
    • Border color, check mark color, and background color are based off selected color group for that content_block
  • Styled it such that it could be plugged into other content_blocks that could make use of forms.
    • I kept the simple form content_block from venture, but I also created 2 other form options. In the future I plan to implement a modal that will let a form open up on button press
  • Made the helper text rich text.

At one point I had thought about adding conditional fields, but I chose to prioritize other things since the simple form builder was good enough. Seeing what Alysha has made here, I’ll probably recreate the behavior for my forms as well in the future.

Thanks for sharing @Alysha_Jo_Nolan!

4 Likes

Hi Alysha! Awesome! Thank you for this. I will look into it, as I need this quite often.

4 Likes