If you use Showit & Dubsado together, you’re already winning the tech stack game. You’ve got Showit bringing in dream clients with scroll-stopping visuals, and Dubsado taking over to automate, organize, and elevate their experience from inquiry to invoice. But let’s be honest—sometimes these two tools don’t play nicely together.

Here’s the scenario: you embed a Dubsado form on your Showit site, but as the form grows—more questions, more custom logic—the Showit page just… doesn’t. Cue the scroll bar of doom, cutoff forms, and clunky user experiences that don’t reflect your brand’s polish.

Good news: I cracked the code. This method makes your Showit page expand dynamically as your Dubsado form content grows. No stress, no weird scroll bars, and definitely no coding required. Let’s dive in.

---

Step 1: Create Your Showit Page in the Right Spot

1. On the left-hand Showit menu, go to the “Blog Templates” section (yes, even if it’s not a blog). Either create a new page here or duplicate your existing contact/info page into this section.
2. In the “Template Info” on the right side (you may need to click the page name to reveal it), set:
   • WordPress Template: Custom
   • Custom Template Name: page-yourpagename (replace “yourpagename” with your actual page slug—no spaces, all lowercase)
     • So for example, if you’re making a Contact page, this will be “page-contact”

---

Step 2: Add a Canvas That Can Grow

Here’s the secret sauce:

1. Add a new Canvas to this page.
2. On the right under “Canvas Type,” set it to “Grow with Content.”
   • Make sure this is set for both desktop AND mobile.
3. Drop a text box inside that canvas as “Paragraph”.
4. Set the text box size and properties:
   • WIDTH: Stretch it to the full width you want your form embed to take up.
   • HEIGHT: Set it based on a basic placeholder—just type the word “Paragraph” in the box and resize to be only as tall as that one line of text.
5. Then set the Text Properties:
   • Change Placeholder to “Post Content.”
   • Set the Text Tag to p.

🛠️ Pro Tip: You might need to fine-tune this later to accommodate Dubsado’s default padding. On your canvas, give it just enough breathing room above and below so your form looks polished at full length.

As an example, a screenshot of my contact is shown below where it looks weird/wrong on the Showit side, but it looks correct on the front end. Start by putting the paragraph box right below the text where you want it to appear on your Showit page and you can fine-tune the location later.

---

Step 3: Build the Matching Page in WordPress

1. Pop over to WordPress side of your site and head to Pages > Add New.
2. Name the page exactly what you named it in Showit (i.e., Contact).
3. Insert and HTML code block in in the editor.
4. Paste your Dubsado embed code into the HTML block.
5. Set your SEO settings including page title, focus keyphrase, and featured image.
6. Publish the WordPress page.

That’s it! No need for formatting or extra settings.

---

Step 4: Publish and Adjust

1. Jump back into Showit, hit Publish, and then preview your page live.
2. If something looks slightly off (like too much padding or the form sitting too low), go back to your Showit canvas and tweak the placement of the “paragraph” placeholder. It’s not broken—it just needs some spacing magic. You’ll likely need to eyeball it and adjust once or twice to get it just right.

---

The Result: A Flawless, Auto-Expanding Showit & Dubsado Partnership

With this setup, your Showit page now automatically expands to fit your Dubsado form content—no matter how many questions or conditional fields you add. That means:
✅ Better UX for your clients
✅ A fully branded experience
✅ Zero scroll bars or cut-off content
✅ Total Showit-Dubsado harmony ✨

---

Bonus: Why This Matters for Your Client Experience

If you’re a creative entrepreneur, service provider, or anyone who cares about giving a polished, high-end experience—your inquiry page sets the tone. You’ve got one shot to make it seamless, and this setup ensures your form always looks good and functions beautifully.

Don’t let tech hiccups mess with your vibe.

---

Guest blog from Cait Potter

---

🌸 Want the Easy Button? Meet the Peony Template for Showit & Dubsado

If this blog had you saying “Yes, but can someone just do this for me?”—you’re going to love Peony.

Peony is our brand-new Showit page template designed specifically to pair with our Peony Dubsado CSS Form Kit.

If you’re using Dubsado on Showit, Peony gives you the polished, functional setup your client experience deserves—right out of the box.

🎨 Explore the Peony Template Now →

Or if you’re not into templates and just want it done-for-you, you know where to find me. ✨