Dec 11th, 2008
Maruf scribbled this post.
Maruf scribbled this post.
I’ve put together a simple AJAX contact form, using the Jquery library (my personal favourite).
What does this all mean? Well, it’s basically a contact form which validates and submits an email without the page refreshing. You can see an example on our contact page.
The example i’m providing for download is extremely simple. If you know HTML/PHP it’s extremely easy to modify and adjust to your own personal needs.
Download
Ajax Jquery Contact Form With Validation
Quick Notes
- Please checkout the submitemail.php file. In there you need to update certain variables. E.g where you want the email to go, and the subject line
- I advice you not to alter the PHP code unless you actually know PHP
- If the script generates a “Warning: mail()” error, it means your PHP server needs to enable the mail() function. It is not a scripting error.
Filed away: Ajax
comments
For some reason this doesn’t work out so well for me. It just submits like a a normal page. If I don’t give it the right info, it takes me to a basic white page (e.g. submitemail.php) that gives the errors. it doesn’t show it in the current page.
if I enter everything just fine, the same thing happens. Except, instead of errors, it just says “successfully sent email” or whatever (which works).
I have the javascript files in the right place, uploaded on the server, and everything. Is there anything else required?
Bah, false alarm. I didn’t set my form id to ‘submitform’, so the script wasn’t catching the action correctly. no problems man. Great code and really straightforward. Should have inspected my own implementation a bit more
Is there a chance that this script will conflict with other scripts?
The javascript you put at the top of the page with the form calls $(document).ready(function()
if I have other scripts that contain a function(), doesn’t that cause problems?
I have gotten a test page to work fine, but it doesn’t validate, saying “$(document) is null”.
Thoughts?
Hey Admink,
There could be a conflict if you’re using other libraries like Prototype or Mootools. Are you using any other libraries?
Only jQuery and a small javascript accordion (http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/). What is strange is that it works without an error on every page except for the javascript accordion page….
the accordion javascript begins with “eval((function(){…”.
Hrm
Ah, I may have figured it out. This script uses a $(document).ready() portion and the accordion that I linked uses a link and I believe they are conflicting.
Bummer….I have no idea how to get around that, as the accordion script would need conversion.
Actually, I think it’s the $ that’s causing the conflict.
I’ve had that problem before…
Solution: http://docs.jquery.com/Core/jQuery.noConflict
Let me know how you get on.
For those who have caching issues with internet explorer ( aka – Internet explorer ajax caching issue )
Insert this line of code in jquery.form.js at row no 1, before everything:
$.ajaxSetup({ cache: false });
Hotmail filters it as junk and possibly dangerous….is there a way to get around this(script wise)?
Thank U so much!
I love this.. in the download it only has name email and message – I would love to use this but I need to add a lot more form items – in the submitemail php code it says not to change below unless I know php etc .. I am assuming thats exactly where I need to place the fields I need and in the “now submit form” too – I would love just a quick briefing of how to do this.. I have a client that would love to see this kind of form – thanks ROb
The script works well but I don’t receive emails to my gmail account, any ideas why?
do I have to change the permissions of the submitemail.php?
I have this functioning properly except that I cannot get a CC or BCC. Perhaps my mail program on server will not recognize these fields?
How can I style the error message? When I try you can see the box created before submission, I tried adding display:none to my css file and to the error div its self but no joy … I’m lloking into JQuery atm but as yet havent found a solution.