Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: Simple and powerful ajax E mail form  (Read 3029 times)

Sasha

  • Hero Member
  • *****
  • Karma: 28
  • Posts: 938
    • cssanarchy.com
Simple and powerful ajax E mail form
« on: January 13, 2010, 08:28:57 am »

Did anyone need simple and yet powerful email form? Well, what are you waiting for go head and download free E mail form from:

 http://www.solucija.com/free-and-simple-ajax-contact-form    ;D
Logged
Every morning, I get up and look through the 'Forbes' list of the richest people in America. If I'm not there, I go to work. | If you love your job, you haven't worked a day in your life. snews with ♥

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Simple and powerful ajax E mail form
« Reply #1 on: January 13, 2010, 09:54:11 am »

A kick ass one! Great.

centered

  • Guest
Re: Simple and powerful ajax E mail form
« Reply #2 on: January 14, 2010, 02:28:54 am »

Haven't downloaded yet, but I checked the source...

Just a quick note: Why are you still using in-line JavaScript Luka? Your using jquery's id selectors, what's up?

*downloading*... upon first look....

Bug 1. If you not going to include jquery, then you shouldn't have linked it in the HTML instead of linking an unknown file
Bug 2. You are missing a 5th file - main.css, the error gets wrapped around the previous fields without it
Bug 3. The file name is called contact.html and will return an error after clicking the go back button after the email has been sent (link shows index.html)

If you don't like inline Javascript:

Contact.html
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajax Contact Form</title>
<meta name="Robots" content="index,follow" />
<meta name="author" content="Borut Jegrišnik (www.medianova.hr)" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/contactform.css" media="screen" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" src="js/contactform.js"></script>
</head>
<body>
<h1>Contact us</h1>
<p>Use the form below to get in touch with us.</p>

<!-- this is what you need for your contact form -->
<div id="contact_form">
<form method="post" action="sendContact.php">
<p>
<label for="name">Full name:</label>
<input type="text" class="text hiLite" name="name" id="name" />
</p>

<p>
<label for="email">Email address:</label>
<input type="text" class="text hiLite" name="email" id="email" />
</p>

<div class="x"></div>
<p class="error" id="email-error">You must enter your email address.</p>

<p>
<label for="category">Category:</label>
<select name="category" id="category" class="hiLite">
<option value="software">Software</option>
<option value="hardwae">Hardware</option>
<option value="consulting">Consulting</option>
<option value="resources">Resources</option>
</select>
</p>

<p>
<label for="message">Message:</label>
<textarea name="message" id="message" class="hiLite"></textarea>
</p>

<div class="x"></div>
<p class="error" id="message-error">You must enter your message.</p>

<p>
<label for="captcha" id="lcaptcha"></label>
<input type="text" class="text hiLite" name="captcha" id="captcha" />
</p>

<div class="x"></div>
<p class="error" id="captcha-error">Are you sure about your calculations?</p>

<div class="x"></div>

<input type="submit" class="submit" name="send_contact" value="Send" />
</form>
</div>

<div id="message_sent" style="display:none;">
<h1>Your message has been sent</h1>
<p>We'll contact you as soon as possible.</p>
<p>You can now <a href="contact.html" class="read-more">go back</a> to home page.</p>
</div>

</body>
</html>

contactform.js
Code: [Select]
var captcha_a = Math.ceil(Math.random() * 10);
var captcha_b = Math.ceil(Math.random() * 10);      
var captcha_c = captcha_a + captcha_b;

function generate_captcha() {
$("#lcaptcha").html(captcha_a + " + " + captcha_b + " = ");
}

function sendContact()
{
// check for email
var email = $("#email").val();
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if(!filter.test(email))
{
$("#email-error").slideDown(500);
$("#email").focus();
return false;
}
else
$("#email-error").slideUp(500);

// check for message
var msg = $("#message").val();
if(msg.length == 0)
{
$("#message-error").slideDown(500);
$("#message").focus();
return false;
}
else
$("#message-error").slideUp(500);

// check for captcha
var captcha = $("#captcha").val();
if(captcha != captcha_c)
{
$("#captcha-error").slideDown(500);
$("#captcha").focus();
return false;
}
else
$("#captcha-error").slideUp(500);

var data = $("#contact_form > form").serialize();

$.ajax({
type: "POST",
url: "sendContact.php",
data: data,
cache: false,
success: function(msg){
}
});

$("#contact_form").fadeOut(1000, function() {
$("#message_sent").slideDown(500);
});

return false;
}

$(document).ready(function() {

// Input Focus
$('.hiLite').focus(function() {
$(this).prev().addClass('lcurrent');
});

// Input Blur
$('.hiLite').blur(function() {
$(this).prev().removeClass('lcurrent');
});

// Captcha
generate_captcha();

// Send the email
$("form").submit(function() {
sendContact();
return false;
});

});
Logged

