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íofunctionvalidateForm($name, $email, $subject, $message){return!empty(trim($name))&&!empty(trim($email))&&!empty(trim($subject))&&!empty(trim($message));}// Comprobamos si el formulario fue enviadoif(isset($_POST['form'])){// Invocamos función para validar y con el unpacking array le pasamos los parametros solicitados a la funciónif(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>13SawMillCircle,NorthOlmested.</p><p class="form-paragraph"><i class="fa-solid fa-phone"></i>+11234567890</p></div></div></div><script src="https://kit.fontawesome.com/36b3528883.js" crossorigin="anonymous"></script></body></html>
me paso lo mismo, según investigue es por la versión de PHP pero no había encontrado como resolverlo, gracias
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 <>
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.
Me pasó igual. Veo que de esto hace 4 meses. Parece que moriremos aquí.
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
en què clase vieron lo del array unpacking?
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.
Para que te funcione tiene que poner esto en el functions.php de tu plantilla
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;
}
Hice una función que sirve para validar cualquier formulario. Solo pasas la variable $_POST. Si algún dato esta vació devolverá false.
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"):?>
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);?>
