Updated July 9, 2024

Dubsado’s drag-and-drop form builder creates beautiful forms that reflect your brand and creativity.

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 to 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
Divider	Add a horizontal line to separate parts of a form.	All form types (with legacy mode off)
Spacer	Insert a blank space.	All form types (with legacy mode off)
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 `project date` or a custom date field. When mapping to the `project start date` or `project end date`, will also include a time field.	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:

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.