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 forms — CSS for styling and HTML blocks for custom content.
Due to the complex nature of custom code, Dubsado's Customer Care team is not able to provide support on forms with custom code. For help with custom code, review the CSS examples for common customizations or reach out to a web developer.
Add CSS to style your form
CSS (Cascading Style Sheets) lets you edit colors, layout, and other visual elements on your form. This is especially useful if you are embedding a lead capture or public proposal and want it to match the look and feel of your website.
With CSS, you can:
Use a custom font
Style all the headings and body text on your form
Change the appearance of question fields
Change the appearance of the submit button
To add CSS to a form template, go to Forms ➔ Form templates and open a form template in the form builder. You can also open a project, click the Forms tab, and edit a form from there.
Once in the form builder:
Click the Styling tab.
Scroll to the Custom CSS section.
Click Edit CSS to open the Edit custom CSS panel with a code editor.
Enter your CSS, then navigate away or click Back to form styling to return to the main styling options.
For CSS snippets to get you started, see CSS examples for common customizations.
Adding custom CSS may cause your form to display or behave unexpectedly. Dubsado does not provide support for issues caused by custom CSS.
New to CSS? Mozilla's CSS basics guide is a beginner-friendly place to start.
Add an HTML block for custom content
The HTML Block element lets you insert your own custom HTML content directly on a form. You can use it to add anything from a simple styled section to embeddable third-party content.
HTML blocks are available on questionnaires, proposals, and lead captures. For security reasons, they are not available on contracts or sub-agreements.
What you can add with an HTML block
You can use an HTML block to insert content you code from scratch — for example, an interactive image gallery, an animated testimonial slider, or custom buttons and links. You can also embed hosted content such as YouTube or Vimeo videos, Google Maps, or spreadsheets.
For questions about embedding third-party content, contact that service's support team directly.
Adding an HTML block to your form
To add an HTML block, open your form in the form builder:
Click the Elements tab.
Drag the HTML Block element onto your form.
Click the HTML block to open its code editor in the settings panel.
Enter your HTML code.
The form builder may filter certain code attributes for security. If a banner appears indicating that code has been filtered, click Preview to see how the form will look to your clients.
Dubsado forms and schedulers cannot be embedded into other Dubsado forms. To combine forms and other deliverables, you can attach a form to a scheduler or connect a contract and invoice to a proposal.
FAQ
Can I add CSS to an HTML block?
Technically yes — HTML blocks support <style> tags. That said, it is better to keep all your CSS in the dedicated Custom CSS editor under the Styling tab. Having all your styles in one place makes them easier to manage and update.
Can I use JavaScript on Dubsado forms?
The <script> tag is supported in HTML blocks. JavaScript will not render while you are editing the form in the form builder — use Preview or open the form as a client to see it in action. Test thoroughly to make sure your form works correctly before sending it to clients.
Will Dubsado updates affect my custom code?
From time to time, Dubsado updates may impact custom code on your forms. Dubsado cannot guarantee that other custom code will not be affected by future updates.