Joost

  • Guest
Re: Simple and powerful ajax E mail form
« Reply #3 on: January 15, 2010, 08:28:19 am »

@Jason,

1) You need to remove newlines from all data that goes into the header in order to prevent email header injection.
That means sanitizing $_POST['contact_sender_name'] as well.

2) If you find captcha important, then it should be checked serverside. Using javascript for that (client side), is like asking the inmate to lock the door himself.

3) You're better off writing the script from scratch.  ;D

For anyone else reading this: Don't use Luka's script it is unsafe.

Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Simple and powerful ajax E mail form
« Reply #4 on: January 15, 2010, 08:36:44 am »

For anyone else reading this: Don't use Luka's script it is unsafe.
Oh shit! I was planning to. :-\

Sasha

  • Hero Member
  • *****
  • Karma: 28
  • Posts: 938
    • cssanarchy.com
Re: Simple and powerful ajax E mail form
« Reply #5 on: January 15, 2010, 08:57:22 am »

i use php on my site works good :) i m going to release that too soon :)
Logged
Every morning, I get up and look through the 'Forbes' list of the richest people in America. If I'm not there, I go to work. | If you love your job, you haven't worked a day in your life. snews with ♥

centered

  • Guest
Re: Simple and powerful ajax E mail form
« Reply #6 on: January 15, 2010, 11:12:15 am »

@Jason,

1) You need to remove newlines from all data that goes into the header in order to prevent email header injection.
That means sanitizing $_POST['contact_sender_name'] as well.

2) If you find captcha important, then it should be checked serverside. Using javascript for that (client side), is like asking the inmate to lock the door himself.

3) You're better off writing the script from scratch.  ;D

For anyone else reading this: Don't use Luka's script it is unsafe.



1. Ok, so I need to check further there instead of strip_tags. Thanks!
2. Ha, your right.  Was in the original script, I didn't want to deviate from that, since the owner created the script....
3. Or use your script! Either way, yes your right as well.  I am pretty sure someone would be using this and wanted to "correct" some things

-- EDIT --

Joost, would this work better for those who want to use this script? The captcha is now in PHP and is requested via ajax (I know, for the purpose of this script...) and is checked in php.  The error message is now placed above the form.
Bad code
« Last Edit: January 16, 2010, 10:43:41 pm by equilni »
Logged

Sasha

  • Hero Member
  • *****
  • Karma: 28
  • Posts: 938
    • cssanarchy.com
Re: Simple and powerful ajax E mail form
« Reply #7 on: January 16, 2010, 07:53:48 am »

i always sys snews must have independent email form so user can use email form on any page he wish
Logged
Every morning, I get up and look through the 'Forbes' list of the richest people in America. If I'm not there, I go to work. | If you love your job, you haven't worked a day in your life. snews with ♥

Joost

  • Guest
Re: Simple and powerful ajax E mail form
« Reply #8 on: January 16, 2010, 08:42:58 am »

i always sys snews must have independent email form so user can use email form on any page he wish
It;s been there for quite some time
Logged

Sasha

  • Hero Member
  • *****
  • Karma: 28
  • Posts: 938
    • cssanarchy.com
Re: Simple and powerful ajax E mail form
« Reply #9 on: January 16, 2010, 07:30:43 pm »

thx Joost.... i m lazy some time to look around  ;D
Logged
Every morning, I get up and look through the 'Forbes' list of the richest people in America. If I'm not there, I go to work. | If you love your job, you haven't worked a day in your life. snews with ♥

Joost

  • Guest
Re: Simple and powerful ajax E mail form
« Reply #10 on: January 16, 2010, 08:29:42 pm »

@Jason,

I looked through the script (did not test it):
- Unless I am wrong, the submitter's email address doesn't make it to function mail.
- Browsers (ie, ff, Opera) sending data inserted in Input type="test", do not generate newlines. So any contact_sender_name data containing newlines can be considered a hacking attempt. So I suggest to kill the app when newlines are found, instead of removing them.
- Although function filter does remove newlines (so it is safe to use in this context), it modifies rfc (3696) compliant email addresses in some cases (it removes spaces and quotemarks).
« Last Edit: January 16, 2010, 08:31:28 pm by Joost »
Logged

centered

  • Guest
Re: Simple and powerful ajax E mail form
« Reply #11 on: January 16, 2010, 10:46:05 pm »

Thanks joost.  I took the code down because I found an error in it myself. 

Either way, I don't think the fixes or the responses will be put on the page.  Thanks for looking though.  I will study your script further
Logged