It’s really easy to add code to Dubsado forms. You simply have to drag a code block onto the form. If you’re wondering why you might want to use code blocks in your Dubsado forms, check out this post. We will be adding mainly HTML and CSS to our forms to enhance them to make our proposals more on brand and more engaging and dynamic.
There is already loads of behind the scenes CSS and HTML in Dubsado. In fact, every single thing is made up of code that the awesome Dubsado team has already used to style their site and our form elements. What we’re going to do is add our own CSS and HTML code, which will override some aspects of their code, as well as add new styling to elements.
Adding CSS & HTML with Code Blocks
To add our own CSS and HTML code we can use use the code block element. You’ll find it in the right hand column with all of the other form elements.
When adding CSS code to your forms, you have a few options:
- You can add all of your CSS to one code block and keep it at the top or bottom of your form.
- You can have multiple code blocks for different elements, I like to keep the HTML and CSS together in one code block for each code snippet (such as a testimonial slider). However, if you do keep the HTML and CSS of snippets together, you’ll still need a CSS specific code block at the top or bottom of your form for general styles that don’t have accompanying HTML code, such as native Dubsado buttons.
I also really recommend using a blank form as a reference sheet to build all of your HTML and CSS elements. Once you’re happy you can then simply duplicate the form or copy and paste the codes to each of your forms!