🎉 This article is written for our new form builder! If you are still using the old form builder, check out this article and don't forget to make the switch by January 31, 2023.
Dubsado’s drag-and-drop form builder makes it easy to create beautiful forms that reflect your brand and creativity.
In this article...
Build a form
Because building a form is a visual process, we thought it would be best to show you! Watch the tutorial below for a quick introduction on how to use our form builder.
Here are a few key actions you can take:
Drag new elements in from the element library, or add them inline with the plus (+) icon.
Elements with text can be edited inline. Hover over the element and click the pencil icon or double click to start editing text inline. Click outside the element or click the checkmark to save your changes.
Click on an element once to open its settings panel.
Click anywhere on an element to pick it up and drag it. A thick, green line will indicate where the element can be dropped.
Containers can be selected and dragged from the container toolbar that appears on hover.
Use the Preview button to preview your form as the client will see it.
Element library
Click the grid icon in the navigation sidebar to access the element library.
The table below lists all the form elements available and when it is best to use each one. Some form elements are only available on certain form types.
Element | Description | Available on |
Container | Organize and arrange other elements in one, two, three, or four columns. | All form types |
Text box | Display text that will be read-only for your client (e.g. heading, contract clause, welcome message, instructions). | All form types |
Images | Display an image (e.g. logo, mood board, photography examples, product images). | All form types |
Short answer | Collect a short, single-line response from your client. Can be mapped to client or project fields (e.g. name, email, phone number). | All form types |
Free response | Collect a longer, multi-line response from your client. | All form types |
Date select | Collect a date from your client. Can be mapped to the When mapping to the | All form types |
Initials | Display a term or clause for your client to initial. This field is always required. | Contracts, sub-agreements |
Signature area | Collect an electronic signature from your client. Add an additional signature area for you to countersign. This field is always required. | Contracts, sub-agreements |
Package | Display a package for your client to select. Selected packages will be added to the primary invoice when the form is submitted. | Proposals |
Workflow | Start a workflow based on your client’s selection from a dropdown menu. Overrides the default workflow setting on a lead capture form. | Lead captures |
Project tracking | Applies a project source tag to the project based on your client’s selection from a dropdown menu. Use it to find out how your clients heard about you (e.g. web search, Instagram, word of mouth). | Questionnaires, proposals, lead captures |
Dropdown | Ask your client to select one option from a dropdown menu. | All form types |
Checkboxes | Ask your client to select one or more options with checkboxes. | All form types |
Multiple choice | Ask your client to select one option with radio buttons. | All form types |
File uploader | Allow your client to upload one or more files. Max file size is 8MB per file. You can download the files by viewing the completed form. | Questionnaires, proposals, lead captures |
HTML block | Insert custom code to display something on your form. Can be used to embed a video. JavaScript is allowed, but will not run in the builder. | Questionnaires, proposals, lead captures |
👋 Here’s a tip... short answer and date select fields can be mapped. This tells Dubsado where to save the information entered by the client so that it can be used later. Click here to learn more about field mapping.
Form settings
Click the gear icon in the navigation sidebar to access the form settings.
Available form settings will vary by form type. The General settings available on most form types are:
To learn more about settings on specific form types, check out the articles below:
Proposal form settings (coming soon)
Form styling
Click the palette icon in the navigation sidebar to access the form styling settings.
These settings apply to the entire form:
Question styling: choose the font, font size, and font color for question elements on the form (e.g. short answer, free response, multiple choice, etc.). Does not apply to text boxes or package elements.
Submit button text: change the text displayed on the submit button. Available on questionnaires and lead captures only.
Padding: adjust the spacing at the top and bottom of your form. This padding applies to the entire page.
Custom CSS: write custom CSS code to style your form. Check out our CSS guide for best practices and tips.
Containers
Use containers to organize elements on your form, add color, and control the spacing between sections.
In addition to the form styling settings, containers offer more customization options:
column layouts
background colors and images
width adjustments
margins and padding
Click here to learn more about containers and how to customize them.
Text formatting toolbar
The text formatting toolbar appears when you edit text inside a text box or package element.
It will allow you to:
insert smart fields to display dynamic content
bold, italicize, and underline text
change the font and size of text
Click the A icon in the toolbar to access more options:
text color and text background color
alignment
heading and paragraph formats
numbered and bulleted lists
indenting
quote block
insert image
insert table
insert horizontal line