Un formulario sencillo con ajax y php con maquetación html en el envió

Un formulario sencillo con ajax y php con maquetación html en el envió

aquí te dejo un ejemplo de un formulario HTML con un campo adicional y un script PHP para procesar el envío del formulario con envío de correo electrónico usando MIME con HTML maquetado:

formulario.html  

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Formulario con envío por AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function() {
        $('#mi-formulario').submit(function(e) {
          e.preventDefault();
          $.ajax({
            type: 'POST',
            url: 'procesar_formulario.php',
            data: $(this).serialize(),
            success: function(response) {
              $('#mensaje').html(response);
            }
          });
        });
      });
    </script>
  </head>
  <body>
    <form id="mi-formulario" method="POST">
      <label for="nombre">Nombre:</label>
      <input type="text" name="nombre" id="nombre" required>
      <br>
      <label for="email">Email:</label>
      <input type="email" name="email" id="email" required>
      <br>
      <label for="mensaje">Mensaje:</label>
      <textarea name="mensaje" id="mensaje" required></textarea>
      <br>
      <input type="submit" value="Enviar">
    </form>
    <div id="mensaje"></div>
  </body>
</html>

añadimos un campo más por ejemplo telefono

<form id="mi-formulario" method="post">
  <label for="name">Nombre:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email" required>
  <label for="phone">Teléfono:</label>
  <input type="tel" id="phone" name="phone">  
<label for="message">Mensaje:</label> <textarea id="message" name="message" required></textarea> <button type="submit" id="submit-btn">Enviar</button> </form> <div id="response"></div>

procesar_formulario.php

<?php
// Configuración de destinatario y remitente del correo electrónico
$to = "destinatario@example.com";
$from = "remitente@example.com";
$subject = "Nuevo mensaje de formulario";

// Datos del formulario
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$phone = $_POST["phone"];

// Combinación de los datos en un formato de correo electrónico MIME con HTML maquetado
$body = "
  <html>
    <body>
      <h2>Nuevo mensaje de formulario</h2>
      <p><strong>Nombre:</strong> $name</p>
      <p><strong>Correo electrónico:</strong> $email</p>
      <p><strong>Teléfono:</strong> $phone</p>
      <p><strong>Mensaje:</strong></p>
      <p>$message</p>
    </body>
  </html>
";
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= "From: $from" . "\r\n";

// Envío del correo electrónico
$mail_sent = mail($to, $subject, $body, $headers);

// Respuesta para mostrar en la página
if ($mail_sent) {
  $response = "¡Gracias por contactarnos! Le responderemos pronto.";
} else {
  $response = "Error al enviar el mensaje. Por favor, inténtelo de nuevo.";
}

echo $response;
?>

 sencillo verdad!!.