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


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.


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

Placeholder shown on form builder with the text

When using JavaScript, we encourage you to test thoroughly to ensure your form works correctly.

Did this answer your question?