Bit Repository

a working demo would be nice

Yes, it would be, but the script has the mail() function which can be used abusively (i.e. SPAM). If a demo will be made, it must have some protection.

A demo is now available.

Thank you very much for your Tutorial. But it has a small Validation error in e-mail field.

info@yahoo,com
i mention comma in the above Email address.. But it doesent validate your code..

plz check and correct it..

Thank you

Thanks for noticing. I’ve fixed the error by adding a backslash before the period sign.

hi, I tried it but it doesn’t work with ie6

sorry, I forgot to put my phpserver on,
it’s working well with ie6

Good, I was quite surprised when I read your first comment, because I know that JQuery is compatible with IE6.

[...] Tableless Ajax Contact Form With jQuery (Tutorial & Files) – Demo [...]

[...] Tableless Ajax Contact Form With jQuery | Demo [...]

How might I get this to put the user’s email into the “from” field properly so that a REPLY goes back to them instead of to me? In my use, this would be considerably more useful. I’ve tried putting $from and $email into the config file, but that doesn’t do it. I don’t know enough about PHP yet.

Replace

."Reply-To: ".REPLY_TO."\r\n"

from line 54

with

."Reply-To: ".$email."\r\n"

I’ve also updated the post.

Hi,

Awesome site, thanks so much!

I’m using your script for an email sign up form. How would I go about forcing an email subject when the user doesn’t have the option of entering a subject.

Thank you so much

If you don’t need a subject from the person filling the form & want to set a specific subject you can do the following:

1. Remove line 76 from the form (the one with the subject)

<label>Subject</label><INPUT class="textbox" type="text" name="subject" value=""><br />

2. Remove line 19 from contact.php

$subject = stripslashes($_POST['subject']);

3. Change $subject from line 58 (where you have the mail function) with ‘your subject here’.

thanks

hi webmaster, i have downloaded your script but its not working
nothing is happening when i click on submit button
iam using php4 and testing under localhost do i need to change any code if any please post me
thank u

What browser are you using (type & version)? Please take a look at this page: http://docs.jquery.com/Browser_Compatibility. Perhaps there’s a compatibility problem between JQuery & your browser. Did you see the demo in action before downloading the files?

Great! That modification worked without a problem.

Now, I’d like for the person’s name to be put in the From: field properly. They’re typing their name into the form, but I don’t receive it. I did replace $from with $name (I forget where) and it puts it into the proper field… but, it appends @mydomain.com after it. Other than that, this script does exactly what I needed with a minimum of hassle. Thanks a lot!

I’ve update the tutorial. Check line 53 from the contact.php page

"From: ".$name." <".$email.">\r\n"

Hi,

This is great website, keep it up

I’m just wondering how I would go ahead and force a sentence such as “The following email would like to sign up to the Newsletter” in the body of an email?

Also is it possible to have a checkbox submit a true or false?

Starting to get more in PHP coding… sites like theses are a great help. If there’s anyway I can donate some money for your help, please let me know

Thanks.

Hi,

Thank you for your comments regarding this website. Let’s add the checkbox first.

1. Here’s the code that should be inserted in contact.html:

<label>Sign up to Newsletter</label><input type="checkbox" name="newsletter_signup"><br />

I recommend you to add it just AFTER:

<label>Comments</label><TEXTAREA class="textbox" NAME="message" ROWS="5" COLS="25"></TEXTAREA><br />

2. Now, we have to edit contact.php. AFTER:

$message = htmlspecialchars($_POST['message']);

add the following line:

$newsletter_signup = $_POST['newsletter_signup'];

3. We will make the final modifications.

Look for:

$mail = mail(WEBMASTER_EMAIL, $subject, $message,
     "From: ".$name." <".$email.">\r\n"
    ."Reply-To: ".$email."\r\n"
    ."X-Mailer: PHP/" . phpversion());

Just BEFORE it add the following code:

if($newsletter_signup)
  {
  $message .= "\n\n"."[The following email would like to sign up to the Newsletter.]";
  }

Notice how I used the string concatenation to add additional text to the message.

I hope you will manage to successfully implement the code I gave you. If you have any questions, let me know.

If you’d like to make a donation, you can look for a PayPal button located just above the pagination links for this tutorial.

Thank you for this great form.

How would you change the submit button so when a user clicks on it, it changes to something like ‘Submitting Form, please wait…” With the dots animated.

