Haciendo la lógica de recepción del formulario

Curso de PHP: Integración con HTML

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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 10

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Joel Dominguez Merino

hace un año

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 ✨!</h2>
        </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="[email protected]">

          <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

giancode1

hace 2 años

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">
        <h1>¡Contáctanos!</h1>

        <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

hace 2 años

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

hace un año

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

hace un año

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”>

Juan Palma

hace 6 meses

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

Julio Barrios

hace un mes

Hice una función que sirve para validar cualquier formulario. Solo pasas la variable $\_POST. Si algún dato esta vació devolverá false. ```js $value) { if ( $key == "form") { continue; } if ( empty($value) ) { $validation = false; break; } } } return $validation; } ```

LESTHER XITUMUL MANUEL

hace 2 meses

```php![]() echo 'the new UI of Platzi is awesome!'; ```

Shelley Valdés Herrera

hace 3 meses

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"): ?>

Keneth Lopez

hace un año

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);    
?>

Si ya tienes una cuenta,

Curso de PHP: Integración con HTML

Haciendo la lógica de recepción del formulario

Filtro más específico del input “name”

Input

Output