Add form input fields to E-mail with PHP and Jquery

Question

I've used This tutorial to create a contact form on my site. Unfortunately, the amount of fields are not sufficient for me, so I added a company and subject field to the form.

However.. I can't get the mail output working with the additional fields.

Quick roundup:

html:

Each input field in the HTML is based on the following piece of lines:
  <label>Subject</label>
  <input type="text" id="subject" placeholder="What's up?"></div>

jQuery:

The full jQuery code is:
$(document).ready(function() {
    // Contact Form
$("#contactform").submit(function(e){
  e.preventDefault();
  var name = $("#name").val();
  var company = $("#company").val();
  var email = $("#email").val();
  var subject = $("#subject").val();
  var text = $("#text").val();
  var dataString = 'name=' + name + + '&company' + company + '&email=' + email + '&subject' + subject + '&text=' + text;
  function isValidEmail(emailAddress) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
  };

  if (isValidEmail(email) && (text.length > 25) && (name.length > 1)){
    $.ajax({
    type: "POST",
    url: "js/functions.php",
    data: dataString,
    success: function(){
      $('.success').fadeIn(1000);
    }
    });
  } else{
    $('.error').fadeIn(1000);
  }

  return false;
});

});

And the whole functions.php script is:

<?php
// Email Submit
// Note: filter_var() requires PHP >= 5.2.0
if ( isset($_POST['email']) && isset($_POST['name']) && isset($_POST['text']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {

// detect & prevent header injections
$test = "/(content-type|bcc:|cc:|to:)/i";
foreach ( $_POST as $key => $val ) {
if ( preg_match( $test, $val ) ) {
  exit;
}
  }

  //send email
  mail( "myEmail@gmail.com", "New message: ".$_POST['name'], $_POST['text'], "From:" . $_POST['email'] );

}
?>

Ok, so here is where we are: The form does get submitted and I do receive a mail, however the additional fields ($('#subject') and $('#company')) do not appear within the Email.

So there are two things I want to achieve within this thread: 1) The fields 'subject' & 'company' appear within the e-mail 2) The mail I receive has the following lay-out:

Subject line: 'You received a new message: ' + 'subject'

Message body: 'You received a new mail via your contact form<br/>
Name: 'name'
Company: 'company'
Reply to: 'email'
Subject: 'subject'
Message: 'text'

I've tried to adjust line - Because I thought that would solve it all:

//send email
  mail( "myEmail@gmail.com", "New message: ".$_POST['name'], $_POST['text'], "From:" . $_POST['email'] );

But the luck wasn't with me. So based on the above pieces of code, what lines do I need to adjust and what do I need to add?

Thanks very much guys!

Rob Schmuecker · Accepted Answer · 2013-10-28T12:44:05.043

Edit JS file to reflect this: JS:

$(document).ready(function() {
    // Contact Form
$("#contactform").submit(function(e){
  e.preventDefault();
  var name = $("#name").val();
  var company = $("#company").val();
  var email = $("#email").val();
  var subject = $("#subject").val();
  var text = $("#text").val();
  var dataString = 'name=' + name + + '&company=' + company + '&email=' + email + '&subject=' + subject + '&text=' + text;
  function isValidEmail(emailAddress) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
  };

  if (isValidEmail(email) && (text.length > 25) && (name.length > 1)){
    $.ajax({
    type: "POST",
    url: "js/functions.php",
    data: dataString,
    success: function(){
      $('.success').fadeIn(1000);
    }
    });
  } else{
    $('.error').fadeIn(1000);
  }

  return false;
});

});

Edit the PHP file to reflect this:

PHP:

