Problemas con un formulario de contacto en Javascript y PHP

alvarols · #1 (**permalink**) 18/09/2012, 11:28

Estoy tratando de implementar un formulario en mi página, es este:

http://www.elated.com/res/File/artic...rm-jquery-php/

El problema es que cuando mando un mensaje, el formulario se queda colgado con el mensaje "enviando correo" y no dice que el correo ya se ha enviado. Aunque los correos si llegan. En la página que les mostré si se hace todo el proceso completo, pero en la mía se queda a medias con ese mensaje.

No sé que pueda ser dado que implementé el mismo código. Mi sitio web está desarrollado en Wordpress.

Este es el HTML del correo que tengo en mi página

Código HTML:

Ver original<form id="contactForm" action="http://www.alvarols.com/wp-content/themes/alvarols2/processForm.php" method="post">
 
  <h2>Contáctate con nosotros...</h2>
 
  <ul>
 
    <li>
      <label for="senderName"><p>Nombre</p></label>
      <input type="text" name="senderName" id="senderName" placeholder="Escribe tu nombre" required="required" maxlength="40" />
    </li>
 
    <li>
      <label for="senderEmail"><p>E-mail</p></label>
      <input type="email" name="senderEmail" id="senderEmail" placeholder="Escribe tu correo electrónico" required="required" maxlength="50" />
    </li>
 
    <li>
      <label for="message" style="padding-top: .5em;"><p>Mensaje</p></label>
      <textarea name="message" id="message" placeholder="Escribe tu mensaje" required="required" cols="80" rows="10" maxlength="10000"></textarea>
    </li>
 
  </ul>
 
  <div id="formButtons">
    <input type="submit" id="sendMessage" name="sendMessage" value="Enviar correo" />
    <input type="button" id="cancel" name="cancel" value="Cancelar" />
  </div>
 
</form>

Este es el PHP

Código PHP:

Ver original<?php
 
// Define some constants
define( "RECIPIENT_NAME", "www.alvarols.com" );
define( "RECIPIENT_EMAIL", "[email protected]" );
define( "EMAIL_SUBJECT", "Mensaje de un cliente" );
 
// Read the form values
$success = false;
$senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";
$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";
 
// If all values exist, send the email
if ( $senderName && $senderEmail && $message ) {
  $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
  $headers = "From: " . $senderName . " <" . $senderEmail . ">";
  $success = mail( $recipient, EMAIL_SUBJECT, $message, $headers );
}
 
// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {
  echo $success ? "success" : "error";
} else {
?>
<html>
  <head>
    <title>Gracias!</title>
  </head>
  <body>
  <?php if ( $success ) echo "<p>Gracias por mandarnos tu mensaje, te responderemos a la brevedad.</p>" ?>
  <?php if ( !$success ) echo "<p>Hubo un problema al mandar el mensaje, vuelve a intentar.</p>" ?>
  <p>Click your browser's Back button to return to the page.</p>
  </body>
</html>
<?php
}
?>

Y el Ajax es este:

Código Javascript:

Ver originalvar messageDelay = 2000;  // How long to display status messages (in milliseconds)
 
// Init the form once the document is ready
$( init );
 
 
// Initialize the form
 
function init() {
 
  // Hide the form initially.
  // Make submitForm() the form's submit handler.
  // Position the form so it sits in the centre of the browser window.
  $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );
 
  // When the "Send us an email" link is clicked:
  // 1. Fade the content out
  // 2. Display the form
  // 3. Move focus to the first field
  // 4. Prevent the link being followed
 
  $('a[href="#contactForm"]').click( function() {
    $('#content').fadeTo( 'slow', .2 );
    $('#contactForm').fadeIn( 'slow', function() {
      $('#senderName').focus();
    } )
 
    return false;
  } );
  
  // When the "Cancel" button is clicked, close the form
  $('#cancel').click( function() { 
    $('#contactForm').fadeOut();
    $('#content').fadeTo( 'slow', 1 );
  } );  
 
  // When the "Escape" key is pressed, close the form
  $('#contactForm').keydown( function( event ) {
    if ( event.which == 27 ) {
      $('#contactForm').fadeOut();
      $('#content').fadeTo( 'slow', 1 );
    }
  } );
 
}
 
 
// Submit the form via Ajax
 
function submitForm() {
  var contactForm = $(this);
 
  // Are all the fields filled in?
 
  if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {
 
    // No; display a warning message and return to the form
    $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
    contactForm.fadeOut().delay(messageDelay).fadeIn();
 
  } else {
 
    // Yes; submit the form to the PHP script via Ajax
 
    $('#sendingMessage').fadeIn();
    contactForm.fadeOut();
 
    $.ajax( {
      url: contactForm.attr( 'action' ) + "?ajax=true",
      type: contactForm.attr( 'method' ),
      data: contactForm.serialize(),
      success: submitFinished
    } );
  }
 
  // Prevent the default form submission occurring
  return false;
}
 
 
// Handle the Ajax response
 
function submitFinished( response ) {
  response = $.trim( response );
  $('#sendingMessage').fadeOut();
 
  if ( response == "success" ) {
 
    // Form submitted successfully:
    // 1. Display the success message
    // 2. Clear the form fields
    // 3. Fade the content back in
 
    $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
    $('#senderName').val( "" );
    $('#senderEmail').val( "" );
    $('#message').val( "" );
 
    $('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );
 
  } else {
 
    // Form submission failed: Display the failure message,
    // then redisplay the form
    $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
    $('#contactForm').delay(messageDelay+500).fadeIn();
  }
}// JavaScript Document