How to Style, Hide & Edit All Dubsado Buttons

Dubsado Customizations
Written By Colin Tierney

Did you know that with a little bit of code, you’re able to update all of your Dubsado buttons? This is important because the goal is to build a Dubsado form that directly reflects your branding from your website which will ultimately create a seamless experience for your leads and clients.

Various Dubsado buttons styled with different borders, shapes, colors and typography

When working with the new form builder, there’s a new way to add CSS code to your Dubsado forms. Instead of using an HTML block like we are used to with the legacy builder, Dubsado added a native CSS box that we’re able to utilize for styling elements.

This means you won’t have to use the <style> tags to wrap your CSS (and if you do, the code will not work, so it’s important that you leave them out)!

 

Interested in updating all of your form’s buttons without having to fuss with code? Check out our FREE Fonts, Buttons & General Styles plugin!

 
Visual instructions using bright green arrows to indicate where to find the “Edit CSS” button and CSS box, under “Form styling” of a Dubsado Proposal, to add code that will update button styling.

When you want to add CSS to your form using the new form builder, click on the “Form styling” palette icon on the left, then scroll to the bottom and click the “Edit CSS” button.

When adding HTML or Javascript to your form, you will still use an HTML block. In this tutorial, there will be options to edit the text of specific buttons using Javascript, in which case, you’ll need to add an HTML block to your form.

If you want to update your button’s typography—with a font Dubsado doesn’t natively offer—refer to this tutorial for using your brand’s custom fonts. Then, adjust accordingly in the CSS of your button(s) CSS.

Submit Button

The following code will update your Proposal, Questionnaire, Contract, Sub Agreement and Lead Capture form’s submit button.

Style Submit Button

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* STYLE SUBMIT BUTTON */
.submit-form-button {
    font-family: Helvetica, sans-serif; /* Update font */
    color: #000000 !important; /* Update font color */
    font-size: 11px; /* Update size of font (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    font-weight: normal; /* Update weight of font (e.g., 300, 400, 500, etc.) */
    letter-spacing: 0.35em; /* Update horizontal spacing between text characters (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    line-height: 0em; /* Update distance between lines of text (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    text-transform: uppercase; /* Choose between “uppercase,” “lowercase,” “capitalize,” or “none” */
    font-style: normal; /* Choose between “normal” or “italic” */
    background-color: #ffffff !important; /* Update background color */
    border-radius: 0px; /* Update corner radius */
    border: 2px solid; /* Update border thickness */
    border-color: #000000; /* Update border color */
    padding: 20px 15px; /* Update space around button text (first value is vertical spacing, second value is horizontal spacing) */
}
/* STYLE SUBMIT BUTTON ON HOVER */
.submit-form-button:hover {
    background-color: #000000 !important; /* Update background color on hover */
    color: #ffffff !important; /* Update font color on hover */
    border-color: #000000; /* Update border color on hover */
}

Hide Submit Button

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* HIDE SUBMIT BUTTON */
 .submit-form-button {
     display: none;
}

Hide Proposal Total Text

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* HIDE PROPOSAL TOTAL TEXT */
 .proposal-total {
     display: none;
}

Edit Submit Button Text

This is your Javascript. Add an HTML Block onto your Dubsado form. Delete the example code, then copy and paste the following code into the block:

<script type="application/javascript">
    document.querySelector('.submit-form-button').innerHTML = 'New Button Text';
</script>

Note: Dubsado only allows Javascript on Proposal, Questionnaire, and Lead Capture forms. This means, we can’t use the above code to edit your Submit button text on Sub Agreement and Contract forms.

You can edit your Lead Capture form’s submit button natively by going to Form styling > and updating the field under “Submit button text.”

Questionnaire Save Draft Button

The following code will be able to update your Questionnaire form’s Save Draft button.

