title: colorbox submit / send mail form and confirm in same colorbox (ajax?)
body: <p>I've been searching all around here, but haven't found the way to do this :( And I'm not capable of adapting the existing answers available for this problem.</p>
  
  <p>What I'm doing right now is:
  1) When a user clicks on a button, colorbox gets triggered and opens the href attribute, in this case "contact-form.html"</p>
  
  <pre><code>&lt;a href="contact-form.html" class="contacto"&gt;&lt;span class="button green"&gt;19.999 € (kit)&lt;/span&gt;&lt;/a&gt;
  
  $('a.contacto').colorbox({
  href:function(){ return $(this).attr('href'); }, 
  width:function(){ 
      if (window.innerWidth &gt; 750) {return '60%';} 
      else if (window.innerWidth &gt; 481) {return '75%';} 
      else {return '90%';}},
  onComplete:function(){
      var ruta = document.location.protocol + "//" + document.location.host + document.location.pathname;
      $('input[name=web]').val(ruta);
  }
  });
  </code></pre>
  
  <p>2) The form gets displayed in the colorbox</p>
  
  <pre><code>&lt;div id="contactForm"&gt;
      &lt;h4&gt;Póngase en contacto con nosotros&lt;/h4&gt;
      &lt;form name="formulario" id="formulario" method="post" action="contact-form.php"&gt;
          &lt;inputs&gt;........
          &lt;input type="reset" name="reset" id="resetbtn" class="resetbtn button" value="Limpiar datos"&gt;
          &lt;input type="submit" name="submit" id="submitbtn" class="submitbtn button green macro" tabindex="7" value="Enviar consulta!"&gt;
          &lt;br&gt;
      &lt;/form&gt; 
  &lt;/div&gt;&lt;!--Fin del contactForm--&gt;
  </code></pre>
  
  <p>3) Once the user completes the form and hits submit, the contact-form.php is triggered (some validation, and the mail sending itself. At the end I inserted a header("Location: " + original-pathname-from-where-the-form-was-sent)</p>
  
  <pre><code>&lt;?php
  $errors = ''; /*Para comprobar si ha habido errores*/
  
  /*Retrieve variables from $_POST.......*/
  
  if (empty($emailField)) { 
      $errors .= "\n Error: Se requiere un correo electrónico"; 
  }
  if (!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", $emailField)) {
      $errors .= "\n Error: Correo electrónico inválido";
  }
  
  $header = /*Prepare the MAIL HEADERS TO BE SENT*/
  
  $mensaje = /*Prepare the MESSAGE........*/
  
  if (empty($errors)) /*Some validation*/
  {
      if (mail($mi_email, $asuntoEmail, utf8_decode($mensaje), $header)) {
          header("Location: $pageRefresh");
      }
      else {
          echo '&lt;script type="text/javascript"&gt;';
          echo 'alert("Ha habido algun error en el envio. Por favor, vuelva a intentarlo")';
          echo '&lt;/script&gt;';
      }
  }
  else
  {
      echo '&lt;script type="text/javascript"&gt;';
      echo 'alert("Ha habido algun error en el envio:'.$errors.'")';
      echo '&lt;/script&gt;';
      echo '&lt;p&gt;Ha habido algun error:' .$errors. '&lt;/p&gt;';
  }
  ?&gt;
  </code></pre>
  
  <p>EVERYTHING UP UNTIL THIS POINT is done correctly. The mail is sent to my account, with all the variables filled correctly, and the user is relocated to the original page where the form (colorbox) was opened.</p>
  
  <p>What I can't manage to do is:</p>
  
  <p>I would like the form to be submitted via AJAX, not to have to redirect the user to the same page... OR... if that isn't possible, be able at least, to give the user an alert message that the message/mail was sent successfully or not.</p>
  
  <p>Help very much appreciated! Sorry again if this is a repeated question, but I just can't adapt/solve this on my own :(</p>