How do I navigate the Visual Form Builder?

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
• Form Builder Layers
• Layout Navigation Tree
• Components Menu
• Canvas
• Properties Panel

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 the version menu by pressing the current published version and selecting "+ New Draft". 

Alternatively, you can hover over the Published banner and create a new draft from the pop-up box.

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. When the builder is toggled to the left (Visual Form Builder), you can only navigate between the Form and Workflow. You also have the option to update your visibility by switching from "Form" to "Visibility" above your components menu. 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. 

For drafts, you will have the ability to raise or lower the navigation tree. The navigation tree can be helpful when you have a large form and want to navigate without scrolling.

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.

Canvas

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.