Style Questionnaire Save Draft Button

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* STYLE QUESTIONNAIRE SAVE DRAFT BUTTON */
.save-draft-button {
    font-family: Helvetica, sans-serif; /* Update font */
    color: #000000 !important; /* Update font color */
    font-size: 11px; /* Update size of font (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    font-weight: normal; /* Update weight of font (e.g., 300, 400, 500, etc.) */
    letter-spacing: 0.35em; /* Update horizontal spacing between text characters (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    line-height: 0em; /* Update distance between lines of text (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    text-transform: uppercase; /* Choose between “uppercase,” “lowercase,” “capitalize,” or “none” */
    font-style: normal; /* Choose between “normal” or “italic” */
    background-color: #ffffff !important; /* Update background color */
    border-radius: 0px; /* Update corner radius */
    border: 2px solid; /* Update border thickness */
    border-color: #000000 !important; /* Update border color */
    padding: 20px 15px; /* Update space around button text (first value is vertical spacing, second value is horizontal spacing) */
}
/* STYLE QUESTIONNAIRE SAVE DRAFT BUTTON ON HOVER */
.save-draft-button:hover:enabled {
    background-color: #000000 !important; /* Update background color on hover */
    color: #ffffff !important; /* Update font color on hover */
    border-color: #000000 !important; /* Update border color on hover */
}

Hide Questionnaire Save Draft Button

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code into the:

/* HIDE QUESTIONNAIRE SAVE AS BUTTON */
  .save-draft-button {
     display: none;
}

Edit Questionnaire Save Draft Button Text

This is your Javascript. Add an HTML Block onto your Dubsado form. Delete the example code, then copy and paste the following code into the block:

<script type="application/javascript">
    document.querySelector('.save-draft-button').innerHTML = 'New Button Text';
</script>

Client Portal Button

Style Client Portal Button

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* STYLE CLIENT PORTAL BUTTON */
.back-to-portal-button {
    font-family: Helvetica, sans-serif; /* Update font */
    color: #000000 !important; /* Update font color */
    font-size: 11px; /* Update size of font (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    font-weight: normal; /* Update weight of font (e.g., 300, 400, 500, etc.) */
    letter-spacing: 0.35em; /* Update horizontal spacing between text characters (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    line-height: 0em; /* Update distance between lines of text (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    text-transform: uppercase; /* Choose between “uppercase,” “lowercase,” “capitalize,” or “none” */
    font-style: normal; /* Choose between “normal” or “italic” */
    background-color: #ffffff !important; /* Update background color */
    border-radius: 0px; /* Update corner radius */
    border: 2px solid; /* Update border thickness */
    border-color: #000000; /* Update border color */
    padding: 20px 15px; /* Update space around button text (first value is vertical spacing, second value is horizontal spacing) */
}
/* STYLE CLIENT PORTAL BUTTON ON HOVER */
.back-to-portal-button:hover {
    background-color: #000000 !important; /* Update background color on hover */
    color: #ffffff; /* Update font color on hover */
    border-color: #000000; /* Update border color on hover */
}

Hide Client Portal Button

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* HIDE CLIENT PORTAL BUTTON */
.back-to-portal-button {
     display: none;
}

Edit Client Portal Button Text

This is your Javascript. Add an HTML Block onto your Dubsado form. Delete the example code, then copy and paste the following code into the block:

<script type="application/javascript">
    document.querySelector('.back-to-portal-button').innerHTML = 'New Button Text';
</script>

Download PDF Button

Style Download PDF Button

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* STYLE DOWNLOAD PDF BUTTON */
.pdf-button {
    background: #ffffff; /* Update background color */
    border-radius: 6px; /* Update corner radius */
    border: 1px solid #000000; /* Update border thickness and color */
}
svg.svg-inline--fa.fa-download.fa-w-16 {
    color: #000000 !important; /* Update icon color */
}
/* STYLE DOWNLOAD PDF BUTTON ON HOVER */
.pdf-button:hover {
    background-color: #000000 !important; /* Update background color on hover */
    border-color: #000000; /* Update border color on hover */
}
.pdf-button:hover svg.svg-inline--fa.fa-download.fa-w-16 {
    color: #ffffff !important; /* Update icon color on hover */
}

