🎉 This article is written for our new form builder! If you are still using the old form builder, don't forget to make the switch by January 31, 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.
⛔ 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.
In this article...
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
... and so much more!
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.
Add an HTML block to insert custom content
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:
an interactive image gallery
an animated testimonial slider
custom buttons or links
You can also insert embeddable content*, such as:
hosted videos (e.g. YouTube, Vimeo, Wistia, etc.)
a Google map
a spreadsheet (e.g. AirTable, Google Sheets)
*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.
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 of your CSS. This will keep your code cleaner and much easier to manage with all the CSS in one place!