A lot of people are saying the same thing about Dubsado–it’s a beast! As a result many shy away from this amazing and powerful CRM. So I am here to tell you that the shear power and customization options within Dubsado will elevate your client experience. Add to that the ability to utilize custom CSS in your Dubsado forms and you will find that is a power we need to harness. 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. In other words–we need to add some sparkle into those forms. That’s where this video comes in–I will show you how to use CSS for Dubsado Forms and after that you can tweak to your hearts delight and make these forms totally on brand.
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!)
For instance–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! Are there more things you can do with CSS certainly–but those are more advanced items I will be covered only during LIVE Dubsado Masterclasses so you can have some feedback while you work.
Let’s get started!
Not into videos? Here’s how to add Custom CSS in your Dubsado Forms
This will take approximately 30 minutes
Here’s how to add custom CSS in your Dubsado Forms
- 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.
- 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.
- 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. - 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.
- 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
therefore 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>
- Save your Form
Now, this is super important, save 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!
Hop on over to Dubsado and create a new form and give this Dubsado CSS a try for yourself. In that new form you can’t screw it up–it’s an experiment. If it doesn’t work, delete it and start again. Coding takes practice and therefore you need time to get the hang of it. At the end of the day, if you get through all this and realize the DIY Dubsado thing just isn’t for you, as a certified Dubsado Specialist we can certainly find a solution that’s right for you.
