How do I navigate the Visual Form Builder?
  • 2 Minutes to read
  • Dark
  • PDF

How do I navigate the Visual Form Builder?

  • Dark
  • PDF

Article Summary

You can use the Droplet Form Builder to create any form you may need to use. The builder is organized into different sections so you can focus on building one part of your Droplet form at a time. Typically, we build form layouts first, so you'll see the form layout canvas and tools when you first open the Form Builder. You can use the Form Builder Layers section to navigate to another part of the form you would like to work on. 

Form Overview

The top row of the Form Builder tells you about the form you're currently making changes to. It has the form name, whether you have a published version or a draft version currently open, and how many submissions have been made to this version (if the version is published). It also has the three dots menu in the top right corner. The top row now contains the Visual Builder layers as well as the Visual/Code Editor toggle.

If you need to create a new Draft version so you can make changes, you can open theversion menu by pressing the current published version and selecting "+ New Draft". When you've completed your changes, you can use the Publish button to push those changes to the live form. 


Learn more about publishing changes to a form. 

Form Builder Layers

The top layer contains the layers available for the Visual Editor as well as the toggle to switch from the Visual Editor to the Code Editor. Here you can navigate between the layers for the Visual Editor only. You can learn more about the layers of a Droplet form by reading the Basics of Building Droplet Forms. You will use these tabs to create a new Droplet form. 

The next row will display when the toggle is switched the the Code Editor and will show you all the layers available within the Code Editor. Here you can navigate between the layers for the Code Editor. 

Layout Navigation Tree

Published forms are not editable so for published versions, the left side will display a tree that outlines the sections and fields in this form. 

Components Menu

When you are working on a Draft version, you will see a component menu on the left that lists the available form components for you to drag onto the canvas. 

Learn more about available components.


The form canvas is in the center. When you create a draft, you will see new or updated fields here as you make changes. 

The workflow canvas is where you can create new steps or rearrange current steps and see who will be assigned to them as the form submission moves through the workflow you create. 

Properties Panel

The Properties panel is on the right. When you are working on a Draft version, this properties panel will allow you to make edits and adjustments to any selected field on your canvas. Each component has a unique set of properties that you can adjust to fit your needs. Learn more about how to use each component and which properties you can set. 

Was this article helpful?