NOTE: This article references custom code to add to a code block in Dubsado forms to be used at your own risk. Dubsado does not handle any support questions regarding custom code and is not responsible for errors resulting from improper use. If you have any questions, it is best to reach out to your web developer or ask our Facebook Community. This cheat sheet is provided as a courtesy only.
 

This article assumes you are comfortable using CSS and HTML. If you do not know how to use CSS and HTML, please seek assistance from a web developer.

 

Tips Before Adding CSS

  • CSS can only be added to lead captures, questionnaires, and proposals. There is no ability to add CSS to schedulers, contracts, or sub agreements.
  • Remove any default font face, size, and color set in the Form settings tab to prevent your CSS from being overridden.
  • Formatting applied within text boxes can also override your CSS, so we recommend clearing the formatting from your text and then applying paragraph styles (Heading 1, Heading 2, etc.) as needed.
  • If you are embedding your lead capture form on your website, keep in mind that the background of the form is transparent by default. We recommend setting the background color/image of the area where you will embed the form within your website itself.

 

Setting Up Your Code Block

CSS is added to Dubsado forms using the code block element. Before you can add your CSS, you must add the HTML style tags. Your CSS goes between the opening and closing tags.

<style>


</style>

 

Styling Text

You can add a custom font to your form using the @import rule. To set the "default" font styles for the entire form, use the following selector:

.jb-form {}

This selector will target all the text on the form except for the submit button. For example, if you wanted the default font on the form to be Open Sans, 16px, and the color #474644, you would add the following to your CSS:

.jb-form {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #474644;
}

You can also target heading elements 1-4 using the following selectors:

.jb-form h1 {}

.jb-form h2 {}

.jb-form h3 {}

.jb-form h4 {}

Finally, you can select all text box elements in your form with the selector below. This is useful if you want to add a default border or bottom margin to these elements, for example. Note that it is NOT possible to target individual text boxes.

.form-text {}

 

Styling Other Form Elements

Below is a list of CSS selectors you can use to target common elements in a Dubsado form. This list is not exhaustive - you may need to use your browser inspector to identify additional selectors to achieve the style you want.

/* targets all the question text */
.jb-form label {}

/* short answer and date select boxes */
.jb-form input {}

/* free response boxes */
.jb-form textarea {}

/* dropdown boxes - including workflow and project tracking */
.jb-form select {}

/* date select button with calendar icon */
.btn-cal {}

/* image elements */
.form-image {}

  

Styling the Submit Button

The submit button on the form will not inherit any styles from the .jb-form selector. You can target the submit button using the following selector:

#submitButton button {}

By default, the text on the button will be white and the color of the button will be your brand color. To override these styles, you'll need to use the !important property. For example, if you want to use #ffcc99 instead of your brand color and make the text black, you would add the following CSS:

#submitButton button {
  background-color: #ffcc99 !important;
  color: #000 !important;
}

There is a 1px border on the button that also inherits the brand color, so you may need to remove the border or style it to match your new color.

Did this answer your question?