Hide Download PDF Button

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* HIDE PDF BUTTON */
.pdf-button {
     display: none;
}

File Uploader button

Style File Uploader Button

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* STYLE FILE UPLOADER BUTTON */
.file-element__drop-zone .upload-btn {
    font-family: Helvetica, sans-serif; /* Update font */
    color: #000000 !important; /* Update font color */
    font-size: 11px; /* Update size of font (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    font-weight: normal; /* Update weight of font (e.g., 300, 400, 500, etc.) */
    letter-spacing: 0.35em; /* Update horizontal spacing between text characters (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    line-height: 0em; /* Update distance between lines of text (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    text-transform: uppercase; /* Choose between “uppercase,” “lowercase,” “capitalize,” or “none” */
    font-style: normal; /* Choose between “normal” or “italic” */
    background-color: #ffffff !important; /* Update background color */
    border-radius: 0px; /* Update corner radius */
    border: 2px solid; /* Update border thickness */
    border-color: #000000; /* Update border color */
    padding: 20px 15px; /* Update space around button text (first value is vertical spacing, second value is horizontal spacing) */
}
/* STYLE FILE UPLOADER BUTTON ON HOVER */
.file-element__drop-zone .upload-btn:hover {
    background-color: #000000 !important; /* Update background color on hover */
    color: #ffffff; /* Update font color on hover */
    border-color: #000000; /* Update border color on hover */
}

Edit File Uploader Button Text

This is your Javascript. Add an HTML Block onto your Dubsado form. Delete the example code, then copy and paste the following code into the block:

<script type="application/javascript">
    document.querySelector('.file-element__drop-zone .upload-btn').innerHTML = 'New Button Text';
</script>

Default Dubsado Buttons

The default Dubsado button is the button you can create natively in Dubsado by highlighting the word(s) in a Text block > clicking the A (Formatting options) > link icon (Insert Link or Button) > and choosing the Button option.

Style Default Dubsado Button

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* STYLE DEFAULT DUBSADO BUTTON */
.form-viewer .dubsButton, .form-viewer .mcnButton {
    font-family: Helvetica, sans-serif; /* Update font */
    color: #000000 !important; /* Update font color */
    font-size: 11px; /* Update size of font (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    font-weight: normal; /* Update weight of font (e.g., 300, 400, 500, etc.) */
    letter-spacing: 0.35em; /* Update horizontal spacing between text characters (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    line-height: 0em; /* Update distance between lines of text (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    text-transform: uppercase; /* Choose between “uppercase,” “lowercase,” “capitalize,” or “none” */
    font-style: normal; /* Choose between “normal” or “italic” */
    background-color: #ffffff !important; /* Update background color */
    border-radius: 0px; /* Update corner radius */
    border: 2px solid; /* Update border thickness */
    border-color: #000000; /* Update border color */
    padding: 20px 15px; /* Update space around button text (first value is vertical spacing, second value is horizontal spacing) */
}
/* STYLE DEFAULT DUBSADO BUTTON ON HOVER */
.form-viewer .dubsButton:hover, .form-viewer .mcnButton:hover {
    background-color: #000000 !important; /* Update background color on hover */
    color: #ffffff; /* Update font color on hover */
    border-color: #000000; /* Update border color on hover */
}

Package Select Button

The default Dubsado button is the button you can create within Dubsado by selecting the text, clicking the A (Formatting options) > link icon (Insert Link or Button) > choosing Button.

