Saltar al contenido

Cómo crear un formulario de pedido en línea en WordPress (con plantilla)

Varios de nuestros lectores han estado preguntando cómo crear un formulario de pedido en línea, para que los clientes puedan realizar sus pedidos fácilmente en el sitio web.

Si tiene un negocio como un restaurante o una tienda física, es posible que no desee crear una tienda en línea completa. Sin embargo, es posible que desee ofrecer una manera fácil para que los clientes pidan alimentos u otros productos para que los entregue.

En esta publicación, le mostraremos cómo crear un formulario de pedido en línea en WordPress. Esto le permitirá recopilar fácilmente los pedidos de los clientes sin agregar un software de comercio electrónico completo a su sitio web.

Crear un formulario de pedido en línea en WordPress

Quizás decidió iniciar un sitio web para su negocio recientemente y se siente un poco abrumado.

Muchas empresas abren una tienda en línea no solo para cobrar pedidos, sino también para aceptar pagos y administrar el inventario. Sin embargo, no todas las empresas necesitan un sitio web de comercio electrónico completo .

Si solo desea que los clientes puedan completar un formulario de pedido en línea, puede crearlo fácilmente sin una solución de carrito de compras.

Un sencillo formulario de pedido en línea le brinda la opción de aceptar pagos en línea, al recoger el pedido o contra reembolso.

En este tutorial, usaremos WPForms para crear un formulario de pedido en línea porque le permite hacerlo fácilmente con su interfaz de arrastrar y soltar.

WPForms es el mejor complemento de creación de formularios de WordPress del mercado. Más de 3 millones de sitios web usan WPForms para crear fácilmente cualquier tipo de formulario en línea y agregarlo a su sitio web (no se requieren habilidades de codificación).

Primero, deberá instalar y activar el complemento WPForms . ¿Necesitas ayuda para instalar el complemento? Consulte nuestra guía sobre cómo instalar un complemento de WordPress para obtener instrucciones detalladas.

Los complementos son como aplicaciones para su sitio web de WordPress. Si es nuevo en WordPress, eche un vistazo a nuestro artículo sobre qué son los complementos de WordPress y qué puede hacer con ellos.

Una vez que haya activado el complemento WPForms, verá una nueva pestaña WPForms en la barra lateral de administración de su panel de WordPress.

Debe visitar la página WPForms »Configuración para ingresar su clave de licencia. Puede encontrar esta información en su cuenta en el sitio web de WPForms.

20201204 54

Ahora está listo para crear su formulario de pedido en línea.

Simplemente diríjase a WPForms »Agregar nueva página para crear su primer formulario.

20201204 55

Ahora, verá la pantalla de creación de formularios. Escriba un nombre para su formulario y elija una plantilla. Recomendamos la plantilla “Formulario de facturación / pedido”.

20201204 56

Simplemente mueva el cursor sobre la descripción de la plantilla y haga clic en el botón “Crear un formulario de facturación / pedido”.

20201204 57

Su formulario se creará automáticamente para usted y será llevado directamente al editor de formularios de WPForms.

20201204 58

Ahora puede editar su formulario de pedido en línea como desee. Las diferentes partes del formulario se denominan “campos”. Puede cambiar, agregar o eliminar campos en su formulario con un solo clic.

La plantilla predeterminada ya incluye campos para la mayor parte de la información que probablemente necesite, como el nombre, la dirección y el número de teléfono. Sin embargo, deberá enumerar sus productos reales.

Leer más  Novedades de WordPress 5.4 (características y capturas de pantalla)

Haga clic en el campo ‘Elementos disponibles’ para editarlo.

20201204 59

Escriba el nombre y el precio de cada uno de los artículos que los clientes pueden pedirle. El precio no se mostrará automáticamente en el formulario, por lo que es posible que desee agregarlo al nombre del artículo.

20201204 60

Para agregar más opciones, simplemente haga clic en el ícono (+) donde desee agregar los elementos adicionales.

20201204 61

Nota: puede agregar tantos elementos como desee. Sin embargo, los clientes solo podrán seleccionar una opción de este campo.

Si tiene varias categorías de opciones, es posible que desee copiar el campo para crear grupos.

Puede copiar el campo ‘Elementos disponibles’ haciendo clic en el icono ‘Copiar’ que aparece cuando pasa el cursor sobre él o cuando está seleccionado.

20201204 62

Asegúrese de cambiar también la ‘Etiqueta’ de los campos a algo apropiado para cada grupo.

Si desea que los clientes puedan seleccionar dos o más opciones dentro de un solo campo, deberá usar un tipo de campo diferente.

Haga clic en la pestaña ‘Agregar campos’ y luego desplácese hacia abajo hasta ‘Campos de pago’ donde encontrará un campo de ‘Elementos de casilla de verificación’. Arrastre y suelte esto en su posición en su formulario.

