Haciendo la lógica de recepción del formulario

Clase 21 de 24 • Curso de PHP: Integración con HTML

Joel Dominguez Merino

student•

No me funciono el Unpacking array pero pase los argumentos manualmente y ya esta funcionando correctamente :) Les comparto mi código realizado. . Recepción PHP

<?php
  // Creando la lógica en el mismo archivo, aunque perfectamente puede estar en otro archivo separado

  // Status: Permite guardar un estado para más adelante mostrar una alerta si el correo es enviado o no
  $status = "";

  // Comprobamos si el formulario no se envío vacío
  function validateForm($name, $email, $subject, $message){    
    return !empty(trim($name)) && !empty(trim($email)) && !empty(trim($subject)) && !empty(trim($message));
  }

  // Comprobamos si el formulario fue enviado
  if(isset($_POST['form'])){
    // Invocamos función para validar y con el unpacking array le pasamos los parametros solicitados a la función
    if(validateForm($_POST['name'], $_POST['email'], $_POST['subject'], $_POST['message'])){

      // Sanitizando los datos
      $name = htmlentities($_POST['name']);
      $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
      $subject = htmlentities($_POST['subject']);
      $message = htmlentities($_POST['message']);
  
      $status = "success";
    }else{
      $status = "error";
    }
  }
?>

Index

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./assets/img/contacto.png" type="image/x-icon">
  <link rel="stylesheet" href="./css/styles.css">
  <title>iJCode - Formulario de Contacto</title>
</head>
<body>

  <!-- Mensaje de error -->
  <?php if($status === 'error'):?>

    <div class="message">
      <div class="container">
        <div class="message-error">
          <p class="message-paragraph">Surgió un problema</p>
        </div>
      </div>
    </div>

  <?php endif;?>

  <!-- Mensaje de éxito -->
  <?php if($status === 'success'): ?>

  <div class="message">
    <div class="container">
      <div class="message-success">
        <p class="message-paragraph">¡Mensaje enviado con éxito!</p>
      </div>
    </div>
  </div>

  <?php endif; ?>

  <!-- Creación de la estructura del Formulario -->
  <div class="form-container">
    <div class="container">
      <form action="./index.php" class="form" method="post">
        <div class="form-header">
          <h2 class="form-title">¡Contactanos ✨!</h3>
        </div>
        <div class="form-body">
          <label class="form-label" for="name">Nombre: </label>
          <input class="form-input" type="text" required name="name" id="name" placeholder="Julieta Ortiz Sanchez">

          <label class="form-label" for="email">Correo: </label>
          <input class="form-input" type="text" required name="email" id="email" placeholder="julieta.den@dev.mx">

          <label class="form-label" for="subject">Asunto: </label>
          <input class="form-input" type="text" required name="subject" id="subject" placeholder="Solicitud de documentación final">

          <label class="form-label" for="message">Mensaje: </label>
          <textarea class="form-area" name="message" id="message" placeholder="Me urge obtener la documentación del proyecto de la papelería debido a que ya estoy en fecha límite para entregarlos al área correspondiente"></textarea>

          <button class="form-cta" name="form">Enviar</button>
        </div>
      </form>
      <div class="form-footer">
        <p class="form-paragraph"><i class="fa-solid fa-location-dot"></i> 13 Saw Mill Circle, North Olmested.</p>
        <p class="form-paragraph"><i class="fa-solid fa-phone"></i> +1 123 456 7890</p>
      </div>
    </div>
  </div>

  <script src="https://kit.fontawesome.com/36b3528883.js" crossorigin="anonymous"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
:root{
  --mainColor: #1B2430;
  --white: #F9F2ED;
  --mainFont: 'Lato', sans-serif;
  --cardBackground: #816797;
  --cta: #371B58;
  --red: #F87474;
  --green: #9EB23B;
}

body{
  margin: 0;
  block-size: 100%;
  min-block-size: 100vh;
  font-family: var(--mainFont);
  background-color: var(--mainColor);
  padding: 2rem 0;
}

.form-container{
  color: #F9F2ED;
  border-block-start: .1px solid transparent;
}

