How to create a clean testimonials page on SmugMug

One of my work colleagues asked me if I have an idea about how to create an easy to use testimonials page on SmugMug, that also looks nice and clean. She wanted something that did not involve SmugMug’s commenting system – because she did not want their customers to have to use Facebook, Google + or SmugMug login details to leave an entry.

So first I had to come up with a system that required a little bit of work – but at the end your testimonials page would look cool and you would have full control over how it was formatted.

How does it work? On your testimonial page you need to embed a Wufoo form { similar to a contact page – with few small tweaks } → your visitors fill out the form and then you receive an email with their message → using HTML content block and a template that I have provided you can then add the testimonial to your TESTIMONIALS page

PART I – Creating a testimonials page using HTML content blocks

You will need to create a page on your account – you need to have a POWER, PORTFOLIOor BUSINESS account to be able to do this. SmugMug has a great article on how to create pages on your account – so instead of me repeating what they have written – here is a link to their help page.

After you have created your page – you may want to tweak it a little bit to match what I have on my Testimonials page. In the Layout section I have set the width of my page to FIXED and the width value to 1200px.

Now we will need to add our first testimonial entry, which will look like the one here – no, do not worry the KUNG FU PANDA is just for tutorial purposes :}

The first thing that we need to do is to create a square thumbnail of your customer’s photo 120px x 120px. Upload it to one of your unlisted galleries and get a link to that image { you will need it later }. You do not need to make your image round – the code that I will provide you with – will do this automatically for you.

Add a HTML content block to your page and you will see that this content block has two tabs HTML and CSS – make sure that you are adding the right code to the right tabs. Copy the HTML and CSS code and paste it in to the HTML and CSS tabs of your HTML content block:

HTML Code

<!--Te first line of the code is for the profile image - just replace the link --> 
<div id="testimonials-image"><img src="https://www.photom.me/photos/i-GxqBMWb/0/O/i-GxqBMWb.jpg"</img></div> 

<!--The second line is your customer name --> 
<p class="testimonials-name">JOHN SMITH</p> 

<!--The third line is your customer testimonial --> 
<p class="testimonials-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> 

<!--The las line is the rating --> 
<p class ="testimonials-rating">****<span style="color:darkgrey">*</span></p>

CSS Code

/*code to align the image and add padding*/
#testimonials-image {
  text-align: center !important;
  margin-bottom: 25px;
}

/*code to make the thumbnail round*/
#testimonials-image img{
  -webkit-border-radius: 50em;
  -moz-border-radius: 50em;
  border-radius: 50em;
}

/*formating your customer name*/
.testimonials-name{
  font-size: 24px;
  font-color: white;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

/*formating your customer testimonial*/
.testimonials-desc {
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
  color: grey;
  padding-left: 20px;
  padding-right: 20px;
}

/*formating star rating*/
.testimonials-rating {
  font-size: 24px;
  letter-spacing: 2.9px;
  text-align: center;
  color: yellow;
}

The HTML content block has all the information on what needs to be changed to replace my demo information with your own information.   On my demo page I have added the same three HTML content blocks so it looks good.  You can also add more testimonials below those ones that you have already added.

PART II – Adding Wufoo form

The last part of this tutorial is just information about the form that your visitors will use to send you their testimonials. You can create a simple form with a ratings system using a third party service called WUFOO. They offer free accounts and paid accounts – pick one that suits your requirements.

I use a free account for this tutorial.

Once you have created your Wufoo form – you can embed it to your SmugMug account using this tutorial