book your Q4 or 2022 Project Today!


(Video) Customize your dubsado lead cpture to be totally on-brand with the help of CSS

Using a beast of a CRM like dubsado will certainly uplevel your client experience game. So many options and so many possibilities. Now if you are anything like me, how things look is a BIG DEAL. And those new dubs forms you just created may feel like they are lacking pizazz. But have no fear, because this video blog is going to give you all the details on how to use Brand Dubsado Forms with CSS.

Using custom css in Dubsado forms is totally gonna rock your biz! Now I absolutely loved Dubsado before adding CSS to my forms, but now the love affair just got more serious. With the help of CSS, you can change everything from fonts and spacing to colors and opacities (all of which I cover in this video!)


You know the whole rounded button situation on Dubsado forms? Well with the power of CSS + Dubsado, say goodbye to those rounded corners and hello to gorgeous square corners!

Let’s get started!

This will probably take you about 10 minutes.

Not into videos? 
Here’s how to add Custom CSS in your Dubsado Form

This will take approximately  30 minutes.

Here’s how to add custom CSS in your Dubsado Forms

  1. To get started, we need to open the form where you wish to add the custom CSS.

    So head to your Dubsado Dashboard and go to TEMPLATES > FORMS (usually found on the left side.) Then select the form from the options listed, or create a new form by hitting the “+” next to the form type.

  2. Add a Code Block to the form

    On the right-hand side, select the block labeled, “Code Block” and add it to your form. Be sure to add it somewhere in the middle so as not to add any extra space between your last field and the submit button.

    Be sure to enter the <style> tags to get the code started.

  3. Open your form in a new incognito window

    Click SHARE in the upper right-hand corner, and pop up will appear. Copy the Direct Link URL and open it in an incognito window. In Google Chrome, you can do this by clicking pressing CTRL+SHIFT+N.

    We will be using this tab to identify each of the form’s sections labels and to double-check our code. So make sure your windows are side by side.

  4. Open Developer Tools

    Once your incognito window is up, we will need to open the Developer Tools. You can do this by either clicking the three dots in the top right and selecting MORE TOOLS>DEVELOPER TOOLS or by pressing CTRL+SHIFT+I.

  5. Add Custom CSS

    Using the selector tool within the Developer Tool, highlight the field you want to modify. In this case, I want to change the button to have square edges. The developer tool shows it is labeled, 
    #submitButton .btn 
    so I will add this string of text to my cod block in Dubsado (the brackets are really important, so don’t forget them!).

    #submitButton .btn {


    In the video, I modify many different parts of the form, and you can get all that custom CSS right here. But for this tutorial, I will only be removing the radius corners from the button. 

    Within the brackets, I will then add:

    border-radius:0px !important;

    Then watch as the button magically gets square corners! 

    The final code to remove radius corners should look like this:

    #submitButton .btn {
    border-radius:0px !important:

  6. Save your Form

    Now, this is super importantsave your form! If the form is already embedded in your website, then it will automatically update. Otherwise, click share and embed the code provided on your website.

Grab my custom css code and update your dubsado forms in minutes!

Now you try!

If you get through all this and realize you just want someone to make your Dubsado pretty for you, then maybe a CRM Setup is the right thing for you!

Comment below with what you would like to see next on the blog!