Give your input forms some sex appeal

View on Github

Something cool from Kevin LeClair

Form designs inspired by the Codrops article


Sexyforms.js will allow you to create great looking input forms with ease. Only a small amount of HTML and Javascript is required.

Getting Started

Simply include colour.js in your scripts folder, and call the function in your main.js. Ensure that you have linked jQuery in your HTML file. Pass the .sexyForm function the style you would like to use. Also link the sexyForms.css file in your head tag.

$(function() {

Include this in your HTML markup and the form will be created inside the span element with a class of sexyform. You also must insert a unique id for each input form you want to include.

<span data-placeholder='Write your placeholder here' class= "sexyform" id='insert unique id here'></span>

How It Works

Sexyforms.js takes a single span element within your HTML and replaces it with a nice looking input form! All extra markup is added with jQuery and then animated on click. To change the colours and other stylistic aspects of your input forms go into the sexyForms.css file.