Build me an AJAX / php email Contact Form.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Create a file "contact.php" with these three input items in a form:

input - users_email_address

textarea - users_message

button - Submit

When the user presses Submit, send an email to my email address (with the users_email_address and users_message in the content of course).

And then, tell the user: "Your message has been sent."

NOTE 1: This should be an ajax contact form -- e.g. No refresh!

NOTE 2: For the submit button, I want to use the orange button here on the left http://lab.hakim.se/ladda/ called "Contract"

NOTE 3: If the user has typed in an invalid email address, then show him an error message: "This doesn't appear to be a valid email address."

NOTE 4: Please TRIM() the users email. e.g. remove spaces on mousedown of the submit button.

NOTE 5: If the user has not filled out the users_message box, then show him an error message: "You cannot send a blank message. Type something!"

NOTE 6: Make sure it works in IE8, I think the http://lab.hakim.se/ladda buttons might have trouble in IE8. It doesn't have to animate in IE8. But the message should still submit.

What server-side language do you want to use to send the actual e-mail?
alixaxel over 7 years ago
http://php.net/manual/en/function.mail.php just the php mail() function i assume
tonloc over 7 years ago
awarded to alex
Tags
jQuery
PHP
ajax

Crowdsource coding tasks.

2 Solutions


I was looking for a client-side Javascript API to receive e-mails I read about recently, unfortunately, I can't find it anymore. Either way, during my search, I came across SquareSend which is stupidly easy to implement.

Unlike the service I was looking for, SquareSend has a free limit of 50 e-mails per month (the other one had 250 if I recall correctly), which may or may not be sufficient for your needs. The other one also supported full form customization (you just had to issue a POST Ajax call manually). The good thing about outsourcing e-mail delivery, is that you don't have to worry about the security and reliability of your server, server-side code and the delivery rates are usually much higher as well.

I was going to provide a PHP option as well, but @alex beat me to it. =)


The files are available here to download. There are three files, contact.php, core.js, and ladda.min.css.

To configure the script, open contact.php and edit the third line that says $email_to = "example@example.com"; and change the variable $email_to to your own email.

Edit 1

The files are available here to download.

Changelog

  1. trim()ed all the post variables
  2. added email validation in PHP for extra security
  3. fixed javascript input value bug

Edit 2

The files are available here to download.

Changelog

  1. Added ladda.min.js and spin.min.js
  2. Linked loading indicator to button

Edit 3

The files are available here to download.

Changelog

  1. Made submission happen on a 1 second delay as requested
  2. Now shows "sending" and "thanks" content during and after loading

Edit 4

The files are available here to download.

Changelog

  1. Removes loading animation when there is an alert
  2. Hides orange button when thanks is displayed

Edit 5

The files are available here to download.

Changelog

  1. Fixed form submitting when email field is empty
Nice job, a couple of remarks tho: 1) you don't seem to be trimming the POST data, 2) the way you're building the email headers is highly vulnerable to e-mail header injection / hijacking (someone easily could exploit this form to send [spam] e-mails to and from someone else).
alixaxel over 7 years ago
cool thanks http://jfrassini.com/my-new-contact-form/contact.php i seem to keep getting an 'invalid email address' message
tonloc over 7 years ago
@alixaxel 1. Ah... I did not see the need for that at first, but added it now. 2. I was going to have the email validated again in PHP. 3. And I believe I do have it set as \r\n. Thanks for the tips, I've updated the script.
alex over 7 years ago
@tonloc I have updated the script.
alex over 7 years ago
cool thanks 1. Orange button is no longer animating on click 2. the form does not say "Your message has been sent."
tonloc over 7 years ago
@tonloc Whoops! I forgot to link the files. I have updated my solution.
alex over 7 years ago
Ok thanks i sent a tip. Here's a few changes: Please see this image http://jfrassini.com/my-new-contact-form/update1.gif
  1. The processing is too fast, and hence, the user cannot see the animation because the form completes too quickly. So add a delay of at least 1 second so that the user can see the animation.
  2. Try to create the user experience that is shown in the above GIF file.
  3. Trim the text in the actual edit box, not just the variable. Because, when the user hits the new blue "send another message" link, i'd like the text to be trimmed in the edit box. e.g. if the user hits the blue link, then make sure the form resets WITH the user's email address inside the email box.
tonloc over 7 years ago
@tonloc Gotcha, coming right up. Thanks for the tip.
alex over 7 years ago
@tonloc Answer has been updated
alex over 7 years ago
ok thanks
  1. if the user enters a bad email address, then the button still animates and the form says "sending." Can you make it so that, when the user enters a bad email address, the ONLY thing that happens is the alert() box is shown that reads 'This doesn't appear to be a valid email address.'
2 After successful completion, the orange button is still there. Can you make this invisible. The orange button should only be available IF the user presses the "Send another message" button.
tonloc over 7 years ago
@tonloc Updated
alex over 7 years ago
awesome thanks. If the emailfield is empty, and the messagefield has text, then the form executes. But instead, it should not execute if there is no email address. It should say "This doesn't appear to be a valid email address."
tonloc over 7 years ago
cool thanks
tonloc over 7 years ago
Can you tell me what i'm missing at http://clevergizmos.com/information-product-theme/ I am having trouble sending the email.
tonloc over 7 years ago
@tonloc sorry for the late reply. It seems to be an error with contact.php, can you verify for me that it exists on your server?
alex over 7 years ago
View Timeline