How to create a beautiful testimonial page using the DIY layout

How to Create a Beautiful Testimonial Page Using GravityView’s DIY Layout

Written by Casey Burridge

Last updated:

Categories GravityView

Tags

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! 🛠️

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!).

Two testimonial cards built using GravityView's DIY layout

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

The 'Add Field' button in the GravityView View editor

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.

The Gravity Forms form editor

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.

Gravity Forms File Upload field settings

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:

A Gravity Forms with 3 fields: Name, Testimonial and Image

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.

Selecting a Data Source for a new View in GravityView

Under “Choose a View Type”, make sure to select the DIY layout.

The GravityView 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.

Fields added to the GravityView editor

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

An arrow pointing to the 'H3' option for the container tag setting

The last thing we need to do for the Image field is to add a custom CSS class called person.

The custom CSS class box

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”>
An HTML div element added to the 'Before Output' box

Next, we’re going to add the quote icon that hovers to the right of the image.

The quote icon on the testimonial card

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>
An HTML icon tag added to the 'After Output' box

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

The custom CSS class box

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.

An HTML div element added to the 'Before Output' box

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.

Two closing HTML div tags added to the 'After Output' box

Finally, scroll down to the advanced settings and give the Image field a custom CSS class called image.

The Custom CSS class box

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:

.gv-diy-view {
margin-bottom:2em;
}
.testimonial-card {
min-height: 400px;
width: 350px;
background-color: white;
border-radius: 10px;
box-shadow: 0 8px 30px rgba(0,0,0,.3);
display: flex;
flex-flow: column;
justify-content:space-between;
}
.person {
text-align:center;
color:#ffffff;
margin-top:5px;
}
.quote {
font-size: 400%;
float: right;
opacity: .1;
transform: rotate(10deg) translate(221px, -69px);
color:#4D3FA3;
}
.text {
padding: 2.2em;
line-height: 1.7em;
position: relative;
font-size: 18px;
}
.image {
max-height:120px;
max-width:120px;
border-radius:50%;
padding-bottom:10px;
margin:0 auto;
}
.gv-container img {
display: block;
margin: 0 auto;
padding: 0;
max-width: 100%;
max-height: 100%;
border-radius: 50%;
margin-top:-70px;
border: 5px solid white;
}
.testimonial-footer {
background: linear-gradient(90deg, #1a2B96 0%, #d22B96 100%);
height: 140px;
border-radius: 0 0 10px 10px;
position:relative;
}

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.

The Font Awesome 'Kit Code' (script tag)

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.

A custom testimonial card built using the GravityView DIY layout

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:

<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>
<script>
jQuery.noConflict();
jQuery( document ).ready( function( $ ) {
// Fixed Layout
var $grid = jQuery('.gv-diy-container').isotope({
// options…
itemSelector: '.gv-diy-view',
masonry: {
columnWidth: 100
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
});
</script>

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.

The GravityView embed shortcode

When you’re finished, open it on the front end to preview your new testimonial page!

Two testimonial cards side-by-side

Remember to check out the live demo if you haven’t done so already.

Create Your New Testimonial Page Using GravityView

Displaying customer testimonials on your website 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