FFForm – Free jQuery Contact Form Plugin with Validations & Amazing CSS3 Animation

The ‘Contact’ form on your website is like your door to rest of the world in the cyberspace. It is the easiest way for website visitors to drop a line and start the conversation.

However, the Contact form does not usually get the same treatment as the website layout, color scheme and logo receive which is why most websites fail to generate leads or convert website visitors to customers. A brilliant website generates leads, encourages conversation, win loyalty, beats in competition, and makes new customers… and the story starts with a prominent and efficient Contact form.

I can write enough to insist on having a carefully designed contact formbut I would leave it to another day. Today’s post is about a brilliant, lightweight, and free contact form , we named it FFForm.

You might also like:

• Open Source jQuery PHP Ajax Contact Form Templates With Captcha: Formify
• jQuery Sliding Content Bar Plugin: PushUp Content Bar
• Free, Interactive jQuery Plugin for Feedback Collection: Opineo

FFForm is a simple jQuery contact form plugin that can be integrated in any website layout to provide a fully functional contact form. Built with jQuery and CSS, FFForm contact form is compatible with all modern web browsers and mobile devices. It also provides various customization options including animations, field validation and notifications.

Major Contact Form Features

• AJAX Enabled Contact Form
• Cross-Browser Compatible
• Data Validation
• Custom handlers for events like onValidation, onSuccess and onError etc.
• Various Animation Styles

Customizing FFForm Contact Form

FFForm jQuery contact form has a rich set of parameters that can be used to customize the behavior of the plugin. Some of these parameters are absolutely necessary while you can skip the others. Here is the complete list of parameters.

• animation: Optional parameter can take values ‘fade’ or ‘flip’
• onValidate: Optional custom event handler fired when the form is validated
• onFail: Optional custom event handler fired when the e-mail fails
• onSuccess: Optional custom event handler fired when the e-mail succeeds
• sendButton: ‘id’ or ‘class’ selector for the send button/submit button
• sendingText: Text to be used for send button when the send/submit button is clicked
• fields: An array of fields with some customization parameters explained below

Field metadata

Each element in the fields array has the following parameters.

• id: id of the form element. Both id and name attribute are required for every form element.
• required: indicate whether particular field is required
• type: determine the validation function to be used can be ‘alpha’, ‘text’, ‘email’ or ‘custom’
• validate: indicate if the validation is required
• requiredMsg: text to display when a required field is missing data
• msg: text to display when invalid data is entered
• regExp: regular expression for type ‘custom’

Here is an example of field with some parameters.

Using FFForm Contact Form

• Add a reference to latest jQuery library
• Add a reference to jQuery.ui script
• Add a reference to jquery.ffform.js

All these scripts are included in the contact form plugin download package, you add them directly from the package like below.

Once you’ve added all the necessary scripts add your form HTML markup and call the FFForm contact form jQuery plugin initializer function.
You’ll also need to change the email address in the email.php file and edit the variable $send_email_to at line 3.