🎉 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 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:

To learn more about settings on specific form types, check out the articles below:


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

  • hyperlink

  • insert image

  • insert table

  • insert horizontal line

Did this answer your question?