The good news is it is super simple to add code to your forms!
There’s already loads of behind the scenes CSS and HTML in Dubsado. This is code that the awesome Dubsado team has already used to style their site and form elements.
What we’re going to do is add our own CSS code, which will override some aspects of their code, as well as add new styling to elements.
To do this, we’re going to use the code block element.
When adding CSS code to your forms, you have two options:
You can add all of your CSS to one code block and keep it at the top or bottom of your form
For each element, you can keep the HTML and CSS together in one code block. However, you'll still need a CSS specific code block at the top of your form for general styles that don't have accompanying HTML code, such as native Dubsado buttons.
I really recommend using a blank form as a reference sheet to build all your HTML and CSS elements, then once you're happy you can simply add the code to the top of all of your forms!
You can then use this form as a reference to easily access your CSS code for later use.
This is what my reference sheet looks like. All of my CSS and HTML elements are in this form so I can quickly come back to this form and copy any bits of code I need in the future. For example, when I want to add my testimonial slider to any form, I just come here and copy and paste the code over. Super easy!
In Dubsado, you have to add the CSS to each and every form. This is why I've found it easiest to use my reference form as an up to date version of my CSS code at all times.
Your Turn:
Head into Dubsado and create a blank form, name it something like *CSS Reference Sheet. Adding a star in front of the name means it will show at the top of your list, so you can always find it easily!
It can be any type of form, except contracts and sub-contracts as they don't allow code blocks.
Now add a code block. At the moment the form is empty so it will already be at the top of your form. But make sure to always keep it there, at the very top or very bottom of your form at all times. That will help you find it later!
You'll notice it says Hello World. When you click to open the code block you'll see this is sample HTML code. You can go ahead and delete the sample text.
Next, you need to tell the code block that you’re giving it CSS code. It will assume you're giving it HTML unless you tell it otherwise. I'm not going to give you code to download for this part, as it will take you longer to download the file then to simply type this out.
Just add the following text to your code block.
<style>
</style>
Now your block knows it is CSS. When you hit save, the code block is going to look empty, that’s okay. HTML code typically shows an output, whereas CSS is all behind the scenes.
Just remember, this block at the top of your form is where the CSS code lives. We’re going to add new CSS code throughout this course and it will always go either into this particular code block or in the same block as its corresponding HTML. You don’t want to be creating a new code block every time you add CSS code. But you will want new code blocks for each HTML element you create, but more on that later!
Head on over to the next lesson and I’ll explain in detail everything you need to know about code.
