October 23, 2018

Contact Form Updated to ‘Float Label’ Design Pattern

I’ve updated the contact form on Venuemate to the  ‘float label’ design pattern. This adds a bit of animation to a form and gives it a slightly more refined look. You can see the ‘before’ and ‘after’ below.

Previous form design

New form design

How to Implement in WP using Contact Form 7 Plugin

There’s probably a floated form label CF7 plugin out there but I couldn’t find one so I got the CSS from Codepen and hacked Contact Form 7’s HTML structure via the form editor. To get the form to render you’ll need to separate the input fields from the labels like this:

Original CF7 code:

<label> Your Email (required) [email* your-email] </label>

Updated CF7 code:

<div class=”ffl-wrapper”>

<label class=”ffl-label”> Your Email (required) </label>

[email* your-email]


While we’re talking forms, I’d like a mini-rant about forms in general.

My personal opinion – and I should add I have no data to back this up – is that web forms often require to much information. They often seem to be designed from the perspective of the Marketing team with fields like ‘number of employees’. I can see how that helps the Marketing team but how does that help me as someone completing the form? I accept that I need to give you my email address to download your  ‘insights’ ebook but I don’t want to waste what’s left of my lunch hour scrolling through a ‘select country’ dropdown ( The UK is a long way down that dropdown, and while I’m here, has anyone ever got a lead from Uzbekistan? ( that’s a bit of form input field humour for you there ) )

If I were Website Forms Tzar, I’d issue a decree that stated that forms should have no more than three fields, name and email and one other.

Correct, that is the flag of Uzbekistan.