Skip to main content

Found what you have been looking for?

Generic filters
Exact matches only
Filter by Categories
Customization
Domains
Lightroom Plugin
Tools and Tips

Try these: contact formbuttonbuy photos

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 POWERPORTFOLIOor 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

HTML

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Support this PORTAL

I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.