Styling Dubsado Contracts & Sub Agreements With Genie

If you’re using Dubsado’s new form builder, keep in mind that Genie and other third-party plugins no longer work on Contracts and Sub Agreements. This is because Dubsado has removed the HTML block element required for plugins to function.

However, you can still achieve consistent styling by using Dubsado’s new CSS box feature. With Genie’s “Copy Contract Styles” option, you can easily apply consistent design elements — like form fields, buttons, and fonts — across your Contracts and Sub Agreements.

How to Apply Magic to Your Dubsado Contract or Sub Agreement

Step 1: Copy Contract Styles From Genie

1. Open one of your public-facing forms that uses Genie.
2. Click the Publish button in the top-right corner.
3. Click the “Copy Contract Styles” button to copy the CSS to your clipboard.

Step 2: Add the Code to Your Dubsado Form

1. Open your Dubsado contract or sub agreement form.
2. Click the Form Styling palette icon.
3. Scroll down and click the “Edit CSS” button.
4. Paste the copied CSS (magic) into the CSS box.
5. Save your form.

How to Preview Your Dubsado Contract or Sub Agreement

Step 3: Add the Template to a Project

1. Go to your Genie Test Project.
   • To add a contract:
     • Click the Contract dropdown.
     • Select “Add a Contract to This Project” and choose the template you just saved.
   • To add a sub agreement:
     • Go to the “Forms” tab.

     • Click “Add New Form” and select your Sub Agreement template.

       
       

Step 4: Preview Your Contract or Sub Agreement

1. Click “Add”, then click “Open” to preview your contract or sub agreement.

Keep Your Design Consistent

By following these steps, you can maintain a professional and consistent design on your Contracts and Sub Agreements, even without direct plugin support.