4 Replies Latest reply on Nov 3, 2011 11:18 AM by insuractive

    jquery / cfmail app issues

    cfsetNewbie Level 1

      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.

        • 1. Re: jquery / cfmail app issues
          Owain North Level 4

          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.

          • 2. Re: jquery / cfmail app issues
            cfsetNewbie Level 1

            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?

            • 3. Re: jquery / cfmail app issues
              Owain North Level 4

              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?

              • 4. Re: jquery / cfmail app issues
                insuractive Level 3

                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.