This form submits fast enough and a loader (until you the script gets a response from ‘contact.php’) is not really needed. However, it can be useful if the user has a slow bandwidth connection. Here’s how you can add one:

1. AFTER:

<INPUT class="button" type="submit" name="submit" value="Send Message">

ADD the following div:

<div id="loading"></div>

2. AFTER:

$("form").submit(function(){

ADD the following code:

$("#submit").hide();
$("#loading").html('Loading...');

This way the submit button is hided and the loader is shown.

3. BEFORE:

$(this).html(result);

ADD:

$("#loading").hide();
$("#submit").show();

The loader is hided and the submit button is restored.

As for the dots you can use an animated GIF:

$("#loading").html('Submitting Form, please wait <img src="path/to/dots.gif" align="absmiddle">');

Thank you, works great!

Great tutorial! I was wondering if i could send additional information to the email, for example i have a field called “Company” and would like it to be in front of the subject (along with the first- and last name).

Do you want to replace the “name” field with 2 fields (first & last name) and to add an additional field called “company”? Would the subject be something like: “Company Name: First Name, Last Name”?

Yes that’s exactly what i need. Do you know how to do this?

Sure, here’s what you have to do:

1. Replace the following line from the contact.html page:

<label>Name</label><INPUT class="textbox" type="text" name="name" value=""><br />

WITH this code::

<label>Company</label><INPUT class="textbox" type="text" name="company" value=""><br />

<label>First Name</label><INPUT class="textbox" type="text" name="first_name" value=""><br />

<label>Last Name</label><INPUT class="textbox" type="text" name="last_name" value=""><br />

2. Now, you have to edit contact.php. Find this line:

$name = stripslashes($_POST['name']);

Replace it with:

$company = stripslashes($_POST['company']);
$first_name = stripslashes($_POST['first_name']);
$last_name = stripslashes($_POST['last_name']);

Find:

if(!$error)
{

AFTER it, ADD:

$subject = $company.': '.$first_name.', '.$last_name.' - '.$subject;

3. Let’s add some validation to the new fields! Find:

// Check name

if(!$name)
{
$error .= 'Please enter your name.';
}

Replace it with:

// Check first name
if(!$first_name)
{
$error .= 'Please enter your first name.';
}  

// Check last name
if(!$last_name)
{
$error .= 'Please enter your last name.';
}  

// Check company
if(!$company)
{
$error .= 'Please enter your company name.';
}

To make a field optional, remove the conditional IF that verifies it.

Thanks so much! Once again, great tutorial. And the support is awesome

It doesn’t validate for sub-domain email addresses.

Like my email address:

beyblade[- at -]quickcms [- dot -]exofire[- dot -]net

It does now Thanks for the tip!

Hi,

I just tried it on my website and it seems to be working fine but I am not getting any email I have been waiting for the last 30 minutes now. I added my email twice in the config file, is there anyplace else where I need to add it? I had to copy paste the codes into files because my zip extractor wont open the zipped file downloaded from here either

For some reason when I am using this on my site, when I press ‘Submit’, js alert window comes up saying ’success!’. But doesn’t do anything after. Also if I remove the [HTML STRIPPED] line it still does nothing.

Oh please disregard the earlier message. I got the email after an hour! Thank you so much for this awesome script!!

@Travis O'Donnell: After checking the contact form that you installed in your site, I've noticed that jquery-1.2.6.js is not loaded. Are you sure the file is in the main root of your site? I've tried to open it but I got an error.

Thanks for helping me earlier on with the subject field. I was wondering how i could send a overview of all the fields in the email, like:
- Company:
- First name:
- Last name:

Hope you can help me out with this one!

Greetz,
Jasper

You need to modify $message. Example:

$message = "- Company". $company."\n- First name: ".$first_name."\n- Last name: ".$last_name."\n\n".$message;

Nifty! Thanks for the great example!

Hi,

I've been trying to make this work for the last two days now and it shows the thank you message but I dont get anything in my email. I tried different email accounts, both yahoo and hotmail. I didnt change any code in either of the pages. Can you look at it and tell me whats wrong if you have time? The link is http://www.ranbirkapoor.net/catb/contact.html

Thanks!

This has nothing to do with the script, which is working fine. It's probably a problem with the software that is installed on your server and sends the mails. Did you use mail() before in other scripts? Did it work? Also, make sure that you didn't change the original script and you typed the correct e-mail address in the config.php file.

This is amazing, just what I needed!! Great job! I had a question… What if I have two forms on my site? One for comments and one for ordering. How can I modify the script so it will work with two different forms with different fields?

Thanks so much!

Madiha, good question! I have updated the ZIP file. If you download it, you will find a page sample with 2 forms in the same html page (multiple_forms.html). I will also update this tutorial with an explanation of how you can use more then 1 form in a page.

Hi sorry but the zip file does not work, it says there are 0 files in the folder…can you please check for me, I am pretty sure its empty…

Thank you so much for ur help!

I've just downloaded the ZIP file (21,1 KB) and extracted it successfully. What software are you using to extract the ZIP archive?

Hi, I am using Z-Zip and I also installed Winzip and winzip error is saying "File corrupt, possible transfer error…"

hmmmm…

I will send you the ZIP via e-mail and find a solution for this transfer error problem.

Thanks alot! It worked great!! This is the best form out there!

I had a quick question about an answer that you posted for somebody here…

The Question was, How do we add Company name, First name, Last name to the email we recieve inside the body of the email?

And you said:

You need to modify $message. Example:

$message = "- Company". $company."\n- First name: ".$first_name."\n- Last name: ".$last_name."\n\n".$message;

But in my contact.php file, I have this info already placed there:

"$message = htmlspecialchars($_POST['message']);"

How do I add that new line in?

Thank you for all your help!

Yes, before the line with the mail function add:

$message = "- Company". $company."\n- First name: ".$first_name."\n- Last name: ".$last_name."\n\n".$message;

This way, you will have company, first & last name before the actual message. Notice how I used string concatenation in this situation.

Hi, thank you that worked!

But now, it wont validate if a message was input and if it was less than 15 char..

It wont give me an error if i enter NO message…

=/

Did you remove $message = htmlspecialchars($_POST['message']); ? I said that you should add that new line before the call to mail() function. I don't know how you modified contact.php. The validation should work 100%!

This is what I have:

$message = "- Name: ".$name."\n- Phone: ".$phone."\n\n".$message; htmlspecialchars($_POST['message']);

No, that is wrong! I told you to add the new line before the call to mail() (just after if(!$error) ) without any other changes.

Ohhh. Im sorry lol. I misunderstood. Okay I tried that now it works!!

=) Thanks alot for all your help!

That's great! The strange is though i don't see the actual "message".
I do see company, firstname, lastname. What am i doing wrong?

I don't know how you edited that file. But if you followed my instructions it should have worked.

You right, my bad!!

Thank you very much for a clean and thorough presentation!

Just wanted to note I had to change (in contact.php – Line 20):

$message = htmlspecialchars($_POST['message']);

TO:

$message = stripslashes(htmlspecialchars($_POST['message']));

because, for example: "user's typed message" was sending me: "user\'s typed message". I don't know if it is my server's PHP settings (which are default from my provider) or what, but I had to add stripslashes to the $message line, now I am good.

Yes, you did good. I just omitted to add it for "message", as I did for "name" and "subject". Will update the post!

How can i validate a select option?

This is what i have:

<select name="aanhef" id="aanhef">
<option value="De heer">Man</option>
<option value="Mevrouw">Vrouw</option>
</select>

And i can't send the form because the select field is empty.
Can you please help me out?

Fixed the problem i guess , sorry!

@Jasper: That dropdown ("aanher") doesn't really need a validator because there are only 2 options in it and none of it is NULL.

Could i add a CC adres so that it mails to 2 adresses?

Or can i just ad an (comma seperated) address in the config.php

Yes, you can either use CC or call again mail():

$mail = mail(WEBMASTER_EMAIL, $subject, $message,
"From: ".$name." <".$email.">\r\n"
."Reply-To: ".$email."\r\n"
."X-Mailer: PHP/" . phpversion());

$mail_two = mail('your_second_mail@domain.com', $subject, $message,
"From: ".$name." <".$email.">\r\n"
."Reply-To: ".$email."\r\n"
."X-Mailer: PHP/" . phpversion());

I do not recommend adding new email address separated by commas in the config.php. Everyone who receives the mail will see all the addresses where the mail was sent and in many cases this is not recommended at all.

Cool.

I've been running this past a page with other Ajax calls, and once msg=='OK', the .ajaxComplete reacts to the successful completions of the other, unrelated Ajax events.

So, in contact.html:

27 $("#note").ajaxComplete(function(event, request, settings){
39 $(this).html(result);

…do you see any problem with eliminating line 27 and changing line 39 to this?:

39 $("#note").html(result);

Just curious, because I made that change and everything is still working in what I've checked: Safari 3.x, FF3, and IE7.

Oke that's cool. So can i send the second mail to the person who filled in the form? I'm not sure how to edit this:
$mail_two = mail('your_second_mail@domain.com', $subject, $message,

Is it something like this?
$mail_two = mail(". $email.", $subject, $message,

Hope you can help me!

hi

i add succesfull your ajax form to my website but i have 2 issues

1 html specialchars are not suportet when i receive a mail it remove all special chars like àáâãäçèéêëìíñòóôõö how i can solve this

2 the second is in the emails is nothing like name phone adress ect

this 2 issues also dont work in your downloadarchive i test it can you help me please thank you

[...] Tableless Ajax Contact Form With jQuery (Tutorial &amp; Files) – Demo [...]

@Jasper: To send a mail to the person who filled the form consider using the following code:

$mail_two = mail($email, $subject, $message,
"From: your_name < ".WEBMASTER_EMAIL.">\r\n"
."Reply-To: ".WEBMASTER_EMAIL."\r\n"
."X-Mailer: PHP/" . phpversion());

@Ted: It shouldn't be a problem. It's good that you solved the issue by making this change.

Thanks a lot! That works fine!
Just for the record, i donated a little bit

i fixed by myself and add few functions

captcha enable disable in config.php
additional fields enable disable in config.php
autoresponder defne text in contact.php
add body text for received emails
fix for suport html special chars is working now
name
phone
adress ect.
ALL THIS CHANGES only for the contact formular not for the feedback
download here http://www.jobadoo.us/contact_form1.rar

In the second email i don't want the same information as the first email.
The second email is sent to the person who fills in the form and should therefore contain a text message instead of all the filled in information.
But i'm not sure how to do this.

$mail_two = mail($email, $subject, $message,

so the field $message should be replaced with a text.

i followed the steps correctly (or at least i think i did)

it looks good up till the end, when you click the submit button, this error appears above

\r\n" ."Reply-To: ".$email."\r\n" ."X-Mailer: PHP/" . phpversion()); if($mail) { echo 'OK'; } } else { echo '
'.$error.'

No worries! Allready fixed it!
I just added a second $message

Excellent facility! I'm using AJAX contact forms for over 2 years, but I would like to either integrate JQuery within my current version or use other solutions like this one.

A bug I've discovered with your solution is that it reports some legitimate email addresses like invalid ones

For instance, my email address ends in [at] pro-it-service.com

The script seems to not recognize the dashes from the domain name…

Kind Regards,
Mihai Bocsaru

Thanks for letting me know about this bug. I've removed it by updating the e-mail validator function.

It's a pleasure and actually, thank you for such an excellent job!

I guess you've updated it on your end, but didn't update it online as well or on the downloadable archive… I've just looked at the coding from this page and inside the archive and the email validating function is the same…

I did update it online (tutorial & demo). I've also updated the ZIP archive. It should work now. I will re-upload the files again.

Great, thank you! I've just discovered now that it is not compatible with Lightbox2 from http://www.lokeshdhakar.com/projects/lightbox2/

In case you place the lightbox 3 js calls before your ajax form js coding, then the ajax form will work, but the lightbox not and vice versa…

If you have the 3 lightbox js files referenced after the js coding for your ajax form, then the lightbox effect will work, but not your form AJAX effect…

Can you please try, see and fix that?

Cheers,
Mihai

Lightbox2 is using Prototype Framework & Scriptaculous Effects Library. My form uses JQuery. You need to make this library compatible with other frameworks. Here's a URL that will help you: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Excellent support! The process seems quite straight forward on http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Actually, I've thought about having both features on the same technology and so I've searched for Lightbox based on jQuery.

After some testing the best solution for me is http://plugins.jquery.com/project/jquerylightbox_bal because I could keep referencing images where I want the lightbox effect with rel="lightbox"

So folks, if you want to operate Lightbox and this awesome ajax form, consider http://plugins.jquery.com/project/jquerylightbox_bal instead of http://www.lokeshdhakar.com/projects/lightbox2/

I've used Lokesh Lightbox2 solution for 2 years, but it's now time to switch over to jQuery

Thank's…..

This is a nice article!
Thanks for sharing this.. keep it up!

Great form with validation!

One question, if I wanted to validate a field for phone, where would i add this?

thanks!

Great job!

Hello. Amazing tutorial and amazing webmaster response here!

I’m a novice and have probably what is a basic question. Why this html code is included:

69. <div id="note"></div>
70. <div id="fields">

Because I do not see the ids #note and #fields in the CSS code.

Later

Gabriel, awsome tutorial. I used your method on a site over the weekend and it is working well, so thank you. Just a thought/question…Would it be worth validating the form fields with jQuery as well as in the php file? That way the data will be validated even quicker. Let me know your thoughts.

Tom

The ID attribute is used to assign a unique identifier to an element. For instance “note” is assigned to a DIV where the submit status is shown (errors or message sent). If you study the JavaScript code you will see how ‘#note’ is used.

Ahh yes. With out that code it will not print out the Ok and Error messages. Thank you for your help Gabriel.

There are 3 error messages that can be displayed. I want to have a different div for each of the messages instead of the one “.notification_error” div. I would need:

- .notification_name_error
- .notification_email_error
- .notification_message_error

how would I go about programming the java to allow this to occur?

Also have another question for you.

SCENARIO 1
also, lets say that someone screws up all 3 required fields and gets all 3 errors. I would like these errors to be displayed in their individual rectangular sausage shaped divs starting with

1) “.notification_name_error” at the top place
2) “.notification_email_error” in the middle
3) “.notification_message_error” on the bottom

SCENARIO 2
What if someone only screws up the email and the message fields. In that case I would want the “.notification_email_error” and “.notification_message_error” divs to appear but I would want the “.notification_email_error” div to appear in the top placement just like the “.notification_name_error” div in Scenario 1. The “.notification_message_error” div would appear in the 2nd, or middle, placement just like the “.notification_email_error” div in Scenario 1.

SCENARIO 3
If someone screws up just the message field then I would want the “.notification_message_error” to appear in the top placement just like the “.notification_name_error” div in Scenario 1.

How would one go about programming the java to attain this result?

Thanks again Gabriel,
IASIIS

Thanks for this great script.
I’ve implemented on a site that has more fields (12 in total), Name, Telephone and Email are required and the rest are not.
The problem appears when I complete only one field(and the error appears), then I complete the rest of the required fields but the submit button is disabled(doesn’t function anymore)
Also the email and telephone insert validation doesn’t seems to be working in my multiple field form(the same check functions gives me error as the field is not completed when in fact it is completed!
Any ideas? Thanks

Hey, thanks a lot for this. I’ve been learning a lot about jQuery lately, and this was great.

I’m running into a problem with this however. Everything works fine except that when the message sends/returns successfully. The only thing that doesn’t is the success message.

The success message doesn’t appear and the fields div doesn’t get removed after a successful submission. It seems to just skip to the next code block in the javascript and returns/prints the ‘OK’ result from the php script instead of reading it correctly and changing content.

I was using jQuery 1.3.1, then switched to 1.2.6 just to see if that was the issue and I ran into the same problem.

Any help would be appreciated. Thanks!

Hi thanks for the form, this is the first time adding this to a site. I have an issue however, when i click submit all that happens is that instead of contact (at the top of the form) i get “OK” displayed and all the data in the form remains. Maybe i have done something wrong?

Thanks
Jamie

What you want is something quite different than what you currently have. First, you need to add the DIVs (with no text inside them) in the form (top, middle, bottom), each having a unique ID and the style set to ‘display: none’. You also need to change the contact.php file to send the response in JSON format. The JavaScript receives the data from contact.php and checks (for instance) if the email error notification exists. If the ‘email’ object exists, then set the notification_email_error to “visible” mode and fill the text error in it. I don’t know how familiar you are with PHP, JQuery and JSON but here are some URLs that can help you:

http://www.json.org/
http://www.php.net/json
http://docs.jquery.com/Events (JavaScript Events)
http://docs.jquery.com/Selectors (JQuery Selectors)

Did you change anything in the original code? Is the demo from Bit Repository working fine for you?

I think you have modified contact.php. Did you add HTML code in it? The only thing that should be outputted from contact.php is “OK” (if successful).

Gab, thanks for the response. Yes, I changed some code in the contact.php file because I needed to make some changes to integrate into my own setup. Nothing major. I’ve looked it over multiple times and didn’t see anything that could be causing an issue like this.

I did download the tutorial files and try them and they worked fine. Looking over those and this tutorial, there are a few differences in some of the coding. So, I’m going to use the downloaded files as a guide to redo some things and see if I can fix this.

Ok, I’ve narrowed things down to the only thing that can be causing this issue.

Smarty!

There’s an issue with the Smarty templating system and your script that I need to figure out. If I take the success from the javascript and use that as the echo string instead of ‘OK’ in the contact php file, it will return that success div without any issues. That’s the quick fix, but the problem with that is the fields div doesn’t get removed. Not that big of a deal, but sort of unprofessional, especially since the data in the input fields are still there after a successful submission.

It seems as if the ‘OK’ echo string thats returned on success isn’t interpreted correctly by Smarty. Since it displays that echo string, I guess it takes it as a literal character. I tried taking the JS for this and putting it in an external JS file and linking to it in the header, but that didn’t change anything. Maybe I need to assign the return value as a smarty variable and then pass that to the JS somewhow. Bleh.

Hey Gabriel,

Thanks for that info but I think it will take me some time to learn how to utilize JSON to reach the previously stated goal.

On another note, I have made some cosmetic changes to the contact form on my site. One of them was adding a 110 pixel wide background image (which contains a 55pix wide a:link state and a 55pix wide a:hover state) to the button div. I would like to create a rollover version so when someone is hovering over the button div the background image position will shift left by 55 pixels which will revealing the a:hover part of the image.

Some one from another forum suggested implementing JQuery event handlers that would be able to shift the background but, since I am a beginner I haven’t a clue how to work them in.

One other change I made was getting rid of the text which appeared next to each text fields. Instead I placed them inside each of the text fields so when the form loads you will see “name”,”email”, “subject” appear inside their related text fields. I can not get it so that the word “message” appears inside of the message div.

Any ideas on how to solve these two problems?

Here is the link to my contact form page:

http://caeious.com/stomatologdeblin/kontakt.htm

P.S. I have had to translate the OK and Error messages as well as “name”,”email”,”subject” into the Polish language so it may seem a bit strange but the form layout is structurally the same as you have in the tutorial. With Firebug you can see all the code. If you don’t have Firebug then I will post the code if you need it.

Thanks and take care,
IASIIS

is it must to have a mail account on our own domain to use this script. can i get all mail through this form on my free gmail(not gmail apps) account

Hi, great script got it working no problem. Just 1 quick question: I want to use the form as a kinda reservation form so I have added a drop down list of dates for the user to select. It doesn’t have to be validated, but I would like it to show up in the email. How do I get non-validated fields to be shown on the sent email?

Ta

Hello,
Thanks a lot for this great tutorial, I was wondering, if I can use 2 forms on the same web page?
thanks in advance

Does anyone know how to attach and send a jpg file with the form?

thanks a mil for this, works a charm!

This topic was discussed before. In the zip archive containing the tutorial’s files you can find multiple_forms.html which has 2 forms in it. This way you will see how multiple forms can be added in the same page.

Thanks I didn’t watch it

ADD:
$(”#loading”).show();

BEFORE:
$(”#submit”).hide();

So everytime you press Submit, the loading message will appear.

- In response to Gabriel’s “Adding a loading message” entry on Nov 15th, 2008.

I’m having a hard time trying to implement this function http://www.americanfinancing.net/email-image-upload.cfm into the form. Does anyone have experience with this?

This form is great, and exactly what I was looking for.

However, I just noticed, that when someone attempts to use the search form in my sidebar, instead of searching, it submits the e-mail form (which then produces error messages because the e-mail fields weren’t filled out).

How do I keep it from conflicting with my search form submissions?

Nevermind. Figured it out. Feeling really stupid.

Hello, this for the updates all question you answer to this page..

I just have a basic question.. I have 2 forms in one page using this script. the problem, i think when I click to submit the other one. the error msg will show on the first form I have.

pls let me know what i need to do with this..

Thanks and more power!

Hello one more thing. do you have a credit card validation and phone number function of this script? pls can i have it?? thanks a lot for the help!

hi pls ignore my 1st question.. I just read the comment and I will download your latest file.

I think this is the only I need if this is possible..

how can add a credit card and phone number validation function of this script?

thx!

Hey Gabriel, awesome script BUT I have one problem, can you help?

When I receive my email after entering the info, ONLY the “message” is in the body of the email and it appears in the subject line of the email…

Is it possible for the email to have this data…

Subject line in email inbox “A user at yoursite has sent an email”

Body info in email:

Name: users name
Email: users email addy
Subject subject user entered
Message: message user entered

is this possible with this script?

Brian, consider checking the previous comments from this post and you will find the solution

Thanks for your great bit of code.

When I try to navigate away form the page where the form is displayed before entering any data, “This field is required” is displayed on one of the input boxes and the page remains displayed.

Hey Gabriel,

Fantastic article, very insightful and well laid out. I have tried to implement this on my own website but unfortunately I never receive the email.. The form itself works perfectly, if the correct information isn’t present it doesn’t validate and if the correct information is present it hides the form and displays a success message, yet I never receive an email. I have tried the mail() function before and I know that my host supports it so I’m truly stumped on why it isn’t working. Perhaps you can find the problem?

Best regards,
Elliot

Hey Gabriel,

I seemed to have solved the problem, sorry to waste your time!!

Unfortunately I still have one other problem. With my website, I dynamically load in content using jQuery and AJAX. The only problem with this, is when I load in the content, in this case the contact form, it’s loaded after the DOM has been initialized. To fix this on other pages (let’s say where I’m using lightbox) I simply reinitialized that code but with your code I’m not sure how to accomplish this. Any chance you can help?

Best regards,
Elliot

My final post so as not to spam your forums

I figured out how to reinitialize the form and in the process may have further advanced your script, I’ll leave that judgement upto you. I’ve condensed your code into 2 files, 1 JS and 1 PHP. The code looks like this:

JS:
$(document).ready(function() {
$(”form”).live(”submit”, function() { var str = $(this).serialize(); $.ajax({
type: “POST”,
url: “scripts/contact.php”,
data: str,
success: function(msg) {
$(”#note”).ajaxComplete(function(event, request, settings){
if(msg == ‘OK’) {
result = ‘Your message has been submitted, thank you!’;
$(”#fields”).slideUp(500);
} else { result = msg; }

$(this).html(result);
});
}
}); return false; });
});

PHP:
<?php

/* Credits: Bit Repository */

define(”WEBMASTER_EMAIL”, ‘YOUR@EMAIL.COM’);
error_reporting (E_ALL ^ E_NOTICE);
$post = (!empty($_POST)) ? true : false;

if($post) {

function ValidateEmail($email) {
$regex = “([a-z0-9_.-]+)”. # name
“@”. # at
“([a-z0-9.-]+){2,255}”. # domain & possibly subdomains
“.”. # period
“([a-z]+){2,10}”; # domain extension
$eregi = eregi_replace($regex, ”, $email);

return empty($eregi) ? true : false;
}

$name = stripslashes($_POST['name']);
$email = $_POST['email'];
$message = stripslashes(htmlspecialchars($_POST['message']));

$error = ”;

if(!$name) { $error .= ‘Please provide a name you wish to be addressed by. ‘; }
if(!$email) { $error .= ‘Please enter an email address. ‘; }
if($email && !ValidateEmail($email)) { $error .= ‘Please enter a VALID email address. ‘; }
if(!$message || strlen($message) < 10) { $error .= “Please enter a message [10 characters min.]. “; }

if(!$error) {
$mail = mail(WEBMASTER_EMAIL, ‘[Contact @ebarer]‘, $message,
“From: “.$name.” \r\n”
.”Reply-To: “.$email.”\r\n”
.”X-Mailer: PHP/” . phpversion());

if($mail) { echo ‘OK’; }
} else { echo ”.$error.”; }
}
?>

Cheers,
Elliot

Hi, is it possible to clear the form fields if successful as well as display the success message?

Hi, is there a way to consolidate the contact.html and contact.php files into one page?

Im trying to make the form work all as one page if possible. (I’ve already put the config.php and functions.php code into contact.php)

Great form though either way!

Thanks,

Scott.

Sorry, disregard the above, I now understand AJAX a bit better!

Lol.

-Scott.

Hi,
Can anyone tell me what to do to add a checkbox that if checked to send a copy of own message to the email user enters?

Thank you.

Hello. Any clue as to why my email sends but the “Thank you” message does not? Its just showing the form.

Thanks! Great Job!

Hi,

I always get an alert saying “success” everytime i click the submit button.
What am i doing wrong??
Pls help

I figured that out. I didnt up the jquery-1.2.6.min.js.
I would like the form not dissapearing.Just the message coming in and after sometime it fading away
How can we do it?
Thanks
Prady