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!
Step 1: Adding Dubsado Elements
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.
Step 2: Adding the CSS to Style Your Testimonial
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:
/* TESTIMONIAL */
.text-editor blockquote {
margin: 20px 0 40px;
border-left: 0;
background-color: #000; /* Change blockquote background color */
border-radius: 60px; /* Change blockquote corner radius */
padding: 60px; /* Change space around text */
}
.text-editor blockquote p {
font-family: lora; /* Change quote font family */
color: white; /* Change quote font color */
font-size: 26px; /* Change quote font size */
font-weight: 400; /* Change quote font weight */
letter-spacing: 0em; /* Change quote letter spacing */
line-height: 1.5em; /* Change quote line height */
text-transform: none; /* Change quote text transformation (uppercase, lowercase, capitalize) */
font-style: italic; /* Change quote font style (normal or italic) */
text-align: center; /* Change quote text alignment (center, left, right) */
}
.text-editor blockquote::before {
content: '“';
font-family: serif; /* Change quotation mark font family */
font-size: 400px; /* Change quotation mark size */
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;
opacity: .5; /* Change quotation mark opacity */
color: #fff; /* Change quotation mark color */
}
.text-editor blockquote::after {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #000; /* Change arrow color (make sure it’s the same color as your blockquote background color) */
border-bottom: 30px solid transparent;
right: 50%;
bottom: -90px;
-webkit-transform: translateX(50%) translateY(-50%);
transform: translateX(50%) translateY(-50%);
}
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.
Final touches
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!
