<!DOCTYPE html>
<html lang="es">

<meta charset="UTF-8">
Prueba de Formulario <title>Prueba de Formulario</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 50px; }
form { display: inline-block; text-align: left; border: 1px solid #ccc; padding: 20px; border-radius: 8px; }
input, textarea, button { display: block; width: 100%; margin: 10px 0; padding: 8px; box-sizing: border-box; }
button { background-color: #007bff; color: white; border: none; cursor: pointer; }
button:hover { background-color: #0056b3; }
</style>



Consola de Datos


<p>Introduce datos para ver cómo viajan en el navegador.</p>


<label>Número de Teléfono:</label>


<label>Mensaje:</label>
<textarea name="message" placeholder="Escribe algo aquí..."></textarea>

<button type="submit" id="btnEnviar">Enviar a Consola</button>


<script>
const formulario = document.getElementById('miFormulario');

formulario.addEventListener('submit', function(event) {
event.preventDefault();

// 1. URL de Beeceptor (CÁMBIALA POR LA TUYA)
const urlDestino = 'https://accde.free.beeceptor.com';

const datos = {
telefono: formulario.elements['phone_number'].value,
mensaje: formulario.elements['message'].value,
timestamp: new Date().toISOString() // Añadimos la hora para rastrearlo mejor
};

console.log("Intentando enviar a:", urlDestino);

// 2. La petición Fetch
fetch(urlDestino, {
method: 'POST',
mode: 'no-cors', // <-- ESTO ES CLAVE: Evita bloqueos de seguridad básicos en pruebas
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(datos)
})
.then(() => {
alert("¡Enviado! Revisa la página de Beeceptor ahora.");
console.log("Petición enviada con éxito.");
})
.catch(err => {
alert("Error de conexión. Revisa la consola (F12)");
console.error("Detalle del error:", err);
});
});
</script>