Updated Aug 16, 2023
Dubsado forms are highly customizable, but you can take them even further with custom code! This article covers two methods for adding custom code to your form and when to use each one.
🚨 Due to the complex nature of custom code, our Customer Care team isn’t able to provide support on forms with custom code.
For assistance on a form with custom code, please review our CSS cheat sheet, ask our Facebook community, or reach out to a web developer.
Add CSS to style your form
CSS (Cascading Style Sheets) is a powerful and efficient way to change the appearance of elements on your form. This is especially helpful if you’ll be embedding your lead capture or public proposal and want to match the look and feel of your website.
With CSS you can:
use a custom font
quickly style all the headings and body text on your form
change the appearance of the question fields
change the appearance of the submit button
To add CSS to a form, go to Templates >> Forms and select your form. Then click Form styling (palette icon) >> Edit CSS. This is where you can manage all the CSS for your form in one place. Our CSS cheat sheet can help you jump start your styles!
👋 Here’s a tip... want to give CSS a try but don’t know where to start? Check out this article from the Mozilla Developer Network.
Add an HTML block to insert custom content
The HTML block allows you to insert your own custom content on a Dubsado form. HTML blocks are available on questionnaires, proposals, and lead captures. For security reasons, they cannot be used on contracts or sub agreements.
You could add unique content that you code from scratch. For example, an interactive image gallery, an animated testimonial slider, or custom buttons or links.
You can also insert embeddable content, such as hosted videos (YouTube, Vimeo, etc.), a Google map, or a spreadsheet. If you have any questions on embedding content, please reach out directly to the service you want to be embedded in a form. Dubsado is not able to provide specific customer support .
👋 Here’s a tip... Dubsado forms and schedulers cannot be embedded into Dubsado forms. You can attach a form to a scheduler or create a proposal-contract-invoice.
FAQ
Can I add CSS to the HTML block?
Technically, yes. The HTML block supports <style> tags. However, we recommend using the dedicated CSS editor in the Form styling settings for all your CSS. This will keep your code cleaner and much easier to manage with all the CSS in one place!
Can I use JavaScript on Dubsado forms?
The <script> tag is supported in our HTML block element, with some restrictions. If an HTML block contains JavaScript, it will not render while you are editing the form. You will be able to see the result of your code by using the preview mode or opening your form as a client.
When using JavaScript, we encourage you to test thoroughly to ensure your form works correctly.
Will Dubsado ever make changes to forms that affect my custom code?
Our team is dedicated to bringing you as many features and updates as possible to empower you to design beautiful forms without needing to know how to code. From time to time, the changes we make to introduce these new features may impact the custom code on your forms.
While we aren't able to guarantee permanent support for all CSS, we can ensure that any of the CSS demonstrated in our cheat sheet will be supported long-term. Dubsado cannot guarantee that custom code beyond what is shared in this article will not be impacted by future updates to our form builder and client view.