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: