How to Style, Hide & Edit All Dubsado Buttons
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.
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!
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.
The following code will update your Proposal, Questionnaire, Contract, Sub Agreement and Lead Capture form’s submit button.
This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:
This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:
This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:
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:
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.”
The following code will be able to update your Questionnaire form’s 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:
This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code into the:
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:
This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:
This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:
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:
This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:
This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:
This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:
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:
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.
This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:
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.
This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:
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:
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.
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:
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.