🎉 This article is written for our new form builder! If you are still using the old form builder, check out this article to make the switch to the new form builder.

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.

⛔ Heads up! Please use custom code at your own risk. Dubsado does not provide any customer support for custom code and is not responsible for errors resulting from improper use. If you have any questions, it is best to reach out to your web developer or ask our Facebook Community.

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:

In the Form styling panel, click 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.

The HTML block element 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, like:

You can also insert embeddable content*, such as:

*These are examples only. Dubsado does not provide customer support for embedding content and does not guarantee that you will be able to embed this content. Please refer to the help documentation provided by the service you would like to embed.

👋 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.

Technically, yes. The HTML block supports <style> tags. However, we recommend using the dedicated CSS editor in the Form styling settings for all of your CSS. This will keep your code cleaner and much easier to manage with all the CSS in one place!

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.