This tutorial shows how we can create a beautiful contact form using jQuery. The concept was taken from This contact form may be useful in situations like you want to put a contact us form on your website or you can also use this contact form for comment purpose for your blog. This contact form consists of four fields such as Full Name, Email Address, Website and Message or Comments. This contact form has been tested in Chrome, Firefox and IE 11.


Knowledge of HTML, CSS and jQuery

Final Output

jquery contact form

Now I will show you step by step how we can create a beautiful contact form using jquery.

Step 1. Create a folder anywhere in your system. Let’s called this folder contact_form.

Step 2. Now create a contact form with the below code. Create an HTML file called contact.html and put the below code code.


Step 3. We need some jQuery and css stuff, so we will create those file.





Step 4. Include js and css in the head.


Step 5. You need images and jQuery file. So download images and jquery file from the below links and put under contact_form directory.

images       jquery-1.9.1.min

Step 6. Run contact.html file.

Thanks for your reading. Please do not forget to leave a comment.

Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.