20201204 63

Ahora puede editar ese campo como antes, ingresando nombres y precios para sus artículos. Los clientes pueden comprobar todos los artículos que quieran pedir.

Si desea mostrar imágenes de sus productos, también es muy fácil. Simplemente haga clic en el cuadro ‘Usar opciones de imagen’:

20201204 64

Para cada elemento, haga clic en el botón ‘Cargar imagen’ para agregar imágenes desde su computadora o desde su biblioteca multimedia de WordPress .

20201204 65

WPForms no cambiará el tamaño ni comprimirá las imágenes, por lo que es importante cargarlas en el tamaño correcto. Todos deben tener el mismo tamaño y no más de 250 × 250 píxeles.

Idealmente, también debería optimizar sus imágenes para la web .

Finalmente, es posible que desee editar el campo ‘Comentario o mensaje’ en la parte inferior del formulario, para que no sea obligatorio. No todos los usuarios querrán agregar un mensaje.

Simplemente haga clic en el campo y luego desmarque la casilla ‘Requerido’ a la derecha para que este campo sea opcional.

20201204 66

Puede seguir este proceso para cualquier campo que desee que sea opcional. Puede saber qué campos son obligatorios porque tendrán un asterisco rojo junto a la etiqueta del campo.

Una vez que esté satisfecho con el diseño de su formulario, puede pasar a configurar sus ajustes. Es una buena idea guardar el formulario primero haciendo clic en el botón ‘Guardar’ en la parte superior de la pantalla:

Configuración de las notificaciones que enviará su formulario de pedido

Primero, haga clic en la pestaña ‘Configuración’ en el lado izquierdo de su pantalla. Esto abrirá la configuración de su formulario.

20201204 67

A continuación, haga clic en la pestaña ‘Notificaciones’ para cambiar las notificaciones por correo electrónico de su formulario. De forma predeterminada, los formularios de pedido completados se enviarán por correo electrónico a la dirección de administrador de su sitio de WordPress.

Es posible que desee cambiar esto o hacer que los formularios de pedido se copien en más de una dirección. Simplemente puede escribir la dirección o direcciones de correo electrónico en el cuadro ‘Enviar a dirección de correo electrónico’. Si ingresa más de una dirección de correo electrónico, sepárelas con una coma.

Leer más  Las 6 mejores herramientas de captura de correo electrónico comparadas para 2020 (+ mejores prácticas)
20201204 68

Es posible que también desee cambiar la línea de asunto, de modo que no sea la misma para todos los pedidos. Esto podría facilitar el seguimiento de los pedidos en una bandeja de entrada de correo electrónico abarrotada.

Aquí, hemos cambiado la línea de asunto de los correos electrónicos para que lea “Pedido del cliente desde” y luego el nombre del cliente. Usamos ‘Mostrar etiquetas inteligentes’ para insertar el campo de nombre en la línea de asunto.

20201204 69

También puede cambiar cualquier otro detalle que desee.

También recomendamos encarecidamente configurar una notificación por correo electrónico para sus clientes. Esto les recuerda lo que han pedido y les permite saber que ha recibido su pedido.

Para configurar una nueva notificación por correo electrónico, haga clic en el botón “Agregar nueva notificación”.

20201204 70

Se le pedirá que escriba un nombre para la nueva notificación. Puede llamarlo como quiera, ya que los clientes no verán este nombre. Sugerimos algo como “Recibo del cliente” o “Confirmación por correo electrónico del cliente”.

20201204 71

Querrá que ‘Enviar a la dirección de correo electrónico’ sea la cuenta de correo electrónico de su cliente. Eliminar {admin_email} de este cuadro. Haga clic en “Mostrar etiquetas inteligentes” y seleccione el campo “Correo electrónico”.

20201204 72

También querrá ingresar otros detalles para el correo electrónico. Sugerimos utilizar una línea de asunto como “Su pedido con” y el nombre de su empresa.

20201204 73

En el campo ‘Mensaje’, probablemente desee agregar un mensaje a su cliente. La {all_fields} etiqueta dará toda la información que el cliente ingresó en el formulario.

20201204 74

¿Qué sucede si solo desea incluir parte de la información del cliente en el correo electrónico? ¿O qué pasa si desea poner los detalles de su pedido primero e incluir los detalles de entrega al final del correo electrónico? Simplemente puede usar etiquetas inteligentes para agregar cualquier campo de formulario a su formulario.

Una vez que haya terminado de configurar las notificaciones, haga clic en el botón “Guardar” en la parte superior de la pantalla.

Consejo: para volver a la primera notificación que estaba editando, simplemente desplácese hacia abajo en la pantalla.