.form{
  box-shadow: rgba(255, 255, 255, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.container{
  inline-size: 90%;
  max-inline-size: 43.75rem;
  margin: 0 auto;
  border-radius: .5rem;
  box-sizing: border-box;
  overflow: hidden;
}

.form{
  background-color: var(--cardBackground);
  padding: 2rem 1.5rem;
  position: relative;
}

.form::before{
  content: '';
  position: absolute;
  background-color: var(--white);
  block-size: 1rem;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: 0;
}

.form-header{
  margin-block-end: 2rem;
}

.form-title{
  margin: 0;
  text-align: center;
  font-size: 2.2rem;
}

.form-body{
  display: flex;
  flex-direction: column;
}

.form-label{
  font-weight: 700;
  margin-block-end: .25rem;
}

.form-input,
.form-area{
  font-family: var(--mainFont);
  margin-block-end: 2rem;
  padding: .625rem;
  border-radius: .25rem;
  border: none;
  outline: none;
  font-size: 1rem;
}

.form-area{
  inline-size: auto;
  block-size: 6rem;
  resize: none;
}

.form-cta{
  background-color: var(--cta);
  border: none;
  color: var(--white);
  padding: 1rem 0;
  border-radius: .25rem;
  font-weight: 700;
  transition: transform .2s;
  border: none;
  text-transform: uppercase;
}

.form-cta:active{
  transform: scale(.9);
}

.form-cta:hover{
  --cta: #371b58a3;
}

.form-footer{
  border-block-start: 0.1px solid transparent;
  background-color: var(--white);
  color: var(--mainColor);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

.form-paragraph{
  margin: 0;
  font-weight: 700;
}

.fa-solid{
  color: var(--cardBackground);
}

.message-error,
.message-success{
  padding: 2rem;
  color: var(--white);
  font-size: 1.2rem;
  text-align: center;
  margin: 1rem 0; 
  border-radius: .25rem;
}

.message-error{
  background-color: var(--red);
}

.message-success{
  background-color: var(--green);
}

.message-paragraph{
  margin: 0;
}

@media screen and (min-width: 768px){
  .form-title{
    font-size: 3rem;
  }

  .form-cta{
    font-size: 1rem;
  }

  .form-footer{
    flex-direction: row;
    justify-content: space-between;
  }

  .form-paragraph{
    font-size: 1.2rem;
  }
}

Resultado

David Arias González

student•

Tenía el mismo problema, muchas gracias

Mercy María Ix Ballote

student•

me paso lo mismo, según investigue es por la versión de PHP pero no había encontrado como resolverlo, gracias

Giancarlo Culcay

student•

También es de importancia evitar los ataques XSS. Básicamente un usuario podria llenar en cualquier campo del formulario un script malicioso de JavaScript y obtener acceso o información de la página web.

Hay varias formas de evitar esta vulnerabilidad, en el ejemplo de la clase he usuado htmlspecialchars() y strip_tags() para evitar las etiquetas <>

<?php
function validate($name, $email, $subject, $message, $form) {
    return !empty(trim($name)) && !empty(trim($email)) && !empty(trim($subject)) && !empty(trim($message));
}

$status = "";

if ( isset($_POST["form"]) ) {

    if ( validate(...$_POST) ) {
        
        $name = strip_tags($_POST["name"]);
        $email = strip_tags($_POST["email"]);
        $subject = strip_tags($_POST["subject"]);
        $message = strip_tags($_POST["message"]);

        // Mandar el correo

        $status = "success";

    }
    else {
        $status = "danger";
    }
   
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Formulario de contacto</title>
</head>
<body>

    <?php if($status == "danger"): ?>
    
    <div class="alert danger">
        <span>Surgió un problema</span>
    </div>
    
    <?php endif; ?>
    

    <?php if($status == "success"): ?>
    
    <div class="alert success">
        <span>¡Mensaje enviado con éxito!</span>
    </div>
    
    <?php endif; ?>

    <!-- <form action="./" method="POST"> -->
    <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST">
        <h2>¡Contáctanos!</h2>

        <div class="input-group">
            <label for="name">Nombre:</label>
            <input type="text" name="name" id="name">
        </div>

        <div class="input-group">
            <label for="email">Correo:</label>
            <input type="email" name="email" id="email">
        </div>

        <div class="input-group">
            <label for="subject">Asunto:</label>
            <input type="text" name="subject" id="subject">
        </div>

        <div class="input-group">
            <label for="message">Mensaje:</label>
            <textarea name="message" id="message"></textarea>
        </div>

        <div class="button-container">
            <button name="form" type="submit">Enviar</button>
        </div>

        <div class="contact-info">
            
            <div class="info">
                <span><i class="fas fa-map-marker-alt"></i> 13 Saw Mill Circle, North Olmested.</span>
            </div>

            <div class="info">
                <span><i class="fas fa-phone"></i> +1 123 456 7890</span>
            </div>

        </div>

    </form>

    <script src="https://kit.fontawesome.com/bbff992efd.js" crossorigin="anonymous"></script>
    
</body>
</html>

Henry

student•

Tambien el action lo podriamoa hacer de esta forma, para enviar los datos a la misma pagina.

action="<?php echo $_SERVER[‘PHP_SELF’];

De esta forma obtenemos la ruta exacta de la pagina.

Nelson Gonzalez Escalante

student•

Para enviar contenido a la misma página, podemos implementar lo visto en clase y aplicar las funciones para filtrar los datos recogidos:

action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]) ?>";

De esta forma, limpiamos el formulario de los caracteres extraños que algun usuario quiera inyectar en nuestra página.

Will Carlo

student•

Para los que tengan el error de:

The requested resource .... was not found on this server.

Sólo tienen que agregar el nombre del archivo en el form action=""".

<form action="./index.php" method="POST">

Cristobal Nyram

student•

Uncaught Error: Cannot unpack array with string keys in C:\xamp\htdocs\phpMaster\

por que me surge este error?

Joel Dominguez Merino

student•

Tengo el mismo error... Es cuando invocamos la función y con el operador de unpacking array le pasamos la variable global $_POST

if(validateForm(...$_POST)){
}

Aún no lo soluciono, creo voy a pasar manualmente todas las variables :(

Joel Dominguez Merino

student•

En efecto, pasando manualmente cada variable se soluciona el error

    if(validateForm($_POST['name'], $_POST['email'], $_POST['subject'], $_POST['message'])){
}

Alejandra Ojeda

student•

me sale error 500, primero con mi codigo que fui copiando y despues descargando el codigo original. Por lo que pude buscar hay algun funcion que esta fuera de funcionamiento pero no explica bien que, ya que hasta menciona js.

Shelley Valdés Herrera

student•

Me pasó igual. Veo que de esto hace 4 meses. Parece que moriremos aquí.

Anthony Quintero

student•

Hola, a mi me presentaba el mismo error xq estaba usando PHP server, la extension de VSC, desde un directorio q no era raiz. Mudé los archivos al directorio /var/www/html (con el q trabaja el profe) y pude solucionar el problema

Eduardo Huanca

student•

en què clase vieron lo del array unpacking?

Diego Castro

student•

Estoy tratando de enviar datos a la misma página pero me redirige a la página de 404.php. Estoy usando Wordpress con Woocommerce.

Ermilo Joel Dorantes Uc

student•

Para que te funcione tiene que poner esto en el functions.php de tu plantilla

/** Remove Canonical URL **/
remove_action('embed_head', 'rel_canonical');
add_filter('wpseo_canonical', '__return_false');

Juan Omar Palma álvarez

student•

Nota al margen: El array unpacking o como se escriba no está en este curso, podrían hacer una pequeña reseña para no perder el hilo del curso

Michael Cardenas

student•

Tengo un error help me este es mi php

<!-- //index -->
<?php

function validate($nombre, $telefono, $email, $arreglo, $form) {
    return !empty(trim($nombre)) && !empty(trim($telefono)) && !empty(trim($email)) && !empty(trim($arreglo));
}

$status = "";

if ( isset($_POST["form"]) ) {

    if ( validate(...$_POST) ) {
        
        $nombre = strip_tags($_POST["nombre"]);
        $telefono = strip_tags($_POST["telefono"]);
        $email = strip_tags($_POST["email"]);
        $arreglo = strip_tags($_POST["arreglo"]);

        // Mandar el correo

        $status = "success";

    }
    else {
        $status = "danger";
    }
   
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <?php
    header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
    header("Expires: Sat, 1 Jul 2000 05:00:00 GMT"); // Fecha en el pasado
    ?>
    <meta http-equiv="Expires" content="0"> 
    <meta http-equiv="Last-Modified" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Styles -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> -->
    
    <link rel="stylesheet" href="style.css">
    <title>Php con HTML</title>
</head>
<body>
<?php if($status == "danger"): ?>
    
    <div class="alert danger">
        <span>Surgió un problema</span>
    </div>
    
    <?php endif; ?>
    

    <?php if($status == "success"): ?>
    
    <div class="alert success">
        <span>¡Mensaje enviado con éxito!</span>
    </div>
    
    <?php endif; ?>
<div class="container">
    <div class="tittle"> <strong> Registro de cliente </strong></div>
    <form action="<?php echo $_SERVER[‘PHP_SELF’];?>" method="post">
        <div class="user-details">
            <div class="input-box">
                <span class="details"> Nombre</span>
                <input name="nombre" id="nombre" type="text" placeholder="Ingresa tu nombre" required>
            </div>
            <div class="input-box">
                <span class="details"> Telefono </span>
                <input type="number" id="telefono" name="telefono" placeholder="Ingresa tu Telefono" required>
            </div>
            <div class="input-box">
                <span class="details"> Correo electronico</span>
                <input type="text" name="email" id="email" placeholder="Ingresa tu telefono" required>
            </div>
          
        <!-- <div class="gender-details">
            <input type="radio" name="gender" id="dot-1">
            <input type="radio" name="gender" id="dot-2">
            <input type="radio" name="gender" id="dot-3">
           
            <span class="gender-title">Arreglo</span>
            <div class="category">
                <label for="dot-1">
                    <span class="dot one"></span>
                    <span class="gender">Pantalon</span>
                </label>
                <label for="dot-2">
                    <span class="dot two"></span>
                    <span class="gender">Chaqueta</span>
                </label>
                <label for="dot-3">
                    <span class="dot three"></span>
                    <span class="gender">Otro</span>
                </label>
            </div>
        </div> -->
        <div class="input-box">
                <span class="details"> Arreglo</span>
                <input name="arreglo" id="arreglo" class="arreglo" type="text" placeholder="Descripcion de la modificacion de la prenda" required>
            </div>
            
        </div>
        <div class="button">
            <input name="form" id="form" type="submit" value="Register">
        </div>
    </form>
</div>


</body>
</html>

Que tengo mal gente,le doy en registrar y no pasa nada.... ni u n error ni nada.

Aka SinssChoss

student•

Solución

Tu código

<form action="<?php echo $_SERVER[‘PHP_SELF’];?>" method="post">

Tu error está en que a la key PHP_SELF lo llamas con la comilla inadecuada, se debe llamar con comillas dobles ("")

Código correcto

<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">

Ermilo Joel Dorantes Uc

student•

¿Alguien tuvo éxito utilizando el PHP 7.4? No me muestra mensaje de error, menos de envío exitoso y no llega al buzón de Mailtrap

John Alexander Diaz Astudillo

student•

Yo cambié

if ( isset($_POST["form"]) ) {

    if ( validate(...$_POST) ) {

        $name = $_POST["name"];
        $email = $_POST["email"];
        $subject = $_POST["subject"];
        $message = $_POST["message"];

        // Mandar el correo

        $status = "success";

    }
    else {
        $status = "danger";
    }

}

por

if (isset($_POST["form"])) {

    if (validate($_POST["name"], $_POST["email"], $_POST["subject"], $_POST["message"])) {
        $name = $_POST["name"];
        $email = $_POST["email"];
        $subject = $_POST["subject"];
        $message = $_POST["message"];

        $status = "success";
    } else {
        $status = "danger";
    }
}

Jefferson Nalvarte Miranda

student•

¡Miren cómo quedó mi sitio web! 🎉

Después de mucho trabajo, finalmente terminé mi sitio web utilizando PHP y CSS. Estoy muy contento con el resultado y quería compartirlo con ustedes. Aquí les dejo una imagen y el código que utilicé:

<?php

function validate($name, $email, $subject, $message, $form) {
    return !empty($name) && !empty($email) && !empty($subject) && !empty($message) ;

}

$status = null;

if (isset($_POST['form'])) {
    if (validate(...$_POST)){
        $name = $_POST['name'];
        $email = $_POST['email'];
        $subject = $_POST['subject'];
        $message = $_POST['message'];

        // Aquí puedes agregar la lógica para enviar el correo electrónico

        $status = "Success";

    }
    else {
        $status = "Error";
    }

}


?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Contacto</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <?php if($status == "Error"): ?>
        <div class="alert danger">
                    Ha ocurrido un error. Por favor, inténtelo de nuevo.
                </div>
        
    <?php endif; ?>

    <?php if($status == "Success"): ?>
        <div class="alert success">
            Su mensaje ha sido enviado exitosamente.
        </div>
        
    <?php endif; ?>
    
    <div class="contact-form-container">
        
        <div class="contact-header">
            <h3>CONTACTO</h3>
        </div>
        <form action="./" method="post" class="contact-form">
            <div class="form-group">
                <label for="name">Nombre</label>
                <input type="text" id="name" name="name" placeholder="Ingrese su nombre" required>
            </div>
            <div class="form-group">
                <label for="email">Correo</label>
                <input type="email" id="email" name="email" placeholder="Ingrese su correo" required>
            </div>
            <div class="form-group">
                <label for="subject">Asunto</label>
                <input type="text" id="subject" name="subject" placeholder="Ingrese el asunto" >
            </div>
            <div class="form-group">
                <label for="message">Mensaje</label>
                <textarea id="message" name="message" placeholder="Escriba su mensaje" rows="5" required></textarea>
            </div>
            <button type="submit"  name="form" class="submit-btn">Enviar</button>
        </form>
        
        <div class="contact-info">
            <p><i class="fa-solid fa-phone-volume"></i> 902640750</p>
            <p><i class="fa-solid fa-map-location-dot"></i> Lima, Perú, Comas</p>
        </div>
    </div>
    <script src="https://kit.fontawesome.com/43e0b8589a.js" crossorigin="anonymous"></script>
</body>
</html>

``````css
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
    background-size: 400% 400%;
    animation: gradientAnimation 8s ease infinite;
}

@keyframes gradientBackground {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes movingLine {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

@keyframes waveLine {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 0% 48%;
    }
}

@keyframes colorShift {
    0% {
        background: linear-gradient(to bottom, #1a1a1a 49%, #ff5733 50%, #33ff57 51%, #1a1a1a 52%);
    }
    25% {
        background: linear-gradient(to bottom, #1a1a1a 49%, #33aaff 50%, #ff33aa 51%, #1a1a1a 52%);
    }
    50% {
        background: linear-gradient(to bottom, #1a1a1a 49%, #ff33ff 50%, #33ffaa 51%, #1a1a1a 52%);
    }
    75% {
        background: linear-gradient(to bottom, #1a1a1a 49%, #ffaa33 50%, #33aaff 51%, #1a1a1a 52%);
    }
    100% {
        background: linear-gradient(to bottom, #1a1a1a 49%, #ff5733 50%, #33ff57 51%, #1a1a1a 52%);
    }
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.contact-form-container {
    max-width: 460px;
    margin: 50px auto;
    padding: 32px; /* Incrementar el padding para separar los bordes */
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid #007BFF;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para efecto 3D */
    transform: translateY(-5px); /* Elevar ligeramente para efecto 3D */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
    }

.contact-form-container:hover {
    transform: translateY(-10px); /* Elevar más al pasar el mouse */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3), 0 6px 8px rgba(0, 0, 0, 0.15); /* Intensificar sombra */
}

.contact-header {
    background-color: #e9f7ff; /* Fondo que combina con el formulario */
    padding: 8px;
    border-radius: 10px; /* Bordes redondeados */
    border-bottom: 3px solid #007BFF; /* Línea separadora inferior */
    text-align: center;
    margin-bottom: 20px; /* Espacio debajo del encabezado */
    max-width: 400px; /* Alinear con el ancho máximo de los inputs */
    margin: 0 auto 16px auto; /* Centrar y agregar margen inferior */
}

.contact-header h2 {
    margin: 0; /* Eliminar márgenes del h2 */
    color: #333333;
    font-size: 24px;
    font-weight: bold;
}


.contact-form {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Alinear todos los elementos al mismo ancho */
}

.contact-form .form-group {
    margin-bottom: 4px;/* Incrementar el espacio entre los grupos */
    width: 100%; /* Asegurar que los inputs ocupen todo el ancho disponible */
    max-width: 100%; /* Asegurar que todos los grupos ocupen el mismo ancho */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Alinear los elementos dentro del grupo */
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    color: #555555;
    font-weight: bold; /* Aplicar formato bold */
    text-align: left; /* Alinear al lado izquierdo */
    width: 100%; /* Asegurar que ocupe todo el ancho del contenedor */
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 8px; /* Separar los inputs del label */
    margin-bottom: 8px; /* Separar los inputs entre sí */
    width: 100%; /* Asegurar que los inputs ocupen todo el ancho del contenedor */
    max-width: 100%; /* Limitar el ancho máximo */
    height: 40px; /* Unificar la altura */
    box-sizing: border-box; /* Incluir padding y borde en el tamaño total */
}

.contact-form textarea {
    resize: none;
    height: auto; /* Permitir que el textarea ajuste su altura */
    min-height: 100px; /* Establecer una altura mínima */
}

.contact-form input:hover,
.contact-form textarea:hover {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.submit-btn {
    display: block;
    width: 33.33%; /* Reducir a 1/3 del tamaño actual */
    margin: 0 auto; /* Centrar el botón */
    padding: 12px;
    background-color: #007BFF;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 2px solid #0056b3;
    border-radius: 10px;
}

.submit-btn:hover {
    background-color: #0056b3;
}

.contact-info {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    color: #333333;
    font-size: 14px;
}

.alert {
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    max-width: 460px; /* Igual al ancho del formulario */
    margin: 0 auto 20px auto; /* Centrar y agregar margen inferior */
    padding: 12px; /* Ajustar el padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra similar al formulario */
    border-radius: 10px; /* Bordes redondeados */
}

.alert.danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 4px solid #f5c6cb;
}

.alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 4px solid #c3e6cb;
}

Julio Barrios

student•

Hice una función que sirve para validar cualquier formulario. Solo pasas la variable $_POST. Si algún dato esta vació devolverá false.

<?php
function validate_data_form($data) {
    $validation = true;

    if (isset($data["form"])) {
        foreach ($data as $key => $value) {
            
            if ( $key == "form") {
                continue;
            }
            if ( empty($value) ) {
                $validation = false;
                break;
            }
        }
    }
    return $validation;
}

LESTHER XITUMUL MANUEL

student•


echo 'the new UI of Platzi is awesome!';

Shelley Valdés Herrera

student•

Los que se atoraron en el This page is not working... Tanto en esta línea como en la de "success", no van ; sino :

<?php if ($status == "danger"): ?>

Aka SinssChoss

student•

Filtro más específico del input "name"

Para poder hacer filtros más específicos se puede usar la función preg_replace, por ejemplo, quiero que del input "name" solo tome las letras y los espacios entre las palabras. Ingresa: Keneth156 Lopez41 Recibe: Keneth Lopez

<?php
  // Obtenemos el valor de la variable
  $nombre = $_POST["nombre"];
  
  // Filtramos con preg_replace
  $nombre = preg_replace('([^A-Za-z\s])', '', $nombre);    
?>

Input

Output

<?php
  // Creando la lógica en el mismo archivo, aunque perfectamente puede estar en otro archivo separado

  // Status: Permite guardar un estado para más adelante mostrar una alerta si el correo es enviado o no
  $status = "";

  // Comprobamos si el formulario no se envío vacío
  function validateForm($name, $email, $subject, $message){    
    return !empty(trim($name)) && !empty(trim($email)) && !empty(trim($subject)) && !empty(trim($message));
  }

  // Comprobamos si el formulario fue enviado
  if(isset($_POST['form'])){
    // Invocamos función para validar y con el unpacking array le pasamos los parametros solicitados a la función
    if(validateForm($_POST['name'], $_POST['email'], $_POST['subject'], $_POST['message'])){

      // Sanitizando los datos
      $name = htmlentities($_POST['name']);
      $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
      $subject = htmlentities($_POST['subject']);
      $message = htmlentities($_POST['message']);
  
      $status = "success";
    }else{
      $status = "error";
    }
  }
?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./assets/img/contacto.png" type="image/x-icon">
  <link rel="stylesheet" href="./css/styles.css">
  <title>iJCode - Formulario de Contacto</title>
</head>
<body>

  <!-- Mensaje de error -->
  <?php if($status === 'error'):?>

    <div class="message">
      <div class="container">
        <div class="message-error">
          <p class="message-paragraph">Surgió un problema</p>
        </div>
      </div>
    </div>

  <?php endif;?>

  <!-- Mensaje de éxito -->
  <?php if($status === 'success'): ?>

  <div class="message">
    <div class="container">
      <div class="message-success">
        <p class="message-paragraph">¡Mensaje enviado con éxito!</p>
      </div>
    </div>
  </div>

  <?php endif; ?>

  <!-- Creación de la estructura del Formulario -->
  <div class="form-container">
    <div class="container">
      <form action="./index.php" class="form" method="post">
        <div class="form-header">
          <h2 class="form-title">¡Contactanos ✨!</h3>
        </div>
        <div class="form-body">
          <label class="form-label" for="name">Nombre: </label>
          <input class="form-input" type="text" required name="name" id="name" placeholder="Julieta Ortiz Sanchez">

          <label class="form-label" for="email">Correo: </label>
          <input class="form-input" type="text" required name="email" id="email" placeholder="julieta.den@dev.mx">

          <label class="form-label" for="subject">Asunto: </label>
          <input class="form-input" type="text" required name="subject" id="subject" placeholder="Solicitud de documentación final">

          <label class="form-label" for="message">Mensaje: </label>
          <textarea class="form-area" name="message" id="message" placeholder="Me urge obtener la documentación del proyecto de la papelería debido a que ya estoy en fecha límite para entregarlos al área correspondiente"></textarea>

          <button class="form-cta" name="form">Enviar</button>
        </div>
      </form>
      <div class="form-footer">
        <p class="form-paragraph"><i class="fa-solid fa-location-dot"></i> 13 Saw Mill Circle, North Olmested.</p>
        <p class="form-paragraph"><i class="fa-solid fa-phone"></i> +1 123 456 7890</p>
      </div>
    </div>
  </div>

  <script src="https://kit.fontawesome.com/36b3528883.js" crossorigin="anonymous"></script>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
:root{
  --mainColor: #1B2430;
  --white: #F9F2ED;
  --mainFont: 'Lato', sans-serif;
  --cardBackground: #816797;
  --cta: #371B58;
  --red: #F87474;
  --green: #9EB23B;
}

body{
  margin: 0;
  block-size: 100%;
  min-block-size: 100vh;
  font-family: var(--mainFont);
  background-color: var(--mainColor);
  padding: 2rem 0;
}

.form-container{
  color: #F9F2ED;
  border-block-start: .1px solid transparent;
}

.form{
  box-shadow: rgba(255, 255, 255, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.container{
  inline-size: 90%;
  max-inline-size: 43.75rem;
  margin: 0 auto;
  border-radius: .5rem;
  box-sizing: border-box;
  overflow: hidden;
}

.form{
  background-color: var(--cardBackground);
  padding: 2rem 1.5rem;
  position: relative;
}

.form::before{
  content: '';
  position: absolute;
  background-color: var(--white);
  block-size: 1rem;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: 0;
}

.form-header{
  margin-block-end: 2rem;
}

.form-title{
  margin: 0;
  text-align: center;
  font-size: 2.2rem;
}

.form-body{
  display: flex;
  flex-direction: column;
}

.form-label{
  font-weight: 700;
  margin-block-end: .25rem;
}

.form-input,
.form-area{
  font-family: var(--mainFont);
  margin-block-end: 2rem;
  padding: .625rem;
  border-radius: .25rem;
  border: none;
  outline: none;
  font-size: 1rem;
}

.form-area{
  inline-size: auto;
  block-size: 6rem;
  resize: none;
}

.form-cta{
  background-color: var(--cta);
  border: none;
  color: var(--white);
  padding: 1rem 0;
  border-radius: .25rem;
  font-weight: 700;
  transition: transform .2s;
  border: none;
  text-transform: uppercase;
}

.form-cta:active{
  transform: scale(.9);
}

.form-cta:hover{
  --cta: #371b58a3;
}

.form-footer{
  border-block-start: 0.1px solid transparent;
  background-color: var(--white);
  color: var(--mainColor);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

.form-paragraph{
  margin: 0;
  font-weight: 700;
}

.fa-solid{
  color: var(--cardBackground);
}

.message-error,
.message-success{
  padding: 2rem;
  color: var(--white);
  font-size: 1.2rem;
  text-align: center;
  margin: 1rem 0; 
  border-radius: .25rem;
}

.message-error{
  background-color: var(--red);
}

.message-success{
  background-color: var(--green);
}

.message-paragraph{
  margin: 0;
}

@media screen and (min-width: 768px){
  .form-title{
    font-size: 3rem;
  }

  .form-cta{
    font-size: 1rem;
  }

  .form-footer{
    flex-direction: row;
    justify-content: space-between;
  }

  .form-paragraph{
    font-size: 1.2rem;
  }
}

<?php
function validate($name, $email, $subject, $message, $form) {
    return !empty(trim($name)) && !empty(trim($email)) && !empty(trim($subject)) && !empty(trim($message));
}

$status = "";

if ( isset($_POST["form"]) ) {

    if ( validate(...$_POST) ) {
        
        $name = strip_tags($_POST["name"]);
        $email = strip_tags($_POST["email"]);
        $subject = strip_tags($_POST["subject"]);
        $message = strip_tags($_POST["message"]);

        // Mandar el correo

        $status = "success";

    }
    else {
        $status = "danger";
    }
   
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Formulario de contacto</title>
</head>
<body>

    <?php if($status == "danger"): ?>
    
    <div class="alert danger">
        <span>Surgió un problema</span>
    </div>
    
    <?php endif; ?>
    

    <?php if($status == "success"): ?>
    
    <div class="alert success">
        <span>¡Mensaje enviado con éxito!</span>
    </div>
    
    <?php endif; ?>

    <!-- <form action="./" method="POST"> -->
    <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST">
        <h2>¡Contáctanos!</h2>

        <div class="input-group">
            <label for="name">Nombre:</label>
            <input type="text" name="name" id="name">
        </div>

        <div class="input-group">
            <label for="email">Correo:</label>
            <input type="email" name="email" id="email">
        </div>

        <div class="input-group">
            <label for="subject">Asunto:</label>
            <input type="text" name="subject" id="subject">
        </div>

        <div class="input-group">
            <label for="message">Mensaje:</label>
            <textarea name="message" id="message"></textarea>
        </div>

        <div class="button-container">
            <button name="form" type="submit">Enviar</button>
        </div>

        <div class="contact-info">
            
            <div class="info">
                <span><i class="fas fa-map-marker-alt"></i> 13 Saw Mill Circle, North Olmested.</span>
            </div>

            <div class="info">
                <span><i class="fas fa-phone"></i> +1 123 456 7890</span>
            </div>

        </div>

    </form>

    <script src="https://kit.fontawesome.com/bbff992efd.js" crossorigin="anonymous"></script>
    
</body>
</html>

<!-- //index -->
<?php

function validate($nombre, $telefono, $email, $arreglo, $form) {
    return !empty(trim($nombre)) && !empty(trim($telefono)) && !empty(trim($email)) && !empty(trim($arreglo));
}

$status = "";

if ( isset($_POST["form"]) ) {

    if ( validate(...$_POST) ) {
        
        $nombre = strip_tags($_POST["nombre"]);
        $telefono = strip_tags($_POST["telefono"]);
        $email = strip_tags($_POST["email"]);
        $arreglo = strip_tags($_POST["arreglo"]);

        // Mandar el correo

        $status = "success";

    }
    else {
        $status = "danger";
    }
   
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <?php
    header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
    header("Expires: Sat, 1 Jul 2000 05:00:00 GMT"); // Fecha en el pasado
    ?>
    <meta http-equiv="Expires" content="0"> 
    <meta http-equiv="Last-Modified" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Styles -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> -->
    
    <link rel="stylesheet" href="style.css">
    <title>Php con HTML</title>
</head>
<body>
<?php if($status == "danger"): ?>
    
    <div class="alert danger">
        <span>Surgió un problema</span>
    </div>
    
    <?php endif; ?>
    

    <?php if($status == "success"): ?>
    
    <div class="alert success">
        <span>¡Mensaje enviado con éxito!</span>
    </div>
    
    <?php endif; ?>
<div class="container">
    <div class="tittle"> <strong> Registro de cliente </strong></div>
    <form action="<?php echo $_SERVER[‘PHP_SELF’];?>" method="post">
        <div class="user-details">
            <div class="input-box">
                <span class="details"> Nombre</span>
                <input name="nombre" id="nombre" type="text" placeholder="Ingresa tu nombre" required>
            </div>
            <div class="input-box">
                <span class="details"> Telefono </span>
                <input type="number" id="telefono" name="telefono" placeholder="Ingresa tu Telefono" required>
            </div>
            <div class="input-box">
                <span class="details"> Correo electronico</span>
                <input type="text" name="email" id="email" placeholder="Ingresa tu telefono" required>
            </div>
          
        <!-- <div class="gender-details">
            <input type="radio" name="gender" id="dot-1">
            <input type="radio" name="gender" id="dot-2">
            <input type="radio" name="gender" id="dot-3">
           
            <span class="gender-title">Arreglo</span>
            <div class="category">
                <label for="dot-1">
                    <span class="dot one"></span>
                    <span class="gender">Pantalon</span>
                </label>
                <label for="dot-2">
                    <span class="dot two"></span>
                    <span class="gender">Chaqueta</span>
                </label>
                <label for="dot-3">
                    <span class="dot three"></span>
                    <span class="gender">Otro</span>
                </label>
            </div>
        </div> -->
        <div class="input-box">
                <span class="details"> Arreglo</span>
                <input name="arreglo" id="arreglo" class="arreglo" type="text" placeholder="Descripcion de la modificacion de la prenda" required>
            </div>
            
        </div>
        <div class="button">
            <input name="form" id="form" type="submit" value="Register">
        </div>
    </form>
</div>


</body>
</html>

if ( isset($_POST["form"]) ) {

    if ( validate(...$_POST) ) {

        $name = $_POST["name"];
        $email = $_POST["email"];
        $subject = $_POST["subject"];
        $message = $_POST["message"];

        // Mandar el correo

        $status = "success";

    }
    else {
        $status = "danger";
    }

}

if (isset($_POST["form"])) {

    if (validate($_POST["name"], $_POST["email"], $_POST["subject"], $_POST["message"])) {
        $name = $_POST["name"];
        $email = $_POST["email"];
        $subject = $_POST["subject"];
        $message = $_POST["message"];

        $status = "success";
    } else {
        $status = "danger";
    }
}

<?php

function validate($name, $email, $subject, $message, $form) {
    return !empty($name) && !empty($email) && !empty($subject) && !empty($message) ;

}

$status = null;

if (isset($_POST['form'])) {
    if (validate(...$_POST)){
        $name = $_POST['name'];
        $email = $_POST['email'];
        $subject = $_POST['subject'];
        $message = $_POST['message'];

        // Aquí puedes agregar la lógica para enviar el correo electrónico

        $status = "Success";

    }
    else {
        $status = "Error";
    }

}


?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Contacto</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <?php if($status == "Error"): ?>
        <div class="alert danger">
                    Ha ocurrido un error. Por favor, inténtelo de nuevo.
                </div>
        
    <?php endif; ?>

    <?php if($status == "Success"): ?>
        <div class="alert success">
            Su mensaje ha sido enviado exitosamente.
        </div>
        
    <?php endif; ?>
    
    <div class="contact-form-container">
        
        <div class="contact-header">
            <h3>CONTACTO</h3>
        </div>
        <form action="./" method="post" class="contact-form">
            <div class="form-group">
                <label for="name">Nombre</label>
                <input type="text" id="name" name="name" placeholder="Ingrese su nombre" required>
            </div>
            <div class="form-group">
                <label for="email">Correo</label>
                <input type="email" id="email" name="email" placeholder="Ingrese su correo" required>
            </div>
            <div class="form-group">
                <label for="subject">Asunto</label>
                <input type="text" id="subject" name="subject" placeholder="Ingrese el asunto" >
            </div>
            <div class="form-group">
                <label for="message">Mensaje</label>
                <textarea id="message" name="message" placeholder="Escriba su mensaje" rows="5" required></textarea>
            </div>
            <button type="submit"  name="form" class="submit-btn">Enviar</button>
        </form>
        
        <div class="contact-info">
            <p><i class="fa-solid fa-phone-volume"></i> 902640750</p>
            <p><i class="fa-solid fa-map-location-dot"></i> Lima, Perú, Comas</p>
        </div>
    </div>
    <script src="https://kit.fontawesome.com/43e0b8589a.js" crossorigin="anonymous"></script>
</body>
</html>

``````css
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
    background-size: 400% 400%;
    animation: gradientAnimation 8s ease infinite;
}

@keyframes gradientBackground {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes movingLine {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

@keyframes waveLine {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 0% 48%;
    }
}

@keyframes colorShift {
    0% {
        background: linear-gradient(to bottom, #1a1a1a 49%, #ff5733 50%, #33ff57 51%, #1a1a1a 52%);
    }
    25% {
        background: linear-gradient(to bottom, #1a1a1a 49%, #33aaff 50%, #ff33aa 51%, #1a1a1a 52%);
    }
    50% {
        background: linear-gradient(to bottom, #1a1a1a 49%, #ff33ff 50%, #33ffaa 51%, #1a1a1a 52%);
    }
    75% {
        background: linear-gradient(to bottom, #1a1a1a 49%, #ffaa33 50%, #33aaff 51%, #1a1a1a 52%);
    }
    100% {
        background: linear-gradient(to bottom, #1a1a1a 49%, #ff5733 50%, #33ff57 51%, #1a1a1a 52%);
    }
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.contact-form-container {
    max-width: 460px;
    margin: 50px auto;
    padding: 32px; /* Incrementar el padding para separar los bordes */
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid #007BFF;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para efecto 3D */
    transform: translateY(-5px); /* Elevar ligeramente para efecto 3D */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
    }

.contact-form-container:hover {
    transform: translateY(-10px); /* Elevar más al pasar el mouse */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3), 0 6px 8px rgba(0, 0, 0, 0.15); /* Intensificar sombra */
}

.contact-header {
    background-color: #e9f7ff; /* Fondo que combina con el formulario */
    padding: 8px;
    border-radius: 10px; /* Bordes redondeados */
    border-bottom: 3px solid #007BFF; /* Línea separadora inferior */
    text-align: center;
    margin-bottom: 20px; /* Espacio debajo del encabezado */
    max-width: 400px; /* Alinear con el ancho máximo de los inputs */
    margin: 0 auto 16px auto; /* Centrar y agregar margen inferior */
}

.contact-header h2 {
    margin: 0; /* Eliminar márgenes del h2 */
    color: #333333;
    font-size: 24px;
    font-weight: bold;
}


.contact-form {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Alinear todos los elementos al mismo ancho */
}

.contact-form .form-group {
    margin-bottom: 4px;/* Incrementar el espacio entre los grupos */
    width: 100%; /* Asegurar que los inputs ocupen todo el ancho disponible */
    max-width: 100%; /* Asegurar que todos los grupos ocupen el mismo ancho */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Alinear los elementos dentro del grupo */
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    color: #555555;
    font-weight: bold; /* Aplicar formato bold */
    text-align: left; /* Alinear al lado izquierdo */
    width: 100%; /* Asegurar que ocupe todo el ancho del contenedor */
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 8px; /* Separar los inputs del label */
    margin-bottom: 8px; /* Separar los inputs entre sí */
    width: 100%; /* Asegurar que los inputs ocupen todo el ancho del contenedor */
    max-width: 100%; /* Limitar el ancho máximo */
    height: 40px; /* Unificar la altura */
    box-sizing: border-box; /* Incluir padding y borde en el tamaño total */
}

.contact-form textarea {
    resize: none;
    height: auto; /* Permitir que el textarea ajuste su altura */
    min-height: 100px; /* Establecer una altura mínima */
}

.contact-form input:hover,
.contact-form textarea:hover {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.submit-btn {
    display: block;
    width: 33.33%; /* Reducir a 1/3 del tamaño actual */
    margin: 0 auto; /* Centrar el botón */
    padding: 12px;
    background-color: #007BFF;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 2px solid #0056b3;
    border-radius: 10px;
}

.submit-btn:hover {
    background-color: #0056b3;
}

.contact-info {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    color: #333333;
    font-size: 14px;
}

.alert {
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    max-width: 460px; /* Igual al ancho del formulario */
    margin: 0 auto 20px auto; /* Centrar y agregar margen inferior */
    padding: 12px; /* Ajustar el padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra similar al formulario */
    border-radius: 10px; /* Bordes redondeados */
}

.alert.danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 4px solid #f5c6cb;
}

.alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 4px solid #c3e6cb;
}

<?php
function validate_data_form($data) {
    $validation = true;

    if (isset($data["form"])) {
        foreach ($data as $key => $value) {
            
            if ( $key == "form") {
                continue;
            }
            if ( empty($value) ) {
                $validation = false;
                break;
            }
        }
    }
    return $validation;
}

Haciendo la lógica de recepción del formulario

Introducción

¿Cómo se renderiza una página web en mi computadora?

Levantando un servidor local

¿Cómo combinar HTML con PHP?

PHP como preprocesador de HTML

Imprime texto y etiquetas HTML

Condicionales

Ciclos

¿Cómo pasar variables de PHP a JavaScript?

Evita el código espagueti

Refactorizando código espagueti

Manejo de formularios

Cómo obtener una solicitud al servidor con PHP

Envío de un formulario a través de GET

Envío de un formulario a través de POST

Envío de imágenes

Guardando imágenes en el servidor

Tipos de inputs

Otros tipos de inputs

Valida si un formulario ha sido enviado

Sanitizando datos de mi formulario

Validando datos

Proyecto: formulario de contacto

Creando el maquetado

Haciendo la lógica de recepción del formulario

Integrando PHPMailer

Implementando el servidor de correos de Gmail

Conclusión

Es tu turno de poner todo en práctica