Generador de formularios de pedido: versión web y en papel
Generador de formularios de pedido
Generador de formularios de pedido: formulario HTML y plantilla imprimible
Lista tus productos y precios y obtén un formulario de pedido de dos formas: HTML que puedes copiar, con totales en vivo, que envía a tu propio gestor de formularios, y una hoja en papel para imprimir.
Añade cada producto con su precio, elige qué datos del cliente recoger y pega la dirección de tu gestor de formularios. Obtienes el HTML de un formulario de pedido con casillas de cantidad y un total que se actualiza, listo para tu sitio, además de una hoja de pedido en papel imprimible creada con la misma lista para mercadillos, ferias y pedidos por teléfono.
Lo que envía el formulario generado
Campo del formulario
Se envía a tu gestor como
Notas
Casilla de cantidad por producto
qty_<product> = número
type=number, mínimo 0, números enteros
Nombre del cliente
Obligatorio
Correo electrónico
type=email, lo comprueba el navegador
Teléfono (opcional)
type=tel
Dirección de entrega (opcional)
Textarea
Notas (opcional)
Textarea
Total del pedido
No se envía
El elemento output solo se muestra; vuelve a calcularlo por tu parte
Muchos pequeños vendedores no necesitan una tienda online completa. Una panadería que toma encargos para las fiestas, una granja que vende cajas de productos o un club que vende equipaciones solo necesita una lista, una cantidad junto a cada artículo y los datos de contacto del comprador. Este generador escribe exactamente eso en HTML simple, así que funciona en cualquier creador de sitios que admita código personalizado.
Escribe el nombre de cada producto y su precio. Añade o quita filas según necesites.
Define el símbolo de moneda y marca los campos opcionales del cliente que quieras.
Pega la dirección a la que debe enviar tu formulario. La obtienes de tu servicio de formularios o de tu propio servidor.
Prueba la vista previa: cambia las cantidades y mira cómo se actualiza el total.
Copia el HTML en tu sitio, o pulsa Imprimir formulario en papel para obtener una hoja que los clientes rellenan a mano.
Trata el total de la página como una orientación para el cliente. Calcula tú el importe real a partir de las cantidades que recibas.
Usa nombres de producto cortos y únicos: pasan a formar parte de los nombres de campo que recibe tu gestor.
Haz un envío real de prueba a ti mismo antes de compartir la página, y revisa el correo o la hoja de cálculo que llega.
Si necesitas cobrar en el momento del pedido, un formulario solo no basta; combínalo con un enlace de pago o un checkout de verdad.
En la hoja impresa, deja en blanco las columnas Cant. y Total de línea y añade tu número de teléfono para dudas.
Preguntas frecuentes
¿Adónde va el pedido cuando alguien lo envía?
A la dirección del atributo action del formulario, enviada con method post. Esa dirección debe pertenecer a algo que acepte envíos de formularios, como un servicio de backend de formularios o un script en tu propio servidor. Esta página no recibe ni guarda pedidos.
¿Por qué el total no está en los datos enviados?
El total está en un elemento output, y el contenido de un elemento output no se envía con el formulario. Aquí es intencionado: un visitante podría editar un número en su navegador, así que el vendedor siempre debe calcular el importe a partir de las cantidades.
¿Funciona el total sin JavaScript?
El formulario se envía igualmente sin scripts, pero el total se calcula con un pequeño script incluido en el código. Si los scripts están desactivados, el total simplemente se queda en cero.
¿En qué se diferencia de un formulario de reservas?
Un formulario de pedido recoge productos y cantidades. Un formulario de reservas recoge una fecha, una hora y un servicio. Para citas, usa mejor nuestro generador de formularios de reserva.
¿Puedo dar estilo al formulario para que combine con mi sitio?
Sí. El código usa un pequeño bloque de estilos con nombres de clase sencillos que empiezan por of-, así que puedes cambiar colores, fuentes y espaciado sin afectar al resto de tu página.
Elegir un gestor de formularios
Una página web estática no puede enviar correos por sí sola. El formulario necesita un sitio al que enviar: un servicio de backend de formularios que reenvíe los envíos a tu bandeja de entrada o a una hoja de cálculo, la función de formularios de tu creador de sitios o un pequeño script en tu propio servidor.
Uses el que uses, copia la dirección de envío exacta que te dé en el campo del gestor de arriba. Si te pide nombres de campo concretos, cambia los nombres de los campos en el código para que coincidan.
Las hojas de pedido en papel siguen siendo útiles
En un puesto o en un evento escolar, una tablilla con una hoja de pedido impresa es más rápida que pedir a la gente que abra una web. Imprimir desde la misma lista de productos mantiene idénticos los precios en papel y en la web.
Recoge las hojas y, al final del día, introduce tú los pedidos en el formulario web para que todo quede en un mismo sitio.
Vuelve a calcular el total donde llega el pedido
Tu gestor recibe cantidades, no un total fiable. Este pequeño ejemplo de servidor en JavaScript calcula el precio de un pedido con tu propia lista de precios e ignora todo lo desconocido.
Calcular el precio de un pedido a partir de las cantidades enviadas
Los precios están de tu lado, así que un visitante que edite la página no puede cambiar lo que debe.
Crea tu formulario de pedido
Título del formulario
Símbolo de moneda
Dirección del gestor de formularios (adonde se envían los pedidos)
Productos y precios
Producto {n}
Precio {n}
Quitar producto {n}
Añadir producto
Campos opcionales del cliente
Dirección de entrega
Notas
Vista previa
Cantidad de {v}
Total
La vista previa no envía nada. Tu formulario envía a la dirección del gestor que introdujiste.