Guías Técnicas

Enviar un Formulario en Svelte

Enviar un formulario en Svelte es una tarea muy fácil gracias a su manejo reactivo de datos y la simplicidad para gestionar eventos de manera eficiente.

1Configuración Inicial

Crea un archivo llamado Formulario.svelte en tu proyecto, el cual contendrá la estructura del formulario.

bash 
src/Formulario.svelte

2Estructura del Formulario

Incluye un formulario con los campos necesarios. Usa variables reactivas para enlazar los datos del formulario.

js 
# src/Formulario.svelte
<script>
let nombre = '';
let email = '';
let mensaje = '';
</script>

<form on:submit|preventDefault={enviarFormulario}>
<label>
  Nombre:
  <input type="text" bind:value={nombre} required />
</label>

<label>
  Email:
  <input type="email" bind:value={email} required />
</label>

<label>
  Mensaje:
  <textarea bind:value={mensaje} required></textarea>
</label>

<button type="submit">Enviar</button>
</form>

3Función para Manejar el Envío

Función para Manejar el Envío

Define la función enviarFormulario para procesar los datos del formulario.

js 
<script>
function enviarFormulario() {
  console.log('Datos enviados:');
  console.log({ nombre, email, mensaje });

  // Aquí puedes enviar los datos a un servidor mediante fetch
  fetch('/api/enviar', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ nombre, email, mensaje }),
  })
    .then((response) => {
      if (response.ok) {
        alert('Formulario enviado con éxito');
      } else {
        alert('Hubo un error al enviar el formulario');
      }
    })
    .catch((error) => {
      console.error('Error:', error);
    });
}
</script>

4Prueba del Formulario

Requisitos Previos

Antes de probar el formulario, asegúrate de instalar los paquetes necesarios para el servidor backend:

  • Node.js: Asegúrate de tener instalado Node.js. Si no lo tienes, descárgalo desde nodejs.org.
  • Express: Instala el framework Express ejecutando el siguiente comando en tu terminal:
bash 
npm init -y
npm install express
  • Luego, crea un archivo de servidor llamado index.js en la carpeta rígida de tu proyecto.

Servidor Backend de Ejemplo (opcional)

Si necesitas probar el envío del formulario, puedes configurar un servidor simple con Node.js. A continuación, un ejemplo funcional:

js 
const express = require('express');
const app = express();
const PORT = 3000;

app.use(express.json());

app.post('/api/enviar', (req, res) => {
console.log('Datos recibidos:', req.body);
res.status(200).send('Formulario recibido');
});

app.listen(PORT, () => {
  console.log(`Servidor corriendo en http://localhost:${PORT}`);
});

Cómo Ejecutar el Servidor

  1. Crea un archivo llamado server.js y copia el código anterior en él.
  2. Inicia el servidor ejecutando:
bash 
node server.js
  1. El servidor estará corriendo en http://localhost:3000. Puedes enviar datos a la ruta /api/enviar utilizando una herramienta como Postman.

Código completo

html 
<script>
let nombre = '';
let email = '';
let mensaje = '';

function enviarFormulario() {
  console.log('Datos enviados:');
  console.log({ nombre, email, mensaje });

  // Aquí puedes enviar los datos a un servidor mediante fetch
  fetch('/api/enviar', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ nombre, email, mensaje }),
  })
    .then((response) => {
      if (response.ok) {
        alert('Formulario enviado con éxito');
      } else {
        alert('Hubo un error al enviar el formulario');
      }
    })
    .catch((error) => {
      console.error('Error:', error);
    });
}
</script>

<form on:submit|preventDefault={enviarFormulario}>
<label>
Nombre:
<input type="text" bind:value={nombre} required />
</label>

<label>
Email:
<input type="email" bind:value={email} required />
</label>

<label>
Mensaje:
<textarea bind:value={mensaje} required></textarea>
</label>

<button type="submit">Enviar</button>
</form>
  Nota

Para ver un ejemplo funcional de cómo se conecta un formulario a este backend, visita el siguiente enlace: Enviar un Formulario HTML con Svelte