Configuración del mensaje de confirmación para sus clientes

Además de enviar a sus clientes un recibo por correo electrónico, querrá mostrarles una confirmación en pantalla para que sepan que su pedido ha sido enviado.

Puede hacerlo en Configuración » pestaña Confirmación .

La confirmación predeterminada dice “¡Gracias por contactarnos! Nos pondremos en contacto contigo en breve “.

20201204 75

Puede cambiar esto a lo que desee, y puede usar el editor visual aquí para formatear su texto también.

20201204 76

Alternativamente, puede redirigir a los clientes a una página de “Gracias” en su sitio web, o incluso a otro sitio web.

Una vez que haya configurado el mensaje de confirmación, haga clic en ‘Guardar’ en la parte superior de la pantalla.

Integración del pago con su formulario de pedido (opcional)

Si desea recibir el pago a través de su formulario de pedido, deberá integrarlo con un procesador de pagos.

WPForms se integra muy fácilmente con dos procesadores de pago populares, PayPal y Stripe. Los clientes pueden pagar a través de su cuenta PayPal o ingresando los detalles de su tarjeta de crédito.

Usaremos PayPal en este tutorial, pero el proceso para Stripe es similar.

Leer más  Cómo crear un formulario de contacto en WordPress (paso a paso)

Primero, deberá salir del generador de formularios. Puede hacer esto haciendo clic en la ‘X’ en la parte superior derecha. Se le pedirá que guarde su formulario si tiene cambios sin guardar.

A continuación, vaya a la página WPForms »Complementos en su panel de WordPress. Desplácese hacia abajo hasta el ‘Complemento estándar de PayPal’ y haga clic en el botón ‘Instalar complemento’ debajo de él.

20201204 77

El complemento se instalará y activará automáticamente.

Vuelva a su formulario, que puede encontrar en WPForms »Todos los formularios . Ahora, haga clic en la pestaña ‘Pagos’.

20201204 78

Haga clic en ‘Estándar de PayPal’ y luego complete los detalles del formulario. Primero, deberá marcar la casilla ‘Habilitar pagos estándar de PayPal’ e ingresar la dirección de correo electrónico de PayPal de su empresa.

Deje el menú desplegable ‘Modo’ configurado en ‘Producción’ y deje ‘Tipo de pago’ configurado en ‘Productos y servicios’.

20201204 79

Si está recopilando la dirección de entrega a través del formulario de pedido, puede cambiar “Envío” a “No pedir una dirección”.

No es necesario que ingrese una ‘URL de cancelación’, pero es posible que desee crear una página en su sitio web para que los clientes sean enviados si no completan el proceso de pago.

Haga clic en el botón “Guardar” una vez que haya terminado.

Ahora, cuando el usuario envíe el formulario, se lo dirigirá automáticamente a PayPal para pagar. No necesita agregar campos adicionales a su formulario ni hacer nada más.

Agregar el formulario de pedido a su sitio web

El último paso es agregar su formulario de pedido a su sitio web.

Simplemente elija la página a la que desea agregar su formulario o cree una nueva página en Páginas »Agregar nueva .

A continuación, haga clic en el icono (+) para agregar un nuevo bloque (donde desee su formulario) y busque el bloque ‘WPForms’. Se encuentra debajo de la sección de bloques ‘Widgets’, o simplemente puede escribir ‘WPForms’ en la barra de búsqueda para encontrarlo.

20201204 80

Verá un bloque de WPForms. Haga clic en el menú desplegable ‘Seleccionar un formulario’ y elija su formulario.

20201204 81

Luego verá una vista previa del formulario en el editor de WordPress.

Cuando esté listo, guarde y publique (o actualice) su página. Puede verlo en vivo en su sitio para ver su formulario en acción. Antes de compartirlo con los clientes, recomendamos probar el formulario para asegurarse de que funciona como esperaba.

También es una buena idea comprobar que recibe la notificación por correo electrónico cuando se envía el formulario. Si no es así, consulte nuestra publicación sobre cómo solucionar el problema de que WordPress no envía correo electrónico .

Incluso si pierde un correo electrónico o lo elimina accidentalmente, WPForms guarda los datos del formulario en la base de datos de WordPress . Puede encontrar todos sus pedidos en WPForm »Entradas en su panel de WordPress.

Haga clic en el nombre de su formulario y luego verá una lista de entradas. Puede hacer clic en ‘Ver’ junto a cualquiera de estos para ver los detalles.

20201204 82

¡Eso es! Esperamos que este artículo le haya ayudado a aprender a crear un formulario de pedido en línea en WordPress. También le puede gustar nuestra guía sobre los mejores servicios telefónicos para empresas y los complementos de WordPress imprescindibles para pequeñas empresas.