Thanks for watching Software Wars: Dubsado v. Honeybook!
Here’s more in-depth details for my 60-second Dubsado hack:
Setting up the form
Design a banner with your logo on it (or just grab your logo file)
Create a new lead capture form
Add your banner or logo to the top
Add a code block above or below the banner/logo - this will be where our CSS styling for the whole form will go
Add a code block - add the title for your service
Add a column block - uncheck ‘show container title’
Add a text block to each column - In the left column, include how they’re feeling now and how they’ll feel when they hire you. In the right column, add the details of what’s included in the service. Then add the investment price (or the starting rate).
Add a code block - add the “Next Steps” title (ie. What happens next, next steps, now what, how does it work)
Add a column block - uncheck ‘show container title’ and change the number of columns to 3
Add a text block to each column - break down your process into phases or steps. Make it easy for them to see what the process of working with you looks like. You don’t have to go into specifics, being general is okay too.
Add a code block - add the FAQ title (ie. FAQ, what others have asked)
Add a code block - copy the CSS used below for the FAQ section.
Customize the questions and answers to fit your FAQs
Add a code block - add the Testimonials title (ie. Kind words, what others have said, reviews, testimonials, love notes)
Add a column block - uncheck ‘show container title’ and change the number of columns to 2
Add an image block - adding a photo of the client helps connect to your lead on a deeper level
Add a text block to each column - add the review from the client
Fill out the lead capture
Add a code block - add the contact me title (ie. Ready to get started, Let’s do this)
Add a text block - add a short note letting them know when to expect a response from you. If you’re linking a workflow to the form and there’s going to be an automated response immediately let them know what’s coming next.
Add the blocks you need to create a full contact form
Wrapping it up
Now that your services landing page is all set and ready to be used, click the “Share” button at the top of the form and grab the direct link. You can now add it to your Facebook page, Instagram bio, and anywhere else you need. When my site was down for updates I made a cover page in Squarespace and added the direct link from Dubsado to the cover page and titled it “View Services”. This allowed people to see all of my services as they would be on my site, and fill out my lead capture.
Here’s the coding used in my forms:
coding for the initial style block
NOTE: When you add this coding in you may need to tweak the colors of the fonts that are already in the form as the styling below may affect them.
coding for the title blocks
NOTE: Change the #51646b to your brand color for added customization. You can also change the <h1> to <h2> for the header 2 option created in the styling sheet.
<br><div style="background-color: #51646b; vertical-align: middle; padding:12px 50px;"> <center>
<h1> YOUR TEXT HERE </h1>
coding for the Dropdown/faq menu
NOTE: To add more FAQ’s copy and past the content from <li> to </li> for as many questions as you’d like to add.
<div id="wrapper"> <ul> <li> <input type="checkbox" checked> <i></i> <h4>+ YOUR QUESTION HERE</h4> <p>YOUR ANSWER HERE </p> </li> </ul> </div>