Style Package Select Button

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* STYLE PACKAGE SELECT BUTTON */
.btn.btn-squared.border-around {
    font-family: Helvetica, sans-serif; /* Update font */
    color: #000000 !important; /* Update font color */
    font-size: 11px; /* Update size of font (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    font-weight: normal; /* Update weight of font (e.g., 300, 400, 500, etc.) */
    letter-spacing: 0.35em; /* Update horizontal spacing between text characters (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    line-height: 0em; /* Update distance between lines of text (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    text-transform: uppercase; /* Choose between “uppercase,” “lowercase,” “capitalize,” or “none” */
    font-style: normal; /* Choose between “normal” or “italic” */
    background-color: #ffffff !important; /* Update background color */
    border-radius: 0px; /* Update corner radius */
    border: 2px solid; /* Update border thickness */
    border-color: #000000; /* Update border color */
    padding: 20px 15px; /* Update space around button text (first value is vertical spacing, second value is horizontal spacing) */
}
/* STYLE PACKAGE SELECT BUTTON ON HOVER */
.btn.btn-squared.border-around:hover {
    background-color: #000000 !important; /* Update background color on hover */
    color: #ffffff !important; /* Update font color on hover */
    border-color: #000000 !important; /* Update border color on hover */
}
/* STYLE PACKAGE SELECT BUTTON WHEN SELECTED */  
.packageSelected .btn.btn-squared.border-around {
    background-color: #000000 !important; /* Update background color when selected */
    color: #ffffff !important; /* Update font color when selected */
    border-color: #000000 !important; /* Update border color when selected */
}

Edit Package Select Button Text After Selection

You can update the package select button text natively by highlighting the default “Select” text and deleting it. You’re not able to update the text after the package has been selected, but with a little bit of code, we can have the text read, “Selected.”

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* EDIT PACKAGE SELECT BUTTON TEXT WHEN SELECTED */
.packageSelected .btn.btn-squared.border-around:after {
    content: "ed"; /* Changes the “Select” package text to “Selected” */
}

If you’d rather have your package select text read something completely different after selection (e.g. from “Select” to “+ Added to collection”), check out our free, Fonts, Buttons & General Styles plugin.

All together now

Maybe you want all of your form buttons to match instead of going through and updating each value for individual buttons? To do this, combine the selectors of each button and separate with a comma. Or you know, just use the code snippet below for an easier method.

Style all Dubsado form buttons

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* STYLE ALL FORM BUTTONS */
.submit-form-button, .save-draft-button, .back-to-portal-button, .file-element__drop-zone .upload-btn, .form-viewer .dubsButton, .form-viewer .mcnButton, .btn.btn-squared.border-around {
    font-family: Helvetica, sans-serif; /* Update font */
    color: #000000 !important; /* Update font color */
    font-size: 11px; /* Update size of font (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    font-weight: normal; /* Update weight of font (e.g., 300, 400, 500, etc.) */
    letter-spacing: 0.35em; /* Update horizontal spacing between text characters (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    line-height: 0em; /* Update distance between lines of text (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
    text-transform: uppercase; /* Choose between “uppercase,” “lowercase,” “capitalize,” or “none” */
    font-style: normal; /* Choose between “normal” or “italic” */
    background-color: #ffffff !important; /* Update background color */
    border-radius: 0px; /* Update corner radius */
    border: 2px solid; /* Update border thickness */
    border-color: #000000; /* Update border color */
    padding: 20px 15px; /* Update space around button text (first value is vertical spacing, second value is horizontal spacing) */
}
/* STYLE PACKAGE SELECT BUTTON ON HOVER */
.submit-form-button:hover, .save-draft-button:hover, .back-to-portal-button:hover, .file-element__drop-zone .upload-btn:hover, .form-viewer .dubsButton:hover, .form-viewer .mcnButton:hover, .btn.btn-squared.border-around:hover {
    background-color: #000000 !important; /* Update background color on hover */
    color: #ffffff; /* Update font color on hover */
    border-color: #000000; /* Update border color on hover */
}

Note: I did not include the Download PDF button since the code is a little different. Be sure to add the Download PDF CSS if you’d like to use the code above to style all buttons.

TABLE OF CONTENTS
Colin Tierney http://www.tierneystudio.com