Top
hop over to your client portal

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

HOLY GUACAMOLE! ? This week is all about using custom css in Dubsado forms and it 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!)

And…

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
s

Time needed: 10 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:

    <style>
    #submitButton .btn {
    border-radius:0px !important:
    }
    </style> 

  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 the code isn’t working, or you just need some help, shoot me a message! I am here to help make Dubsado work for you (not the other way around)!

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Custom Branded Canva Templates

Molly is my go-to graphic designer hands down!  Graphic Design is not my forte, so Molly created easy to use... Keep Reading

Mason Aid - Aided Podcast

Custom 404 Page

My 404 Page was just blah.  Molly made it look like the rest of my site and make my brand... Keep Reading

Erika Holmes - Copywriter

Full-Service Dubsado Setup

Thank you Molly, for helping me uplevel my business like I never imagined! I would 100% recommend!

Mara Alcore - Calligrapher & Designer