How to Transform Your Dubsado Block Quote into a Beautiful Testimonial
Sometimes, a sliding testimonial isn’t the best fit. If you want to highlight a single, powerful testimonial, keeping it static can make it more impactful—eliminating distractions and ensuring your audience focuses on the message.
Recently, someone asked if there was a way to style a testimonial in Dubsado without using a slider. That got me thinking—how can we make a single testimonial look polished, professional, and seamlessly integrated into a form?
With just a couple of Text Boxes and a touch of CSS, you can create a clean, branded testimonial layout that stands out. Here’s how!
Looking for a more advanced testimonial slider where you can add several quotes all in one plugin? Check out our Testimonial Slider using Genie 4.0!
To create this testimonial style, follow these steps:
Add two Text Boxes to your form, one after the other.
In the first Text Box:
Type your testimonial.
Select all the text.
Click the formatting icon (A icon) > Quote (quote mark icon) > Increase (click this once).
In the second Text Box:
Type the testimonial source’s name.
Press Enter, then add their image (Formatting options > Insert image).
Upload an image or paste the image URL.
Adjust the width to ~100px (leave height blank).
Select all text, click the formatting icon (A icon) > Align > Align Center so that your source text and image are aligned perfectly with your testimonial background.
To give your testimonial a polished look, add the following CSS:
Click Form styling > scroll down > click “Edit CSS” button)
Copy and paste the following code inside the block:
Adjust the values to align the block quote with your branding. Want to use a specific font? You can add any custom, Google, or Adobe font to match your style.
Once you’ve added your testimonial and styling, preview your form to ensure everything looks just right. Keep in mind that Dubsado’s form builder may not display the styling correctly, particularly with the quote arrow (carrot) appearing separate from the testimonial background. To see the actual styled version, click the Preview button in the top right corner of the builder.
Feel free to tweak the font sizes, colors, and alignment to fit your brand’s aesthetic. Now you have a beautifully styled testimonial—without needing a slider!