Posts

SharpSpring Ribbon Test Post

What is this post about?

This test post is intended to work out a problem and then showcase how Thrive Leads can be coupled with SharpSpring forms. This already works great in other parts of my site, but in this particular case the team at SharpSpring kindly agreed to help me design a horizontal ribbon type form in SharpSpring. This technique of custom CSS layout for SharpSpring forms will come in handy in a number of instances where a horizontal form layout is desired.

What should this look like?

Here is what a ribbon form should look like.

Tricky bits

The tricky parts is to accommodate 2 things:

  1. Basing the new CSS on the existing “Inline 2.0” CSS stylesheet developed for SharpSpring forms with placeholder text and suppressed labels
  2. Handling “required field error messages”, where they appear and how they affect the form CSS layout

What’s Happening On This Post?

Below this paragraph, currently you should be seeing an “in content” area rendered by Thrive, with a SharpSpring form.

If we have solved the challenge correctly, then the form should look something like the ribbon example above. But until we solve it, the ribbon will display the sharpspring form in a vertical layout, e.g. too tall / fat.

Gone in 5 seconds…

, ,

I’ve really come to appreciate the 5 second usability test:

[one_half]Conducting these 5 second tests for our recently launched iPad helped a lot in getting user feedback on the look and feel and iconography. This tried and true UX exercise may at first glance seems like a lot of work to set up, but the 5 second site makes it ridiculously easy: IN the app development process it helped develop personas, and gave us direct feedback on how users perceived icons in the app store, allowed us to get a handle on what people thought of the look and feel, and what conceptual associations they made with the images and page layouts used.[/one_half]

[one_half_last][box type=”info”]There are two basic test types the 5 second site allows: A 5 second test to pick from a choice of designs that at first glance are more appealing, and a click test that displays a heat map of where users clicked the most. The mock up’s ewere easy enough to create: We took screenshots from the iTunes app store, and randomly overlayed our own icon designs. Then we asked people a range of questions.[/box][/one_half_last]

Concepts for our latest iPad app icons

You can try it, if you have 5 seconds to spare:

Click on the image to launch a five second test!