It’s easy to brag about how awesome your product or service is. Writing enticing copy and shooting epic product videos are great ways to attract new customers.
However, there’s no better way to build trust and prove the effectiveness of your product than with customer testimonials. New users are more likely to buy when they can see your product has worked for others. “Social proof”, as it’s called, is an integral part of the buyer journey.
In fact, including a testimonial on your landing pages can increase conversions by up to 30%!
In this tutorial, we’ll show you how to create a beautiful testimonial page for your website using GravityView’s DIY layout. Let’s get started! 🛠️
💡 Check out a live demo of the finished testimonial page and get your own free trial site preloaded with all GravityKit add-ons!
Sneak Peek
Here’s the testimonial card design we’re going to create in this tutorial. We adapted the design from one we found on CodePen. You can view the original pen here (thanks, Bradley!).
💡 Pro tip: You can click here to see a live demo of this custom testimonial layout!
What You’ll Need
For this tutorial, you’ll need the GravityView plugin and the DIY layout (included in our All Access Pass).
What Is the DIY Layout?
GravityView includes a range of preset layout options. Most layouts are templates, with a set structure, allowing you to quickly build a range of different applications. However, the DIY layout is a little different.
The GravityView DIY layout allows you to construct your own View layouts using HTML and CSS. In other words, the DIY layout gives you the flexibility of building a View layout from scratch, instead of relying on one of GravityView’s templates.
Why Use the DIY Layout?
If you feel too constrained using GravityView’s preset layout templates, the DIY layout is for you.
Although it may feel overwhelming having to write your own HTML and CSS, the process of building a custom layout isn’t as difficult as you may think. You’ll likely find that the freedom that the DIY layout provides makes up for the extra work required to create the layout.
With the DIY layout, anything is possible!
How Do You Build Custom Views Using the DIY Layout?
‘DIY” stands for “Do It Yourself”, which means building Views using the DIY Layout requires some basic coding on your part.
When you create a new View using the DIY layout, there is only one place to add fields.
When you add a field here, you can select the HTML container tag for the field (e.g., <p>, <h1>, <h2>, <h3>, etc). You can also add HTML code before and after the field element.
Creating a Beautiful Testimonial Page
Okay, let’s start creating our testimonial page. If you’re unfamiliar with the DIY layout, follow along to get to grips with how it works.
Create a Testimonial Submission Form
The first step is to create a form that allows your customers to submit testimonials. To do this, hover over Forms and click New Form. Now you can build your new form using the Gravity Forms visual editor.
Your testimonial submission form should have the following fields:
- Name (Name field)
- Testimonial (Paragraph field)
- Image (File Upload field)
To add a new field, simply drag and drop it into your form from the sidebar.
After adding the File Upload field, click on the field to open the field settings, scroll down to “Allowed file extensions” and add common image formats (i.e. jpg, png, gif). You may also want to limit the file size.
When you’re done, embed your new form on a page or post. Here’s what our testimonial form looks like on the front end:
You can then send the page link to your customers when asking them for testimonials.
Create a New View
After creating your testimonial form and embedding it on your website, create a new View and link it to your testimonial form.
Under “Choose a View Type”, make sure to select the DIY layout.
You can now start building your testimonial View using GravityView’s drag and drop editor 👇
Configuring the DIY View Layout
Before writing any HTML/CSS code, we’ll add all three of our form fields to the View.
By default, fields are wrapped in a <div> element. This is fine for the “Testimonial” and “Image” fields, but we want to change the “Name” field to be an <h3>.
To do this, we can click on the gear icon to open the field settings, scroll down to Container Tag and select “H3”.
The last thing we need to do for the Image field is to add a custom CSS class called person.
Okay, now we’ll open the field settings for the “Testimonial” field. Here there’s a little more work to do. We’re going to add some simple HTML code above and below the field output.
First off, we’ll wrap the entry in a <div> with the class testimonial-card. This will allow us to target each testimonial entry using CSS later on. To do this, simply add the following opening <div> tag before the field output.
<div class=“testimonial-card”>
Next, we’re going to add the quote icon that hovers to the right of the image.
To do this, we’ll scroll down to the After Output text editor and add the following code:
<i class=“quote fas fa-quaote-right”></i>
For this quote icon to display correctly, we’ll need to add the Font Awesome script to our theme. We’ll cover this in the next section!
Before moving on, we’ll add a custom CSS class to the Testimonial field called ‘text’.
We’re almost finished adding custom code!
Finally, open up the field settings for the Image field. This is where the “footer” section of the testimonial card begins, so we’ll add an opening <div> element before the field output with the class testimonial footer.
Now we need to close off the two opening <div> tags that we added, so scroll down to the After Output text editor and add the closing tags there.
Finally, scroll down to the advanced settings and give the Image field a custom CSS class called image.
Adding CSS Styles
If you open up your View on the front end, you’ll see it doesn’t quite fit the description of “beautiful” just yet. That’s because we’ve created the HTML structure, but we haven’t added any styles.
There are several ways to add custom CSS code to your View.
- Add the CSS to your page layout between
<style>tags - Add the CSS styles to your theme from within the customizer.
💡 Pro tip: to learn more about adding custom CSS to your website, check out this helpful guide.
Here is the actual CSS code that we used to achieve this look and feel:
We’re making good progress! So far, we’ve created our View, set up the HTML structure for our testimonial cards and added custom CSS styles. But we’re not finished yet.
The next steps are to add the Font Awesome script to display the quote icon, and configure the grid layout using jQuery.
Adding the Font Awesome Script
Font Awesome is a library of icons used by millions of web designers and developers. To start using Font Awesome, all you need to do is create a free account.
After that, you can create “kits”. Each kit has a bit of code associated with it, which you can add to your website/app to start using Font Awesome icons in your designs.
To add the kit code to your website, copy the script and paste it into the <head> of your website. You may be able to do this via your theme (if it includes that option), otherwise, install the Insert Headers and Footers plugin.
Okay, our testimonial cards are looking great! There’s only one thing left to do. You may have noticed that in the above screenshot of our testimonial page, we had two testimonials side-by-side.
By default, GravityView displays each entry underneath the previous one. To construct a grid layout, we’ll need to add more custom code.
Creating the Grid Layout
To display our testimonials in multiple columns, instead of a single column, we’ll need to add a bit of code to the <head> of our page.
In this example, we’re using the Isotope Masonry layout, you can find the code for this layout here:
Add the code to the <head> of your page, just after the Font Awesome script that you added in the previous section. Depending on the size of your testimonial cards and your website’s page width, you may also want to adjust the ColumnWidth property.
Embed Your View on a New Page
The final step is to create a new testimonial page and embed your View to display customer testimonials on the front end.
To embed a View in a post or page, all you need to do is copy and paste the GravityView shortcode into your page editor.
When you’re finished, open it on the front end to preview your new testimonial page!
Remember to check out the live demo if you haven’t done so already.
Create Your New Testimonial Page Using GravityView
Customer testimonials are a form of user-generated content that helps build trust and increase social proof. This can lead to higher conversions rates and increased revenue for your business!
In this tutorial, we showed you how to build a beautiful, modern testimonial page using the GravityView DIY layout. Although the DIY layout isn’t as straightforward as the other preset templates, the flexibility is often worth the extra effort.
If you enjoyed this tutorial, check out our blog for more helpful content!
Join Our Newsletter!📧🙌
✅ Helpful Gravity Forms content straight to your inbox
✅ Be the first to hear about new updates and releases