Enviar un Formulario en Svelte

Enviar un formulario en Svelte es sencillo gracias a su manejo reactivo de datos y la facilidad para gestionar eventos. Aquí tienes una guía paso a paso para implementar esta funcionalidad.

1Configuración Inicial

Crear un archivo de componente

Crea un archivo llamado Formulario.svelte en tu proyecto.

bash

src/Formulario.svelte

2Estructura del Formulario

Código Base

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

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

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

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

Crea un archivo llamado server.js y copia el código anterior en él.
Inicia el servidor ejecutando:

bash

node server.js

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