A really cool, really simple contact form plugin using Jquery
Creating a form for your project is a simple task and they are a great way for your users to contact you. However forms do have some draw backs, they can be ugly, confusing and sometimes it is hard to know if they are filled out correctly. Designing the form is the easy part, making sure your user fills it out the way you would like is a different story. Form validation is the way to go, and this Jquery plugin has everything you need to do it.
Start by downloading the plugin HERE and see the DEMO Once downloaded open up script.js in your favourite editor and we’ll explain how the code works briefly…
The Variables
On line one we have a function that is triggered when the user clicks on the submit button. Within this function we have the code that validates the fields – it started by declaring three variables. The variables here target the value of each of the input areas (name, email and comment). Next is the fourth variable, its named “emailcheck” this gives us what we need to make sure the format is correct for an email address.
The “IF” Statement
Line eleven is where the “if” statement starts, the parameters we give it checks to see if any of the three input fields are empty. If any of them are empty, four more “if” statements are executed, these display the errors with a fade-in and animation function (these can be changed to your liking). On line thirty-eight, a return statement returns “false” to stop the form from submitting.
If all the fields are valid the “else” part of the “if” statement returns “true” and allows the form to submit. This is the end of our form validation function and we close the function on line forty-five.
Clearing the Error Notifications
When the user has error messages displayed they can clear them by focusing on the corresponding input field. These are very simple functions, a “.focus” event executes a function that fades out the error notifications.
Thats it, a very simple Jquery contact form plugin. Feel free to use this in your own projects. Any questions please contact us…
Hi, where do I specify which email the message is to be sent to?
Hi Stella,
In “contact.php” at the top of the script there is a variable (“$email_to”). That variable holds the email address the form will send to, all you need to do is change its current value to your desired email address.
Thanks a lot for the plugin! It’s simple to set up, easy to follow and works great! Just what I needed.