blog, Uncategorized, Website Design

VinSolutions Websites Forms 1

Just over a month ago the company I work for switched a few of our websites to VinSolutions.  As with any CMS there is a learning curve.  I downloaded their CSS files and attempted to figure out if they were using any kind of standard.  There were a bunch of css files and they all appeared to be randomly coded with very little commenting.

I figured a good place to start was a custom page they had (kind of) copied from our old website.  It was a form page with custom css so I figured this would give me some insight.  Unfortunately I found that they just appended the styles.css with some very specific coding that could only be applied to this one page.  Looking through this styles.css file I found this was the case for all the custom requests.  So far I wasn’t very happy with what I was seeing.

At this point I tried to determine what each section of the “forms” page was.  When creating a forms page there are a few content areas: [Secondary Content], [Header], [Footer], [Success].  The success area is self explanatory.  However, I couldn’t seem to figure out how to get a page to line up properly when randomly adding content to the other three areas.  So I created a test page and ran a few tests.

The forms page layout is:

<div id=”customheader”></div>
<div id=”customsecondarycontent”></div>
<div id=”customform”></div>
<div id=”customfooter”></div>

The “customheader” or [Header] worked exactly like I expected.  It is full width at the top of the page.

But this is what my test page ended up looking like:
form layout 1

Note:  This test is done with form layout 1

form-test-01 screen shot

All that blank space next to the secondary content with the form pushed down the page, in my opinion, looked crappy and unprofessional.  So I started clicking through to all the different form pages on the site and found the same layout issue.  Wondering if it was limited to my site I decided to visit some other VinSolutions powered websites (do a Google search for “CRM, Website & SEO Powered By VinSolutions, Inc”) and was finding the same issue on every single site.  In fact not one website I tested had the layout issue fixed.

So what to do?

Here’s the weird part . . . the fix is really really easy.  The css for the “secondarycontent” had the block floated right with a width of 60%.  The css for the “customform” was simply floated left.  There was a page element that was forcing the size of the customform to be 663px wide.

The fix – I contacted VinSolutions websupport (because the css files are not editable by the end user) and had them replace #customform { float: left; } with #customform { float: left; width: 40%; }

This small change fixed every form on the website.

Want to customize your VinSolutions website?  Don’t want to pay $150 per hour to VinSolutions?  Contact Me