SharpSpring Ribbon Test Post

Last Updated on May 6, 2017

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.

Thrive Widget with a SharpSpring

Test Form

The below is an area where the SharpSpring form appears as a test.

For SharpSpring folks helping me, the instance is Polymash, the form is called "Blog Sign Up - Blog Only - Horizontal Layout", and for a direct link to edit the form click here

Note to SharpSpring folks helping me: the form below should be in horizontal layout, not vertical