<?php
// Email Submit
// Note: filter_var() requires PHP >= 5.2.0
if ( isset($_POST['email']) && isset($_POST['name']) && isset($_POST['text']) && isset($_POST['company']) && isset($_POST['subject']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {

// detect & prevent header injections
$test = "/(content-type|bcc:|cc:|to:)/i";
foreach ( $_POST as $key => $val ) {
if ( preg_match( $test, $val ) ) {
  exit;
}
  }

$to = "myEmail@gmail.com";
$subject = 'You received a new message: ' . $_POST['subject'];
$message = "You received a new mail via your contact form\n";
$message .= "Name: " . $_POST['name'] . "\n";
$message .= "Company: " . $_POST['company'] . "\n";
$message .= "Reply to: " . $_POST['email'] . "\n";
$message .= "Subject: " . $_POST['subject'] . "\n";
$message .= "Message: " . $_POST['text'] . "\n";
  //send email
  mail( $to, $subject, $message, "From:" . $_POST['email'] );

}
?>

There is/should be a problem in the PHP code. Let me explain why: 1) With my own JS/PHP, I receive mail. 2) With your JS and my PHP, I receive mail. 3) With my JS and your PHP, I don't receive mail. 4) With your JS and your PHP, I don't receive mail. By other words: When I use your PHP, I don't receive any mail. And yes: I do edit the '$to' line. — Sander Schaeffer, Oct 28 '13 at 12:44
@SanderSchaeffer yep I accidentally ommitted a semi colon ";" :( — Rob Schmuecker, Oct 28 '13 at 12:47
Also depending on your enevironment you may want to look at the `\n` in the message output to get your email formatted correctly http://stackoverflow.com/questions/8782119/creating-a-new-line-in-body-of-php-mail-function — Rob Schmuecker, Oct 28 '13 at 12:49
Still errors, however now in both the JS and PHP - I've changed the JS back to a few versions back of yours (to be seen in: http://jsfiddle.net/kn374/) - using that piece of JS, it does send it (receiving is something different) - As said: the form gets sent, but using your piece of PHP, I stil don't receive any mail, even when I change the mymail@gmail.com to my own mail address. However, with your JS and my original PHP, I do receive mail, but without the additional fields and formatting. Any suggestions? :s — Sander Schaeffer, Oct 28 '13 at 12:55
@SanderSchaeffer I'm not sure what the errors could be?! Can you perhaps see if you get PHP errors in your apache logfile at all? — Rob Schmuecker, Oct 28 '13 at 13:03
Could you tell me how to check the logfiles? I can't use terminal commands to enter the server (I think) — Sander Schaeffer, Oct 28 '13 at 13:08
Ok, i'm no PHP expert, neither a debugging expert. so I often try the 'Replace a line by a working line and see what happens'-method and so I kept replacing lines of your PHP code with my original one and I noticed the only way to actually receive mail was by using two lines of my original PHP. Yet, the whole formatting sucks - because those two lines are !important. :) The lines I'm talking about, i've pasted them in this JSfiddle, as they do not fit in this comment -> http://jsfiddle.net/cr6xf/ — Sander Schaeffer, Oct 28 '13 at 13:28
Found the problem - Atleast.. Probably. I've checked and try to implement other answers, which include adding the '=' to the JS dataString line. Then configured your PHP code a bit and now It's completely working. Thanks mate, very much! — Sander Schaeffer, Oct 28 '13 at 13:39

score 2 · Answer 2 · answered Oct 28 '13 at 12:29

Multiple errors, first in your javascript string.

'&subject'

should be

'&subject='

note you're missing the "="

further, you never capture those two new $_POST'd values in the PHP script.

$_POST['subject'];
$_POST['company'];

The 2nd argument of php's mail function is the subject soo...

mail( "myEmail@gmail.com", $_POST['subject'], 'You have a new message from: '.$_POST['name'].' with '.$_POST['company'].'. '. $_POST['text'], "From:" . $_POST['email'] );

Surt · Answer 3 · 2013-10-28T12:45:02.453

Better use serialize() to get the data

 var dataString = $("#contactform").serialize();

and delete this lines:

  var name = $("#name").val();
  var company = $("#company").val();
  var subject = $("#subject").val();
  var text = $("#text").val();
  var dataString = 'name=' + name + + '&company' + company + '&email=' + email + '&subject' + subject + '&text=' + text;

Second, you are sending the email using:

mail( "myEmail@gmail.com", "New message: ".$_POST['name'], $_POST['text'], "From:" . $_POST['email'] );

There is no $_POSTS subject or company sended on to the email. I suppouse that the email you recived shows the "From:...." you can add the rest of the fields that you want there:

 mail( "myEmail@gmail.com", "New message: ".$_POST['name'], $_POST['text'], "From:" . $_POST['email']. " with subject: ".$_POST['subject'].' and company '.$_POST['company'] );

if you look at the mail function in PHP http://www.php.net/manual/es/function.mail.php you can see what fields are what in the interface.

Yep, he must use serialize() to create the dataString. Added to answer to reflect it. — Surt, Oct 28 '13 at 12:34

Add form input fields to E-mail with PHP and Jquery

3 Answers3

Linked

Related