Setting Up Genie With an *Existing* Dubsado Form
You’ll need to add an HTML block at the top of your Dubsado form, copy the following Initial Script and paste it inside the block:
<script id='diDubShellScript' type="application/javascript" src="https://dse.dub-ins.com/diWC/diIndex_v1.js" ></script>
Once you’ve added the Initial Script above, click Save form in the top right hand side of your Dubsado form.
Note: Do not remove the Initial Script from your form. The Initial Script HTML block is required in order for your form and Genie to be able to “talk” to one another. After you Publish your template, this block is also where you'll paste your Magic. Make sure to keep this block intact for the form to work correctly.
If you are working from an existing Questionnaire form, check out Using Genie with a Questionnaire.
Want to add the following instructions to your Dubsado form for easy reference? Check out How to Add the Blue Instruction Block to Your Dubsado Form
How to Get Started:
- Add Elements
- Beneath the top HTML block (the initial script you copied and pasted above), add as many Dubsado elements as you'd like (e.g., Text Box, Short Answer, Package, etc.).
- You can always come back to add more elements later.
- Open Your Public-Facing Form
- Click this link: https://hello.dubsado.com/public/form/view/your-form-id-here.
- Copy Your Form ID
- Locate and copy your Dubsado form ID. What Is My Form ID?
- In the address bar of the new tab you just opened, find the text
your-form-id-here. - Replace it with the form ID you copied.
- Enable Dubsado Side Editing (DSE)
- On the public-facing form, click the Dub-ins logo on the right side to toggle DSE.
- Update & Save
- As you add elements to your Dubsado form, always click Save Form to preserve your changes.
- Click the Reload Preview button on your public-facing form to see your changes reflected.
Things to note
- Preview Flash: When your template loads, it will show a millisecond preview of your form before your Genie template loads. To remove this preview flash—and you’re Setting up Genie with an Existing Dubsado form—the CSS to remove this flash has not been added to your form (unlike if you’re copying our Genie Template from the a new Dubsado form). To add the CSS, copy the following code and paste it in your Dubsado form (under Form Styling > scroll down > Edit CSS).
.client-view-tabs, .form-viewer { visibility: hidden; } - Blank Form Issue: With the added CSS above—and if you do NOT have magic on it—when you open this public-facing form in an incognito window or when you're not signed into your Dubsado account, your form will show up blank.
- Use The Default Domain For Editing: To enable Dubsado Side Editing (DSE), you must use Dubsado's default domain when editing your template.
- Use a URL like this: https://hello.dubsado.com/public/form/view/your-form-id-here
- Do not use custom domain URLs, such as: https://portal.dub-ins.com/public/form/view/your-form-id-here
- Why? Your custom domain won't support Dubsado Side Editing during the editing process. But don't worry—once you've finished editing and added your magic to your form, your template will display perfectly on your custom domain.
- Need Help?: We’re here for you! Click the menu icon in Genie. From the slide-out menu, choose Quick setup guide to revisit the basics of using Genie or click the chat at any time to speak with one of our team members.