Hi,

 

Finally got my contact form working (well almost). All fields are working except the enquiry and the message which as shown below only pull back undefined. I have checked hundreds of times and the code seems find.

 

 

Message from my contact form:

 

You have received a new message from the enquiries form on your website.

 

Name: Jenny Tenny

 

Email Address: Jennytenny@hotmail.com

 

Telephone: 07762606079

 

Enquiry: undefined

 

Message: undefined

 

This message was sent from the IP Address: 90.196.22.177 on 10/06/2011 at 08:06:07

 

 

Can anyone please help me iv been stuck on the contact form for days and i just want to move on to other areas

 

Heres the code:

 

Contact.php

 

<?php /* Template Name: Contact */ ?>

<?php get_header(); ?>

<div id="content-wrapper">
   <div class="span-13" id="left-content-contact">


       <div id="contact_form">
       	<h2>Send Me A Message</h2>
        <form id="myFrom" action="">
            <fieldset>
                <div class="field">
                    <label for="name">Name</label>
                    <input name="name" id="name" type="text" required="required" autofocus="">
                </div>
                <div class="field">
                    <label for="email">Email</label>
                    <input name="email" id="email" type="email" required="required">
                </div>
                <div class="field">
                    <label for="phone">Phone</label>
                    <input id="phone" name="phone" type="text">
                </div>
                <div class="field">
                    <label for="contact_reason">Contact Reason</label>
                    <select id="contact_reason" required="required" name="contact_reason">
                        <option></option>
                        <option>General Inquiry</option>
                        <option>Job Offer</option>
                        <option>Project</option>
                        <option>Other</option>
                    </select>
                </div>
                <div class="field">
                    <label for="message">Message</label>
                    <textarea id="main_message" required="required" rows="5" cols="15" name="main_message"></textarea>
                </div>
                <div class="field submit">
                    <input class="submit" type="submit" value="Submit">
                </div>
            </fieldset>
        </form>
       </div>
   </div>

   <div class="span-9" id="right-content-contact">

       <div id="detailsContainer">
           <h3>My Details</h3>
           <ul>
               <li class="tel">+44 (0)1734 593840</li>
               <li class="email"><a href="mailto:info@ben-gibson.co.uk">info@ben-gibson.co.uk</a></li>
               <li class="facebook"><a href="http://www.facebook.com/mk3golf">Facebook</a></li>
           </ul>
       </div>

       <div id="mapContainer">
           <img src="http://maps.google.com/maps/api/staticmap?center=50.798914,-1.091163&zoom=12&size=300x148&
		markers=color:blue%7CPortsmouth+Hampshire&sensor=false" />
       </div>
   </div><!--Closing right sidebar-->
   <div class="clear"></div>
</div><!--Closing container-->



<?php get_footer(); ?>

 

The java script

 

$(function() {
 $("#contact_form").submit(function() {
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var reason = $("input#contact_reason").val();
var message = $("input#main_message").val();

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&reason=' + reason + '&message=' + message;

	$.ajax({
     type: "POST",
     url: "/wp-content/themes/Portfolio/js/email.php",
     data: dataString,
     success: function() {
       $('#contact_form').html("<div id='message'></div>");
       $('#message').html("<h2 class='no-margin-title'>Contact Form Submitted!</h2>");
       $('#message').append("<img id='contact-tick' src='/wp-content/themes/Portfolio/images/tick.gif'/>")   
       .append("<h3>I will be in touch <span class='blog-sub-span'>soon</span></h3>")
       .hide()
       .fadeIn(1500, function() {
                 });
     }
    });
   return false;
});
});

 

The email process page

 

<?php

if( isset($_POST) ){  

$ipaddress = $_SERVER['REMOTE_ADDR'];  
$date = date('d/m/Y');  
$time = date('H:i:s');  

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$phone = $_POST['phone'];
$reason = $_POST['reason'];

  //send email if all is ok  
      $headers = "From: info@ben-gibson.co.uk" . "\r\n";  
      $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";  

      $emailbody = "<p>You have received a new message from the enquiries form on your website.</p> 
                    <p><strong>Name: </strong> {$name} </p> 
                    <p><strong>Email Address: </strong> {$email} </p> 
                    <p><strong>Telephone: </strong> {$phone} </p> 
                    <p><strong>Enquiry: </strong> {$reason} </p> 
                    <p><strong>Message: </strong> {$message} </p> 
                    <p>This message was sent from the IP Address: {$ipaddress} on {$date} at {$time}</p>";  

      mail("ben.gibson.2011@gmail.com","New Enquiry",$emailbody,$headers);  

		}
		else{
			mail("ben.gibson.2011@gmail.com","New Enquiry", "A message was sent but it encontered an error!");
		}

?>

 

Thanks for any help

Edited June 10, 201115 yr by benhawk

Change this line:

var message = $("input#main_message").val();

 

To:

var message = $("textarea#main_message").val();

Well, your input for message is "main_message" and you're posting "message", so change "$_POST['message']" to "$_POST['main_message']" also you don't have a "reason" field... you have a contact_reason though, I'm guessing this is meant to be there, if so, change "$_POST['reason']" to "$_POST['contact_reason']"

 

hope this helps!

 

        $name = $_POST['name'];
       $email = $_POST['email'];
       $message = $_POST['main_message'];
       $phone = $_POST['phone'];
       $reason = $_POST['contact_reason'];

^^ Just what I was going to say.

 

Also the action here:-

<form id="myFrom" action="">

should be to teh PHP process page.

 

I'm not going to comment on the javascript because I'm bad at that, but perhaps it's OK.

^^ Just what I was going to say.

 

Also the action here:-

<form id="myFrom" action="">

should be to teh PHP process page.

 

I'm not going to comment on the javascript because I'm bad at that, but perhaps it's OK.

 

The javascript is what they're using to post the form values. It's all done through the magic of jQuery and Ajax.