UPDATED NOVEMBER 2024

If you use Showit & Dubsado… you’ve got a pretty awesome tech stack. Between the power of Showit to create a beautiful website that draws your ideal clientele in, to Dubsado to shepherd them from lead to paying client, you’ve got it all. But sometimes they don’t play so nicely together- like when you need your Showit page to grow as your Dubsado form gets longer. I’m here to tell you how I solved exactly that- making Showit pages grow with Dubsado form content!

Create Showit Page

1. On the Showit left-hand menu, go to the BLOG TEMPLATES section. Create your page there.
   • Note the title you use, we’ll need that again later.
2. After you create the page, on the RIGHT side menu you should see a “Template Info” section. If you don’t see that, click the page name on the right side, then you’ll see this new menu on the left.
3. Change the “WordPress Template” to “Custom”
4. The Custom Template Name will be “page-yourpagename”. So for example, if you’re making a Contact page, this will be “page-contact”

Create Canvas

1. Add a Canvas to the page.
2. On the right side “Canvas” menu, select that the “Canvas Type” is “Grow with Content”
3. Add a text box to the Canvas.
   • WIDTH: Make the text box stretch the WIDTH that you want the embedded content to stretch.
   • HEIGHT: Simply write “Paragraph” in the text box and make the text box height match this height.
4. Click the text box and go to “Text Properties” on the right side menu. Change the “Placeholder” option to “Post Content”. Text Tag should be “p”

Create WordPress Page

1. Navigate to WordPress
2. Go to “Pages”
3. Create a page with the exact same name as you did in step 1 on Showit.
4. In the page content, insert an HTML box and paste in your Dubsado embed code. You don’t need to do anything else to the page.

Publish

1. Publish the page in WordPress.
2. Head back to your Showit and publish the page there.

Once you’ve followed all these steps, your published Showit page will automatically grow with the size of your Dubsado form. You can add all your design to the Showit page on separate canvases around it.

ORIGINAL POST

Note that this solution REQUIRES the Advanced Blog Subscription on Showit.

Now, stick with me for a minute, because explaining this is going to take some work. The first thing you need to know is that the WordPress Blog pages linked with Showit are the only type of content that can force canvases to grow automatically with content, that’s why the blog is the key to our success with those pesky Dubsado scheduler/form combos or lead captures with lots of questions or even public proposals with conditional logic!

The second thing to know is that in order to make this solution work, the basis of my blog is built on CATEGORIES. When you go to the “blog” link on my website, you’re actually going to a category page of blog posts that are ACTUALLY blogs. I also have blog categories that I use to run the SHOP on my website, and now I’ve added a new category of pages specifically for FORMS. If I didn’t have these in separate categories, then you would see shop listings, forms, and blogs all mixed up together on one page, which would obviously be confusing.

Now that you’ve got the background knowledge, here are your next steps:

1. Go to your WordPress Blog. Go to Posts > Categories
   1. Create a category for your actual blogs (hint: you will NOT be able to name this category “blog”, but you could do “Blogs”)
   2. Create a category for your forms. You can name this anything that makes sense to you. I named mine “Contact”
2. Bulk select all of your current blogs and add them to the category you just created in step 1.1.
3. Head back to your Showit design. Go down to where your blog design pages are under “Blog Templates”. You’ll want to create the design for your contact page here. My advice? Click the “Select New Blog Template” and just copy your current contact page to the blog area (so you don’t have to do a ton of design work!)
   1. Name the page to match the category your created for forms in step 1.2
4. Click the page name so that you can access the page settings. Click the “Template Info” section in the righthand toolbar.
   1. Change the “WordPress Template” to “Custom”
   2. Set the Custom Template Name to “single-cat-CATEGORYNAME”. So in my example above where I named my WordPress category “Contact”, I would set the custom template name to “single-cat-contact”
5. Now it’s time to change up your design just a smidge. Where your Dubsado form is currently embedded- DELETE it! Instead, insert a paragraph text box. The text box can be empty. The contents do not matter. Make sure that you set the width of the box to the width that you want your contact form to be when it’s published. Do this for both desktop AND mobile!
   
6. Once your paragraph text box is placed and it’s the width that it should be, head to the “Text Properties” section in the righthand menu. Set the WordPress placeholder to “Post Content”.
   
7. Finally, adjust your canvas size (on both desktop AND mobile). I recommend having about 100 pixels of space UNDER the paragraph text box.
   
8. Go to the Blog Template page you ACTUALLY use for your blogs. Click the “Template Info” section in the righthand toolbar.
   1. Change the “WordPress Template” to “Custom”
   2. Set the Custom Template Name to “single-cat-CATEGORYNAME”. So in my example above where I named my WordPress category “Blogs”, I would set the custom template name to “single-cat-blogs”
   3. Update your navigation bar “Blog” URL to https://YOURURL.com/category/CATEGORYNAME/
      So in this example, mine would be https://caitpotter.com/category/blogs/
      
9. Okay now we’re going to go back to WordPress. Create a new post and name the blog whatever you would like your URL to be for a client reaching out to you. Mine is “Discovery Call”.
   
10. Insert an HTML block. Copy & paste in the code from your Dubsado lead capture/scheduler/public proposal.
    
11. In the righthand WordPress Menu, go the “Post” tab. Scroll down to the “Categories” section and select the new category we just created in step 1.2.
    
12. Click “Preview” to make sure that everything is showing correctly design-wise. Once you’re satisfied, hit publish! Your forms will now grow with the Dubsado content as needed!

And there you have it! Showit & Dubsado have never worked together better!

Good luck!