Thanks for watching Software Wars: Dubsado v. Honeybook!

 
 

Here’s more in-depth details for my 60-second Dubsado hack:

  1. Setting up the form

    1. Create a banner with your logo on it

    2. Create a new lead capture form

    3. Add your banner to the top

    4. Add a code block - this will be where our CSS styling for the whole form will go

  2. The Service

    1. Add a code block - add the title for your service

    2. Add a column block - uncheck ‘show container title’

    3. Add a text block to each column - include how they’re feeling now and how they’ll feel when they hire you. Also add the details of what’s included in the service. Then add the investment price (or the starting rate).

  3. The Process

    1. Add a code block - add the “Next Steps” title (ie. What happens next, next steps, now what, how does it work)

    2. Add a column block - uncheck ‘show container title’ and change the number of columns to 3

    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.

  4. FAQ

    1. Add a code block - add the FAQ title (ie. FAQ, what others have asked)

    2. Add a column block - uncheck ‘show container title’ and change the number of columns to 3

    3. Add a code block - copy the CSS used below for the FAQ section.

    4. Customize the questions and answers to fit your FAQs

  5. Testimonials

    1. Add a code block - add the Testimonials title (ie. Kind words, what others have said, reviews, testimonials, love notes)

    2. Add a column block - uncheck ‘show container title’ and change the number of columns to 3

    3. Add a text block to each column - add the review from the client

    4. Add an image above each review - adding a photo of the client helps connect to your lead on a deeper level

  6. Fill out the lead capture

    1. Add a code block - add the contact me title (ie. Ready to get started, Let’s do this)

    2. 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.

    3. Add the blocks you need to create a full contact form

    4. Save

  7. 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 CSS used in my forms:

 

CSS 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.

<head>
<style>
h1 {
color: white;
font-family: lato;
font-size: 22pt;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 400;
}
h2 {
color: white;
font-family: lato;
font-size: 13pt;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 600;
}
</style>
</head>

CSS 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>
</center>
</div><br>

CSS 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.

            <ul>
                <li>
                    <input type="checkbox" checked>
                    <i></i>
                    <h4>+ YOUR QUESTION HERE</h4>
                    <p>YOUR ANSWER HERE</p>
                </li>
        </div>
 

Have questions? Feel free to send me an email. Or if you’re needing to get Dubsado setup take a peek at my setup service!