Copy link to clipboard
Copied
Hello;
I am trying to create a small contact form made from jquery, and using a cfmail page when the form is properly populated. Right now, this form will work with a php email form, called mail.php. I'm trying to now make this work with a mail.cfm form and as of right now, it's not sending it.
I can't do a dump, it is written in java and ajax so it just executes that code and isn't sending the message. I think I am missing some operators here... can anyone help me?
This is the code:
jquery page:
(function($){
//define the new for the plugin ans how to call it
$.fn.contactable = function(options) {
//set default options
var defaults = {
name: 'Name',
email: 'Email',
message : 'Message',
subject : 'A contactable message',
recievedMsg : 'Thankyou for your message',
notRecievedMsg : 'Sorry but your message could not be sent, try again later',
disclaimer: '',
hideOnSubmit: true
};
//call in the default otions
var options = $.extend(defaults, options);
//act upon the element that is passed into the design
return this.each(function(options) {
//construct the form
$(this).html('<div id="contactable"></div><form id="contactForm" method="" action=""><div id="loading"></div><div id="callback"></div><div class="holder"><p><label for="name">Name <span class="red"> * </span></label><br /><input id="name" class="contact" name="name" /></p><p><label for="email">E-Mail <span class="red"> * </span></label><br /><input id="email" class="contact" name="email" /></p><p><label for="comment">Your Feedback <span class="red"> * </span></label><br /><textarea id="comment" name="comment" class="comment" rows="4" cols="30" ></textarea></p><p><input class="submit" type="submit" value="Send"/></p><p class="disclaimer">'+defaults.disclaimer+'</p></div></form>');
//show / hide function
$('div#contactable').toggle(function() {
$('#overlay').css({display: 'block'});
$(this).animate({"marginLeft": "-=5px"}, "fast");
$('#contactForm').animate({"marginLeft": "-=0px"}, "fast");
$(this).animate({"marginLeft": "+=387px"}, "slow");
$('#contactForm').animate({"marginLeft": "+=390px"}, "slow");
},
function() {
$('#contactForm').animate({"marginLeft": "-=390px"}, "slow");
$(this).animate({"marginLeft": "-=387px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
$('#overlay').css({display: 'none'});
});
//validate the form
$("#contactForm").validate({
//set the rules for the fild names
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
comment: {
required: true
}
},
//set messages to appear inline
messages: {
name: "",
email: "",
comment: ""
},
submitHandler: function() {
$('.holder').hide();
$('#loading').show();
$.post('mail.cfm',{subject:defaults.subject, name:$('#name').val(), email:$('#email').val(), comment:$('#comment').val()},
function(data){
$('#loading').css({display:'none'});
if( data == 'success') {
$('#callback').show().append(defaults.recievedMsg);
if(defaults.hideOnSubmit == true) {
//hide the tab after successful submition if requested
$('#contactForm').animate({dummy:1}, 2000).animate({"marginLeft": "-=450px"}, "slow");
$('div#contactable').animate({dummy:1}, 2000).animate({"marginLeft": "-=447px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
$('#overlay').css({display: 'none'});
}
} else {
$('#callback').show().append(defaults.notRecievedMsg);
}
});
}
});
});
};
})(jQuery);
mail.cfm:
<cfparam name="FORM.name" default="">
<cfparam name="FORM.emailAddr" default="">
<cfparam name="FORM.comment" default="">
<cfmail to="me@mysite.com"
from="#form.emailAddr#"
subject="Feedback"
type="html"
server="mail.mysite.com"
port="25">
<cfmailparam name="X-Priority" value="1"/>
<font face="Verdana, Arial, Helvetica, sans-serif" color="##000000" size="2">
<b>Feedback Form!!</b><br>
<br>
<b>Customer Name:</b> #form.name#<br>
<b>Customer Email:</b> #form.emailAddr#<br>
<br />
<b>Feedback:</b><br>
<p> #form.comment#</p></font>
</cfmail>
Thank you. I hope someone can help me.
Copy link to clipboard
Copied
That is an enormous amount of code for someone to go through, I think you need to cut it down somewhat to establish what's wrong. Cut out all the HTML and such, and just work on getting a basic form working. No validation, no animation, none of that stuff, just a basic form. Trying to find the issue in that lot is a bit of a needle + haystack scenario, only thing you could do is install something like Live HTTP Headers for Firefox so you can see if it's even making an HTTP request.
Copy link to clipboard
Copied
I thought that as well.. maybe you can tell me one thing, is my cfmail tag grabbing the proper variables from the jquery form? or should it be var.name and so on for each space?
Copy link to clipboard
Copied
I have no idea whatsoever, I don't really know jQuery all that well. Take a look at live http headers for Firefox so you can see for sure the names of the form variables being sent. Have you checked the CF exception.log which should show any errors that occur on the mail.cfm page behind the scenes?
Copy link to clipboard
Copied
In general, when developing in a multi-protocol environment like this (JS + CF) its usually a good idea to test your pieces out individually before you try and put them together. Have you tried posting a test HTML form to your mail CFM page to make sure it is behaving correctly? If so, have you tried posting your ajax call to a page that echoes back the variables in your request scopes to make sure your data is being passed in the correct format?
I should also mention, you may want to add some source verification for your mail script to make it a little harder for someone to flood your inbox with bogus mail calls. Probably not a big deal if you are just using it as a feedback form, but if you plan on reusing this code in other areas it might be a good idea. Owain's suggestion of looking at the CF logs will give you an indication of if your system is generating an error (exception.log) or whether your mail went out (mailsent.log) and was blocked by a spam filter somewhere along the way.